diff --git a/css/min.css b/css/min.css
index 4cfc389..51de556 100644
--- a/css/min.css
+++ b/css/min.css
@@ -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-fm{--button-text:#ffffff;--button-background:#f71414}.button-mastodon{--button-text:#ffffff;--button-background:#1f232b}.button-metagamerscore{--button-text:#000000;--button-background:#f0f0f0}.button-paypal{--button-text:#ffffff;--button-background:#002991;--button-border:1px solid #FFFFFF}.button-pixelfed{--button-text:#000000;--button-background:#ffffff;--button-border:2px solid #000000}.button-v4v{--button-text:#ffffff;--button-background:#1DBF73}.button-v4v .icon{width:1rem;height:1rem;margin-right:.5rem}details.value-block>summary{list-style:none;width:fit-content}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;padding:.2rem .5rem;margin:0 .2rem;white-space:nowrap;background:#f1f1f1;border:1px solid #e1e1e1;border-radius:4px}code,kbd,pre,samp{font-family:"IBM Plex Mono",monospace}details[open] summary span.button.button-v4v{filter:brightness(90%);transform:0}details:not([open]){filter:brightness(100%);transform:0}@media (hover:hover){.button:hover,button:hover{filter:brightness(90%);transform:translateY(-1px)}details[open] summary span.button.button-v4v:hover{transform:-1px}details:not([open]) summary span.button.button-v4v:hover{filter:brightness(90%);transform:-1px}}p.value-explainer{margin-top:2rem}details.value-block ul li{margin-bottom:32px}span.button.button-v4v{margin-bottom:0}span.crypto-js-qr img{width:150px}
+.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-fm{--button-text:#ffffff;--button-background:#f71414}.button-mastodon{--button-text:#ffffff;--button-background:#1f232b}.button-metagamerscore{--button-text:#000000;--button-background:#f0f0f0}.button-paypal{--button-text:#ffffff;--button-background:#002991;--button-border:1px solid #FFFFFF}.button-pixelfed{--button-text:#000000;--button-background:#ffffff;--button-border:2px solid #000000}.button-v4v{--button-text:#ffffff;--button-background:#1DBF73}.button-v4v .icon{width:1rem;height:1rem;margin-right:.5rem}details.value-block>summary{list-style:none;width:fit-content}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;padding:.2rem .5rem;margin:0 .2rem;white-space:nowrap;background:#f1f1f1;border:1px solid #e1e1e1;border-radius:4px}code,kbd,pre,samp{font-family:"IBM Plex Mono",monospace}details[open] summary span.button.button-v4v{filter:brightness(90%);transform:0}details:not([open]){filter:brightness(100%);transform:0}@media (hover:hover){.button:hover,button:hover{filter:brightness(90%);transform:translateY(-1px)}details[open] summary span.button.button-v4v:hover{transform:-1px}details:not([open]) summary span.button.button-v4v:hover{filter:brightness(90%);transform:-1px}}p.value-explainer{margin-top:2rem}details.value-block ul li{margin-bottom:32px}span.button.button-v4v{margin-bottom:0}span.crypto-js-qr img{width:150px}.inline-icon{margin-bottom:-5px;display:inline}
diff --git a/css/style.css b/css/style.css
index 5beee1e..c9d5485 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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;
}
diff --git a/index.html b/index.html
index 7fa2ae8..2c3dce6 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
Mike Rockwell
- Writer of Initial Charge, a weblog about personal computing. Happiness Engineer at Automattic.
+ Writer of Initial Charge, a weblog about personal computing. Happiness Engineer at Automattic for 
