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
4d6365ce40
commit
d7a6f04f7b
@ -1,3 +1,397 @@
|
||||
@use "./base.scss";
|
||||
|
||||
// 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