mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-20 03:14:06 -06:00
Update custom.scss
This commit is contained in:
enneaa
GitHub
parent
d7a6f04f7b
commit
f936bcd045
@ -1,397 +1,3 @@
|
|||||||
@use "./base.scss";
|
@use "./base.scss";
|
||||||
|
|
||||||
// put your custom CSS here!
|
// put your custom CSS here!
|
||||||
@use "./variables.scss" as *;
|
|
||||||
|
|
||||||
body[data-slug="index"] img {
|
|
||||||
filter: invert(0%);
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100vh;
|
|
||||||
|
|
||||||
// only allow synthesizing italics but not bold
|
|
||||||
font-synthesis: style;
|
|
||||||
}
|
|
||||||
|
|
||||||
img[src*="banner.svg"] {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
[saved-theme="dark"] body[data-slug="index"] img[src*="banner.svg"] {
|
|
||||||
filter: invert(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body[data-slug="thoughts/craft"] {
|
|
||||||
& li:has(> img, > video) {
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
& > img,
|
|
||||||
& > video {
|
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
article > ul {
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
& > li {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
display: grid !important;
|
|
||||||
gap: 1.5rem !important;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: min-content min-content min-content min-content;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
grid-area: 1 / 1 / 2 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
grid-area: 2 / 1 / 3 / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.darkmode {
|
|
||||||
grid-area: 2 / 2 / 3 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc {
|
|
||||||
grid-row: 3;
|
|
||||||
grid-column: 1 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-notes:nth-last-child(2) {
|
|
||||||
grid-area: 3 / 1 / 3 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-notes:nth-last-child(1) {
|
|
||||||
grid-area: 4 / 1 / 4 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and ($mobile) {
|
|
||||||
display: flex !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
overflow: visible;
|
|
||||||
padding: 0;
|
|
||||||
height: 0;
|
|
||||||
margin: 2em auto;
|
|
||||||
border: none;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "* * *";
|
|
||||||
display: inline-block;
|
|
||||||
margin: -1em 0 0.5em;
|
|
||||||
font-size: 1.5em;
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
color: var(--gray);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pre.poetry {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-family: biro_script_standardRgus;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
position: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta,
|
|
||||||
.content-meta {
|
|
||||||
font-family: biro_script_standardRgus, var(--bodyFont);
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
audio::-webkit-media-controls-panel {
|
|
||||||
background-color: var(--lightgray);
|
|
||||||
}
|
|
||||||
|
|
||||||
#quartz-root {
|
|
||||||
isolation: isolate;
|
|
||||||
}
|
|
||||||
|
|
||||||
// fade-in elements
|
|
||||||
#quartz-body {
|
|
||||||
[saved-theme="dark"] & {
|
|
||||||
--animation-name: fade2;
|
|
||||||
}
|
|
||||||
|
|
||||||
[saved-theme="light"] & {
|
|
||||||
--animation-name: fade;
|
|
||||||
}
|
|
||||||
|
|
||||||
@for $i from 1 through 4 {
|
|
||||||
@for $j from 1 through 8 {
|
|
||||||
& > *:nth-child(#{$i}) > *:nth-child(#{$j}) {
|
|
||||||
animation: var(--animation-name) 2s ease 1 normal backwards;
|
|
||||||
animation-delay: #{0.1 * $j + 0.4 * $i}s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// hack to duplicate the fade-in animation so that we reset the animation in both directions
|
|
||||||
@keyframes fade {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade2 {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// dappled light
|
|
||||||
#dappled-light {
|
|
||||||
animation-duration: 0s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
pointer-events: none;
|
|
||||||
position: fixed;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
isolation: isolate;
|
|
||||||
|
|
||||||
--day: #fffdfa;
|
|
||||||
--evening: #fccc83;
|
|
||||||
--dusk: #db7a2a;
|
|
||||||
--night: #0f131c;
|
|
||||||
--dawn: #16132b;
|
|
||||||
--morning: #9fb3bf;
|
|
||||||
|
|
||||||
--shadow: #1a1917;
|
|
||||||
--bounce-light: #f5d7a6;
|
|
||||||
--timing-fn: cubic-bezier(0.455, 0.19, 0, 0.985);
|
|
||||||
|
|
||||||
body.animation-ready & {
|
|
||||||
animation-play-state: running;
|
|
||||||
animation-duration: 1s;
|
|
||||||
animation-name: sunrise;
|
|
||||||
}
|
|
||||||
|
|
||||||
[saved-theme="dark"] body.animation-ready & {
|
|
||||||
animation-duration: 1.5s;
|
|
||||||
animation-name: sunset;
|
|
||||||
}
|
|
||||||
|
|
||||||
[saved-theme="dark"] & {
|
|
||||||
--shadow: #030307;
|
|
||||||
--bounce-light: #1b293f;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > #progressive-blur {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
backdrop-filter: blur(var(--blur-amount));
|
|
||||||
mask-image: linear-gradient(
|
|
||||||
252deg,
|
|
||||||
transparent,
|
|
||||||
transparent var(--stop1),
|
|
||||||
black var(--stop2),
|
|
||||||
black
|
|
||||||
);
|
|
||||||
|
|
||||||
&:nth-child(1) {
|
|
||||||
--blur-amount: 8px;
|
|
||||||
--stop1: 0%;
|
|
||||||
--stop2: 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(2) {
|
|
||||||
--blur-amount: 72px;
|
|
||||||
--stop1: 30%;
|
|
||||||
--stop2: 60%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#glow {
|
|
||||||
position: absolute;
|
|
||||||
background: linear-gradient(309deg, var(--bounce-light), var(--bounce-light) 20%, transparent);
|
|
||||||
transition: background 1s var(--timing-fn);
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#glow-bounce {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
background: linear-gradient(355deg, var(--bounce-light) 0%, transparent 30%, transparent 100%);
|
|
||||||
transition: background 1s var(--timing-fn);
|
|
||||||
opacity: 0.5;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .perspective {
|
|
||||||
position: absolute;
|
|
||||||
transition:
|
|
||||||
transform 1.7s var(--timing-fn),
|
|
||||||
opacity 4s ease;
|
|
||||||
top: -30vh;
|
|
||||||
right: 0;
|
|
||||||
width: 80vw;
|
|
||||||
height: 130vh;
|
|
||||||
opacity: 0.07;
|
|
||||||
background-blend-mode: darken;
|
|
||||||
transform-origin: top right;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
transform: matrix3d(0.75, -0.0625, 0, 0.0008, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
||||||
|
|
||||||
[saved-theme="dark"] & {
|
|
||||||
opacity: 0.3;
|
|
||||||
transform: matrix3d(0.8333, 0.0833, 0, 0.0003, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#leaves {
|
|
||||||
position: absolute;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
bottom: 0px;
|
|
||||||
right: -600px;
|
|
||||||
width: 1600px;
|
|
||||||
height: 1400px;
|
|
||||||
background-image: url("/static/leaves.png");
|
|
||||||
perspective: 400px;
|
|
||||||
animation: billow 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
#blinds {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
& .shutter,
|
|
||||||
& .bar {
|
|
||||||
background-color: var(--shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
& .shutter {
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
transition: height 1s var(--timing-fn);
|
|
||||||
|
|
||||||
[saved-theme="dark"] & {
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .shutters {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: end;
|
|
||||||
gap: 60px;
|
|
||||||
transition: gap 1s var(--timing-fn);
|
|
||||||
|
|
||||||
[saved-theme="dark"] & {
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .vertical {
|
|
||||||
top: 0;
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
& > .bar {
|
|
||||||
width: 12px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes sunrise {
|
|
||||||
0% {
|
|
||||||
background-color: var(--night);
|
|
||||||
}
|
|
||||||
|
|
||||||
10% {
|
|
||||||
background-color: var(--dawn);
|
|
||||||
}
|
|
||||||
|
|
||||||
35% {
|
|
||||||
background-color: var(--morning);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
background-color: var(--day);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes sunset {
|
|
||||||
0% {
|
|
||||||
background-color: var(--day);
|
|
||||||
}
|
|
||||||
|
|
||||||
30% {
|
|
||||||
background-color: var(--evening);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
background-color: var(--dusk);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
background-color: var(--dawn);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
background-color: var(--night);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes billow {
|
|
||||||
0% {
|
|
||||||
transform: rotateX(0deg) rotateY(0deg) scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
18% {
|
|
||||||
transform: rotateX(1deg) rotateY(2deg) scale(1.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
32% {
|
|
||||||
transform: rotateX(-4deg) rotateY(-2deg) scale(0.96);
|
|
||||||
}
|
|
||||||
|
|
||||||
66% {
|
|
||||||
transform: rotateX(3deg) rotateY(-1deg) scale(1.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: rotateX(0deg) rotateY(0deg) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user