├── animations.css ├── brands.css ├── config.php ├── extra ├── custom-assets │ ├── roboto-cyrillic-400-normal.woff │ ├── roboto-cyrillic-400-normal.woff2 │ ├── roboto-cyrillic-700-normal.woff │ ├── roboto-cyrillic-700-normal.woff2 │ ├── roboto-cyrillic-ext-400-normal.woff │ ├── roboto-cyrillic-ext-400-normal.woff2 │ ├── roboto-cyrillic-ext-700-normal.woff │ ├── roboto-cyrillic-ext-700-normal.woff2 │ ├── roboto-greek-400-normal.woff │ ├── roboto-greek-400-normal.woff2 │ ├── roboto-greek-700-normal.woff │ ├── roboto-greek-700-normal.woff2 │ ├── roboto-greek-ext-400-normal.woff │ ├── roboto-greek-ext-400-normal.woff2 │ ├── roboto-greek-ext-700-normal.woff │ ├── roboto-greek-ext-700-normal.woff2 │ ├── roboto-latin-400-normal.woff │ ├── roboto-latin-400-normal.woff2 │ ├── roboto-latin-700-normal.woff │ ├── roboto-latin-700-normal.woff2 │ ├── roboto-latin-ext-400-normal.woff │ ├── roboto-latin-ext-400-normal.woff2 │ ├── roboto-latin-ext-700-normal.woff │ ├── roboto-latin-ext-700-normal.woff2 │ ├── roboto-vietnamese-400-normal.woff │ ├── roboto-vietnamese-400-normal.woff2 │ ├── roboto-vietnamese-700-normal.woff │ └── roboto-vietnamese-700-normal.woff2 └── custom-head.blade.php ├── preview.png ├── readme.md ├── share.button.css └── skeleton-auto.css /animations.css: -------------------------------------------------------------------------------- 1 | /* ************************************************************* */ 2 | /* 3 | /* Use this file to add custom CSS animations. 4 | /* Delete this file if you wish to use the default animations. 5 | /* If you do not want to have animations in your theme, 6 | /* remove or comment them and include this file in your theme. 7 | /* 8 | /* ************************************************************* */ 9 | 10 | 11 | /* Table of contents 12 | –––––––––––––––––––––––––––––––––––––––––––––––––– 13 | - Entrance animations 14 | - Button hover animations 15 | - Icon hover animations 16 | - Footer hover animations 17 | 18 | */ 19 | 20 | 21 | 22 | /* Entrance animations 23 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 24 | 25 | .button-entrance { 26 | animation-name: popUp; 27 | animation-duration: 1s; 28 | animation-fill-mode: both; 29 | /* Used to start button entrance animation one after another */ 30 | animation-delay: calc(var(--delay)/10); 31 | } 32 | 33 | @keyframes popUp { 34 | from { 35 | opacity: 0; 36 | transform: scale3d(0.3, 0.3, 0.3); 37 | } 38 | 39 | 50% { 40 | opacity: 1; 41 | } 42 | } 43 | 44 | .fadein { 45 | animation-name: fadein; 46 | animation-duration: 3s; 47 | animation-fill-mode: both; 48 | } 49 | 50 | @keyframes fadein { 51 | from { 52 | opacity: 0; 53 | } 54 | 55 | to { 56 | opacity: 1; 57 | } 58 | } 59 | 60 | 61 | /* Button hover animations 62 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 63 | /* (Also apply to icon) */ 64 | 65 | .button-hover, .credit-hover{ 66 | display:inline-block; 67 | -webkit-transform:perspective(1px) translateZ(0); 68 | transform:perspective(1px) translateZ(0); 69 | box-shadow:0 0 1px rgba(0,0,0,0); 70 | -webkit-transition-duration:.1s; 71 | transition-duration:.1s; 72 | -webkit-transition-property:transform; 73 | transition-property:transform 74 | } 75 | .button-hover:active, 76 | .button-hover:focus, 77 | .button-hover:hover{ 78 | -webkit-transform:scale(1.009); 79 | transform:scale(1.009) 80 | } 81 | .credit-hover:active, 82 | .credit-hover:focus, 83 | .credit-hover:hover{ 84 | -webkit-transform:scale(1.04); 85 | transform:scale(1.04) 86 | } 87 | 88 | 89 | /* Footer hover animations 90 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 91 | 92 | .footer-hover{ 93 | display:inline-block; 94 | -webkit-transform:perspective(1px) translateZ(0); 95 | transform:perspective(1px) translateZ(0); 96 | box-shadow:0 0 1px rgba(0,0,0,0); 97 | -webkit-transition-duration:.3s; 98 | transition-duration:.3s; 99 | -webkit-transition-property:transform; 100 | transition-property:transform; 101 | -webkit-transition-timing-function:ease-out; 102 | transition-timing-function:ease-out 103 | } 104 | .footer-hover:active,.footer-hover:focus,.footer-hover:hover{ 105 | -webkit-transform:translateY(-8px); 106 | transform:translateY(-8px) 107 | } 108 | -------------------------------------------------------------------------------- /brands.css: -------------------------------------------------------------------------------- 1 | 2 | /* Table of contents 3 | –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | - Rounded user avatars 6 | - Buttons 7 | - Brand Styles 8 | 9 | */ 10 | 11 | 12 | /* Rounded avatars 13 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 14 | 15 | /* Disable this if you don't want rounded avatars for users */ 16 | .rounded-avatar { 17 | border-radius: 50%; 18 | -webkit-box-shadow: 0px 0px 0px 3px #ffffff; 19 | box-shadow: 0px 0px 0px 3px #ffffff; 20 | background-color: #ffffff !important; 21 | width: 200px; 22 | height: 200px; 23 | } 24 | 25 | .social-icon { 26 | font-size: 32px; 27 | padding: 10px; 28 | } 29 | .social-icon-div { 30 | padding-bottom: 40px; 31 | } 32 | .social-icon{color:#fff;} 33 | 34 | /* Buttons 35 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 36 | 37 | .button { 38 | position: relative; 39 | background-color: transparent; 40 | color: var(--accentColor); 41 | border: solid var(--accentColor) 2px; 42 | border-radius: 5px; 43 | font-size: 1rem; 44 | text-align: center; 45 | display: block; 46 | margin-left: 10px; 47 | margin-right: 10px; 48 | margin-bottom: 20px!important; 49 | padding: 20px; 50 | text-decoration: none; 51 | /* transition: all .25s cubic-bezier(.08, .59, .29, .99); */ 52 | -webkit-tap-highlight-color: transparent; 53 | } 54 | 55 | @media (hover: hover) { 56 | .button:hover { 57 | background-color: var(--accentColor); 58 | color: var(--bgColor); 59 | } 60 | } 61 | 62 | .button:active { 63 | background-color: var(--accentColor); 64 | color: var(--bgColor); 65 | } 66 | 67 | 68 | /* Brand Icons 69 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 70 | 71 | .icon { 72 | right: 10px; 73 | bottom: 2px; 74 | position: relative; 75 | vertical-align: middle; 76 | width: 20px; 77 | height: 20px; 78 | } 79 | 80 | .button:hover > .icon { 81 | -webkit-box-shadow: 0px 0px 0px 4px var(--bgColor); 82 | box-shadow: 0px 0px 0px 4px var(--bgColor); 83 | background-color: var(--bgColor) !important; 84 | border-radius:50%; 85 | -moz-border-radius:50%; 86 | -webkit-border-radius:50%; 87 | } 88 | 89 | svg { 90 | color: white !important; 91 | } -------------------------------------------------------------------------------- /config.php: -------------------------------------------------------------------------------- 1 | 'false', 20 | 21 | 'open_links_in_same_tab' => 'false', 22 | 23 | 24 | /* 25 | |-------------------------------------------------------------------------- 26 | | Custom Code 27 | |-------------------------------------------------------------------------- 28 | | 29 | | Custom code allows you to inject customized Blade, PHP, HTML, JavaScript and CSS code. 30 | | 31 | | In your "extra" folder, you will find 3 separate files for injecting your code to 32 | | different places on the final page (head, body, at the end of the body). 33 | | 34 | | You may also attach custom assets like CSS, JS, or images. 35 | | You can find instructions for this in the files in your extra folder. 36 | | 37 | */ 38 | 39 | 'enable_custom_code' => 'true', 40 | 41 | // Disable individual files (only applies if above is 'true'). 42 | 'enable_custom_head' => 'true', 43 | 'enable_custom_body' => 'false', 44 | 'enable_custom_body_end' => 'false', 45 | 46 | 47 | /* 48 | |-------------------------------------------------------------------------- 49 | | Custom Icons 50 | |-------------------------------------------------------------------------- 51 | | 52 | | You may add custom icons to your theme.  53 | | These icons are stored under: .../extra/custom-icons. 54 | | 55 | | You can adjust the file extension types to use other files than just SVGs. 56 | | 57 | */ 58 | 59 | 'use_custom_icons' => 'false', 60 | 61 | // Is not set correct this will cause errors. 62 | 'custom_icon_extension' => '.svg', // (.png, .jpg ...) 63 | 64 | 65 | 66 | ]; 67 | -------------------------------------------------------------------------------- /extra/custom-assets/roboto-cyrillic-400-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-cyrillic-400-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-cyrillic-400-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-cyrillic-400-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-cyrillic-700-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-cyrillic-700-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-cyrillic-700-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-cyrillic-700-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-cyrillic-ext-400-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-cyrillic-ext-400-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-cyrillic-ext-400-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-cyrillic-ext-400-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-cyrillic-ext-700-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-cyrillic-ext-700-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-cyrillic-ext-700-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-cyrillic-ext-700-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-greek-400-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-greek-400-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-greek-400-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-greek-400-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-greek-700-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-greek-700-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-greek-700-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-greek-700-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-greek-ext-400-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-greek-ext-400-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-greek-ext-400-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-greek-ext-400-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-greek-ext-700-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-greek-ext-700-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-greek-ext-700-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-greek-ext-700-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-latin-400-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-latin-400-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-latin-400-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-latin-400-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-latin-700-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-latin-700-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-latin-700-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-latin-700-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-latin-ext-400-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-latin-ext-400-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-latin-ext-400-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-latin-ext-400-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-latin-ext-700-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-latin-ext-700-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-latin-ext-700-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-latin-ext-700-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-vietnamese-400-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-vietnamese-400-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-vietnamese-400-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-vietnamese-400-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-assets/roboto-vietnamese-700-normal.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-vietnamese-700-normal.woff -------------------------------------------------------------------------------- /extra/custom-assets/roboto-vietnamese-700-normal.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/extra/custom-assets/roboto-vietnamese-700-normal.woff2 -------------------------------------------------------------------------------- /extra/custom-head.blade.php: -------------------------------------------------------------------------------- 1 | {{-- 2 | 3 | 4 | |-------------------------------------------------------------------------- 5 | | Custom assets 6 | |-------------------------------------------------------------------------- 7 | 8 | Custom assets are stored in the 'custom-assets' directory found inside the 'extra' folder. 9 | Custom assets can be any file you would like to use in your theme. 10 | For example: JS, CSS or image files. 11 | 12 | You can load these custom assets with a built-in function, 'themeAsset()'. 13 | Add the file you want to add to your 'custom-assets' folder, and include the name with the file extension in the function. 14 | 15 | Down below, you can find a few examples using this function: 16 | 17 | 18 | 19 | --}} 20 | 21 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/flare/c5f13a27ffeb043a06af00708beeab149ad67af3/preview.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # A LinkStack Theme 2 | Find more themes: https://linkstack.org/themes/ 3 | 4 | * Theme Name: Flare 5 | * Theme Version: 1.7 6 | * Theme Date: 2022-07-07 7 | * Theme Author: JulianPrieber & LinkStack Team 8 | * Theme Author URI: https://github.com/JulianPrieber 9 | * Theme License: GPLv3 10 | * Source code: https://github.com/LinkStackOrg/flare 11 | 12 | 13 | ### Used assets: 14 | * Built using: 15 | * https://github.com/dhg/Skeleton 16 | * License: MIT 17 | 18 | * 19 | * https://github.com/JulianPrieber2/galaxy 20 | * License: GPLv3 21 | -------------------------------------------------------------------------------- /share.button.css: -------------------------------------------------------------------------------- 1 | .share-icon { 2 | padding: 0px 8px 3.5px 0px; 3 | vertical-align: middle; 4 | width: 20px; 5 | height: 20px; 6 | color: white !important; 7 | } 8 | 9 | .sharediv { 10 | position:relative; 11 | top: 30px; 12 | right: 30px; 13 | padding-bottom: 40px; 14 | } 15 | 16 | .toastdiv { 17 | display: -webkit-flex; 18 | display: flex; 19 | -webkit-align-items: center; 20 | align-items: center; 21 | -webkit-justify-content: center; 22 | justify-content: center; 23 | } 24 | 25 | .toastbox { 26 | width: 280px; 27 | padding: 10px; 28 | background-color: rgba(0, 0, 0, 0.7); 29 | color: white; 30 | border-radius: 4px; 31 | position: fixed; 32 | top: 105%; 33 | -webkit-transition: transform 0.3s linear; 34 | transition: transform 0.3s linear; 35 | z-index: 2; 36 | text-align: center; 37 | } 38 | .toastbox.toast-tox--active { 39 | -webkit-transform: translateY(-150px); 40 | transform: translateY(-150px); 41 | } 42 | 43 | .sharebutton, 44 | sharebutton { 45 | display: inline-block; 46 | text-decoration: none; 47 | height: 48px; 48 | text-align: center; 49 | vertical-align: middle; 50 | font-size: 18px; 51 | width: 48px; 52 | font-weight: 700; 53 | line-height: 48px; 54 | letter-spacing: 0.1px; 55 | white-space: wrap; 56 | border: solid var(--accentColor) 2px; 57 | border-radius: 10px; 58 | cursor: pointer; 59 | color: #ffffff; 60 | background-color: transparent; 61 | } 62 | 63 | @media screen and (min-width: 600px) { 64 | .sharebutton, 65 | sharebutton { 66 | display: inline-block; 67 | text-decoration: none; 68 | height: 48px; 69 | text-align: center; 70 | vertical-align: middle; 71 | font-size: 18px; 72 | width: 150px; 73 | font-weight: 700; 74 | line-height: 48px; 75 | letter-spacing: 0.1px; 76 | white-space: wrap; 77 | border: solid var(--accentColor) 2px; 78 | border-radius: 10px; 79 | cursor: pointer; 80 | color: #ffffff; 81 | background-color: transparent; 82 | } 83 | .sharebutton-img { 84 | position: relative; 85 | left: 3px; 86 | margin-left: auto; 87 | margin-right: auto; 88 | } 89 | } 90 | sharebutton:hover, 91 | .sharebutton:hover { 92 | color: #000000; 93 | background-color: #FFF; 94 | } 95 | .sharebutton:hover .share-icon { 96 | -webkit-filter: invert(100%); 97 | -moz-filter: invert(100%); 98 | filter: invert(100%); 99 | } 100 | 101 | @media screen and (max-width: 600px) { 102 | .sharebutton-mb { 103 | display: none; 104 | } 105 | .sharebutton-img { 106 | position: relative; 107 | left: 3px; 108 | margin-left: auto; 109 | margin-right: auto; 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /skeleton-auto.css: -------------------------------------------------------------------------------- 1 | 2 | /* Table of contents 3 | –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | - Grid 6 | - Base Styles 7 | - Background 8 | - Typography 9 | - Links 10 | - Code 11 | - Spacing 12 | - Utilities 13 | - Misc 14 | - Credit footer 15 | 16 | */ 17 | 18 | 19 | /* Grid 20 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 21 | .container { 22 | position: relative; 23 | width: 100%; 24 | max-width: 600px; 25 | text-align: center; 26 | margin: 0 auto; 27 | box-sizing: border-box; } 28 | .column { 29 | position: center; 30 | width: 100%; 31 | float: center; 32 | box-sizing: border-box; } 33 | 34 | /* For devices larger than 400px */ 35 | @media (min-width: 400px) { 36 | .container { 37 | width: 85%; 38 | padding: 0; } 39 | } 40 | 41 | /* For devices larger than 550px */ 42 | @media (min-width: 550px) { 43 | .container { 44 | width: 80%; } 45 | .column, 46 | .columns { 47 | margin-left: 0; } 48 | .column:first-child, 49 | .columns:first-child { 50 | margin-left: 0; } 51 | 52 | } 53 | 54 | 55 | /* Base Styles 56 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 57 | /* NOTE 58 | html is set to 62.5% so that all the REM measurements throughout Skeleton 59 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 60 | 61 | /* Background 62 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 63 | 64 | body { 65 | margin: 0; 66 | padding: 0; 67 | min-height: 100vh; 68 | font-family: var(--font); 69 | background: linear-gradient(45deg, var(--bgColor) 0%, var(--bgColor2) 100%); 70 | opacity: 0; 71 | animation: 1s ease-out var(--delay) 1 transitionAnimation; /* duration/timing-function/delay/iterations/name */ 72 | animation-fill-mode: forwards; 73 | background-repeat: no-repeat; 74 | background-size: cover; 75 | position: relative; 76 | color: #FFFFFF; 77 | } 78 | 79 | 80 | /* Animation */ 81 | @keyframes transitionAnimation { 82 | 0% { 83 | opacity: 0; 84 | top: -10px; 85 | } 86 | 100% { 87 | opacity: 1; 88 | top: 0; 89 | } 90 | } 91 | 92 | @keyframes animate { 93 | 0% { 94 | background-position: -500%; 95 | } 96 | 100% { 97 | background-position: 500%; 98 | } 99 | } 100 | 101 | @keyframes animStar { 102 | from { 103 | transform: translateY(0px); 104 | } 105 | to { 106 | transform: translateY(-2000px); 107 | } 108 | } 109 | 110 | /* Typography 111 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 112 | h1 { 113 | margin-top: 16px; 114 | margin-bottom: 16px; 115 | font-weight: 400; } 116 | h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} 117 | 118 | 119 | /* Larger than phablet */ 120 | @media (min-width: 350px) { 121 | h1 { font-size: 48px; line-height: 96px;} 122 | } 123 | 124 | p { 125 | margin-top: 16px; } 126 | 127 | 128 | /* Links 129 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 130 | a { 131 | color: #ffffff; 132 | text-decoration: none; 133 | } 134 | a:hover { 135 | color: #f5af19; } 136 | 137 | .spacing { 138 | padding: 0 10px; 139 | padding-top: 50px; 140 | } 141 | 142 | /* Code 143 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 144 | code { 145 | padding: .2rem .5rem; 146 | margin: 0 .2rem; 147 | font-size: 90%; 148 | white-space: nowrap; 149 | background: #F1F1F1; 150 | border: 1px solid #E1E1E1; 151 | border-radius: 4px; } 152 | pre > code { 153 | display: block; 154 | padding: 1rem 1.5rem; 155 | white-space: pre; } 156 | 157 | /* Spacing 158 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 159 | button, 160 | .button { 161 | margin-bottom: 1rem; 162 | display: block !important; } 163 | input, 164 | textarea, 165 | select, 166 | fieldset { 167 | margin-bottom: 1.5rem; } 168 | pre, 169 | blockquote, 170 | dl, 171 | figure, 172 | p, 173 | ol { 174 | margin-bottom: 2.5rem; } 175 | 176 | 177 | /* Utilities 178 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 179 | .u-full-width { 180 | width: 100%; 181 | box-sizing: border-box; } 182 | .u-max-full-width { 183 | max-width: 100%; 184 | box-sizing: border-box; } 185 | .u-pull-right { 186 | float: right; } 187 | .u-pull-left { 188 | float: left; } 189 | 190 | 191 | /* Misc 192 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 193 | hr { 194 | margin-top: 3rem; 195 | margin-bottom: 3.5rem; 196 | border-width: 0; 197 | border-top: 1px solid #E1E1E1; } 198 | 199 | 200 | /* ===== Hidden Scrollbar ===== */ 201 | * { 202 | -ms-overflow-style: none; /* Internet Explorer 10+ */ 203 | scrollbar-width: none; /* Firefox */ } 204 | *::-webkit-scrollbar { 205 | display: none; /* Safari and Chrome */ } 206 | 207 | 208 | /* Credit footer 209 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 210 | /* Styling for credit footer text */ 211 | .credit-txt { 212 | font-weight: 700; 213 | font-size: 15px; 214 | text-decoration: none; 215 | } 216 | 217 | .credit-icon { 218 | display: none; 219 | right: 5px; 220 | } 221 | .credit-footer { 222 | position: relative; 223 | right: 15px; 224 | } 225 | 226 | /* Switches text color for credit footer for dark/light mode */ 227 | 228 | .credit-txt-clr{ 229 | color: #FFF !important; 230 | } 231 | 232 | 233 | --------------------------------------------------------------------------------