maciejpedzich/maciejpedzi.ch
1
0
Fork 0
mirror of https://github.com/maciejpedzich/maciejpedzi.ch.git synced 2024-09-19 17:56:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Revert to default style for post links on mobiles

Browse Source
This commit is contained in:
Maciej Pędzich 2023-05-13 03:38:20 +02:00
parent 38f4897372
commit 23be071eea
1 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/styles/global.css
View File

@ -160,64 +160,66 @@ h1.cmr2-text {
/* The following styling rules have been adopted from: /* The following styling rules have been adopted from:
https://github.com/codrops/LineHoverStyles/ */ https://github.com/codrops/LineHoverStyles/ */
.post-list a { @media (min-width: 640px) {
position: relative; .post-list a {
outline: none; position: relative;
cursor: pointer; outline: none;
white-space: nowrap; cursor: pointer;
text-decoration: none; text-decoration: none;
} white-space: nowrap;
}
.post-list a:focus { .post-list a:focus {
outline: 2px solid rgba(255, 255, 255, 0.4); outline: 2px solid rgba(255, 255, 255, 0.4);
outline-offset: 3px; outline-offset: 3px;
} }
.post-list a:focus:not(:focus-visible) { .post-list a:focus:not(:focus-visible) {
background: transparent; background: transparent;
} }
.post-list a:focus-visible { .post-list a:focus-visible {
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
outline: 2px solid rgba(255, 255, 255, 0.4); outline: 2px solid rgba(255, 255, 255, 0.4);
outline-offset: 3px; outline-offset: 3px;
background: transparent; background: transparent;
} }
.post-list a:hover { .post-list a:hover {
outline: none; outline: none;
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
} }
.post-list a::before, .post-list a::before,
.post-list a::after { .post-list a::after {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 1px; height: 1px;
background: currentColor; background: currentColor;
top: 100%; top: 100%;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
} }
.post-list a::before { .post-list a::before {
content: ''; content: '';
transform-origin: 0% 50%; transform-origin: 0% 50%;
transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1);
transition: transform 0.3s; transition: transform 0.3s;
} }
.post-list a:hover::before { .post-list a:hover::before {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
.post-list a::after { .post-list a::after {
content: ''; content: '';
top: calc(100% + 4px); top: calc(100% + 4px);
transition: transform 0.3s; transition: transform 0.3s;
transform-origin: 100% 50%; transform-origin: 100% 50%;
} }
.post-list a:hover::after { .post-list a:hover::after {
transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1);
}
} }