changed home page message and misc stuff
This commit is contained in:
parent
dfba7f8f29
commit
ea235120f8
7 changed files with 106 additions and 114 deletions
|
@ -75,13 +75,12 @@
|
|||
& a {
|
||||
display: block;
|
||||
text-decoration: unset;
|
||||
|
||||
& figure {
|
||||
margin: 0;
|
||||
padding: 0.4rem;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-radius: 0.4rem;
|
||||
border-radius: var(--round);
|
||||
|
||||
& img {
|
||||
display: flex;
|
||||
|
@ -101,6 +100,9 @@
|
|||
}
|
||||
|
||||
#gallery article {
|
||||
& h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
& figure {
|
||||
& time {
|
||||
display: flex;
|
||||
|
@ -109,6 +111,7 @@
|
|||
|
||||
& a {
|
||||
width: fit-content;
|
||||
align-self: center;
|
||||
& img {
|
||||
min-height: fit-content;
|
||||
max-height: 18rem;
|
||||
|
@ -120,14 +123,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > section {
|
||||
margin-top: 1rem;
|
||||
|
||||
&:has(figure:nth-child(n + 2)) {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,9 +7,17 @@
|
|||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
color: inherit;
|
||||
}
|
||||
100% {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
#intro span[id]::before {
|
||||
text-shadow: 0 0 1rem var(--primary-dark-500);
|
||||
#badges a:is(:hover, :focus) img {
|
||||
filter: drop-shadow(4px 6px 0 var(--primary-500));
|
||||
}
|
||||
#collection {
|
||||
& a:is(:hover, :focus) {
|
||||
|
@ -23,8 +31,8 @@
|
|||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#intro span[id]::before {
|
||||
text-shadow: 0 0 1rem var(--secondary-900);
|
||||
#badges a:is(:hover, :focus) img {
|
||||
filter: drop-shadow(4px 6px 0 var(--secondary-500));
|
||||
}
|
||||
#collection {
|
||||
& a:is(:hover, :focus) {
|
||||
|
@ -64,54 +72,42 @@ body [id]:not(:nth-child(1)) ul {
|
|||
}
|
||||
#agender {
|
||||
background-image: linear-gradient(
|
||||
black 0 14.28%,
|
||||
silver 0 28.57%,
|
||||
white 0 42.85%,
|
||||
#000 0 14.28%,
|
||||
#c0c0c0 0 28.57%,
|
||||
#fff 0 42.85%,
|
||||
#a3fa73 0 57.14%,
|
||||
white 0 71.42%,
|
||||
silver 0 85.71%,
|
||||
black 0
|
||||
#fff 0 71.42%,
|
||||
#c0c0c0 0 85.71%,
|
||||
#000 0
|
||||
);
|
||||
}
|
||||
#aromantic {
|
||||
background-image: linear-gradient(
|
||||
#0a2 20%,
|
||||
#7d6 0 40%,
|
||||
white 0 60%,
|
||||
darkgray 0 80%,
|
||||
black 0
|
||||
#fff 0 60%,
|
||||
#a9a9a9 0 80%,
|
||||
#000 0
|
||||
);
|
||||
}
|
||||
#pansexual {
|
||||
background-image: linear-gradient(#f09 33.33%, gold 0 66.66%, deepskyblue 0);
|
||||
}
|
||||
#agender::before {
|
||||
content: "agender";
|
||||
}
|
||||
#aromantic::before {
|
||||
content: "aromantic";
|
||||
}
|
||||
#pansexual::before {
|
||||
content: "pansexual";
|
||||
}
|
||||
#intro span[id]::before {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
#intro span[id] {
|
||||
font-size: 2rem;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
background-size: 2rem;
|
||||
background-position: center;
|
||||
background-repeat: repeat-x;
|
||||
background-image: linear-gradient(#f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
|
||||
}
|
||||
#intro {
|
||||
& p {
|
||||
& p, ul {
|
||||
font-family: "Urbanist", sans-serif;
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
& ul {
|
||||
margin: 0;
|
||||
}
|
||||
& span[id] {
|
||||
background-clip: text;
|
||||
background-repeat: repeat;
|
||||
&:hover {
|
||||
animation: fadeIn var(--trans) linear forwards;
|
||||
filter: drop-shadow(2px 2px 1px #0006);
|
||||
}
|
||||
}
|
||||
}
|
||||
#collection {
|
||||
|
@ -120,12 +116,12 @@ body [id]:not(:nth-child(1)) ul {
|
|||
& ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
justify-content: start;
|
||||
}
|
||||
& li {
|
||||
display: flex;
|
||||
& a {
|
||||
padding: 8px;
|
||||
padding-top: 8px;
|
||||
transition: background-color var(--trans);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
@ -151,12 +147,12 @@ body [id]:not(:nth-child(1)) ul {
|
|||
list-style-type: none;
|
||||
}
|
||||
& a {
|
||||
outline: none;
|
||||
display: flex;
|
||||
padding: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
& a:is(:hover, :focus) img {
|
||||
filter: drop-shadow(4px 6px 0 #0006);
|
||||
transform: translateY(-4px);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue