627 lines
14 KiB
CSS
627 lines
14 KiB
CSS
/* Font Face Definitions
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
|
||
@font-face {
|
||
font-family: "IBM Plex Sans";
|
||
src: url(fonts/IBMPlexSans.ttf)
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "IBM Plex Mono";
|
||
src: url(fonts/IBMPlexMono.ttf)
|
||
}
|
||
|
||
/*
|
||
* LittleLink Reset
|
||
* A minimal CSS reset for LittleLink
|
||
*/
|
||
|
||
/* Box sizing rules */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Remove default margin */
|
||
body,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
p,
|
||
figure,
|
||
blockquote,
|
||
dl,
|
||
dd {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Remove list styles on ul, ol elements */
|
||
ul,
|
||
ol {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Set core root defaults */
|
||
html:focus-within {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
/* Set core body defaults */
|
||
body {
|
||
min-height: 100vh;
|
||
text-rendering: optimizeSpeed;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* Make images easier to work with */
|
||
img,
|
||
picture {
|
||
max-width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
/* Inherit fonts for inputs and buttons */
|
||
input,
|
||
button,
|
||
textarea,
|
||
select {
|
||
font: inherit;
|
||
}
|
||
|
||
/* Remove all animations and transitions for people that prefer not to see them */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html:focus-within {
|
||
scroll-behavior: auto;
|
||
}
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
|
||
/* Modern focus styles */
|
||
:focus:not(:focus-visible) {
|
||
outline: none;
|
||
}
|
||
|
||
:focus-visible {
|
||
outline: 2px solid #2457F5;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Remove touch callout on iOS */
|
||
a {
|
||
-webkit-touch-callout: none;
|
||
}
|
||
|
||
/*
|
||
* 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:"IBM Plex Sans",sans-serif;
|
||
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;
|
||
}
|
||
.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-0a:1.125rem; /* 18px */
|
||
--scale-1:1.125rem; /* 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-l) 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-l) 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-0a);
|
||
}
|
||
.avatar {
|
||
margin-bottom:var(--spacing-m);
|
||
}
|
||
footer {
|
||
margin:var(--spacing-xl) 0; /* 3rem (48px) top and bottom */
|
||
}
|
||
}
|
||
|
||
/* Links
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
a {
|
||
color:#0085ff;
|
||
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 rounded avatar */
|
||
.avatar--rounded {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
}
|
||
|
||
/*
|
||
* LittleLink Button Styles
|
||
* https://littlelink.io
|
||
* Free to use under the MIT license
|
||
* http://www.opensource.org/licenses/mit-license.php
|
||
*/
|
||
|
||
/* Brand Button Base Styles
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
/* Only include brand-specific button styling here */
|
||
.button,button {
|
||
color:var(--button-text,#000000);
|
||
background-color:var(--button-background,transparent);
|
||
border:var(--button-border,none);
|
||
transition:filter 0.2s ease,transform 0.2s ease;
|
||
}
|
||
|
||
/* Global Button Hover Effect
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
@media (hover: hover) {
|
||
.button:hover,button:hover {
|
||
filter:brightness(90%);
|
||
transform:translateY(-1px);
|
||
}
|
||
}
|
||
|
||
/* Button Icons
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
.icon {
|
||
filter:var(--icon-filter,none);
|
||
}
|
||
|
||
/* Brand-Specific Styles
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
|
||
/* Default */
|
||
.button.button-default {
|
||
--button-text:#ffffff;
|
||
--button-background:#0085ff;
|
||
}
|
||
|
||
/* Beeper */
|
||
.button-beeper {
|
||
--button-text:#ffffff;
|
||
--button-background:#355bf3;
|
||
}
|
||
|
||
.button-beeper .icon {
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
margin-right: 0.25rem;
|
||
}
|
||
|
||
/* Initial Charge */
|
||
.button-initialcharge {
|
||
--button-text:#ffffff;
|
||
--button-background:#000000;
|
||
--button-border:2px solid #ffffff;
|
||
}
|
||
|
||
.button-initialcharge .icon {
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
margin-right: 0.25rem;
|
||
}
|
||
|
||
/* Last.fm */
|
||
.button-last-fm {
|
||
--button-text:#ffffff;
|
||
--button-background:#f71414;
|
||
}
|
||
|
||
/* Mastodon */
|
||
.button-mastodon {
|
||
--button-text:#ffffff;
|
||
--button-background:#1f232b;
|
||
}
|
||
|
||
/* MetaGamerScore */
|
||
.button-metagamerscore {
|
||
--button-text:#000000;
|
||
--button-background:#f0f0f0;
|
||
}
|
||
|
||
/* PayPal */
|
||
.button-paypal {
|
||
--button-text:#ffffff;
|
||
--button-background:#002991;
|
||
--button-border:1px solid #FFFFFF;
|
||
}
|
||
|
||
/* Pixelfed */
|
||
.button-pixelfed {
|
||
--button-text:#000000;
|
||
--button-background:#ffffff;
|
||
--button-border:2px solid #000000;
|
||
}
|
||
|
||
/* Value for Value */
|
||
.button-v4v {
|
||
--button-text:#ffffff;
|
||
--button-background:#1DBF73;
|
||
}
|
||
|
||
.button-v4v .icon {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
/* Custom Styles
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
|
||
details.value-block > summary {
|
||
list-style: none;
|
||
width: fit-content;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
details.value-block > summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.value-block ul {
|
||
list-style-type: none;
|
||
padding-inline-start: 0;
|
||
}
|
||
|
||
.value-block code {
|
||
font-size: .75rem
|
||
}
|
||
|
||
code, kbd, pre, samp {
|
||
font-family: "IBM Plex Mono", monospace;
|
||
}
|
||
|
||
.value-block code {
|
||
padding: .2rem .5rem;
|
||
margin: 0 .2rem;
|
||
white-space: nowrap;
|
||
background: #f1f1f1;
|
||
border: 1px solid #e1e1e1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Fix v4v details block hover and open styles */
|
||
details[open] summary span.button.button-v4v {
|
||
filter: brightness(90%);
|
||
transform: 0px;
|
||
}
|
||
@media (hover: hover) {
|
||
details[open] summary span.button.button-v4v:hover {
|
||
transform: -1px;
|
||
}
|
||
}
|
||
|
||
details:not([open]) {
|
||
filter: brightness(100%);
|
||
transform: 0px;
|
||
}
|
||
@media (hover: hover) {
|
||
details:not([open]) summary span.button.button-v4v:hover {
|
||
filter: brightness(90%);
|
||
transform: -1px;
|
||
}
|
||
}
|
||
/* /end Fix v4v details block hover and open styles */
|
||
|
||
p.value-explainer {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
details.value-block ul li {
|
||
margin-bottom:32px
|
||
}
|
||
details.value-block ul li img {
|
||
margin-left:auto;
|
||
margin-right:auto;
|
||
}
|
||
|
||
span.button.button-v4v {
|
||
margin-bottom:0;
|
||
} |