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:
+1
-1
File diff suppressed because one or more lines are too long
+48
-32
@@ -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
@@ -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 the 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 the 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>
|
||||||
|
|||||||
Reference in New Issue
Block a user