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

css/style.css

@@ -3,12 +3,12 @@
 
 @font-face {
 	font-family: "IBM Plex Sans";
-    src: url(../fonts/IBMPlexSans.ttf)
+	src: url(../fonts/IBMPlexSans.ttf);
 }
 
 @font-face {
 	font-family: "IBM Plex Mono";
-    src: url(../fonts/IBMPlexMono.ttf)
+	src: url(../fonts/IBMPlexMono.ttf);
 }
 
 /*
@@ -94,14 +94,15 @@ select {
 }
 
 :focus-visible {
-  outline: 2px solid #2457F5;
+	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
@@ -146,21 +147,25 @@ a {
 	box-sizing: border-box;
 }
 /* For devices larger than 400px */
-  @media (min-width:25rem) {            /* 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 */
+@media (min-width: 34.375rem) {
+	/* 550px */
 	.container {
 		width: 80%;
 	}
-.column,.columns {
+	.column,
+	.columns {
 		margin-left: 0;
 	}
-.column:first-child,.columns:first-child {
+	.column:first-child,
+	.columns:first-child {
 		margin-left: 0;
 	}
 }
@@ -261,7 +266,8 @@ footer {
 }
 
 /* Responsive adjustments */
-@media (max-width:34.375rem) {              /* 550px */
+@media (max-width: 34.375rem) {
+	/* 550px */
 	h1 {
 		font-size: var(--scale-4);
 	}
@@ -286,12 +292,13 @@ footer {
 	text-decoration: underline;
 }
 a:hover {
-	color:#083BDA;
+	color: #083bda;
 }
 
 /* Buttons
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-.button,button {
+.button,
+button {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -347,7 +354,7 @@ a:hover {
 	color-scheme: dark;
 }
 :root.theme-dark :focus-visible {
-	outline: 2px solid #4899F7;
+	outline: 2px solid #4899f7;
 	outline-offset: 2px;
 }
 :root.theme-dark body {
@@ -355,10 +362,10 @@ a:hover {
 	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 */
@@ -371,26 +378,28 @@ a:hover {
 		color: #ffffff;
 	}
 	:root.theme-auto :focus-visible {
-    outline: 2px solid #4899F7;
+		outline: 2px solid #4899f7;
 		outline-offset: 2px;
 	}
 	:root.theme-auto a:not(.button) {
-	color:#4899F7;
+		color: #4899f7;
 	}
 	:root.theme-auto a:not(.button):hover {
-	color:#7AB8FF;
+		color: #7ab8ff;
 	}
 }
 
 /* Button Text Color Override
     –––––––––––––––––––––––––––––––––––––––––––––––––– */
-    .button:hover,button:hover {
+.button:hover,
+button:hover {
 	color: var(--button-text);
 }
 
 /* Responsive Typography
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
-  @media (max-width:34.375rem) {            /* 550px */
+@media (max-width: 34.375rem) {
+	/* 550px */
 	h1 {
 		font-size: 2rem; /* 32px */
 	}
@@ -451,17 +460,21 @@ ul li {
 /* Brand Button Base Styles
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 /* Only include brand-specific button styling here */
-.button,button {
+.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;
+	transition:
+		filter 0.2s ease,
+		transform 0.2s ease;
 }
 
 /* Global Button Hover Effect
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 @media (hover: hover) {
-  .button:hover,button:hover {
+	.button:hover,
+	button:hover {
 		filter: brightness(90%);
 		transform: translateY(-1px);
 	}
@@ -529,7 +542,7 @@ ul li {
 .button-paypal {
 	--button-text: #ffffff;
 	--button-background: #002991;
-  --button-border:1px solid #FFFFFF;
+	--button-border: 1px solid #ffffff;
 }
 
 /* Pixelfed */
@@ -542,7 +555,7 @@ ul li {
 /* Value for Value */
 .button-v4v {
 	--button-text: #ffffff;
-	--button-background:#1DBF73;
+	--button-background: #1dbf73;
 }
 
 .button-v4v .icon {
@@ -571,16 +584,19 @@ details.value-block > summary::-webkit-details-marker {
 }
 
 .value-block code {
-    font-size: .75rem
+	font-size: 0.75rem;
 }
 
-code, kbd, pre, samp {
+code,
+kbd,
+pre,
+samp {
 	font-family: "IBM Plex Mono", monospace;
 }
 
 .value-block code {
-    padding: .2rem .5rem;
-    margin: 0 .2rem;
+	padding: 0.2rem 0.5rem;
+	margin: 0 0.2rem;
 	white-space: nowrap;
 	background: #f1f1f1;
 	border: 1px solid #e1e1e1;
@@ -615,7 +631,7 @@ p.value-explainer {
 }
 
 details.value-block ul li {
-    margin-bottom:32px
+	margin-bottom: 32px;
 }
 details.value-block ul li img {
 	margin-left: auto;

index.html

@@ -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>
                 </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 -->
                 <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>