pupdated
This commit is contained in:
parent
c8223447a0
commit
4972cbe693
40 changed files with 499 additions and 286 deletions
|
|
@ -58,7 +58,7 @@ article > .addendum {
|
|||
|
||||
article > .postscript {
|
||||
margin: 0 0 auto auto;
|
||||
padding: 2rem 0 4rem 0;
|
||||
padding: var(--pad-xl) 0 var(--pad-xxl) 0;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ body {
|
|||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& a,
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
|
@ -38,19 +39,23 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-top: var(--pad-xl);
|
||||
padding-left: calc(var(--view) + var(--pad-xl));
|
||||
|
||||
& svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: var(--pad-m);
|
||||
}
|
||||
|
||||
& h1 {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
|
@ -68,6 +73,7 @@ footer {
|
|||
position: sticky;
|
||||
inset-block: 100%;
|
||||
text-align: center;
|
||||
|
||||
& span {
|
||||
background-image: var(--transgender);
|
||||
padding: 0 var(--pad-sm);
|
||||
|
|
@ -92,7 +98,9 @@ details {
|
|||
|
||||
.header-anchor {
|
||||
display: inline-block;
|
||||
transition: color var(--trans), background-color var(--trans);
|
||||
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);
|
||||
|
|
@ -149,7 +157,9 @@ article {
|
|||
word-break: break-word;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
transition:
|
||||
background-color var(--trans),
|
||||
border-color var(--trans);
|
||||
}
|
||||
|
||||
& pre,
|
||||
|
|
@ -167,14 +177,17 @@ article {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
& ul:not([role="list"]):is(#art *) {
|
||||
padding: 0;
|
||||
margin: 0 0 var(--pad-sm) var(--pad-xl);
|
||||
}
|
||||
|
||||
& li:not([role] *, #changelog *) {
|
||||
&::marker {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
|
|
@ -186,6 +199,7 @@ article {
|
|||
margin: 0 0 0 calc(var(--pad-xl) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
& section {
|
||||
& a:has(figure) {
|
||||
height: max-content;
|
||||
|
|
@ -216,9 +230,11 @@ article {
|
|||
img[src*="/assets/img/flag/"] {
|
||||
height: 32px;
|
||||
border-radius: 2px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: var(--pad-m);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--pad-m);
|
||||
}
|
||||
|
|
@ -226,13 +242,77 @@ img[src*="/assets/img/flag/"] {
|
|||
|
||||
.link {
|
||||
display: inline-flex;
|
||||
|
||||
& a {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
& img {
|
||||
position: relative;
|
||||
vertical-align: sub;
|
||||
margin: 0 4px;
|
||||
margin: 0 var(--pad-sm);
|
||||
}
|
||||
}
|
||||
|
||||
article a:not(.link *, a:has(img)) {
|
||||
display: inline-flex;
|
||||
padding: 0 var(--pad-sm);
|
||||
}
|
||||
|
||||
dialog button[commandfor] {
|
||||
width: max-content;
|
||||
padding: 0 var(--pad-sm);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
dialog#signal {
|
||||
cursor: default;
|
||||
background: black;
|
||||
border: none;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
padding: var(--pad-xl);
|
||||
|
||||
& article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
max-width: fit-content;
|
||||
background: none;
|
||||
word-wrap: break-word;
|
||||
color: white;
|
||||
|
||||
& h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
& p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
& a {
|
||||
margin: auto 0 0 auto;
|
||||
}
|
||||
& h1,
|
||||
p,
|
||||
a {
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
}
|
||||
|
||||
& img {
|
||||
border: 4px solid white;
|
||||
padding: var(--pad-sm);
|
||||
max-width: 100%;
|
||||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -240,10 +320,12 @@ img[src*="/assets/img/flag/"] {
|
|||
body::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-left: 0;
|
||||
padding-top: var(--pad-m);
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
text-decoration-style: none;
|
||||
}
|
||||
& .count {
|
||||
margin: auto 0 0 auto;
|
||||
|
|
@ -48,7 +49,10 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
h3 {
|
||||
& p {
|
||||
max-width: var(--post);
|
||||
}
|
||||
& h3 {
|
||||
display: flex;
|
||||
gap: var(--pad-sm);
|
||||
}
|
||||
|
|
@ -77,6 +81,9 @@
|
|||
}
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
#art p {
|
||||
max-width: auto;
|
||||
}
|
||||
#art a:has(img) {
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,8 +69,7 @@ body > nav {
|
|||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
& a,
|
||||
button {
|
||||
& li *:is(a ,button) {
|
||||
display: flex;
|
||||
font-size: 1.125rem;
|
||||
width: 100%;
|
||||
|
|
@ -86,8 +85,7 @@ body {
|
|||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
|
||||
& a,
|
||||
button {
|
||||
& li *:is(a ,button) {
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
|
|
@ -118,7 +116,7 @@ body {
|
|||
overflow: initial;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
& a, button {
|
||||
& li *:is(a ,button) {
|
||||
line-height: initial;
|
||||
}
|
||||
& details {
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
/* default.css */
|
||||
body {
|
||||
background-color: var(--secondary-100);
|
||||
& :is(a, button):not(span *, .postscript *),
|
||||
& :is(a, button):not(span *, .postscript *, dialog *),
|
||||
span:has(a) {
|
||||
color: var(--secondary-light-400);
|
||||
border-color: var(--secondary-600);
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
/* default.css */
|
||||
body {
|
||||
background-color: var(--primary-100);
|
||||
& :is(a, button):not(span *, .postscript *),
|
||||
& :is(a, button):not(span *, .postscript *, dialog *),
|
||||
span:has(a) {
|
||||
color: var(--primary-dark-400);
|
||||
border-color: var(--primary-600);
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@
|
|||
--image: 24rem;
|
||||
--post: 75ch;
|
||||
--round: 16px;
|
||||
--pad-xxl: 4rem;
|
||||
--pad-xl: 2rem;
|
||||
--pad-lm: 1.4rem;
|
||||
--pad-l: 1rem;
|
||||
|
|
@ -128,18 +129,12 @@
|
|||
src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Pangolin;
|
||||
src: url("/assets/fonts/Pangolin-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Terminess;
|
||||
src: url("/assets/fonts/TerminessNerdFont-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: Nosey Rodent;
|
||||
src: url("/assets/fonts/noseyrodent.ttf") format("truetype");
|
||||
src: url("/assets/fonts/noseyrodent-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Impact;
|
||||
src: url("/assets/fonts/Impact-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue