diff --git a/css/min.css b/css/min.css index 89ee616..4cfc389 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{-webkit-touch-callout:none;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} \ No newline at end of file +.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} diff --git a/css/style.css b/css/style.css index 998e5d5..5beee1e 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,38 +70,39 @@ 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 */ -a { - -webkit-touch-callout: none; -} +/* Remove touch callout on iOS +* a { +* -webkit-touch-callout: none; +* } +*/ /* * LittleLink @@ -113,111 +114,115 @@ a { /* 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; +.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; + 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; -} -}/* 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; -} +@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; +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; +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; + 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 */ + width: 8rem; /* 128px */ height: 8rem; border-radius: 50%; object-fit: cover; @@ -226,117 +231,119 @@ a { 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 */ -} +@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 { + 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; +.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; + width: 1.25rem; + height: 1.25rem; + margin-right: 0.5rem; + flex-shrink: 0; } /* Avatar –––––––––––––––––––––––––––––––––––––––––––––––––– */ .avatar { - width: 8rem; /* 128px */ + width: 8rem; /* 128px */ height: 8rem; object-fit: cover; background-position: center; margin-bottom: var(--spacing-l); - } +} - /* Modifier for rounded avatar */ - .avatar--rounded { +/* Modifier for rounded avatar */ +.avatar--rounded { border-radius: 50%; - } +} /* Theme System –––––––––––––––––––––––––––––––––––––––––––––––––– */ @@ -344,100 +351,102 @@ a:hover { /* Dark theme */ :root.theme-dark { - color-scheme:dark; + color-scheme: dark; } :root.theme-dark :focus-visible { - outline: 2px solid #4899F7; + 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) { +@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; -} + 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); +.button:hover, +button:hover { + color: var(--button-text); } /* Responsive Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ - @media (max-width:34.375rem) { /* 550px */ - h1 { - font-size:2rem; /* 32px */ +@media (max-width: 34.375rem) { + /* 550px */ + h1 { + font-size: 2rem; /* 32px */ } body { - font-size:1rem; /* 16px */ + 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) { +@media (max-width: 34.375rem) { h2 { - font-size:var(--scale-2); + font-size: var(--scale-2); } h3 { - font-size:var(--scale-1); + font-size: var(--scale-1); } section { - margin:var(--spacing-l) 0; + margin: var(--spacing-l) 0; } } @@ -451,26 +460,30 @@ ul li { /* 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; +.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: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 @@ -478,154 +491,157 @@ ul li { /* 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: .75rem + font-size: 0.75rem; } -code, kbd, pre, samp { - font-family: "IBM Plex Mono", monospace; +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; + 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; - } +@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; + 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; -} \ No newline at end of file + width: 150px; +} diff --git a/index.html b/index.html index b7518ef..01a1214 100644 --- a/index.html +++ b/index.html @@ -44,36 +44,36 @@ Mastodon - + Beeper / Matrix - + Pixelfed - + Email - + Last.fm - + MetaGamerScore - +
Value for Value - -

Support my work by providing value for value — with a direct donation or ordering from the shop.

- + +

Support my work by providing < href="https://value4value.info/">value for value — with a direct donation or ordering from the shop.

+ Initial Charge Shop - + PayPal - +