diff --git a/brands.css b/brands.css new file mode 100644 index 0000000..88c1bd3 --- /dev/null +++ b/brands.css @@ -0,0 +1,72 @@ + +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– + +- Rounded user avatars +- Buttons +- Brand Styles + +*/ + + +/* Rounded avatars +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +/* Disable this if you don't want rounded avatars for users */ +.rounded-avatar { + border-radius: 50%; +} + + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +.button, +button { + display: inline-block; + text-decoration: none; + height: 48px; + text-align: center; + vertical-align: middle; + font-size: 16px; + width: 680px; + font-weight: 400; + line-height: 48px; + letter-spacing: 0.1px; + white-space: wrap; + border-radius: 8px; + cursor: pointer; + color: #1f365c; + background-color: #ffffff; + box-shadow: 0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1), inset 0px 0px 2px 1px rgba(24, 39, 75, 0.05); + } +button:hover, +.button:focus { + color: #333; + border-color: #888; + outline: 0; } +.button.button-primary { + color: #FFF; + filter: brightness(90%) } +.button.button-primary:hover, +.button.button-primary:focus { + color: #FFF; + filter: brightness(90%) } + + .button:hover { + color: #1f365c; + } + +/* Brand Icons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +.icon { + padding: 0px 8px 3.5px 0px; + vertical-align: middle; + width: 30px; + height: 30px; +} + +svg { + color: #000000; +} \ No newline at end of file diff --git a/preview.png b/preview.png new file mode 100644 index 0000000..1f61b3f Binary files /dev/null and b/preview.png differ diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..a335f80 --- /dev/null +++ b/readme.md @@ -0,0 +1,23 @@ +# A LittleLink Custom Theme +Find more themes: https://github.com/JulianPrieber/llc-themes + +* Theme Name: Winter Wonderland +* Theme Version: 1.0 +* Theme Date: 2022-05-21 +* Theme Author: JulianPrieber +* Theme Author URI: https://github.com/JulianPrieber +* Theme License: GPLv3 + + +### Used assets: +* Built using: +* https://github.com/dhg/Skeleton +* License: MIT + +* +* https://github.com/SamirPaul1/links +* License: - + +* +* https://codepen.io/keithclark/pen/DjXzBw +* License: MIT \ No newline at end of file diff --git a/share.button.css b/share.button.css new file mode 100644 index 0000000..b9697d4 --- /dev/null +++ b/share.button.css @@ -0,0 +1,106 @@ +.share-icon { + padding: 0px 8px 3.5px 0px; + vertical-align: middle; + width: 20px; + height: 20px; +} + +.sharediv { + position:relative; + top: 30px; + right: 30px; + padding-bottom: 40px; +} + +.toastdiv { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; +} + +.toastbox { + width: 280px; + padding: 10px; + background-color: rgba(0, 0, 0, 0.7); + color: white; + border-radius: 4px; + position: fixed; + top: 105%; + -webkit-transition: transform 0.3s linear; + transition: transform 0.3s linear; + z-index: 2; + text-align: center; +} +.toastbox.toast-tox--active { + -webkit-transform: translateY(-150px); + transform: translateY(-150px); +} + .sharebutton, + sharebutton { + display: inline-block; + text-decoration: none; + height: 48px; + text-align: center; + vertical-align: middle; + font-size: 18px; + width: 48px; + font-weight: 700; + line-height: 48px; + letter-spacing: 0.1px; + white-space: wrap; + border-radius: 8px; + cursor: pointer; + color: #000000; + background-color: #ffffff; + box-shadow: 0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1), inset 0px 0px 2px 1px rgba(24, 39, 75, 0.05); + } +@media screen and (min-width: 600px) { + .sharebutton, + sharebutton { + display: inline-block; + text-decoration: none; + height: 48px; + text-align: center; + vertical-align: middle; + font-size: 18px; + width: 150px; + font-weight: 700; + line-height: 48px; + letter-spacing: 0.1px; + white-space: wrap; + border-radius: 8px; + cursor: pointer; + color: #000000; + background-color: #ffffff; + box-shadow: 0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1), inset 0px 0px 2px 1px rgba(24, 39, 75, 0.05); + } +} +sharebutton:hover, +.sharebutton:hover { + color: #000000; + opacity: 0.85; + filter: alpha(opacity=40); + border-color: #888; + outline: 0; } +.sharebutton.sharebutton-primary { + color: #FFFFFF; + filter: brightness(90%) } +.sharebutton.sharebutton-primary:hover, +.sharebutton.sharebutton-primary:focus { + color: #FFFFFF; + filter: brightness(90%) } + + @media screen and (max-width: 600px) { + .sharebutton-mb { + display: none; + } + .sharebutton-img { + position: relative; + left: 3px; + margin-left: auto; + margin-right: auto; + } + } diff --git a/skeleton-auto.css b/skeleton-auto.css new file mode 100644 index 0000000..a50c362 --- /dev/null +++ b/skeleton-auto.css @@ -0,0 +1,285 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); + + +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– + +- Grid +- Base Styles +- Typography +- Links +- Code +- Spacing +- Utilities +- Misc +- Credit footer + +*/ + + +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 100%; + max-width: 700px; + text-align: center; + margin: 0 auto; + box-sizing: border-box; } + .column { + position: center; + width: 100%; + float: center; + box-sizing: border-box; } + + /* For devices larger than 400px */ + @media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } + } + + /* For devices larger than 550px */ + @media (min-width: 550px) { + .container { + width: 80%; } + .column, + .columns { + margin-left: 0; } + .column:first-child, + .columns:first-child { + margin-left: 0; } + + } + + + /* Base Styles + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + /* NOTE + html is set to 62.5% so that all the REM measurements throughout Skeleton + are based on 10px sizing. So basically 1.5rem = 15px :) */ + + html { + font-size: 100%; } + + /* Dark/light mode detection (comment this section out and use the one below for a fixed background color) */ + body { + font-size: 16px; + background-image: url('https://raw.githubusercontent.com/JulianPrieber/winter-wonderland/main/background.png'); + background-size: cover; + background-attachment: fixed; + font-family: 'Inter', sans-serif; + height: 100%; + color: #1F365C; + background-position: center center; + } + + + +/* Use this for a fixed background color instead of dark and light mode + body { + font-size: 18px; + line-height: 24px; + font-weight: 400; + font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, + sans-serif; + } +*/ + + /* Typography + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + h1 { + margin-top: 0; + margin-bottom: 16px; + font-weight: 800; } + h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} + + + /* Larger than phablet */ + @media (min-width: 550px) { + h1 { font-size: 48px; line-height: 96px;} + } + + p { + margin-top: 0; } + + + /* Links + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + a { + color: #1F365C; + text-decoration: none; + } + a:hover { + color: #2c2c2c; } + + .spacing { + padding: 0 10px; + } + + /* Code + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; } + pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; } + + /* Spacing + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + button, + .button { + margin-bottom: 1rem; } + input, + textarea, + select, + fieldset { + margin-bottom: 1.5rem; } + pre, + blockquote, + dl, + figure, + p, + ol { + margin-bottom: 2.5rem; } + + + /* Utilities + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + .u-full-width { + width: 100%; + box-sizing: border-box; } + .u-max-full-width { + max-width: 100%; + box-sizing: border-box; } + .u-pull-right { + float: right; } + .u-pull-left { + float: left; } + + + /* Misc + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; } + + @media (prefers-color-scheme: dark) { + /* ===== Scrollbar CSS ===== */ + /* Firefox */ + * { + scrollbar-width: thin; + scrollbar-color: #171a1d #31363b; + } + + /* Chrome, Edge, and Safari */ + *::-webkit-scrollbar { + width: 8px; + } + + *::-webkit-scrollbar-track { + background: #31363b; + } + + *::-webkit-scrollbar-thumb { + background-color: #171a1d; + border-radius: 30px; + border: 3px none #ffffff; + } + + } + + @media (prefers-color-scheme: light) { + /* ===== Scrollbar CSS ===== */ + /* Firefox */ + * { + scrollbar-width: thin; + scrollbar-color: #323232 #dbdbdb; + } + + /* Chrome, Edge, and Safari */ + *::-webkit-scrollbar { + width: 8px; + } + + *::-webkit-scrollbar-track { + background: #dbdbdb; + } + + *::-webkit-scrollbar-thumb { + background-color: #323232; + border-radius: 30px; + border: 3px none #ffffff; + } + + } + +/* Credit footer +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* Styling for credit footer text */ +.credit-txt { + font-weight: 700; + font-size: 15px; + text-decoration: none; +} + +/* Some fonts shift the credit footer icon around  +/* You can uncomment this to hide the icon and only display the text +.credit-icon { + display: none; } +.credit-footer { + position: relative; + right: 15px; } +*/ + +/* Switches text color for credit footer for dark/light mode */ + + .credit-txt-clr{ + color: #1F365C !important; + font-weight: 700; + } + + + +.parallax-background, .parallax-background:before, .parallax-background:after { + position: absolute; + top: -600px; + left: 0; + bottom: 0; + right: 0; + background-image: radial-gradient(6px 6px at 185px 15px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 493px 337px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 20px 383px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 203px 229px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 157px 509px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 291px 115px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 119px 381px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 486px 465px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 260px 45px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 446px 397px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 411px 428px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 317px 276px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 365px 501px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 585px 464px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 20px 293px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 386px 388px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 353px 357px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 335px 470px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 48px 280px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 239px 62px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 118px 224px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 259px 232px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 570px 411px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 182px 544px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 589px 541px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 184px 194px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 468px 275px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 151px 282px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 520px 151px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 98px 93px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 352px 13px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 362px 42px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 118px 38px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 359px 309px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 97px 220px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 13px 235px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 162px 569px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 230px 250px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 11px 483px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 395px 520px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 419px 418px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 264px 215px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 122px 460px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 78px 267px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 52px 514px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 484px 186px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 213px 226px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 11px 339px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 373px 339px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 525px 393px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 150px 98px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 273px 15px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 329px 247px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 217px 130px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 119px 434px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 353px 204px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 236px 577px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 173px 483px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 410px 403px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 38px 23px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 241px 166px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 262px 328px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 439px 560px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 441px 597px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 68px 334px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 322px 485px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 305px 345px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 374px 353px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 222px 261px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 93px 301px, white 50%, rgba(0, 0, 0, 0)); + background-size: 600px 600px; + animation: parallax-background 3s linear infinite; + content: ""; +} + +.parallax-background:after { + margin-left: -200px; + opacity: 0.4; + animation-duration: 6s; + animation-direction: reverse; + filter: blur(3px); +} + +.parallax-background:before { + animation-duration: 9s; + animation-direction: reverse; + margin-left: -300px; + opacity: 0.65; + filter: blur(1.5px); +} + +@keyframes parallax-background { + to { + transform: translateY(600px); + } +} \ No newline at end of file