tidying up stuff i forgot to change
This commit is contained in:
parent
c091831537
commit
f20b697aed
77 changed files with 1014 additions and 660 deletions
|
@ -1,5 +1,6 @@
|
|||
@import url("./variables.css");
|
||||
@import url("./nav.css");
|
||||
|
||||
:root {
|
||||
--view: 18rem;
|
||||
}
|
||||
|
@ -9,9 +10,11 @@ body {
|
|||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& a,
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
outline: 0;
|
||||
}
|
||||
|
@ -24,17 +27,45 @@ main {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
details {
|
||||
cursor: pointer;
|
||||
|
||||
& summary::marker {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
display: inline-block;
|
||||
transition: color var(--trans), background-color var(--trans);
|
||||
height: max-content;
|
||||
padding: 0 var(--pad-m);
|
||||
margin: 0 0 0 calc(var(--pad-xl) * -1);
|
||||
border-radius: 0 var(--round) var(--round) 0;
|
||||
}
|
||||
main article[id] {
|
||||
& p, li {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
article {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: var(--round);
|
||||
height: max-content;
|
||||
padding: var(--pad-xl);
|
||||
|
||||
& a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
& a:has(figure) {
|
||||
border-radius: var(--round);
|
||||
|
||||
& figure {
|
||||
border-color: inherit;
|
||||
}
|
||||
|
@ -45,15 +76,6 @@ article {
|
|||
text-decoration-thickness: 0.1em;
|
||||
}
|
||||
|
||||
& ul {
|
||||
& li {
|
||||
margin: 0;
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& u {
|
||||
text-decoration-style: double;
|
||||
text-decoration-thickness: 2px;
|
||||
|
@ -66,6 +88,7 @@ article {
|
|||
& p {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
& p:not(:last-child, [aria-label]) {
|
||||
padding-bottom: var(--pad-sm);
|
||||
}
|
||||
|
@ -92,18 +115,6 @@ article {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
font-size: 1.6rem;
|
||||
margin: 0;
|
||||
|
||||
& a {
|
||||
display: inline-block;
|
||||
transition: color var(--trans), background-color var(--trans);
|
||||
border-radius: inherit;
|
||||
height: max-content;
|
||||
padding: 0 0.4rem;
|
||||
}
|
||||
}
|
||||
& figure {
|
||||
margin: 0;
|
||||
border-style: solid;
|
||||
|
@ -112,29 +123,39 @@ article {
|
|||
border-radius: var(--round);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& img {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
& section {
|
||||
& a:has(figure) {
|
||||
text-decoration: none;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
& figure img {
|
||||
border-radius: var(--round);
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
padding-top: var(--pad-sm);
|
||||
}
|
||||
}
|
||||
& h3 code {
|
||||
display: flex;
|
||||
gap: var(--pad-l);
|
||||
width: fit-content;
|
||||
margin: var(--pad-l) 0;
|
||||
}
|
||||
}
|
||||
|
||||
:is(main article, main section):not(:last-child) {
|
||||
margin-bottom: var(--pad-xl);
|
||||
}
|
||||
|
||||
img[src*="/assets/img/flag/"] {
|
||||
height: 32px;
|
||||
border-radius: 0.2rem;
|
||||
|
@ -142,24 +163,27 @@ img[src*="/assets/img/flag/"] {
|
|||
border-width: 2px;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
||||
transform: translateY(-4px);
|
||||
transition: var(--trans);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
body > nav {
|
||||
body>nav {
|
||||
position: initial;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: var(--pad-l);
|
||||
}
|
||||
|
||||
main > section {
|
||||
main>section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main > section {
|
||||
main>section {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
|
@ -168,36 +192,42 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
body > nav::before {
|
||||
body>nav::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
body > nav {
|
||||
body>nav {
|
||||
flex-direction: row;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
||||
& details {
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
main {
|
||||
padding: var(--pad-sm);
|
||||
}
|
||||
|
||||
article {
|
||||
padding: var(--pad-l);
|
||||
border: 0;
|
||||
}
|
||||
body > nav {
|
||||
|
||||
body>nav {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
|
||||
& details[open] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,7 +1,16 @@
|
|||
:root {
|
||||
--thumb: 16rem;
|
||||
}
|
||||
#gallery {
|
||||
& time {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
#artworks {
|
||||
& p {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
& ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
|
@ -11,6 +20,9 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
gap: var(--pad-l);
|
||||
& a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
& h2 {
|
||||
|
@ -21,27 +33,27 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
& figure {
|
||||
margin: 0;
|
||||
padding: var(--pad-sm);
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
& img {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: var(--thumb);
|
||||
border-bottom: unset;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
text-decoration: unset;
|
||||
& figure {
|
||||
margin: 0;
|
||||
padding: var(--pad-sm);
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
& img {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: var(--thumb);
|
||||
border-bottom: unset;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
font-family: Urbanist, sans-serif;
|
||||
font-size: var(--pad-lm);
|
||||
}
|
||||
& figcaption {
|
||||
font-family: Urbanist, sans-serif;
|
||||
font-size: var(--pad-lm);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
& .count {
|
||||
margin: auto 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -49,8 +61,11 @@
|
|||
#art {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
h3 {
|
||||
font-family: "Urbanist", sans-serif;
|
||||
display: flex;
|
||||
gap: var(--pad-sm);
|
||||
}
|
||||
& section:has(a:nth-child(n + 2)) {
|
||||
display: flex;
|
||||
|
@ -58,17 +73,12 @@
|
|||
gap: var(--pad-l);
|
||||
}
|
||||
& section {
|
||||
margin: var(--pad-l) 0;
|
||||
& a {
|
||||
display: flex;
|
||||
width: calc(var(--post) - var(--view));
|
||||
width: calc(var(--post) - var(--view) * 1.2);
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
& time {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1400px) {
|
||||
#art section:has(a:nth-child(n + 2)) {
|
||||
|
@ -85,4 +95,4 @@
|
|||
#art section:has(a:nth-child(n + 2)) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -15,7 +15,38 @@
|
|||
color: transparent;
|
||||
}
|
||||
}
|
||||
ul:not([role]) li {
|
||||
article#bio {
|
||||
& ul {
|
||||
margin: 0 var(--pad-xl);
|
||||
}
|
||||
& span[id] {
|
||||
background-clip: text;
|
||||
background-repeat: repeat;
|
||||
&:hover {
|
||||
background-clip: initial;
|
||||
transition: var(--trans);
|
||||
animation: fadeIn var(--trans) linear forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
article#badges {
|
||||
& ul {
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
padding: inherit;
|
||||
margin: 0;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
article#bio ul {
|
||||
padding: 0;
|
||||
}
|
||||
article#bio ul li {
|
||||
&::before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
|
@ -23,12 +54,53 @@ ul:not([role]) li {
|
|||
position: absolute;
|
||||
mask-image: var(--paw);
|
||||
mask-size: contain;
|
||||
margin: 0.4rem 0 0 -2rem;
|
||||
margin: var(--pad-sm) 0 0 calc(var(--pad-xl)*-1);
|
||||
}
|
||||
&::marker {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
article#interests ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
article#interests {
|
||||
& details ul {
|
||||
margin: 0;
|
||||
padding: var(--pad-l) 0;
|
||||
}
|
||||
& details:last-child ul {
|
||||
padding: var(--pad-l) 0 0 0
|
||||
}
|
||||
& li {
|
||||
display: flex;
|
||||
& a {
|
||||
padding: var(--pad-sm);
|
||||
background: transparent;
|
||||
}
|
||||
& span {
|
||||
display: flex;
|
||||
width: 14ch;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
& details h3 {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
& div:has(img) {
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
.music img {
|
||||
height: 48px;
|
||||
}
|
||||
.manga img {
|
||||
height: 128px;
|
||||
}
|
||||
}
|
||||
#pkmn {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
@ -42,6 +114,7 @@ ul:not([role]) li {
|
|||
border-top-color: #c8f8c0;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
margin: var(--pad-l) 0 0 0;
|
||||
& img {
|
||||
image-rendering: pixelated;
|
||||
&:hover {
|
||||
|
@ -52,10 +125,6 @@ ul:not([role]) li {
|
|||
}
|
||||
}
|
||||
}
|
||||
body [id]:not(:nth-child(1)) ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#agender {
|
||||
background-image: linear-gradient(
|
||||
#000 0 14.28%,
|
||||
|
@ -79,70 +148,7 @@ body [id]:not(:nth-child(1)) ul {
|
|||
#pansexual {
|
||||
background-image: linear-gradient(#f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
|
||||
}
|
||||
#bio,
|
||||
#interests {
|
||||
& ul {
|
||||
font-family: "Urbanist", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
& p {
|
||||
font-size: 1.1rem;
|
||||
font-family: "Rubik", sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
& span[id] {
|
||||
background-clip: text;
|
||||
background-repeat: repeat;
|
||||
&:hover {
|
||||
background-clip: initial;
|
||||
transition: var(--trans);
|
||||
animation: fadeIn var(--trans) linear forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
#collection {
|
||||
& ul {
|
||||
margin: 0;
|
||||
padding: var(--pad-l) 0 0 0;
|
||||
}
|
||||
& li {
|
||||
display: flex;
|
||||
& a {
|
||||
padding: var(--pad-sm);
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
& span {
|
||||
display: flex;
|
||||
width: 14ch;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
& div:has(img) {
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
.music img {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
#badges {
|
||||
& ul {
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
padding: inherit;
|
||||
margin: 0;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
#collection div:has(img)::after {
|
||||
#interests div:has(img)::after {
|
||||
content: url("/assets/img/icon/shortcut.png");
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
|
@ -153,7 +159,7 @@ body [id]:not(:nth-child(1)) ul {
|
|||
pointer-events: none;
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
#collection {
|
||||
article#interests {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
& ul {
|
||||
|
|
|
@ -3,6 +3,8 @@
|
|||
@import url("./theme-dark.css");
|
||||
|
||||
#index {
|
||||
color: var(--primary-dark-300);
|
||||
background-color: rgb(255, 190, 0);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -14,7 +16,6 @@
|
|||
width: inherit;
|
||||
flex-direction: column;
|
||||
background-image: var(--sunny);
|
||||
background-color: rgb(255, 190, 0);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
|
|
|
@ -42,11 +42,7 @@ body > nav {
|
|||
align-self: center;
|
||||
}
|
||||
& details {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
& summary::marker {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
& ul {
|
||||
margin: var(--pad-sm);
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
article, body {
|
||||
color: var(--secondary-light-300);
|
||||
}
|
||||
article {
|
||||
border-color: var(--secondary-300);
|
||||
background-color: var(--secondary-200);
|
||||
color: var(--secondary-light-300);
|
||||
|
||||
& aside {
|
||||
box-shadow: inset 0 0 0 2px var(--secondary-500);
|
||||
|
@ -64,7 +66,6 @@
|
|||
/* default.css */
|
||||
body {
|
||||
background-color: var(--secondary-100);
|
||||
color: var(--secondary-light-300);
|
||||
/* this is cursed */
|
||||
& :is(a, button) {
|
||||
color: var(--secondary-light-400);
|
||||
|
@ -75,9 +76,32 @@
|
|||
border-color: currentColor;
|
||||
background-color: var(--secondary-500);
|
||||
}
|
||||
&:is(.header-anchor):is(:hover, :focus) {
|
||||
background-color: var(--secondary-light-400);
|
||||
color: var(--secondary-300);
|
||||
box-shadow: 0 0 0 2px var(--secondary-300);
|
||||
}
|
||||
}
|
||||
& > nav {
|
||||
border-color: var(--secondary);
|
||||
& details {
|
||||
background-color: var(--secondary-100);
|
||||
&:not([open]) summary {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-color: var(--secondary);
|
||||
background-color: var(--secondary-300);
|
||||
color: var(--secondary-light-300);
|
||||
|
||||
& a[aria-current] {
|
||||
color: var(--secondary-500);
|
||||
border-color: var(--secondary-light-500);
|
||||
background-color: var(--secondary-light-500);
|
||||
}
|
||||
}
|
||||
&::before,
|
||||
::after {
|
||||
background-color: var(--secondary);
|
||||
|
@ -87,37 +111,13 @@
|
|||
&::after {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
& details {
|
||||
background-color: var(--secondary-100);
|
||||
&:not([open]) summary {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-color: var(--secondary);
|
||||
background-color: var(--secondary-300);
|
||||
color: var(--secondary-light-300);
|
||||
|
||||
& summary {
|
||||
color: var(--secondary-light-300);
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
& a[aria-current] {
|
||||
color: var(--secondary-500);
|
||||
border-color: var(--secondary-light-500);
|
||||
background-color: var(--secondary-light-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* home.css */
|
||||
ul:not([role]) li::before {
|
||||
background-color: var(--secondary-light-300);
|
||||
}
|
||||
#collection {
|
||||
& a:is(:hover, :focus) {
|
||||
#interests {
|
||||
& a:is(:hover, :focus):not(.header-anchor) {
|
||||
box-shadow: 0 0 0 1px currentColor;
|
||||
background-color: var(--secondary-500);
|
||||
}
|
||||
|
@ -125,11 +125,14 @@
|
|||
box-shadow: 0 0 0 1px
|
||||
color-mix(in lch, transparent, var(--secondary-500) 70%);
|
||||
}
|
||||
& details h3 {
|
||||
border-color: var(--secondary-600);
|
||||
}
|
||||
}
|
||||
a:has(img[src*="/assets/img/button"]) {
|
||||
background-color: unset;
|
||||
&:is(:hover, :focus) img {
|
||||
filter: drop-shadow(4px 6px 0 var(--primary-500));
|
||||
filter: drop-shadow(4px 6px 0 var(--secondary-500));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
@media (prefers-color-scheme: light) {
|
||||
article, body {
|
||||
color: var(--primary-dark-300);
|
||||
}
|
||||
article {
|
||||
border-color: var(--primary-300);
|
||||
background-color: var(--primary-200);
|
||||
color: var(--primary-dark-300);
|
||||
|
||||
& aside {
|
||||
box-shadow: inset 0 0 0 2px var(--primary-500);
|
||||
|
@ -64,7 +66,6 @@
|
|||
/* default.css */
|
||||
body {
|
||||
background-color: var(--primary-100);
|
||||
color: var(--primary-dark-300);
|
||||
/* this is cursed */
|
||||
& :is(a, button) {
|
||||
color: var(--primary-dark-400);
|
||||
|
@ -75,9 +76,32 @@
|
|||
border-color: currentColor;
|
||||
background-color: var(--primary-500);
|
||||
}
|
||||
&:is(.header-anchor):is(:hover, :focus) {
|
||||
background-color: var(--primary-dark-400);
|
||||
color: var(--primary-300);
|
||||
box-shadow: 0 0 0 2px var(--primary-300);
|
||||
}
|
||||
}
|
||||
& > nav {
|
||||
border-color: var(--primary);
|
||||
& details {
|
||||
background-color: var(--primary-100);
|
||||
&:not([open]) summary {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary-300);
|
||||
color: var(--primary-dark-300);
|
||||
|
||||
& a[aria-current] {
|
||||
color: var(--primary-500);
|
||||
border-color: var(--primary-dark-500);
|
||||
background-color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: var(--primary);
|
||||
|
@ -87,36 +111,13 @@
|
|||
&::after {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
& details {
|
||||
background-color: var(--primary-100);
|
||||
&:not([open]) summary {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary-300);
|
||||
color: var(--primary-dark-300);
|
||||
|
||||
& summary {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
& a[aria-current] {
|
||||
color: var(--primary-500);
|
||||
border-color: var(--primary-dark-500);
|
||||
background-color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* home.css */
|
||||
ul:not([role]) li::before {
|
||||
background-color: var(--primary-dark-300);
|
||||
}
|
||||
#collection {
|
||||
& a:is(:hover, :focus) {
|
||||
#interests {
|
||||
& a:is(:hover, :focus):not(.header-anchor) {
|
||||
box-shadow: 0 0 0 1px currentColor;
|
||||
background-color: var(--primary-500);
|
||||
}
|
||||
|
@ -124,6 +125,9 @@
|
|||
box-shadow: 0 0 0 1px
|
||||
color-mix(in lch, transparent, var(--primary-dark-500) 30%);
|
||||
}
|
||||
& details h3 {
|
||||
border-color: var(--primary-dark-600);
|
||||
}
|
||||
}
|
||||
a:has(img[src*="/assets/img/button"]) {
|
||||
background-color: unset;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue