Removed webkit-touch-callout css to fix long press on iPhone. Also fixed a span tag that was being closed by an </a>

This commit is contained in:
2026-05-19 16:41:13 -04:00
parent b8b6297b46
commit 66b8d6e8b2
3 changed files with 325 additions and 309 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+48 -32
View File
@@ -3,12 +3,12 @@
@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);
} }
/* /*
@@ -94,14 +94,15 @@ select {
} }
: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
a { * a {
-webkit-touch-callout: none; * -webkit-touch-callout: none;
} * }
*/
/* /*
* LittleLink * LittleLink
@@ -146,21 +147,25 @@ a {
box-sizing: border-box; box-sizing: border-box;
} }
/* For devices larger than 400px */ /* For devices larger than 400px */
@media (min-width:25rem) { /* 400px */ @media (min-width: 25rem) {
/* 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) { /* 550px */ @media (min-width: 34.375rem) {
/* 550px */
.container { .container {
width: 80%; width: 80%;
} }
.column,.columns { .column,
.columns {
margin-left: 0; margin-left: 0;
} }
.column:first-child,.columns:first-child { .column:first-child,
.columns:first-child {
margin-left: 0; margin-left: 0;
} }
} }
@@ -261,7 +266,8 @@ footer {
} }
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width:34.375rem) { /* 550px */ @media (max-width: 34.375rem) {
/* 550px */
h1 { h1 {
font-size: var(--scale-4); font-size: var(--scale-4);
} }
@@ -286,12 +292,13 @@ footer {
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;
@@ -347,7 +354,7 @@ a:hover {
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 {
@@ -355,10 +362,10 @@ a:hover {
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 */
@@ -371,26 +378,28 @@ a:hover {
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) { /* 550px */ @media (max-width: 34.375rem) {
/* 550px */
h1 { h1 {
font-size: 2rem; /* 32px */ font-size: 2rem; /* 32px */
} }
@@ -451,17 +460,21 @@ ul li {
/* Brand Button Base Styles /* Brand Button Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* 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:filter 0.2s ease,transform 0.2s ease; transition:
filter 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);
} }
@@ -529,7 +542,7 @@ ul li {
.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 */
@@ -542,7 +555,7 @@ ul li {
/* 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 {
@@ -571,16 +584,19 @@ details.value-block > summary::-webkit-details-marker {
} }
.value-block code { .value-block code {
font-size: .75rem font-size: 0.75rem;
} }
code, kbd, pre, samp { code,
kbd,
pre,
samp {
font-family: "IBM Plex Mono", monospace; font-family: "IBM Plex Mono", monospace;
} }
.value-block code { .value-block code {
padding: .2rem .5rem; padding: 0.2rem 0.5rem;
margin: 0 .2rem; margin: 0 0.2rem;
white-space: nowrap; white-space: nowrap;
background: #f1f1f1; background: #f1f1f1;
border: 1px solid #e1e1e1; border: 1px solid #e1e1e1;
@@ -615,7 +631,7 @@ p.value-explainer {
} }
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;
+1 -1
View File
@@ -66,7 +66,7 @@
<span class="button button-v4v" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-bolt-icon.svg" alt="">Value for Value</a> <span class="button button-v4v" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-bolt-icon.svg" alt="">Value for Value</a>
</summary> </summary>
<p class="value-explainer">Support my work by providing <a href="https://value4value.info/">value for value</a> — with a direct donation or ordering from&nbsp;the&nbsp;shop.</p> <p class="value-explainer">Support my work by providing < href="https://value4value.info/">value for value</span> — with a direct donation or ordering from&nbsp;the&nbsp;shop.</p>
<!-- Initial Charge Shop --> <!-- Initial Charge Shop -->
<a class="button button-initialcharge" href="https://initialcharge.shop/" role="button"><img class="icon" aria-hidden="true" src="images/icons/initialcharge.svg" alt="">Initial Charge Shop</a> <a class="button button-initialcharge" href="https://initialcharge.shop/" role="button"><img class="icon" aria-hidden="true" src="images/icons/initialcharge.svg" alt="">Initial Charge Shop</a>