hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display pointer if an image is in link

Browse Source
This commit is contained in:
daudix
2024-09-11 20:17:49 +03:00
parent b5a7653bfe
commit a946255c44
10 changed files with 60 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -61,6 +61,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
- `config.extra.fix_contrast_dark` should now work even if `config.extra.primary_color_dark` is not set.
- Display pointer cursor if image is wrapped in a link.
- Don't add `::before` pseudo element to color pickers.
- Fix images being covered by other images in some scenarios.
- Load auto-menu-close script if navbar sublinks are present.

2
content/demo/index.md
View File

@ -54,7 +54,7 @@ Long, single-line code blocks should not wrap. They should horizontally scroll i
- [ ] Coffee
- [x] Combustible lemons
![Male mallard duck](https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Male_mallard_duck_2.jpg/800px-Male_mallard_duck_2.jpg)
[![Male mallard duck](https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Male_mallard_duck_2.jpg/800px-Male_mallard_duck_2.jpg)](https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg)
| Mare | Rating | Additional info |
| :----------- | :---------------- | :--------------- |

21
sass/_buttons.scss
View File

@ -6,13 +6,24 @@
margin-block-start: 4rem;
}
.inline-button {
a.inline-button {
text-decoration: none;
}
button.inline-button {
-webkit-appearance: none;
appearance: none;
transition: var(--transition);
cursor: pointer;
box-shadow: var(--edge-highlight);
border: none;
&:hover {
cursor: pointer;
}
}
a.inline-button,
button.inline-button {
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 0.75rem 1rem;
@ -20,12 +31,10 @@
font-weight: bold;
font-size: 0.875rem;
line-height: 1;
text-decoration: none;
&:hover {
background-color: var(--fg-muted-2);
color: var(--fg-color);
text-decoration: none;
}
&:active {

1
sass/_code.scss
View File

@ -52,7 +52,6 @@ pre {
// The line number cells
table td:nth-of-type(1) {
-webkit-user-select: none;
cursor: default;
user-select: none;
text-align: center;
}

4
sass/_comments.scss
View File

@ -34,9 +34,9 @@
&:disabled {
animation: loading-fill var(--transition-long) ease-in-out alternate infinite;
transition: none;
cursor: not-allowed;
&:hover {
cursor: not-allowed;
background-color: transparent;
color: var(--fg-muted-5);
}
@ -181,12 +181,12 @@
display: inline-block;
vertical-align: middle;
transition: var(--transition);
cursor: zoom-in;
width: 1.5em;
height: 1.5em;
&:hover {
transform: scale(2);
cursor: zoom-in;
}
}

20
sass/_input.scss
View File

@ -5,21 +5,21 @@ input[type="color"] {
position: relative;
appearance: none;
transition: var(--transition);
cursor: pointer;
border: 0.15rem solid var(--fg-muted-2);
background-color: var(--fg-muted-1);
width: 1rem;
height: 1rem;
&:hover {
cursor: pointer;
background-color: var(--fg-muted-2);
}
&:disabled {
opacity: var(--disabled);
cursor: not-allowed;
&:hover {
cursor: not-allowed;
background-color: var(--fg-muted-1);
}
}
@ -42,7 +42,6 @@ input[type="checkbox"] {
background-color: var(--primary-color);
&:disabled {
cursor: not-allowed;
border: 0.15rem solid transparent;
background-color: var(--primary-color-alpha);
@ -168,25 +167,31 @@ input[type="range"] {
-webkit-appearance: none;
appearance: none;
transition: var(--transition);
cursor: pointer;
box-shadow: var(--edge-highlight);
border-radius: 999px;
background: var(--primary-color);
width: 100%;
height: 0.5rem;
&:hover {
cursor: pointer;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
filter: brightness(0.9);
transition: var(--transition);
cursor: grab;
box-shadow: var(--shadow);
border-radius: 999px;
background-color: white;
width: 1.5rem;
height: 1.5rem;
&:hover {
cursor: grab;
}
&:active {
transform: var(--active);
cursor: grabbing;
@ -196,7 +201,6 @@ input[type="range"] {
&::-moz-range-thumb {
appearance: none;
transition: var(--transition);
cursor: grab;
box-shadow: var(--shadow);
border: none;
border-radius: 999px;
@ -204,6 +208,10 @@ input[type="range"] {
width: 1.5rem;
height: 1.5rem;
&:hover {
cursor: grab;
}
&:active {
transform: var(--active);
cursor: grabbing;

11
sass/_media.scss
View File

@ -77,15 +77,14 @@ video {
img {
transition: var(--transition-longer);
&:not(.no-hover, .full-bleed, &[src*="#no-hover"], &[src*="#full-bleed"]) {
cursor: zoom-in;
&:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) {
&:hover {
position: relative;
transform: var(--hover);
z-index: 1;
cursor: zoom-in;
box-shadow: var(--edge-highlight), var(--shadow-raised);
border-radius: 0;
position: relative;
}
&.start,
@ -113,3 +112,7 @@ img {
}
}
}
a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]):hover {
cursor: pointer;
}

5
sass/_nav.scss
View File

@ -205,12 +205,15 @@
-webkit-appearance: none;
appearance: none;
transition: var(--transition);
cursor: pointer;
border: none;
border-radius: 999px;
background-color: transparent;
font-weight: bold;
font-size: 1rem;
&:hover {
cursor: pointer;
}
}
details {

6
sass/_pre-container.scss
View File

@ -24,7 +24,6 @@
float: inline-end;
appearance: none;
transition: var(--transition);
cursor: pointer;
border: none;
border-radius: var(--rounded-corner-small);
background-color: transparent;
@ -32,6 +31,7 @@
line-height: 0;
&:hover {
cursor: pointer;
box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1);
@ -45,7 +45,9 @@
}
&:disabled {
cursor: not-allowed;
&:hover {
cursor: not-allowed;
}
&:active {
transform: none;

15
sass/_typography.scss
View File

@ -31,10 +31,13 @@ small {
}
abbr[title] {
cursor: help;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: max(1px, 0.0625em);
&:hover {
cursor: help;
}
}
figcaption {
@ -136,7 +139,6 @@ progress {
kbd {
display: inline-block;
transition: var(--transition);
cursor: pointer;
box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--fg-muted-2);
border-radius: var(--rounded-corner-small);
background-color: var(--fg-muted-1);
@ -144,6 +146,10 @@ kbd {
font-size: 0.875em;
line-height: 1;
&:hover {
cursor: pointer;
}
// Small nice thingy, keys can be pressed!
&:active {
transform: translateY(0.125rem);
@ -218,8 +224,11 @@ details {
padding: 1rem;
summary {
cursor: pointer;
line-height: 1.25;
&:hover {
cursor: pointer;
}
}
:last-child {