description, inline icons.
This commit is contained in:
mdrockwell committed
1 parent
2f16a9538e
commit
936666bacc
3 files changed
+308
-303
No files matched your search
+1
-1
@@ -1 +1 @@
|
||||
.container,.container-left{position:relative;max-width:37.5rem;margin:0 auto}.column,.container,.container-left{width:100%;box-sizing:border-box}body,ol,ul{margin:0;padding:0}*,.button,.column,.container,.container-left,::after,::before,button{box-sizing:border-box}.avatar{object-fit:cover}ol,ul{list-style:none}@font-face{font-family:"IBM Plex Sans";src:url(../fonts/IBMPlexSans.ttf)}@font-face{font-family:"IBM Plex Mono";src:url(../fonts/IBMPlexMono.ttf)}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}:focus:not(:focus-visible){outline:0}:focus-visible{outline:#2457F5 solid 2px;outline-offset:2px}a{color:#0085ff;text-decoration:underline}.container{padding:3rem 1.25rem 0}.container-left{text-align:left;padding:0 1.25rem}.container-left p{margin-bottom:1rem}.column{position:center;float:center}@media (min-width:25rem){.container{width:85%;padding-left:0;padding-right:0}}@media (min-width:34.375rem){.container{width:80%}.column,.column:first-child,.columns,.columns:first-child{margin-left:0}}.avatar,details.value-block ul li img,details.value-block>summary{margin-left:auto;margin-right:auto}body{background-color:#fff;color:#1a1a1a;font-family:"IBM Plex Sans",sans-serif;font-size:1.125rem;font-weight:400}.button,button{color:var(--button-text,#000);background-color:var(--button-background,transparent)}h1{margin:0 0 .5rem;font-size:3rem;letter-spacing:0;word-wrap:break-word;overflow-wrap:break-word;margin:0 0 var(--spacing-m) 0;font-size:var(--scale-5);font-weight:800;line-height:1.1;letter-spacing:-.02em;word-wrap:break-word;overflow-wrap:break-word}.container p,body{font-size:var(--scale-1);line-height:1.6}.container p{margin:0 0 2rem;margin:0 0 var(--spacing-l) 0}:root{font-size:16px;--scale-0:1rem;--scale-0a:1.125rem;--scale-1:1.125rem;--scale-2:1.563rem;--scale-3:1.953rem;--scale-4:2.441rem;--scale-5:3.052rem;--spacing-xs:0.5rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:3rem;--spacing-xxl:4rem}.avatar{border-radius:50%;margin-bottom:var(--spacing-l);display:block}.container{padding:var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);text-align:center}footer{margin:var(--spacing-l) 0;font-size:var(--scale-0)}@media (max-width:34.375rem){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}h1{font-size:2rem}body{font-size:1rem}}a:hover{color:#083bda}.button,button{display:inline-flex;align-items:center;justify-content:center;width:18.75rem;min-height:3rem;padding:.75rem 1rem;font-size:1.125rem;font-weight:700;text-decoration:none;white-space:normal;border:var(--button-border,none);border-radius:.5rem;cursor:pointer;hyphens:auto;margin-bottom:1rem;text-align:center;line-height:1.3}nav,section{text-align:left}.icon{width:1.25rem;height:1.25rem;margin-right:.5rem;flex-shrink:0;filter:var(--icon-filter,none)}.avatar{width:8rem;height:8rem;background-position:center;margin-bottom:var(--spacing-l)}.avatar--rounded{border-radius:50%}:root.theme-dark{color-scheme:dark}:root.theme-dark :focus-visible{outline:#4899F7 solid 2px;outline-offset:2px}:root.theme-dark body{background-color:#121212;color:#fff}:root.theme-dark a:not(.button){color:#4899f7}:root.theme-dark a:not(.button):hover{color:#7ab8ff}:root.theme-auto{color-scheme:light dark}@media (prefers-color-scheme:dark){:root.theme-auto body{background-color:#121212;color:#fff}:root.theme-auto :focus-visible{outline:#4899F7 solid 2px;outline-offset:2px}:root.theme-auto a:not(.button){color:#4899f7}:root.theme-auto a:not(.button):hover{color:#7ab8ff}}.button:hover,button:hover{color:var(--button-text)}nav{margin:var(--spacing-l) 0}section{margin:var(--spacing-xl) 0}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{padding:0;margin:0 0 var(--spacing-m) 0}ul li{margin-bottom:var(--spacing-xs)}@media (max-width:34.375rem){h2{font-size:var(--scale-2)}h3{font-size:var(--scale-1)}section{margin:var(--spacing-l) 0}}.button,button{border:var(--button-border,none);transition:filter .2s,transform .2s}.button.button-default{--button-text:#ffffff;--button-background:#0085ff}.button-beeper{--button-text:#ffffff;--button-background:#355bf3}.button-beeper .icon,.button-initialcharge .icon{width:1.5rem;height:1.5rem;margin-right:.25rem}.button-initialcharge{--button-text:#ffffff;--button-background:#000000;--button-border:2px solid #ffffff}.button-last-fmLine truncated
|
||||
.container,.container-left{position:relative;max-width:37.5rem;margin:0 auto}.column,.container,.container-left{width:100%;box-sizing:border-box}body,ol,ul{margin:0;padding:0}*,.button,.column,.container,.container-left,::after,::before,button{box-sizing:border-box}.avatar{object-fit:cover}ol,ul{list-style:none}@font-face{font-family:"IBM Plex Sans";src:url(../fonts/IBMPlexSans.ttf)}@font-face{font-family:"IBM Plex Mono";src:url(../fonts/IBMPlexMono.ttf)}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}:focus:not(:focus-visible){outline:0}:focus-visible{outline:#2457F5 solid 2px;outline-offset:2px}a{color:#0085ff;text-decoration:underline}.container{padding:3rem 1.25rem 0}.container-left{text-align:left;padding:0 1.25rem}.container-left p{margin-bottom:1rem}.column{position:center;float:center}@media (min-width:25rem){.container{width:85%;padding-left:0;padding-right:0}}@media (min-width:34.375rem){.container{width:80%}.column,.column:first-child,.columns,.columns:first-child{margin-left:0}}.avatar,details.value-block ul li img,details.value-block>summary{margin-left:auto;margin-right:auto}body{background-color:#fff;color:#1a1a1a;font-family:"IBM Plex Sans",sans-serif;font-size:1.125rem;font-weight:400}.button,button{color:var(--button-text,#000);background-color:var(--button-background,transparent)}h1{margin:0 0 .5rem;font-size:3rem;letter-spacing:0;word-wrap:break-word;overflow-wrap:break-word;margin:0 0 var(--spacing-m) 0;font-size:var(--scale-5);font-weight:800;line-height:1.1;letter-spacing:-.02em;word-wrap:break-word;overflow-wrap:break-word}.container p,body{font-size:var(--scale-1);line-height:1.6}.container p{margin:0 0 2rem;margin:0 0 var(--spacing-l) 0}:root{font-size:16px;--scale-0:1rem;--scale-0a:1.125rem;--scale-1:1.125rem;--scale-2:1.563rem;--scale-3:1.953rem;--scale-4:2.441rem;--scale-5:3.052rem;--spacing-xs:0.5rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:3rem;--spacing-xxl:4rem}.avatar{border-radius:50%;margin-bottom:var(--spacing-l);display:block}.container{padding:var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);text-align:center}footer{margin:var(--spacing-l) 0;font-size:var(--scale-0)}@media (max-width:34.375rem){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}h1{font-size:2rem}body{font-size:1rem}}a:hover{color:#083bda}.button,button{display:inline-flex;align-items:center;justify-content:center;width:18.75rem;min-height:3rem;padding:.75rem 1rem;font-size:1.125rem;font-weight:700;text-decoration:none;white-space:normal;border:var(--button-border,none);border-radius:.5rem;cursor:pointer;hyphens:auto;margin-bottom:1rem;text-align:center;line-height:1.3}nav,section{text-align:left}.icon{width:1.25rem;height:1.25rem;margin-right:.5rem;flex-shrink:0;filter:var(--icon-filter,none)}.avatar{width:8rem;height:8rem;background-position:center;margin-bottom:var(--spacing-l)}.avatar--rounded{border-radius:50%}:root.theme-dark{color-scheme:dark}:root.theme-dark :focus-visible{outline:#4899F7 solid 2px;outline-offset:2px}:root.theme-dark body{background-color:#121212;color:#fff}:root.theme-dark a:not(.button){color:#4899f7}:root.theme-dark a:not(.button):hover{color:#7ab8ff}:root.theme-auto{color-scheme:light dark}@media (prefers-color-scheme:dark){:root.theme-auto body{background-color:#121212;color:#fff}:root.theme-auto :focus-visible{outline:#4899F7 solid 2px;outline-offset:2px}:root.theme-auto a:not(.button){color:#4899f7}:root.theme-auto a:not(.button):hover{color:#7ab8ff}}.button:hover,button:hover{color:var(--button-text)}nav{margin:var(--spacing-l) 0}section{margin:var(--spacing-xl) 0}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{padding:0;margin:0 0 var(--spacing-m) 0}ul li{margin-bottom:var(--spacing-xs)}@media (max-width:34.375rem){h2{font-size:var(--scale-2)}h3{font-size:var(--scale-1)}section{margin:var(--spacing-l) 0}}.button,button{border:var(--button-border,none);transition:filter .2s,transform .2s}.button.button-default{--button-text:#ffffff;--button-background:#0085ff}.button-beeper{--button-text:#ffffff;--button-background:#355bf3}.button-beeper .icon,.button-initialcharge .icon{width:1.5rem;height:1.5rem;margin-right:.25rem}.button-initialcharge{--button-text:#ffffff;--button-background:#000000;--button-border:2px solid #ffffff}.button-last-fmLine truncated
|
||||
+306
-301
@@ -2,13 +2,13 @@
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url(../fonts/IBMPlexSans.ttf);
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url(../fonts/IBMPlexSans.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url(../fonts/IBMPlexMono.ttf);
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url(../fonts/IBMPlexMono.ttf);
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -20,7 +20,7 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove default margin */
|
||||
@@ -34,35 +34,35 @@ figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements */
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Set core root defaults */
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
text-rendering: optimizeSpeed;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
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;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
@@ -70,32 +70,32 @@ input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
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;
|
||||
}
|
||||
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;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid #2457f5;
|
||||
outline-offset: 2px;
|
||||
outline: 2px solid #2457f5;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Remove touch callout on iOS
|
||||
@@ -114,235 +114,235 @@ select {
|
||||
/* Base Typography Settings
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
:root {
|
||||
font-size: 16px;
|
||||
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;
|
||||
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;
|
||||
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 */
|
||||
margin-bottom: 1rem; /* 16px space between paragraphs */
|
||||
}
|
||||
.column {
|
||||
position: center;
|
||||
width: 100%;
|
||||
float: center;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
/* 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;
|
||||
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;
|
||||
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;
|
||||
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 */
|
||||
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 */
|
||||
/* 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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
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 */
|
||||
}
|
||||
/* 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;
|
||||
color: #0085ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
color: #083bda;
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
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%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Theme System
|
||||
@@ -351,103 +351,103 @@ button {
|
||||
|
||||
/* Dark theme */
|
||||
:root.theme-dark {
|
||||
color-scheme: dark;
|
||||
color-scheme: dark;
|
||||
}
|
||||
:root.theme-dark :focus-visible {
|
||||
outline: 2px solid #4899f7;
|
||||
outline-offset: 2px;
|
||||
outline: 2px solid #4899f7;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
:root.theme-dark body {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
:root.theme-dark a:not(.button) {
|
||||
color: #4899f7;
|
||||
color: #4899f7;
|
||||
}
|
||||
:root.theme-dark a:not(.button):hover {
|
||||
color: #7ab8ff;
|
||||
color: #7ab8ff;
|
||||
}
|
||||
|
||||
/* Auto theme */
|
||||
:root.theme-auto {
|
||||
color-scheme: light dark;
|
||||
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;
|
||||
}
|
||||
: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);
|
||||
color: var(--button-text);
|
||||
}
|
||||
|
||||
/* Responsive Typography
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
@media (max-width: 34.375rem) {
|
||||
/* 550px */
|
||||
h1 {
|
||||
font-size: 2rem; /* 32px */
|
||||
}
|
||||
body {
|
||||
font-size: 1rem; /* 16px */
|
||||
}
|
||||
/* 550px */
|
||||
h1 {
|
||||
font-size: 2rem; /* 32px */
|
||||
}
|
||||
body {
|
||||
font-size: 1rem; /* 16px */
|
||||
}
|
||||
}
|
||||
|
||||
/* Privacy Page Styles
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
nav {
|
||||
margin: var(--spacing-l) 0;
|
||||
text-align: left;
|
||||
margin: var(--spacing-l) 0;
|
||||
text-align: left;
|
||||
}
|
||||
section {
|
||||
margin: var(--spacing-xl) 0;
|
||||
text-align: left;
|
||||
margin: var(--spacing-xl) 0;
|
||||
text-align: left;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--scale-3);
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-m);
|
||||
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;
|
||||
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;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 var(--spacing-m) 0;
|
||||
}
|
||||
ul li {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
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;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--scale-2);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--scale-1);
|
||||
}
|
||||
section {
|
||||
margin: var(--spacing-l) 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -462,28 +462,28 @@ ul li {
|
||||
/* 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;
|
||||
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:hover,
|
||||
button:hover {
|
||||
filter: brightness(90%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Icons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.icon {
|
||||
filter: var(--icon-filter, none);
|
||||
filter: var(--icon-filter, none);
|
||||
}
|
||||
|
||||
/* Brand-Specific Styles
|
||||
@@ -491,157 +491,162 @@ button {
|
||||
|
||||
/* Default */
|
||||
.button.button-default {
|
||||
--button-text: #ffffff;
|
||||
--button-background: #0085ff;
|
||||
--button-text: #ffffff;
|
||||
--button-background: #0085ff;
|
||||
}
|
||||
|
||||
/* Beeper */
|
||||
.button-beeper {
|
||||
--button-text: #ffffff;
|
||||
--button-background: #355bf3;
|
||||
--button-text: #ffffff;
|
||||
--button-background: #355bf3;
|
||||
}
|
||||
|
||||
.button-beeper .icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.25rem;
|
||||
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-text: #ffffff;
|
||||
--button-background: #000000;
|
||||
--button-border: 2px solid #ffffff;
|
||||
}
|
||||
|
||||
.button-initialcharge .icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.25rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
/* Last.fm */
|
||||
.button-last-fm {
|
||||
--button-text: #ffffff;
|
||||
--button-background: #f71414;
|
||||
--button-text: #ffffff;
|
||||
--button-background: #f71414;
|
||||
}
|
||||
|
||||
/* Mastodon */
|
||||
.button-mastodon {
|
||||
--button-text: #ffffff;
|
||||
--button-background: #1f232b;
|
||||
--button-text: #ffffff;
|
||||
--button-background: #1f232b;
|
||||
}
|
||||
|
||||
/* MetaGamerScore */
|
||||
.button-metagamerscore {
|
||||
--button-text: #000000;
|
||||
--button-background: #f0f0f0;
|
||||
--button-text: #000000;
|
||||
--button-background: #f0f0f0;
|
||||
}
|
||||
|
||||
/* PayPal */
|
||||
.button-paypal {
|
||||
--button-text: #ffffff;
|
||||
--button-background: #002991;
|
||||
--button-border: 1px solid #ffffff;
|
||||
--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;
|
||||
--button-text: #000000;
|
||||
--button-background: #ffffff;
|
||||
--button-border: 2px solid #000000;
|
||||
}
|
||||
|
||||
/* Value for Value */
|
||||
.button-v4v {
|
||||
--button-text: #ffffff;
|
||||
--button-background: #1dbf73;
|
||||
--button-text: #ffffff;
|
||||
--button-background: #1dbf73;
|
||||
}
|
||||
|
||||
.button-v4v .icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
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;
|
||||
list-style: none;
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
details.value-block > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.value-block ul {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0;
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.value-block code {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
}
|
||||
|
||||
.value-block code {
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin: 0 0.2rem;
|
||||
white-space: nowrap;
|
||||
background: #f1f1f1;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 4px;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin: 0 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;
|
||||
filter: brightness(90%);
|
||||
transform: 0px;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
details[open] summary span.button.button-v4v:hover {
|
||||
transform: -1px;
|
||||
}
|
||||
details[open] summary span.button.button-v4v:hover {
|
||||
transform: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
details:not([open]) {
|
||||
filter: brightness(100%);
|
||||
transform: 0px;
|
||||
filter: brightness(100%);
|
||||
transform: 0px;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
details:not([open]) summary span.button.button-v4v:hover {
|
||||
filter: brightness(90%);
|
||||
transform: -1px;
|
||||
}
|
||||
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;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
details.value-block ul li {
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
details.value-block ul li img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
span.button.button-v4v {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
span.crypto-js-qr img {
|
||||
width: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.inline-icon {
|
||||
margin-bottom: -4px;
|
||||
display: inline;
|
||||
}
|
||||
Reference in new issue
Block a user