unfinished bullCRAP
This commit is contained in:
parent
4972cbe693
commit
cb5ba4fb82
SSH key fingerprint:
SHA256:MsJkKuo4PUdjQDpLeaURy81drKkW14exlTHp+8QFu6M
23 changed files with 351 additions and 347 deletions
|
|
@ -1,10 +1,12 @@
|
|||
@import url("./media.css");
|
||||
@import url("./blog.css");
|
||||
@import url("./gallery.css");
|
||||
@import url("./home.css");
|
||||
@import url("./nav.css");
|
||||
@import url("./variables.css");
|
||||
|
||||
:is(a, button):not(span *, .postscript *, body nav *),.link,
|
||||
:is(a, button):not(span *, .postscript *, body nav *),
|
||||
.link,
|
||||
#posts a {
|
||||
color: var(--citrus-dark);
|
||||
transition: background-color var(--trans);
|
||||
|
|
@ -34,7 +36,8 @@ ul:not([role]) li::before {
|
|||
background-color: var(--citrus-dark-extra);
|
||||
}
|
||||
article {
|
||||
background: var(--noise),
|
||||
background:
|
||||
var(--noise),
|
||||
linear-gradient(
|
||||
var(--citrus-light) 70%,
|
||||
color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100%
|
||||
|
|
@ -50,30 +53,7 @@ article {
|
|||
background-color: var(--citrus-dark);
|
||||
color: var(--citrus-primary);
|
||||
}
|
||||
&:not(pre,code,a) {
|
||||
&:not(pre, code, a) {
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
body > nav {
|
||||
border: 0;
|
||||
}
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
body::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
#artworks & article {
|
||||
&::before {
|
||||
width: calc(100% + var(--pad-l) * 2) !important;
|
||||
margin: -3rem 0 0 -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
42
_src/assets/css/citrus/media.css
Normal file
42
_src/assets/css/citrus/media.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/* default.css */
|
||||
@media screen and (min-width: 920px) {
|
||||
header {
|
||||
width: var(--view);
|
||||
border-right-width: 4px;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-right-radius: 100px;
|
||||
margin-left: calc(var(--view) - 4px);
|
||||
position: relative;
|
||||
padding: calc(var(--pad-m) - 2px) var(--pad-sm);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* nav.css */
|
||||
@media screen and (max-width: 920px) {
|
||||
header {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border-right: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
width: 100% !important;
|
||||
background-attachment: none !important;
|
||||
background-image: none !important;
|
||||
background-size: none !important;
|
||||
}
|
||||
body::after {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* gallery.css */
|
||||
@media screen and (max-width: 450px) {
|
||||
#artworks & article {
|
||||
&::before {
|
||||
width: calc(100% + var(--pad-l) * 2) !important;
|
||||
margin: -3rem 0 0 -16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,18 @@
|
|||
body > nav {
|
||||
border-right: 4px solid;
|
||||
.navbar {
|
||||
color: var(--citrus-dark);
|
||||
& summary {
|
||||
filter: drop-shadow(2px 0 var(--citrus-dark))
|
||||
drop-shadow(-2px 0 var(--citrus-dark))
|
||||
drop-shadow(0 2px var(--citrus-dark))
|
||||
drop-shadow(0px -2px var(--citrus-dark));
|
||||
color: var(--citrus-light);
|
||||
& section {
|
||||
background: var(--details-bg);
|
||||
box-shadow: var(--details-shine);
|
||||
border: var(--details-border);
|
||||
& h3 {
|
||||
filter: drop-shadow(2px 0 var(--citrus-dark))
|
||||
drop-shadow(-2px 0 var(--citrus-dark))
|
||||
drop-shadow(0 2px var(--citrus-dark))
|
||||
drop-shadow(0px -2px var(--citrus-dark));
|
||||
color: var(--citrus-light);
|
||||
}
|
||||
}
|
||||
& li *:is(a ,button) {
|
||||
& li *:is(a, button) {
|
||||
background: var(--button-bg);
|
||||
box-shadow: var(--button-shine);
|
||||
border: var(--button-border);
|
||||
|
|
@ -24,34 +28,28 @@ body > nav {
|
|||
background: var(--button-hover-bg);
|
||||
box-shadow: var(--button-hover-shine);
|
||||
border: var(--button-hover-border);
|
||||
transition: background-image var(--trans), border-color var(--trans),
|
||||
transition:
|
||||
background-image var(--trans),
|
||||
border-color var(--trans),
|
||||
box-shadow var(--trans);
|
||||
color: var(--citrus-mix-dark);
|
||||
}
|
||||
}
|
||||
& details,
|
||||
details[open] {
|
||||
background: var(--details-bg);
|
||||
box-shadow: var(--details-shine);
|
||||
border: var(--details-border);
|
||||
}
|
||||
}
|
||||
body > nav,
|
||||
header {
|
||||
#mobile > nav,
|
||||
header,
|
||||
#floating {
|
||||
background-attachment: fixed;
|
||||
background-blend-mode: screen;
|
||||
background-image: var(--nav-bg);
|
||||
background-size: 6px;
|
||||
border-color: var(--citrus-dark);
|
||||
}
|
||||
header {
|
||||
width: var(--view);
|
||||
border-right-width: 4px;
|
||||
#floating, #mobile > nav {
|
||||
border-bottom-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-right-radius: 100px;
|
||||
margin-left: calc(var(--view) - 4px);
|
||||
position: relative;
|
||||
padding: calc(var(--pad-m) - 2px) var(--pad-sm);
|
||||
border-right-width: 4px;
|
||||
}
|
||||
#mobile > nav {
|
||||
height: max-content;
|
||||
border-bottom-right-radius: var(--pad-l);
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
@import url("./media.css");
|
||||
@import url("./variables.css");
|
||||
@import url("./nav.css");
|
||||
@import url("./motion.css");
|
||||
|
||||
|
||||
:root {
|
||||
--view: 18rem;
|
||||
|
|
@ -197,6 +198,7 @@ article {
|
|||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
margin: 0 0 0 calc(var(--pad-xl) * -1);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -259,7 +261,7 @@ article a:not(.link *, a:has(img)) {
|
|||
padding: 0 var(--pad-sm);
|
||||
}
|
||||
|
||||
dialog button[commandfor] {
|
||||
dialog button[commandfor="signal"] {
|
||||
width: max-content;
|
||||
padding: 0 var(--pad-sm);
|
||||
margin: 0 auto;
|
||||
|
|
@ -314,38 +316,4 @@ dialog#signal {
|
|||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-left: 0;
|
||||
padding-top: var(--pad-m);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: var(--pad-l);
|
||||
}
|
||||
|
||||
main > section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main > section {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: initial;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -143,18 +143,4 @@ article#interests {
|
|||
#badges img {
|
||||
max-height: 31px;
|
||||
width: 88px;
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
article#interests {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& ul {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& li a {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -27,7 +27,6 @@
|
|||
justify-self: center;
|
||||
& a,
|
||||
img {
|
||||
z-index: 1;
|
||||
display: inherit;
|
||||
flex-direction: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,77 @@
|
|||
/* default.css */
|
||||
@media screen and (max-width: 920px) {
|
||||
body::after {
|
||||
content: "" !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-left: 0 !important;
|
||||
padding-top: var(--pad-m) !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: var(--pad-l) !important;
|
||||
}
|
||||
|
||||
main > section {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
main > section {
|
||||
width: initial !important;
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: initial !important;
|
||||
width: auto !important;
|
||||
}
|
||||
#mobile > nav {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* nav.css */
|
||||
@media screen and (min-width: 920px) {
|
||||
li:has(> button[popovertarget="mobile"]) {
|
||||
display: none !important;
|
||||
}
|
||||
#floating {
|
||||
display: none;
|
||||
}
|
||||
#mobile {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
#floating {
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* home.css */
|
||||
@media screen and (max-width: 920px) {
|
||||
article#interests {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
|
||||
& ul {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
& li a {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Scrolling pride flag text */
|
||||
article#bio span[id],
|
||||
|
|
@ -1,43 +1,38 @@
|
|||
body > nav::before,
|
||||
body::after {
|
||||
z-index: -1;
|
||||
content: "";
|
||||
position: absolute;
|
||||
mask-image: url("/assets/img/theme/sundae_sit-lines.png");
|
||||
mask-repeat: no-repeat;
|
||||
margin: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body > nav::before {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
mask-size: 160%;
|
||||
-webkit-mask-position-x: -25px;
|
||||
-webkit-mask-position-y: 90%;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: none;
|
||||
mask-size: 100%;
|
||||
width: 100%;
|
||||
height: 100vw;
|
||||
-webkit-mask-position-x: 0;
|
||||
-webkit-mask-position-y: bottom;
|
||||
}
|
||||
|
||||
body > nav {
|
||||
.navbar {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
padding: var(--pad-l);
|
||||
position: fixed;
|
||||
width: var(--view);
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
gap: var(--pad-m);
|
||||
|
||||
& li *:is(a, button) {
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: var(--round);
|
||||
}
|
||||
|
||||
& section {
|
||||
border-radius: var(--round);
|
||||
font-weight: bold;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
|
||||
& h3 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
height: var(--pad-xl);
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
& * svg,
|
||||
li img {
|
||||
margin: 0 8px 0 8px;
|
||||
|
|
@ -45,10 +40,6 @@ body > nav {
|
|||
align-self: center;
|
||||
}
|
||||
|
||||
& details {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& ul {
|
||||
margin: var(--pad-sm);
|
||||
padding: 0;
|
||||
|
|
@ -65,11 +56,7 @@ body > nav {
|
|||
}
|
||||
}
|
||||
|
||||
& details {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
& li *:is(a ,button) {
|
||||
& li *:is(a, button) {
|
||||
display: flex;
|
||||
font-size: 1.125rem;
|
||||
width: 100%;
|
||||
|
|
@ -79,68 +66,57 @@ body > nav {
|
|||
}
|
||||
}
|
||||
|
||||
body {
|
||||
& > nav {
|
||||
gap: var(--pad-m);
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
|
||||
& li *:is(a ,button) {
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: var(--round);
|
||||
}
|
||||
|
||||
& details {
|
||||
border-radius: var(--round);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& details > summary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
height: var(--pad-xl);
|
||||
}
|
||||
& details[open], details:not([open]) {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
#mobile > nav::before,
|
||||
body::after {
|
||||
z-index: -1;
|
||||
content: "";
|
||||
position: absolute;
|
||||
mask-image: url("/assets/img/theme/sundae_sit-lines.png");
|
||||
mask-repeat: no-repeat;
|
||||
margin: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
body > nav {
|
||||
position: initial;
|
||||
width: 100%;
|
||||
overflow: initial;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
& li *:is(a ,button) {
|
||||
line-height: initial;
|
||||
}
|
||||
& details {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
}
|
||||
body > nav::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#mobile > nav::before {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
mask-size: 160%;
|
||||
-webkit-mask-position-x: -25px;
|
||||
-webkit-mask-position-y: 90%;
|
||||
}
|
||||
@media screen and (max-width: 620px) {
|
||||
body > nav {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
||||
& details {
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
body::after {
|
||||
content: none;
|
||||
mask-size: 100%;
|
||||
width: 100%;
|
||||
height: 100vw;
|
||||
-webkit-mask-position-x: 0;
|
||||
-webkit-mask-position-y: bottom;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
button[popovertarget="mobile"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#floating {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
border-bottom-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 2px;
|
||||
border-right-width: 2px;
|
||||
border-bottom-right-radius: var(--pad-l);
|
||||
}
|
||||
|
||||
#mobile {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
#mobile > nav {
|
||||
border-right-style: solid;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
border-color: var(--secondary-300);
|
||||
background-color: var(--secondary-200);
|
||||
|
||||
& aside {
|
||||
& #mobile {
|
||||
box-shadow: inset 0 0 0 2px var(--secondary-500);
|
||||
background-color: var(--secondary-300);
|
||||
}
|
||||
|
|
@ -90,21 +90,15 @@
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
& > nav {
|
||||
background-color: inherit;
|
||||
& #mobile > nav,
|
||||
#floating {
|
||||
background-color: var(--secondary-100);
|
||||
border-color: var(--secondary);
|
||||
& details {
|
||||
& section {
|
||||
background-color: var(--secondary-100);
|
||||
&:not([open]) {
|
||||
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);
|
||||
|
|
@ -122,7 +116,7 @@
|
|||
}
|
||||
|
||||
&::after,
|
||||
& > nav::before {
|
||||
& #mobile > nav::before {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
border-color: var(--primary-300);
|
||||
background-color: var(--primary-200);
|
||||
|
||||
& aside {
|
||||
& #mobile {
|
||||
box-shadow: inset 0 0 0 2px var(--primary-500);
|
||||
background-color: var(--primary-300);
|
||||
}
|
||||
|
|
@ -90,21 +90,15 @@
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
& > nav {
|
||||
background-color: inherit;
|
||||
& #mobile > nav,
|
||||
#floating {
|
||||
background-color: var(--primary-100);
|
||||
border-color: var(--primary-dark-500);
|
||||
& details {
|
||||
& section {
|
||||
background-color: var(--primary-100);
|
||||
&:not([open]) {
|
||||
color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-color: var(--primary-dark-800);
|
||||
background-color: var(--primary-300);
|
||||
color: var(--primary-dark-300);
|
||||
|
||||
& a[aria-current] {
|
||||
color: var(--primary-500);
|
||||
border-color: var(--primary-dark-500);
|
||||
|
|
@ -122,7 +116,7 @@
|
|||
}
|
||||
|
||||
&::after,
|
||||
& > nav::before {
|
||||
& #mobile > nav::before {
|
||||
background-color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -132,9 +132,4 @@
|
|||
@font-face {
|
||||
font-family: Nosey Rodent;
|
||||
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