├── preview.png ├── animations.css ├── readme.md ├── config.php ├── share.button.css └── skeleton-auto.css /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkStackOrg/llc-vanilla/HEAD/preview.png -------------------------------------------------------------------------------- /animations.css: -------------------------------------------------------------------------------- 1 | /* *********************** */ 2 | /* 3 | /* nothing here ¯\_(ツ)_/¯ 4 | /* 5 | /* *********************** */ 6 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # A LinkStack Theme 2 | Find more themes: https://linkstack.org/themes/ 3 | 4 | * Theme Name: LLC Vanilla 5 | * Theme Version: 1.2 6 | * Theme Date: 2022-06-06 7 | * Theme Author: JulianPrieber 8 | * Theme Author URI: https://github.com/JulianPrieber 9 | * Theme License: GPLv3 10 | * Source code: https://github.com/LinkStackOrg/llc-vanilla 11 | 12 | 13 | ### Used assets: 14 | * Built using: 15 | * https://github.com/dhg/Skeleton 16 | * License: MIT 17 | -------------------------------------------------------------------------------- /config.php: -------------------------------------------------------------------------------- 1 | 'true', 20 | 21 | 'open_links_in_same_tab' => 'false', 22 | 23 | // You can use this option to use the default button styling. For example reskins of the Default Theme. 24 | // This can be useful if you do not want to update your brand styles every time a new button is added. 25 | // If true the file "brands.css" wont be used anymore and can be removed. 26 | 'use_default_buttons' => 'true', 27 | 28 | /* 29 | |-------------------------------------------------------------------------- 30 | | Custom Code 31 | |-------------------------------------------------------------------------- 32 | | 33 | | Custom code allows you to inject customized Blade, PHP, HTML, JavaScript and CSS code. 34 | | 35 | | In your "extra" folder, you will find 3 separate files for injecting your code to 36 | | different places on the final page (head, body, at the end of the body). 37 | | 38 | | You may also attach custom assets like CSS, JS, or images. 39 | | You can find instructions for this in the files in your extra folder. 40 | | 41 | */ 42 | 43 | 'enable_custom_code' => 'false', 44 | 45 | // Disable individual files (only applies if above is 'true'). 46 | 'enable_custom_head' => 'true', 47 | 'enable_custom_body' => 'true', 48 | 'enable_custom_body_end' => 'true', 49 | 50 | 51 | /* 52 | |-------------------------------------------------------------------------- 53 | | Custom Icons 54 | |-------------------------------------------------------------------------- 55 | | 56 | | You may add custom icons to your theme. 57 | | These icons are stored under: .../extra/custom-icons. 58 | | 59 | | You can adjust the file extension types to use other files than just SVGs. 60 | | 61 | */ 62 | 63 | 'use_custom_icons' => 'false', 64 | 65 | // Is not set correct this will cause errors. 66 | 'custom_icon_extension' => '.svg', // (.png, .jpg ...) 67 | 68 | 69 | 70 | ]; -------------------------------------------------------------------------------- /share.button.css: -------------------------------------------------------------------------------- 1 | .share-icon { 2 | padding: 0px 8px 3.5px 0px; 3 | vertical-align: middle; 4 | width: 20px; 5 | height: 20px; 6 | } 7 | 8 | .sharediv { 9 | position:relative; 10 | top: 30px; 11 | right: 30px; 12 | padding-bottom: 40px; 13 | } 14 | 15 | .toastdiv { 16 | display: -webkit-flex; 17 | display: flex; 18 | -webkit-align-items: center; 19 | align-items: center; 20 | -webkit-justify-content: center; 21 | justify-content: center; 22 | } 23 | 24 | .toastbox { 25 | width: 280px; 26 | padding: 10px; 27 | background-color: rgba(0, 0, 0, 0.7); 28 | color: white; 29 | border-radius: 4px; 30 | position: fixed; 31 | top: 105%; 32 | -webkit-transition: transform 0.3s linear; 33 | transition: transform 0.3s linear; 34 | z-index: 2; 35 | text-align: center; 36 | } 37 | .toastbox.toast-tox--active { 38 | -webkit-transform: translateY(-150px); 39 | transform: translateY(-150px); 40 | } 41 | .sharebutton, 42 | sharebutton { 43 | display: inline-block; 44 | text-decoration: none; 45 | height: 48px; 46 | text-align: center; 47 | vertical-align: middle; 48 | font-size: 18px; 49 | width: 48px; 50 | font-weight: 700; 51 | line-height: 48px; 52 | letter-spacing: 0.1px; 53 | white-space: wrap; 54 | border-radius: 8px; 55 | cursor: pointer; 56 | color: #000000; 57 | background-color: #efefef 58 | } 59 | @media screen and (min-width: 600px) { 60 | .sharebutton, 61 | sharebutton { 62 | display: inline-block; 63 | text-decoration: none; 64 | height: 48px; 65 | text-align: center; 66 | vertical-align: middle; 67 | font-size: 18px; 68 | width: 150px; 69 | font-weight: 700; 70 | line-height: 48px; 71 | letter-spacing: 0.1px; 72 | white-space: wrap; 73 | border-radius: 8px; 74 | cursor: pointer; 75 | color: #000000; 76 | background-color: #efefef 77 | } 78 | } 79 | sharebutton:hover, 80 | .sharebutton:hover { 81 | color: #000000; 82 | opacity: 0.85; 83 | filter: alpha(opacity=40); 84 | border-color: #888; 85 | outline: 0; } 86 | .sharebutton.sharebutton-primary { 87 | color: #FFFFFF; 88 | filter: brightness(90%) } 89 | .sharebutton.sharebutton-primary:hover, 90 | .sharebutton.sharebutton-primary:focus { 91 | color: #FFFFFF; 92 | filter: brightness(90%) } 93 | 94 | @media screen and (max-width: 600px) { 95 | .sharebutton-mb { 96 | display: none; 97 | } 98 | .sharebutton-img { 99 | position: relative; 100 | left: 3px; 101 | margin-left: auto; 102 | margin-right: auto; 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /skeleton-auto.css: -------------------------------------------------------------------------------- 1 | 2 | /* Table of contents 3 | –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | - Grid 6 | - Base Styles 7 | - Typography 8 | - Links 9 | - Code 10 | - Spacing 11 | - Utilities 12 | - Misc 13 | - Credit footer 14 | 15 | */ 16 | 17 | 18 | /* Grid 19 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 20 | .container { 21 | position: relative; 22 | width: 100%; 23 | max-width: 600px; 24 | text-align: center; 25 | margin: 0 auto; 26 | box-sizing: border-box; } 27 | .column { 28 | position: center; 29 | width: 100%; 30 | float: center; 31 | box-sizing: border-box; } 32 | 33 | /* For devices larger than 400px */ 34 | @media (min-width: 400px) { 35 | .container { 36 | width: 85%; 37 | padding: 0; } 38 | } 39 | 40 | /* For devices larger than 550px */ 41 | @media (min-width: 550px) { 42 | .container { 43 | width: 80%; } 44 | .column, 45 | .columns { 46 | margin-left: 0; } 47 | .column:first-child, 48 | .columns:first-child { 49 | margin-left: 0; } 50 | 51 | } 52 | 53 | 54 | /* Base Styles 55 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 56 | /* NOTE 57 | html is set to 62.5% so that all the REM measurements throughout Skeleton 58 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 59 | 60 | html { 61 | font-size: 100%; } 62 | 63 | /* Dark/light mode detection (comment this section out and use the one below for a fixed background color) */ 64 | @media (prefers-color-scheme: dark) { 65 | body { 66 | font-size: 18px; 67 | line-height: 24px; 68 | font-weight: 400; 69 | background: #292929; 70 | background: radial-gradient(circle, #292929 28%, #1b1b1b 100%); 71 | font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 72 | color: #FFFFFF; } 73 | } 74 | @media (prefers-color-scheme: light) { 75 | body { 76 | font-size: 18px; 77 | line-height: 24px; 78 | font-weight: 400; 79 | background: #F1F1F1; 80 | font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 81 | color: #222; } 82 | } 83 | 84 | /* Use this for a fixed background color instead of dark and light mode 85 | body { 86 | font-size: 18px; 87 | line-height: 24px; 88 | font-weight: 400; 89 | font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, 90 | sans-serif; 91 | } 92 | */ 93 | 94 | /* Typography 95 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 96 | h1 { 97 | margin-top: 0; 98 | margin-bottom: 16px; 99 | font-weight: 800; } 100 | h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} 101 | 102 | 103 | /* Larger than phablet */ 104 | @media (min-width: 550px) { 105 | h1 { font-size: 48px; line-height: 96px;} 106 | } 107 | 108 | p { 109 | margin-top: 0; } 110 | 111 | 112 | /* Links 113 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 114 | a { 115 | color: #0085FF; 116 | text-decoration: none; 117 | } 118 | a:hover { 119 | color: #0085FF; } 120 | 121 | .spacing { 122 | padding: 0 10px; 123 | } 124 | 125 | .social-icon { 126 | font-size: 32px; 127 | padding: 10px; 128 | } 129 | .social-icon-div { 130 | padding-bottom: 30px; 131 | } 132 | .social-icon{color:#fff;} 133 | 134 | /* Code 135 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 136 | code { 137 | padding: .2rem .5rem; 138 | margin: 0 .2rem; 139 | font-size: 90%; 140 | white-space: nowrap; 141 | background: #F1F1F1; 142 | border: 1px solid #E1E1E1; 143 | border-radius: 4px; } 144 | pre > code { 145 | display: block; 146 | padding: 1rem 1.5rem; 147 | white-space: pre; } 148 | 149 | /* Spacing 150 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 151 | button, 152 | .button { 153 | margin-bottom: 1rem; } 154 | input, 155 | textarea, 156 | select, 157 | fieldset { 158 | margin-bottom: 1.5rem; } 159 | pre, 160 | blockquote, 161 | dl, 162 | figure, 163 | p, 164 | ol { 165 | margin-bottom: 2.5rem; } 166 | 167 | 168 | /* Utilities 169 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 170 | .u-full-width { 171 | width: 100%; 172 | box-sizing: border-box; } 173 | .u-max-full-width { 174 | max-width: 100%; 175 | box-sizing: border-box; } 176 | .u-pull-right { 177 | float: right; } 178 | .u-pull-left { 179 | float: left; } 180 | 181 | 182 | /* Misc 183 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 184 | hr { 185 | margin-top: 3rem; 186 | margin-bottom: 3.5rem; 187 | border-width: 0; 188 | border-top: 1px solid #E1E1E1; } 189 | 190 | @media (prefers-color-scheme: dark) { 191 | /* ===== Scrollbar CSS ===== */ 192 | /* Firefox */ 193 | * { 194 | scrollbar-width: thin; 195 | scrollbar-color: #171a1d #31363b; 196 | } 197 | 198 | /* Chrome, Edge, and Safari */ 199 | *::-webkit-scrollbar { 200 | width: 8px; 201 | } 202 | 203 | *::-webkit-scrollbar-track { 204 | background: #31363b; 205 | } 206 | 207 | *::-webkit-scrollbar-thumb { 208 | background-color: #171a1d; 209 | border-radius: 30px; 210 | border: 3px none #ffffff; 211 | } 212 | 213 | } 214 | 215 | @media (prefers-color-scheme: light) { 216 | /* ===== Scrollbar CSS ===== */ 217 | /* Firefox */ 218 | * { 219 | scrollbar-width: thin; 220 | scrollbar-color: #323232 #dbdbdb; 221 | } 222 | 223 | /* Chrome, Edge, and Safari */ 224 | *::-webkit-scrollbar { 225 | width: 8px; 226 | } 227 | 228 | *::-webkit-scrollbar-track { 229 | background: #dbdbdb; 230 | } 231 | 232 | *::-webkit-scrollbar-thumb { 233 | background-color: #323232; 234 | border-radius: 30px; 235 | border: 3px none #ffffff; 236 | } 237 | 238 | } 239 | 240 | /* Credit footer 241 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 242 | /* Styling for credit footer text */ 243 | .credit-txt { 244 | font-weight: 700; 245 | font-size: 15px; 246 | text-decoration: none; 247 | } 248 | 249 | /* Some fonts shift the credit footer icon around  250 | /* You can uncomment this to hide the icon and only display the text 251 | .credit-icon { 252 | display: none; } 253 | .credit-footer { 254 | position: relative; 255 | right: 15px; } 256 | */ 257 | 258 | /* Switches text color for credit footer for dark/light mode */ 259 | @media (prefers-color-scheme: dark) { 260 | .credit-txt-clr{ 261 | color: #FFF !important; 262 | } 263 | } 264 | @media (prefers-color-scheme: light) { 265 | .credit-txt-clr{ 266 | color: #100a26 !important; 267 | } 268 | } 269 | --------------------------------------------------------------------------------