mdrockwell/littlelink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

description, inline icons.

Browse Source
This commit is contained in:
Mike Rockwell
2026-06-16 09:36:51 -04:00
parent 2f16a9538e
commit 936666bacc
3 changed files with 308 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/min.css
+1 -1
View File
File diff suppressed because one or more lines are too long
css/style.css
+306 -301
View File
@@ -2,13 +2,13 @@
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face { @font-face {
font-family: "IBM Plex Sans"; font-family: "IBM Plex Sans";
src: url(../fonts/IBMPlexSans.ttf); src: url(../fonts/IBMPlexSans.ttf);
} }
@font-face { @font-face {
font-family: "IBM Plex Mono"; font-family: "IBM Plex Mono";
src: url(../fonts/IBMPlexMono.ttf); src: url(../fonts/IBMPlexMono.ttf);
} }
/* /*
@@ -20,7 +20,7 @@
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
} }
/* Remove default margin */ /* Remove default margin */
@@ -34,35 +34,35 @@ figure,
blockquote, blockquote,
dl, dl,
dd { dd {
margin: 0; margin: 0;
} }
/* Remove list styles on ul, ol elements */ /* Remove list styles on ul, ol elements */
ul, ul,
ol { ol {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* Set core root defaults */ /* Set core root defaults */
html:focus-within { html:focus-within {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* Set core body defaults */ /* Set core body defaults */
body { body {
min-height: 100vh; min-height: 100vh;
text-rendering: optimizeSpeed; text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
/* Make images easier to work with */ /* Make images easier to work with */
img, img,
picture { picture {
max-width: 100%; max-width: 100%;
display: block; display: block;
} }
/* Inherit fonts for inputs and buttons */ /* Inherit fonts for inputs and buttons */
@@ -70,32 +70,32 @@ input,
button, button,
textarea, textarea,
select { select {
font: inherit; font: inherit;
} }
/* Remove all animations and transitions for people that prefer not to see them */ /* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
html:focus-within { html:focus-within {
scroll-behavior: auto; scroll-behavior: auto;
} }
*, *,
*::before, *::before,
*::after { *::after {
animation-duration: 0.01ms !important; animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; transition-duration: 0.01ms !important;
scroll-behavior: auto !important; scroll-behavior: auto !important;
} }
} }
/* Modern focus styles */ /* Modern focus styles */
:focus:not(:focus-visible) { :focus:not(:focus-visible) {
outline: none; outline: none;
} }
:focus-visible { :focus-visible {
outline: 2px solid #2457f5; outline: 2px solid #2457f5;
outline-offset: 2px; outline-offset: 2px;
} }
/* Remove touch callout on iOS /* Remove touch callout on iOS
@@ -114,235 +114,235 @@ select {
/* Base Typography Settings /* Base Typography Settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
:root { :root {
font-size: 16px; font-size: 16px;
} }
/* Grid /* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container { .container {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 37.5rem; /* 600px */ max-width: 37.5rem; /* 600px */
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
padding: 3rem 1.25rem 0 1.25rem; padding: 3rem 1.25rem 0 1.25rem;
box-sizing: border-box; box-sizing: border-box;
} }
.container-left { .container-left {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 37.5rem; max-width: 37.5rem;
text-align: left; text-align: left;
margin: 0 auto; margin: 0 auto;
padding: 0 1.25rem; padding: 0 1.25rem;
box-sizing: border-box; box-sizing: border-box;
} }
.container-left p { .container-left p {
margin-bottom: 1rem; /* 16px space between paragraphs */ margin-bottom: 1rem; /* 16px space between paragraphs */
} }
.column { .column {
position: center; position: center;
width: 100%; width: 100%;
float: center; float: center;
box-sizing: border-box; box-sizing: border-box;
} }
/* For devices larger than 400px */ /* For devices larger than 400px */
@media (min-width: 25rem) { @media (min-width: 25rem) {
/* 400px */ /* 400px */
.container { .container {
width: 85%; width: 85%;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
} /* For devices larger than 550px */ } /* For devices larger than 550px */
@media (min-width: 34.375rem) { @media (min-width: 34.375rem) {
/* 550px */ /* 550px */
.container { .container {
width: 80%; width: 80%;
} }
.column, .column,
.columns { .columns {
margin-left: 0; margin-left: 0;
} }
.column:first-child, .column:first-child,
.columns:first-child { .columns:first-child {
margin-left: 0; margin-left: 0;
} }
} }
/* Base Styles /* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #ffffff; background-color: #ffffff;
color: #1a1a1a; color: #1a1a1a;
font-family: "IBM Plex Sans", sans-serif; font-family: "IBM Plex Sans", sans-serif;
font-size: 1.125rem; /* 18px */ font-size: 1.125rem; /* 18px */
font-weight: 400; font-weight: 400;
line-height: 1.6; line-height: 1.6;
} }
/* Typography /* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 { h1 {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
font-size: 3rem; /* 48px */ font-size: 3rem; /* 48px */
font-weight: 800; font-weight: 800;
line-height: 1; line-height: 1;
letter-spacing: 0; letter-spacing: 0;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.container p { .container p {
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
} }
/* Base Typography Settings /* Base Typography Settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Base size - 16px browser default */ /* Base size - 16px browser default */
:root { :root {
font-size: 16px; /* Using a 1.25 modular scale for typography */ font-size: 16px; /* Using a 1.25 modular scale for typography */
--scale-0: 1rem; /* 16px */ --scale-0: 1rem; /* 16px */
--scale-0a: 1.125rem; /* 18px */ --scale-0a: 1.125rem; /* 18px */
--scale-1: 1.125rem; /* 20px */ --scale-1: 1.125rem; /* 20px */
--scale-2: 1.563rem; /* 25px */ --scale-2: 1.563rem; /* 25px */
--scale-3: 1.953rem; /* 31px */ --scale-3: 1.953rem; /* 31px */
--scale-4: 2.441rem; /* 39px */ --scale-4: 2.441rem; /* 39px */
--scale-5: 3.052rem; /* 49px */ --scale-5: 3.052rem; /* 49px */
/* Spacing units */ /* Spacing units */
--spacing-xs: 0.5rem; /* 8px */ --spacing-xs: 0.5rem; /* 8px */
--spacing-s: 1rem; /* 16px */ --spacing-s: 1rem; /* 16px */
--spacing-m: 1.5rem; /* 24px */ --spacing-m: 1.5rem; /* 24px */
--spacing-l: 2rem; /* 32px */ --spacing-l: 2rem; /* 32px */
--spacing-xl: 3rem; /* 48px */ --spacing-xl: 3rem; /* 48px */
--spacing-xxl: 4rem; /* 64px */ --spacing-xxl: 4rem; /* 64px */
} }
/* Avatar */ /* Avatar */
.avatar { .avatar {
width: 8rem; /* 128px */ width: 8rem; /* 128px */
height: 8rem; height: 8rem;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
background-position: center; background-position: center;
margin-bottom: var(--spacing-l); margin-bottom: var(--spacing-l);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: block; display: block;
} }
/* Typography Scale */ /* Typography Scale */
h1 { h1 {
margin: 0 0 var(--spacing-m) 0; margin: 0 0 var(--spacing-m) 0;
font-size: var(--scale-5); /* ~49px */ font-size: var(--scale-5); /* ~49px */
font-weight: 800; font-weight: 800;
line-height: 1.1; line-height: 1.1;
letter-spacing: -0.02em; letter-spacing: -0.02em;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
body { body {
font-size: var(--scale-1); /* 20px */ font-size: var(--scale-1); /* 20px */
line-height: 1.6; line-height: 1.6;
} }
.container p { .container p {
margin: 0 0 var(--spacing-l) 0; margin: 0 0 var(--spacing-l) 0;
font-size: var(--scale-1); font-size: var(--scale-1);
line-height: 1.6; line-height: 1.6;
} }
/* Container spacing */ /* Container spacing */
.container { .container {
padding: var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m); padding: var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);
text-align: center; text-align: center;
} }
/* Footer */ /* Footer */
footer { footer {
margin: var(--spacing-l) 0; /* 4rem (64px) top and bottom */ margin: var(--spacing-l) 0; /* 4rem (64px) top and bottom */
font-size: var(--scale-0); font-size: var(--scale-0);
} }
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 34.375rem) { @media (max-width: 34.375rem) {
/* 550px */ /* 550px */
h1 { h1 {
font-size: var(--scale-4); font-size: var(--scale-4);
} }
body { body {
font-size: var(--scale-0); font-size: var(--scale-0);
} }
.container p { .container p {
font-size: var(--scale-0a); font-size: var(--scale-0a);
} }
.avatar { .avatar {
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
} }
footer { footer {
margin: var(--spacing-xl) 0; /* 3rem (48px) top and bottom */ margin: var(--spacing-xl) 0; /* 3rem (48px) top and bottom */
} }
} }
/* Links /* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
a { a {
color: #0085ff; color: #0085ff;
text-decoration: underline; text-decoration: underline;
} }
a:hover { a:hover {
color: #083bda; color: #083bda;
} }
/* Buttons /* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, .button,
button { button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 18.75rem; /* 300px */ width: 18.75rem; /* 300px */
min-height: 3rem; /* 48px */ min-height: 3rem; /* 48px */
padding: 0.75rem 1rem; /* 12px ; 16px */ padding: 0.75rem 1rem; /* 12px ; 16px */
font-size: 1.125rem; /* 18px */ font-size: 1.125rem; /* 18px */
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
white-space: normal; white-space: normal;
background-color: var(--button-background, transparent); background-color: var(--button-background, transparent);
color: var(--button-text, #000000); color: var(--button-text, #000000);
border: var(--button-border, none); border: var(--button-border, none);
border-radius: 0.5rem; border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
hyphens: auto; /* Delete this to remove automatic hyphen on line break */ hyphens: auto; /* Delete this to remove automatic hyphen on line break */
margin-bottom: 1rem; margin-bottom: 1rem;
text-align: center; text-align: center;
line-height: 1.3; line-height: 1.3;
} }
/* Icons /* Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon { .icon {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-right: 0.5rem; margin-right: 0.5rem;
flex-shrink: 0; flex-shrink: 0;
} }
/* Avatar /* Avatar
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.avatar { .avatar {
width: 8rem; /* 128px */ width: 8rem; /* 128px */
height: 8rem; height: 8rem;
object-fit: cover; object-fit: cover;
background-position: center; background-position: center;
margin-bottom: var(--spacing-l); margin-bottom: var(--spacing-l);
} }
/* Modifier for rounded avatar */ /* Modifier for rounded avatar */
.avatar--rounded { .avatar--rounded {
border-radius: 50%; border-radius: 50%;
} }
/* Theme System /* Theme System
@@ -351,103 +351,103 @@ button {
/* Dark theme */ /* Dark theme */
:root.theme-dark { :root.theme-dark {
color-scheme: dark; color-scheme: dark;
} }
:root.theme-dark :focus-visible { :root.theme-dark :focus-visible {
outline: 2px solid #4899f7; outline: 2px solid #4899f7;
outline-offset: 2px; outline-offset: 2px;
} }
:root.theme-dark body { :root.theme-dark body {
background-color: #121212; background-color: #121212;
color: #ffffff; color: #ffffff;
} }
:root.theme-dark a:not(.button) { :root.theme-dark a:not(.button) {
color: #4899f7; color: #4899f7;
} }
:root.theme-dark a:not(.button):hover { :root.theme-dark a:not(.button):hover {
color: #7ab8ff; color: #7ab8ff;
} }
/* Auto theme */ /* Auto theme */
:root.theme-auto { :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 { :root.theme-auto body {
background-color: #121212; background-color: #121212;
color: #ffffff; color: #ffffff;
} }
:root.theme-auto :focus-visible { :root.theme-auto :focus-visible {
outline: 2px solid #4899f7; outline: 2px solid #4899f7;
outline-offset: 2px; outline-offset: 2px;
} }
:root.theme-auto a:not(.button) { :root.theme-auto a:not(.button) {
color: #4899f7; color: #4899f7;
} }
:root.theme-auto a:not(.button):hover { :root.theme-auto a:not(.button):hover {
color: #7ab8ff; color: #7ab8ff;
} }
} }
/* Button Text Color Override /* Button Text Color Override
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.button:hover, .button:hover,
button:hover { button:hover {
color: var(--button-text); color: var(--button-text);
} }
/* Responsive Typography /* Responsive Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 34.375rem) { @media (max-width: 34.375rem) {
/* 550px */ /* 550px */
h1 { h1 {
font-size: 2rem; /* 32px */ font-size: 2rem; /* 32px */
} }
body { body {
font-size: 1rem; /* 16px */ font-size: 1rem; /* 16px */
} }
} }
/* Privacy Page Styles /* Privacy Page Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
nav { nav {
margin: var(--spacing-l) 0; margin: var(--spacing-l) 0;
text-align: left; text-align: left;
} }
section { section {
margin: var(--spacing-xl) 0; margin: var(--spacing-xl) 0;
text-align: left; text-align: left;
} }
h2 { h2 {
font-size: var(--scale-3); font-size: var(--scale-3);
font-weight: 700; font-weight: 700;
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
} }
h3 { h3 {
font-size: var(--scale-2); font-size: var(--scale-2);
font-weight: 600; font-weight: 600;
margin: var(--spacing-l) 0 var(--spacing-s) 0; margin: var(--spacing-l) 0 var(--spacing-s) 0;
} }
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0 0 var(--spacing-m) 0; margin: 0 0 var(--spacing-m) 0;
} }
ul li { ul li {
margin-bottom: var(--spacing-xs); margin-bottom: var(--spacing-xs);
} }
/* Privacy page specific responsive adjustments */ /* Privacy page specific responsive adjustments */
@media (max-width: 34.375rem) { @media (max-width: 34.375rem) {
h2 { h2 {
font-size: var(--scale-2); font-size: var(--scale-2);
} }
h3 { h3 {
font-size: var(--scale-1); font-size: var(--scale-1);
} }
section { section {
margin: var(--spacing-l) 0; margin: var(--spacing-l) 0;
} }
} }
/* /*
@@ -462,28 +462,28 @@ ul li {
/* Only include brand-specific button styling here */ /* Only include brand-specific button styling here */
.button, .button,
button { button {
color: var(--button-text, #000000); color: var(--button-text, #000000);
background-color: var(--button-background, transparent); background-color: var(--button-background, transparent);
border: var(--button-border, none); border: var(--button-border, none);
transition: transition:
filter 0.2s ease, filter 0.2s ease,
transform 0.2s ease; transform 0.2s ease;
} }
/* Global Button Hover Effect /* Global Button Hover Effect
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (hover: hover) { @media (hover: hover) {
.button:hover, .button:hover,
button:hover { button:hover {
filter: brightness(90%); filter: brightness(90%);
transform: translateY(-1px); transform: translateY(-1px);
} }
} }
/* Button Icons /* Button Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon { .icon {
filter: var(--icon-filter, none); filter: var(--icon-filter, none);
} }
/* Brand-Specific Styles /* Brand-Specific Styles
@@ -491,157 +491,162 @@ button {
/* Default */ /* Default */
.button.button-default { .button.button-default {
--button-text: #ffffff; --button-text: #ffffff;
--button-background: #0085ff; --button-background: #0085ff;
} }
/* Beeper */ /* Beeper */
.button-beeper { .button-beeper {
--button-text: #ffffff; --button-text: #ffffff;
--button-background: #355bf3; --button-background: #355bf3;
} }
.button-beeper .icon { .button-beeper .icon {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
margin-right: 0.25rem; margin-right: 0.25rem;
} }
/* Initial Charge */ /* Initial Charge */
.button-initialcharge { .button-initialcharge {
--button-text: #ffffff; --button-text: #ffffff;
--button-background: #000000; --button-background: #000000;
--button-border: 2px solid #ffffff; --button-border: 2px solid #ffffff;
} }
.button-initialcharge .icon { .button-initialcharge .icon {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
margin-right: 0.25rem; margin-right: 0.25rem;
} }
/* Last.fm */ /* Last.fm */
.button-last-fm { .button-last-fm {
--button-text: #ffffff; --button-text: #ffffff;
--button-background: #f71414; --button-background: #f71414;
} }
/* Mastodon */ /* Mastodon */
.button-mastodon { .button-mastodon {
--button-text: #ffffff; --button-text: #ffffff;
--button-background: #1f232b; --button-background: #1f232b;
} }
/* MetaGamerScore */ /* MetaGamerScore */
.button-metagamerscore { .button-metagamerscore {
--button-text: #000000; --button-text: #000000;
--button-background: #f0f0f0; --button-background: #f0f0f0;
} }
/* PayPal */ /* PayPal */
.button-paypal { .button-paypal {
--button-text: #ffffff; --button-text: #ffffff;
--button-background: #002991; --button-background: #002991;
--button-border: 1px solid #ffffff; --button-border: 1px solid #ffffff;
} }
/* Pixelfed */ /* Pixelfed */
.button-pixelfed { .button-pixelfed {
--button-text: #000000; --button-text: #000000;
--button-background: #ffffff; --button-background: #ffffff;
--button-border: 2px solid #000000; --button-border: 2px solid #000000;
} }
/* Value for Value */ /* Value for Value */
.button-v4v { .button-v4v {
--button-text: #ffffff; --button-text: #ffffff;
--button-background: #1dbf73; --button-background: #1dbf73;
} }
.button-v4v .icon { .button-v4v .icon {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
/* Custom Styles /* Custom Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
details.value-block > summary { details.value-block > summary {
list-style: none; list-style: none;
width: fit-content; width: fit-content;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
details.value-block > summary::-webkit-details-marker { details.value-block > summary::-webkit-details-marker {
display: none; display: none;
} }
.value-block ul { .value-block ul {
list-style-type: none; list-style-type: none;
padding-inline-start: 0; padding-inline-start: 0;
} }
.value-block code { .value-block code {
font-size: 0.75rem; font-size: 0.75rem;
} }
code, code,
kbd, kbd,
pre, pre,
samp { samp {
font-family: "IBM Plex Mono", monospace; font-family: "IBM Plex Mono", monospace;
} }
.value-block code { .value-block code {
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
margin: 0 0.2rem; margin: 0 0.2rem;
white-space: nowrap; white-space: nowrap;
background: #f1f1f1; background: #f1f1f1;
border: 1px solid #e1e1e1; border: 1px solid #e1e1e1;
border-radius: 4px; border-radius: 4px;
} }
/* Fix v4v details block hover and open styles */ /* Fix v4v details block hover and open styles */
details[open] summary span.button.button-v4v { details[open] summary span.button.button-v4v {
filter: brightness(90%); filter: brightness(90%);
transform: 0px; transform: 0px;
} }
@media (hover: hover) { @media (hover: hover) {
details[open] summary span.button.button-v4v:hover { details[open] summary span.button.button-v4v:hover {
transform: -1px; transform: -1px;
} }
} }
details:not([open]) { details:not([open]) {
filter: brightness(100%); filter: brightness(100%);
transform: 0px; transform: 0px;
} }
@media (hover: hover) { @media (hover: hover) {
details:not([open]) summary span.button.button-v4v:hover { details:not([open]) summary span.button.button-v4v:hover {
filter: brightness(90%); filter: brightness(90%);
transform: -1px; transform: -1px;
} }
} }
/* /end Fix v4v details block hover and open styles */ /* /end Fix v4v details block hover and open styles */
p.value-explainer { p.value-explainer {
margin-top: 2rem; margin-top: 2rem;
} }
details.value-block ul li { details.value-block ul li {
margin-bottom: 32px; margin-bottom: 32px;
} }
details.value-block ul li img { details.value-block ul li img {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
span.button.button-v4v { span.button.button-v4v {
margin-bottom: 0; margin-bottom: 0;
} }
span.crypto-js-qr img { span.crypto-js-qr img {
width: 150px; width: 150px;
}
.inline-icon {
margin-bottom: -4px;
display: inline;
} }
index.html
+1 -1
View File
@@ -37,7 +37,7 @@
<h1> <h1>
<div itemprop="name" id="real-name">Mike Rockwell</div> <div itemprop="name" id="real-name">Mike Rockwell</div>
</h1> </h1>
<p itemprop="description">Writer of <a href="https://initialcharge.net/" rel="me">Initial Charge</a>, a weblog about personal computing. Happiness Engineer&nbsp;at&nbsp;<a href="https://automattic.com/">Automattic</a>.</p> <p itemprop="description">Writer of <a href="https://initialcharge.net/" rel="me">Initial Charge</a>, a weblog about personal computing. Happiness Engineer at <a href="https://automattic.com/">Automattic</a> for&nbsp;<a href="https://pocketcasts.com/"><img class="inline-icon" src="images/icons/pocket-casts.svg" alt="Pocket Casts Icon"></a>&nbsp;<a href="https://www.tumblr.com/"><img class="inline-icon" src="images/icons/tumblr.svg" alt="Tumblr Icon"></a></p>
<!-- All your buttons go here --> <!-- All your buttons go here -->
<div class="button-stack" role="navigation"> <div class="button-stack" role="navigation">