overhauled old theme
This commit is contained in:
parent
f18a342ae5
commit
fb24c6a302
82 changed files with 1378 additions and 1371 deletions
|
|
@ -1,5 +1,6 @@
|
|||
@import url("./variables.css");
|
||||
@import url("./nav.css");
|
||||
@import url("./motion.css");
|
||||
|
||||
:root {
|
||||
--view: 18rem;
|
||||
|
|
@ -12,6 +13,7 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Rubik", sans-serif;
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
margin-block-start: 0;
|
||||
|
|
@ -26,10 +28,10 @@ body {
|
|||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& a,
|
||||
button {
|
||||
cursor: pointer;
|
||||
transition: background-color var(--trans);
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
outline: 0;
|
||||
|
|
@ -38,8 +40,8 @@ body {
|
|||
}
|
||||
svg {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0;
|
||||
}
|
||||
header {
|
||||
padding-top: var(--pad-xl);
|
||||
|
|
@ -47,12 +49,31 @@ header {
|
|||
& svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: var(--pad-m);
|
||||
}
|
||||
& h1 {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
overflow-y: hidden;
|
||||
word-break: break-all;
|
||||
flex-wrap: wrap;
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
display: flex;
|
||||
margin-left: var(--view);
|
||||
width: calc(100% - var(--view));
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
inset-block: 100%;
|
||||
text-align: center;
|
||||
& span {
|
||||
background-image: var(--transgender);
|
||||
padding: 0 var(--pad-sm);
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: var(--pad-xl);
|
||||
padding-left: calc(var(--view) + var(--pad-xl));
|
||||
|
|
@ -78,14 +99,6 @@ details {
|
|||
border-radius: 0 var(--round) var(--round) 0;
|
||||
}
|
||||
|
||||
main article[id] {
|
||||
|
||||
& p,
|
||||
li {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
|
|
@ -93,10 +106,6 @@ article {
|
|||
height: max-content;
|
||||
padding: var(--pad-xl);
|
||||
|
||||
& a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
& a:has(figure) {
|
||||
border-radius: var(--round);
|
||||
|
||||
|
|
@ -139,11 +148,11 @@ article {
|
|||
word-break: break-word;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
}
|
||||
|
||||
& pre,
|
||||
code:not(pre *) {
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
border-radius: var(--round);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -153,22 +162,37 @@ article {
|
|||
border-style: solid;
|
||||
border-width: 2px;
|
||||
padding: var(--pad-m);
|
||||
border-radius: var(--round);
|
||||
border-radius: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& img {
|
||||
border-radius: inherit;
|
||||
}
|
||||
& ul:not([role="list"]):is(#art *) {
|
||||
padding: 0;
|
||||
margin: 0 0 var(--pad-sm) var(--pad-xl);
|
||||
}
|
||||
& li:is(#art *, #bio *) {
|
||||
display: flex;
|
||||
&::marker {
|
||||
content: none;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
mask-image: var(--paw);
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
margin: 0 0 0 calc(var(--pad-xl) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
& section {
|
||||
& a:has(figure) {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
& figure img {
|
||||
border-radius: var(--round);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
|
|
@ -178,7 +202,7 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
&>:first-child>code {
|
||||
& > :first-child > code {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
margin: var(--pad-sm) 0;
|
||||
|
|
@ -191,18 +215,31 @@ article {
|
|||
|
||||
img[src*="/assets/img/flag/"] {
|
||||
height: 32px;
|
||||
border-radius: 0.2rem;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: #fff;
|
||||
border-radius: 2px;
|
||||
&:first-child {
|
||||
margin-left: var(--pad-m);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--pad-m);
|
||||
}
|
||||
}
|
||||
|
||||
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
||||
transform: translateY(-4px);
|
||||
transition: var(--trans);
|
||||
span:has(img[src*="https://www.google.com/s2/favicons"]) img
|
||||
{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
footer {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
header {
|
||||
padding-left: 0;
|
||||
padding-top: var(--pad-m);
|
||||
|
|
@ -213,16 +250,11 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
|||
padding: var(--pad-l);
|
||||
}
|
||||
|
||||
body>nav {
|
||||
position: initial;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main>section {
|
||||
main > section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main>section {
|
||||
main > section {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
|
|
@ -230,35 +262,4 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
|||
max-width: initial;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
body>nav::before,
|
||||
body>nav::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
body>nav {
|
||||
flex-direction: row;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
||||
& details {
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
body>nav {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
|
||||
& details[open] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue