├── animations.css ├── background.jpg ├── brands.css ├── config.php ├── extra ├── custom-assets │ ├── pragroman.ttf │ └── windlass.ttf └── custom-head.blade.php ├── green-button-sprite.svg ├── preview.png ├── readme.md ├── share.button.css ├── skeleton-auto.css └── turquoise-button-sprite.svg /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 | .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:.3s; 71 | transition-duration:.3s; 72 | -webkit-transition-property:transform; 73 | transition-property:transform 74 | } 75 | .credit-hover:active, 76 | .credit-hover:focus, 77 | .credit-hover:hover{ 78 | -webkit-transform:scale(1.1); 79 | transform:scale(1.1) 80 | } 81 | 82 | .button-hover{ 83 | display:inline-block; 84 | -webkit-transform:perspective(1px) translateZ(0); 85 | transform:perspective(1px) translateZ(0); 86 | box-shadow:0 0 1px rgba(0,0,0,0); 87 | -webkit-transition-duration:.1s; 88 | transition-duration:.1s; 89 | -webkit-transition-property:transform; 90 | transition-property:transform 91 | } 92 | .button-hover:active, 93 | .button-hover:focus, 94 | .button-hover:hover{ 95 | filter: contrast(115%); 96 | text-shadow: 0px 0px 20px #49FF18; 97 | -webkit-transform:scale(1.02); 98 | transform:scale(1.02) 99 | } 100 | 101 | 102 | /* Footer hover animations 103 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 104 | 105 | .footer-hover{ 106 | display:inline-block; 107 | -webkit-transform:perspective(1px) translateZ(0); 108 | transform:perspective(1px) translateZ(0); 109 | box-shadow:0 0 1px rgba(0,0,0,0); 110 | -webkit-transition-duration:.3s; 111 | transition-duration:.3s; 112 | -webkit-transition-property:transform; 113 | transition-property:transform; 114 | -webkit-transition-timing-function:ease-out; 115 | transition-timing-function:ease-out 116 | } 117 | .footer-hover:active,.footer-hover:focus,.footer-hover:hover{ 118 | -webkit-transform:translateY(-8px); 119 | transform:translateY(-8px) 120 | } 121 | -------------------------------------------------------------------------------- /background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/SoT/33fa95745132668c0c839a753f2fffbdd434222c/background.jpg -------------------------------------------------------------------------------- /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 | clip-path: path('m189.1 98.6q2.5 0.6 5.1 1.3c1.4 0.4 3.5 0 4.1 2 0.5 1.9 0.1 5.2 0.1 7.3 0.1 2.3 0.4 4-0.8 5.7-0.9 1.3-2.7 3.2-2.9 5-0.3 2.6 2.1 1.7 3.1 3 0.9 1.2 0.6 4 0.6 5.6q0.2 3.8 0.2 7.7c0.1 9.1 0.4 18.4 1 27.4q0.1 1.9 0.2 3.7 0.1 1.8 0.1 3.6 0.1 1.9 0 3.7 0 1.8-0.1 3.7c-0.3 4.4-1.2 8.6-1.1 13.1 0.1 2.2 1 5.6 0.5 7.6-0.4 2-1.7 1.2-3.1 1q-1.2-0.1-2.3-0.1-1.2 0-2.4 0-1.2 0-2.3 0.1-1.2 0.1-2.4 0.2c-3.7 0.4-7.2-1.8-10.8-1.8-1.5 0-3.5 0.8-4.9 0.2-1.4-0.6-0.9-2.3-1.9-3.3-0.6-0.6-1.7 0-2.4 0q-0.3-0.1-0.6-0.1-0.3-0.1-0.7-0.1-0.3-0.1-0.6-0.1-0.3-0.1-0.6-0.2-0.7-0.1-1.3-0.2-0.7-0.1-1.3-0.1-0.7 0-1.3 0-0.7 0.1-1.3 0.2-0.6 0.1-1.1 0.2-0.5 0.1-1 0.3-0.5 0.3-0.9 0.6-0.5 0.3-1 0.7-0.4 0.5-0.8 0.8-0.5 0.4-1 0.7-0.4 0.2-0.9 0.3-0.5 0.2-1 0.2c-3.5 0.2-6.8-0.1-10.3 0.4-3.1 0.4-6.2 0.6-9.3 0.8-3.6 0.3-7.1 0.9-10.7 0.6-1.7-0.1-3.3-0.8-5.2-0.8-1.8 0-1.1-0.8-2.6-1.9-0.7-0.5-2-0.2-2.9-0.6q-0.2-0.2-0.5-0.4-0.3-0.2-0.6-0.4-0.3-0.2-0.5-0.4-0.3-0.2-0.6-0.5c-1.5-1.2-1.6-0.2-3.2 0.6-1.3 0.6-1.8 1-2.7-0.4-0.9-1.3-0.7-4.7-1.9-5.7-0.9 0.6-1 5-1.2 6.2-0.2 1.4 0 2.1-1 2.7-0.5 0.3-2 0-2.6 0h-11.2c-7.9 0.1-15.7-0.7-23.5-0.7-3.8 0-7.6 0.2-11.4-0.2q-0.6-0.1-1.3-0.2-0.7-0.1-1.4-0.1-0.7-0.1-1.3-0.1-0.7 0-1.4-0.1c-1.8 0.2-2.2-0.5-3.5-2.3-1.1-1.5-1.7-3-3.4-2.1-1.4 0.7-2.3 3.2-3.8 3.4-1.3 0.2-2.9-0.3-4.2-0.3q-2.9 0-5.9 0.1-5.4 0.3-10.9 0.7c-3.4 0.3-6.6 1.3-10 1.4-1.8 0-2.3 0.4-2.3-2.2 0.1-2.2 0.2-4.4 0.2-6.7 0-4 0.3-8 0.5-12 0.2-5 0-10 0.2-15 0.2-2.9-0.2-7.1 1-9.6 0.5-1.1 2.8-2.3 2.7-3.5-0.1-1.3-1.9-2.1-2.6-2.6-1.9-1.1-1.9-1.4-1.9-4.1 0-2.2-0.1-4.4 0-6.6 0.5-8.6 0.4-17.1 0.6-25.7 0.1-2.3-0.3-5.6 0.2-7.8 0.3-1.5 0.4-1.3 1.8-1.5q0.5-0.1 1-0.2 0.6-0.1 1.1-0.2 0.5-0.2 1-0.4 0.5-0.2 1-0.4c1.5-0.9 0.9-1.2-0.3-2.2-1.4-1.2-3.3-2.1-4.5-3.5-1.1-1.1-1-2.7-1.1-4.5q0-0.7-0.1-1.4 0-0.8 0-1.5 0-0.7 0-1.4 0-0.7 0-1.4c0-0.6-0.3-2.2 0-2.9 0.4-0.6 0.4 0 0.9-0.4 0.8-0.6 0.7 0.3 1-1.2q0-0.3 0-0.7 0-0.3 0-0.7-0.1-0.3-0.1-0.7 0-0.3-0.1-0.6c-0.1-1.9-0.1-3.7-0.1-5.5 0-2.1 0.3-3.6-0.7-5.4-1-1.7-0.8-3.5-0.9-5.8-0.1-9-0.8-18.3-0.5-27.3 0.2-4.9 0.5-9.9 0.4-14.8-0.1-4.3-0.6-8.5-0.6-12.8 0-1.7-0.4-4.4 0.6-5.2 1-0.6 3.6 0.2 4.7 0.2 3 0.1 5.8-0.1 8.8 0.1 3.4 0.3 6.9 0.5 10.4 0.7 2.6 0.2 7-0.5 9 1.9 0.8 0.8 2.1 3.8 3.1 3.8 1.1 0 2-3.1 3.2-3.5 0.4-0.1 1.2 0.5 1.7 0.6q0.3 0 0.6 0 0.3 0 0.5 0 0.3 0 0.6 0 0.3 0 0.6-0.1 0.5 0 1-0.1 0.5-0.1 1-0.2 0.4-0.1 0.9-0.2 0.5-0.1 1-0.3c3.1-1.5 6.7-0.7 9.9-0.5 3.1 0.2 6.2 0.5 9.2 0.8 7 0.5 13.7 1.7 20.7 0.3q1.2-0.2 2.4-0.3 1.2-0.1 2.4-0.2 1.2 0 2.4 0 1.2 0 2.4 0.1c1.6 0.1 1.7 0.3 2.2 2.3q0.7 2.7 1.4 5.5c1.1-1.5 1.4-3.7 1.9-5.7 0.7-2.7 1.8-2 3.8-1.9q0.4 0.1 0.8 0.1 0.4 0 0.8 0 0.4 0 0.8-0.1 0.4 0 0.8 0c0.5-0.1 1.7-0.9 2.3-0.6 1.3 0.7 0.8 4.4 1.5 5.5 0.6 1.1 2.8-0.2 3.4-0.9 1.1-1.1 1.1-3.2 1.5-4.8 0.5-2.1 1.3-0.9 2.7-0.5q0.7 0.2 1.3 0.3 0.7 0.2 1.3 0.3 0.6 0.1 1.3 0.2 0.6 0.1 1.3 0.1c6.9 1 14.1 0.6 21 0.8 7.2 0.3 14.3-0.2 21.4-0.5 3.7-0.1 7.4-1 11.1-1 1.5 0 2.6-0.2 3.6 1.5 0.7 1.2 1 3 1.6 4.3 1.1-1.9 1.6-6.9 3.6-7.4 1.1-0.4 2.8 0.3 3.9 0.4q0.6 0 1.2 0.1 0.6 0 1.2 0 0.6 0 1.2 0 0.6-0.1 1.2-0.1c2.2-0.4 3.1-0.9 2.5 2.6-0.2 1.7-0.7 3-0.7 4.7q0.1 0.7 0.1 1.3 0 0.7 0 1.4-0.1 0.7-0.1 1.3-0.1 0.7-0.2 1.4c-0.4 3.4-0.1 7 0.2 10.5q0.1 1.4 0.1 2.9 0.1 1.5 0.2 3 0 1.5 0 3 0 1.4 0 2.9c0 1.6-0.1 3.1-0.2 4.8 0 1.6 0.4 3.3 0.2 5-0.4 3.1-2 4.9-3.6 7 2 1 2.7 1.1 2.3 4q-0.1 1-0.1 1.9-0.1 0.9-0.1 1.9-0.1 0.9-0.1 1.9 0 0.9-0.1 1.9c0 1.3 0 2.8-0.5 3.9-0.4 0.8-1.5 1.2-1.8 1.9-0.4 1.1 0.8 4.5 1 6 0.5 5.7 1.7 11.5 1.8 17.3 0 1.2 0.2 2.3-0.6 3.1-0.7 0.7-2.2 0.8-3.1 1-0.6 0.2-5.4 1.1-5.4 1.3 0.9 0.2 0-0.1 0-0.1z'); 18 | width: 201px; 19 | height: 201px; 20 | } 21 | 22 | .social-icon { 23 | font-size: 40px; 24 | padding: 10px; 25 | } 26 | .social-icon-div { 27 | padding-bottom: 30px; 28 | } 29 | .social-icon{color:#fff;} 30 | 31 | /* Buttons 32 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 33 | 34 | 35 | button:hover, 36 | .button:focus { 37 | color: #333; 38 | border-color: #888; 39 | outline: 0; } 40 | .button.button-primary { 41 | color: #FFF;} 42 | .button.button-primary:hover, 43 | .button.button-primary:focus { 44 | color: #FFF;} 45 | 46 | 47 | /* Brand Icons 48 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 49 | 50 | .icon { 51 | padding: 0px 5px 0px 0px; 52 | vertical-align: middle; 53 | width: 20px; 54 | height: 20px; 55 | font-size: 18px; 56 | } 57 | -------------------------------------------------------------------------------- /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/pragroman.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/SoT/33fa95745132668c0c839a753f2fffbdd434222c/extra/custom-assets/pragroman.ttf -------------------------------------------------------------------------------- /extra/custom-assets/windlass.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/SoT/33fa95745132668c0c839a753f2fffbdd434222c/extra/custom-assets/windlass.ttf -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /green-button-sprite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/SoT/33fa95745132668c0c839a753f2fffbdd434222c/preview.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # A LinkStack Theme 2 | Find more themes: https://linkstack.org/themes/ 3 | 4 | * Theme Name: SoT 5 | * Theme Version: 1.8 6 | * Theme Date: 2022-07-03 7 | * Theme Author: JulianPrieber & LinkStack Team 8 | * Theme Author URI: https://github.com/JulianPrieber 9 | * Theme License: GPLv3 (Non-commercial use only) 10 | * Source code: https://github.com/LinkStackOrg/SoT 11 | 12 | 13 | ### Used assets: 14 | * Built using: 15 | * https://github.com/dhg/Skeleton 16 | * License: MIT 17 | 18 | * 19 | * https://www.dafont.com/pragroman.font 20 | * License: Non-commercial use only 21 | 22 | * 23 | * https://www.dafont.com/windlass.font 24 | * License: Non-commercial use only 25 | 26 | 27 | * Button vector graphics: 28 | * https://www.seaofthieves.com 29 | * © Microsoft, Rare, the Rare logo, Sea of Thieves are trademarks of the Microsoft group of companies. 30 | -------------------------------------------------------------------------------- /share.button.css: -------------------------------------------------------------------------------- 1 | .share-icon { 2 | padding: 0px 3px 0px 0px; 3 | vertical-align: middle; 4 | color: #fff !important; 5 | width: 20px; 6 | height: 20px; 7 | font-size: 18px; 8 | } 9 | 10 | .sharediv { 11 | position:relative; 12 | top: 30px; 13 | right: 30px; 14 | padding-bottom: 40px; 15 | } 16 | 17 | .toastdiv { 18 | display: -webkit-flex; 19 | display: flex; 20 | -webkit-align-items: center; 21 | align-items: center; 22 | -webkit-justify-content: center; 23 | justify-content: center; 24 | } 25 | 26 | .toastbox { 27 | width: 280px; 28 | padding: 10px; 29 | background-color: rgba(0, 0, 0, 0.7); 30 | color: white; 31 | border-radius: 4px; 32 | position: fixed; 33 | top: 105%; 34 | -webkit-transition: transform 0.3s linear; 35 | transition: transform 0.3s linear; 36 | z-index: 2; 37 | text-align: center; 38 | } 39 | .toastbox.toast-tox--active { 40 | -webkit-transform: translateY(-150px); 41 | transform: translateY(-150px); 42 | } 43 | 44 | sharebutton:hover, 45 | .sharebutton:hover { 46 | color: #000000; 47 | opacity: 0.85; 48 | filter: alpha(opacity=40); 49 | border-color: #888; 50 | text-shadow: none !important; 51 | -webkit-transform:scale(1.00) !important; 52 | transform:scale(1.00) !important; 53 | outline: 0; } 54 | .sharebutton.sharebutton-primary { 55 | color: #FFFFFF; 56 | filter: brightness(90%) } 57 | .sharebutton.sharebutton-primary:hover, 58 | .sharebutton.sharebutton-primary:focus { 59 | color: #FFFFFF; 60 | filter: brightness(90%) } 61 | 62 | @media screen and (max-width: 600px) { 63 | .sharebutton-mb { 64 | display: none; 65 | } 66 | .sharebutton-img { 67 | position: relative; 68 | left: 3px; 69 | margin-left: auto; 70 | margin-right: auto; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /skeleton-auto.css: -------------------------------------------------------------------------------- 1 | /* Table of contents 2 | –––––––––––––––––––––––––––––––––––––––––––––––––– 3 | 4 | - Grid 5 | - Base Styles 6 | - Typography 7 | - Links 8 | - Code 9 | - Spacing 10 | - Utilities 11 | - Misc 12 | - Credit footer 13 | 14 | */ 15 | 16 | /* Grid 17 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 18 | .container { 19 | position: relative; 20 | width: 100%; 21 | text-align: center; 22 | margin: 0 auto; 23 | box-sizing: border-box; } 24 | .column { 25 | position: center; 26 | width: 100%; 27 | float: center; 28 | box-sizing: border-box; } 29 | 30 | 31 | /* For devices larger than 400px */ 32 | @media (min-width: 400px) { 33 | .container { 34 | width: 85%; 35 | padding: 0; } 36 | } 37 | 38 | /* For devices larger than 550px */ 39 | @media (min-width: 550px) { 40 | .container { 41 | width: 80%; } 42 | .column, 43 | .columns { 44 | margin-left: 0; } 45 | .column:first-child, 46 | .columns:first-child { 47 | margin-left: 0; } 48 | 49 | } 50 | 51 | 52 | /* Base Styles 53 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 54 | /* NOTE 55 | html is set to 62.5% so that all the REM measurements throughout Skeleton 56 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 57 | 58 | /* Typography 59 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 60 | h1 { 61 | margin-top: 0; 62 | margin-bottom: 16px; 63 | font-family: "sottitle", sans-serif; 64 | font-weight: 800; } 65 | h1 { font-size:24px; line-height: 64px; letter-spacing: 6px;} 66 | 67 | 68 | /* Larger than phablet */ 69 | @media (min-width: 550px) { 70 | h1 { font-size: 48px; line-height: 96px;} 71 | } 72 | 73 | 74 | @media (min-width: 1px) { 75 | p { 76 | margin-top: 0; 77 | max-width: 100%;} 78 | } 79 | 80 | 81 | @media (min-width: 800px) { 82 | p { 83 | margin-top: 0; 84 | max-width: 80%;} 85 | } 86 | 87 | @media (min-width: 1000px) { 88 | p { 89 | margin-top: 0; 90 | max-width: 60%;} 91 | } 92 | 93 | 94 | 95 | 96 | 97 | /* Links 98 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 99 | a { 100 | color: #a3dab0; 101 | font-size:14px; 102 | text-decoration: underline; 103 | } 104 | a:hover { 105 | color: #a3dab0; } 106 | 107 | .spacing { 108 | padding: 0 7px; 109 | } 110 | 111 | /* Code 112 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 113 | code { 114 | padding: .2rem .5rem; 115 | margin: 0 .2rem; 116 | font-size: 90%; 117 | white-space: nowrap; 118 | background: #F1F1F1; 119 | border: 1px solid #E1E1E1; 120 | border-radius: 4px; } 121 | pre > code { 122 | display: block; 123 | padding: 1rem 1.5rem; 124 | white-space: pre; } 125 | 126 | /* Spacing 127 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 128 | button, 129 | .button { 130 | margin-bottom: 1rem; } 131 | input, 132 | textarea, 133 | select, 134 | fieldset { 135 | margin-bottom: 1.5rem; } 136 | pre, 137 | blockquote, 138 | dl, 139 | figure, 140 | p, 141 | ol { 142 | margin-bottom: 2.5rem; } 143 | 144 | 145 | /* Utilities 146 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 147 | .u-full-width { 148 | width: 100%; 149 | box-sizing: border-box; } 150 | .u-max-full-width { 151 | max-width: 100%; 152 | box-sizing: border-box; } 153 | .u-pull-right { 154 | float: right; } 155 | .u-pull-left { 156 | float: left; } 157 | 158 | 159 | /* Misc 160 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 161 | hr { 162 | margin-top: 3rem; 163 | margin-bottom: 3.5rem; 164 | border-width: 0; 165 | border-top: 1px solid #E1E1E1; } 166 | 167 | /* ===== Scrollbar CSS ===== */ 168 | /* Firefox */ 169 | * { 170 | scrollbar-width: thin; 171 | scrollbar-color: #171a1d #31363b; 172 | } 173 | 174 | /* Chrome, Edge, and Safari */ 175 | *::-webkit-scrollbar { 176 | width: 8px; 177 | } 178 | 179 | *::-webkit-scrollbar-track { 180 | background: #31363b; 181 | } 182 | 183 | *::-webkit-scrollbar-thumb { 184 | background-color: #171a1d; 185 | border-radius: 30px; 186 | border: 3px none #ffffff; 187 | } 188 | 189 | .footer { 190 | padding-top: 50px; 191 | } 192 | 193 | /* Credit footer 194 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 195 | /* Styling for credit footer text */ 196 | .credit-txt { 197 | font-weight: 700; 198 | font-size: 15px; 199 | text-decoration: none; 200 | } 201 | 202 | 203 | .credit-icon { 204 | display: none; } 205 | .credit-footer { 206 | position: relative; 207 | text-align: center; 208 | right: 15px; } 209 | 210 | 211 | /* Switches text color for credit footer for dark/light mode */ 212 | 213 | .credit-txt-clr{ 214 | color: #FFF !important; 215 | } 216 | 217 | 218 | -------------------------------------------------------------------------------- /turquoise-button-sprite.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------