Compare commits
No commits in common. "e14d012783e985f5252c09d31796c5aef8b71d6d" and "014d970ffd389fa3054d7a465c0994d5ad4c36b6" have entirely different histories.
e14d012783
...
014d970ffd
8 changed files with 28 additions and 119 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -2,7 +2,6 @@
|
||||||
/public/*
|
/public/*
|
||||||
/resources/_gen/*
|
/resources/_gen/*
|
||||||
.vscode/
|
.vscode/
|
||||||
.unlighthouse/
|
|
||||||
|
|
||||||
# ignored files
|
# ignored files
|
||||||
.directory
|
.directory
|
||||||
|
|
|
@ -21,37 +21,29 @@
|
||||||
mask: var(--vriish-waves);
|
mask: var(--vriish-waves);
|
||||||
-webkit-mask: var(--vriish-waves);
|
-webkit-mask: var(--vriish-waves);
|
||||||
padding: 5rem 1rem 8rem 1rem;
|
padding: 5rem 1rem 8rem 1rem;
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
letter-spacing: 0.5rem;
|
letter-spacing: 0.5rem;
|
||||||
font-size: 7rem;
|
font-size: 7rem;
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
letter-spacing: 0.15rem;
|
letter-spacing: 0.15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#scroll-down {
|
#scroll-down {
|
||||||
bottom: 2rem;
|
|
||||||
color: var(--vriish-gradient-text);
|
|
||||||
font-family: FreeSerif, serif;
|
|
||||||
font-size: 4.8rem;
|
font-size: 4.8rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
bottom: 2rem;
|
||||||
|
animation: 1s ease-in infinite alternate scrollDown;
|
||||||
|
font-family: FreeSerif, serif;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
color: var(--vriish-gradient-text);
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
transition: color 0.2s ease-in-out;
|
||||||
animation: 1s ease-in infinite alternate scrollDown;
|
|
||||||
transition: color 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--vriish-gradient-text-hover);
|
color: var(--vriish-gradient-text-hover);
|
||||||
|
|
|
@ -2,9 +2,15 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
scrollbar-color: var(--vriish-rose) var(--background);
|
scrollbar-color: var(--vriish-rose) var(--background);
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
|
scroll-behavior: smooth;
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
&::-webkit-scrollbar {
|
||||||
scroll-behavior: smooth;
|
background: var(--background);
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb { background: var(--vriish-rose); }
|
||||||
|
&::selection {
|
||||||
|
color: var(--text);
|
||||||
|
background-color: var(--link-underline);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,7 +19,6 @@ html {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
|
@ -24,7 +29,6 @@ html {
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
@media (max-width: 920px) {
|
@media (max-width: 920px) {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
|
@ -33,45 +37,33 @@ html {
|
||||||
"footer";
|
"footer";
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
margin: .8em 0;
|
margin: .8em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-color: var(--link-underline);
|
text-decoration-color: var(--link-underline);
|
||||||
text-decoration-thickness: 3px;
|
text-decoration-thickness: 3px;
|
||||||
text-underline-offset: 2px;
|
text-underline-offset: 2px;
|
||||||
|
transition: text-decoration-color .2s;
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
&:hover { text-decoration-color: var(--link-underline-hover); }
|
||||||
transition: text-decoration-color .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration-color: var(--link-underline-hover);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
border: 1px solid var(--vriish-rose);
|
border: 1px solid var(--vriish-rose);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
color: var(--border);
|
color: var(--border);
|
||||||
|
@ -90,8 +82,7 @@ html {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 3em 0;
|
padding: 3em 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
h1, p {
|
||||||
h1, p {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -104,10 +95,7 @@ main {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 85.6vh;
|
min-height: 85.6vh;
|
||||||
|
span { font-size: .8em; }
|
||||||
span {
|
|
||||||
font-size: .8em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p.date-published {
|
p.date-published {
|
||||||
|
|
|
@ -2,16 +2,13 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 3rem auto;
|
margin: 3rem auto;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
box-shadow: rgba(0, 0, 0, .25) 0 0 .5rem;
|
box-shadow: rgba(0, 0, 0, .25) 0 0 .5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.with-text img { margin-bottom: .75rem; }
|
&.with-text img { margin-bottom: .75rem; }
|
||||||
|
|
||||||
&-text {
|
&-text {
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|
|
@ -4,24 +4,18 @@ footer {
|
||||||
margin: 1em auto;
|
margin: 1em auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: .25em;
|
margin: .25em;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '·';
|
content: '·';
|
||||||
padding: .25em;
|
padding: .25em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
text-decoration-color: transparent;
|
text-decoration-color: transparent;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-color: var(--text-secondary);
|
text-decoration-color: var(--text-secondary);
|
||||||
|
|
|
@ -1,27 +1,22 @@
|
||||||
.moreposts {
|
.moreposts {
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
margin-top: 4em;
|
margin-top: 4em;
|
||||||
|
|
||||||
.more{
|
.more{
|
||||||
font-size: .75em;
|
font-size: .75em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
hyphens: none;
|
hyphens: none;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "\27F6";
|
content: "\27F6";
|
||||||
margin-left: .25em;
|
margin-left: .25em;
|
||||||
transition: margin .5s;
|
transition: margin .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover::after {
|
&:hover::after {
|
||||||
margin-left: .5em !important;
|
margin-left: .5em !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .more::after {
|
&:hover .more::after {
|
||||||
margin-left: .35em;
|
margin-left: .35em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.moreposts-wrapper {
|
.moreposts-wrapper {
|
||||||
border-radius: .5em;
|
border-radius: .5em;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -29,7 +24,6 @@
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
scroll-snap-type: x proximity;
|
scroll-snap-type: x proximity;
|
||||||
|
|
||||||
.post-group {
|
.post-group {
|
||||||
color: var(--vriish-gradient-text);
|
color: var(--vriish-gradient-text);
|
||||||
background: var(--vriish-gradient);
|
background: var(--vriish-gradient);
|
||||||
|
@ -39,18 +33,15 @@
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
min-width: 15em;
|
min-width: 15em;
|
||||||
width: 33.333%;
|
width: 33.333%;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
flex: auto;
|
flex: auto;
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside {
|
aside {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,6 @@
|
||||||
border-radius: 0 2rem 2rem 0;
|
border-radius: 0 2rem 2rem 0;
|
||||||
border: 1px solid var(--sidebar-border);
|
border: 1px solid var(--sidebar-border);
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
overflow: unset;
|
overflow: unset;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -34,7 +33,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: attr(aria-label);
|
content: attr(data-title);
|
||||||
left: calc(100% + 0.5rem);
|
left: calc(100% + 0.5rem);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
@ -45,13 +44,9 @@
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
opacity: 0%;
|
opacity: 0%;
|
||||||
|
transition: opacity 0.3s ease-in-out;
|
||||||
z-index: 201;
|
z-index: 201;
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
transition: opacity 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
transform: translate(-50%, -50%) rotate(45deg);
|
transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
@ -66,14 +61,9 @@
|
||||||
left: calc(100% + 0.5rem);
|
left: calc(100% + 0.5rem);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
opacity: 0%;
|
opacity: 0%;
|
||||||
|
transition: opacity 0.3s ease-in-out;
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
transition: opacity 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
||||||
&::before, &::after {
|
&::before, &::after {
|
||||||
opacity: 100%;
|
opacity: 100%;
|
||||||
}
|
}
|
||||||
|
@ -85,21 +75,15 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
padding: inherit;
|
padding: inherit;
|
||||||
|
|
||||||
#avatar {
|
#avatar {
|
||||||
border-radius: 300% 500% / 500% 300%;
|
border-radius: 300% 500% / 500% 300%;
|
||||||
max-width: 64px;
|
max-width: 64px;
|
||||||
|
transition: 0.4s border-radius ease-in-out;
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1rem;
|
top: 1rem;
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
transition: 0.4s border-radius ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-radius: 500% 300% / 300% 500%;
|
border-radius: 500% 300% / 300% 500%;
|
||||||
}
|
}
|
||||||
|
@ -108,7 +92,6 @@
|
||||||
#sidebar-menu {
|
#sidebar-menu {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
@ -120,12 +103,10 @@
|
||||||
border: 1px solid var(--sidebar-border);
|
border: 1px solid var(--sidebar-border);
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -133,7 +114,6 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
|
@ -143,15 +123,10 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
transition: background-color 0.2s linear;
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
margin: 0 0.5rem;
|
margin: 0 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
transition: background-color 0.2s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -159,7 +134,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-color: var(--sidebar-accent-1);
|
background-color: var(--sidebar-accent-1);
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
@ -172,50 +146,37 @@
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear, top 0.5s ease-out;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear, top 0.5s ease-out;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: var(--sidebar-accent-1);
|
background-color: var(--sidebar-accent-1);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--sidebar-accent-2);
|
background-color: var(--sidebar-accent-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: var(--sidebar-accent-3);
|
background-color: var(--sidebar-accent-3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
left: 0;
|
left: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-color: var(--sidebar-accent-2);
|
background-color: var(--sidebar-accent-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -233,11 +194,9 @@
|
||||||
aside {
|
aside {
|
||||||
#social-links {
|
#social-links {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
@ -248,7 +207,6 @@
|
||||||
color: hsl(251.5, 58.9%, 51.4%);
|
color: hsl(251.5, 58.9%, 51.4%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mastodon-icon {
|
.mastodon-icon {
|
||||||
color: hsl(239.6, 100%, 69.4%);
|
color: hsl(239.6, 100%, 69.4%);
|
||||||
}
|
}
|
||||||
|
@ -256,18 +214,15 @@
|
||||||
.icon {
|
.icon {
|
||||||
height: 1.25rem;
|
height: 1.25rem;
|
||||||
width: 1.25rem;
|
width: 1.25rem;
|
||||||
|
transition: color 0.2s ease-in-out;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
transition: color 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#languages {
|
#languages {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
transition: background-color 0.2s ease-in-out;
|
||||||
border-radius: 0.5rem 0.5rem 1.85rem 0.5rem;
|
border-radius: 0.5rem 0.5rem 1.85rem 0.5rem;
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
border-radius: 4rem;
|
border-radius: 4rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -283,25 +238,18 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
transition: background-color 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--sidebar-accent-1);
|
background-color: var(--sidebar-accent-1);
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
background-color: var(--sidebar-accent-2);
|
background-color: var(--sidebar-accent-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
background-color: var(--sidebar-accent-2);
|
background-color: var(--sidebar-accent-2);
|
||||||
|
|
||||||
@media (max-width: 1140px) {
|
@media (max-width: 1140px) {
|
||||||
background-color: var(--sidebar-accent-3);
|
background-color: var(--sidebar-accent-3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#language {
|
#language {
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
</section>
|
</section>
|
||||||
<aside>
|
<aside>
|
||||||
<section id="social-links">
|
<section id="social-links">
|
||||||
<a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" aria-label="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
|
<a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" data-title="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
|
||||||
</section>
|
</section>
|
||||||
<section id="languages">
|
<section id="languages">
|
||||||
{{- if .Site.IsMultiLingual }}
|
{{- if .Site.IsMultiLingual }}
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
{{ range $siteLanguages }}
|
{{ range $siteLanguages }}
|
||||||
{{ if eq $translation.Lang .Lang }}
|
{{ if eq $translation.Lang .Lang }}
|
||||||
{{ if ne $pageLanguage .Lang }}
|
{{ if ne $pageLanguage .Lang }}
|
||||||
<a class="hint-text" id="language" href="{{ $translation.Permalink }}" aria-label="{{ .LanguageName }}">{{ .Params.languageFlag }}</a>
|
<a class="hint-text" id="language" href="{{ $translation.Permalink }}" data-title="{{ .LanguageName }}">{{ .Params.languageFlag }}</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
Loading…
Reference in a new issue