Infra-Mirrors/littlelink
1
0
Fork 0
mirror of https://github.com/sethcottle/littlelink.git synced 2024-12-27 16:19:23 -05:00
Code Issues Packages Projects Releases Wiki Activity
44aa76a2ce
littlelink/css/style.css

383 lines
12 KiB
CSS
Raw Normal View History

v3
2024-11-13 01:04:11 -05:00
/*
* 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 */
Updates!
2024-11-13 11:51:51 -05:00
min-height:3rem; /* 48px */
v3
2024-11-13 01:04:11 -05:00
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');
}
Reference in New Issue Copy Permalink