Something went wrong. Try again.
Personal fork of the littlelink project
Something went wrong. Try again.
12 kB · 461 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462/** LittleLink* https://littlelink.io* Free to use under the MIT license* http://www.opensource.org/licenses/mit-license.php*/
/* Base Typography Settings–––––––––––––––––––––––––––––––––––––––––––––––––– */:root { font-size: 16px;}
/* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */.container { position: relative; width: 100%; max-width: 37.5rem; /* 600px */ text-align: center; margin: 0 auto; padding: 3rem 1.25rem 0 1.25rem; box-sizing: border-box;}
.container-left { position: relative; width: 100%; max-width: 37.5rem; text-align: left; margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box;}
.container-left p { margin-bottom: 1rem; /* 16px space between paragraphs */}
.column { position: center; width: 100%; float: center; box-sizing: border-box;}
/* For devices larger than 400px */@media (min-width:25rem) {
/* 400px */ .container { width: 85%; padding-left: 0; padding-right: 0; }}
/* For devices larger than 550px */@media (min-width:34.375rem) {
/* 550px */ .container { width: 80%; }
.column, .columns { margin-left: 0; }
.column:first-child, .columns:first-child { margin-left: 0; }}
/* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */body { margin: 0; padding: 0; background-color: #ffffff; color: #1a1a1a; font-family: "Open Sans", system-ui; font-size: 1.125rem; /* 18px */ font-weight: 400; line-height: 1.6;}
/* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */h1 { margin: 0 0 0.5rem 0; font-size: 3rem; /* 48px */ font-weight: 800; line-height: 1; letter-spacing: 0; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; /* Delete this to remove automatic hyphen on line break */}
.container p { margin: 0 0 2rem 0;}
/* Base Typography Settings–––––––––––––––––––––––––––––––––––––––––––––––––– *//* Base size - 16px browser default */:root { font-size: 16px; /* Using a 1.25 modular scale for typography */ --scale-0: 1rem; /* 16px */ --scale-1: 1.25rem; /* 20px */ --scale-2: 1.563rem; /* 25px */ --scale-3: 1.953rem; /* 31px */ --scale-4: 2.441rem; /* 39px */ --scale-5: 3.052rem; /* 49px */
/* Spacing units */ --spacing-xs: 0.5rem; /* 8px */ --spacing-s: 1rem; /* 16px */ --spacing-m: 1.5rem; /* 24px */ --spacing-l: 2rem; /* 32px */ --spacing-xl: 3rem; /* 48px */ --spacing-xxl: 4rem; /* 64px */}
/* Avatar */.avatar { width: 8rem; /* 128px */ height: 8rem; border-radius: 50%; object-fit: cover; background-position: center; margin-bottom: var(--spacing-l); margin-left: auto; margin-right: auto; display: block;}
/* Typography Scale */h1 { margin: 0 0 var(--spacing-m) 0; font-size: var(--scale-5); /* ~49px */ font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; word-wrap: break-word; overflow-wrap: break-word;}
body { font-size: var(--scale-1); /* 20px */ line-height: 1.6;}
.container p { margin: 0 0 var(--spacing-xl) 0; font-size: var(--scale-1); line-height: 1.6;}
/* Container spacing */.container { padding: var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m); text-align: center;}
/* Footer */footer { margin: var(--spacing-xxl) 0; /* 4rem (64px) top and bottom */ font-size: var(--scale-0);}
/* Responsive adjustments */@media (max-width:34.375rem) {
/* 550px */ h1 { font-size: var(--scale-4); }
body { font-size: var(--scale-0); }
.container p { font-size: var(--scale-0); }
.avatar { margin-bottom: var(--spacing-m); }
footer { margin: var(--spacing-xl) 0; /* 3rem (48px) top and bottom */ }}
/* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */a { color: #2457F5; text-decoration: underline;}
a:hover { color: #083BDA;}
/* Buttons–––––––––––––––––––––––––––––––––––––––––––––––––– */.button,button { display: inline-flex; align-items: center; justify-content: center; width: 18.75rem; /* 300px */ min-height: 3rem; /* 48px */ padding: 0.75rem 1rem; /* 12px ; 16px */ font-size: 1.125rem; /* 18px */ font-weight: 700; text-decoration: none; white-space: normal; background-color: var(--button-background, transparent); color: var(--button-text, #000000); border: var(--button-border, none); border-radius: 0.5rem; cursor: pointer; box-sizing: border-box; hyphens: auto; /* Delete this to remove automatic hyphen on line break */ margin-bottom: 1rem; text-align: center; line-height: 1.3;}
/* Icons–––––––––––––––––––––––––––––––––––––––––––––––––– */.icon { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; flex-shrink: 0;}
/* Avatar –––––––––––––––––––––––––––––––––––––––––––––––––– */.avatar { width: 8rem; /* 128px */ height: 8rem; object-fit: cover; background-position: center; margin-bottom: var(--spacing-l);}
/* Modifier for no avatar rounding */.avatar--none { border-radius: 0%;}
/* Modifier for rounded avatar */.avatar--rounded { border-radius: 50%;}
/* Modifier for slightly rounded corners */.avatar--soft { border-radius: 0.5rem; /* 8px rounded corners */}
/* Theme System –––––––––––––––––––––––––––––––––––––––––––––––––– *//* Light theme is default above */
/* Dark theme */:root.theme-dark { color-scheme: dark;}
:root.theme-dark :focus-visible { outline: 2px solid #4899F7; outline-offset: 2px;}
:root.theme-dark body { background-color: #121212; color: #ffffff;}
:root.theme-dark a:not(.button) { color: #4899F7;}
:root.theme-dark a:not(.button):hover { color: #7AB8FF;}
/* Auto theme */:root.theme-auto { color-scheme: light dark;}
@media (prefers-color-scheme:dark) { :root.theme-auto body { background-color: #121212; color: #ffffff; }
:root.theme-auto :focus-visible { outline: 2px solid #4899F7; outline-offset: 2px; }
:root.theme-auto a:not(.button) { color: #4899F7; }
:root.theme-auto a:not(.button):hover { color: #7AB8FF; }}
/* Button Text Color Override –––––––––––––––––––––––––––––––––––––––––––––––––– */.button:hover,button:hover { color: var(--button-text);}
/* Responsive Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */@media (max-width:34.375rem) {
/* 550px */ h1 { font-size: 2rem; /* 32px */ }
body { font-size: 1rem; /* 16px */ }}
/* Privacy Page Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */nav { margin: var(--spacing-l) 0; text-align: left;}
section { margin: var(--spacing-xl) 0; text-align: left;}
h2 { font-size: var(--scale-3); font-weight: 700; margin-bottom: var(--spacing-m);}
h3 { font-size: var(--scale-2); font-weight: 600; margin: var(--spacing-l) 0 var(--spacing-s) 0;}
ul { list-style: none; padding: 0; margin: 0 0 var(--spacing-m) 0;}
ul li { margin-bottom: var(--spacing-xs);}
/* Privacy page specific responsive adjustments */@media (max-width:34.375rem) { h2 { font-size: var(--scale-2); }
h3 { font-size: var(--scale-1); }
section { margin: var(--spacing-l) 0; }}
/* Font Face Definitions –––––––––––––––––––––––––––––––––––––––––––––––––– */@font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot'); src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans') format('svg');}
@font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot'); src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf') format('truetype'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans') format('svg');}
@font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot'); src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans') format('svg');}
@font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot'); src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff') format('woff'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.ttf') format('truetype'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.svg#OpenSans') format('svg');}