mirror of
https://github.com/ZetaKebab/quartz.git
synced 2025-07-03 00:37:36 +00:00
Merge branch 'v4' into jpg
This commit is contained in:
@ -1,3 +1,5 @@
|
||||
@use "sass:map";
|
||||
|
||||
@use "./variables.scss" as *;
|
||||
@use "./syntax.scss";
|
||||
@use "./callouts.scss";
|
||||
@ -9,10 +11,8 @@ html {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
body,
|
||||
section {
|
||||
body {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--light);
|
||||
font-family: var(--bodyFont);
|
||||
@ -20,11 +20,10 @@ section {
|
||||
}
|
||||
|
||||
.text-highlight {
|
||||
background-color: #fff23688;
|
||||
background-color: var(--textHighlight);
|
||||
padding: 0 0.1rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
|
||||
color: var(--darkgray);
|
||||
@ -43,16 +42,43 @@ ul,
|
||||
.math {
|
||||
color: var(--darkgray);
|
||||
fill: var(--darkgray);
|
||||
overflow-wrap: anywhere;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
text,
|
||||
a,
|
||||
li,
|
||||
ol,
|
||||
ul,
|
||||
.katex,
|
||||
.math {
|
||||
overflow-wrap: anywhere;
|
||||
/* tr and td removed from list of selectors for overflow-wrap, allowing them to use default 'normal' property value */
|
||||
}
|
||||
|
||||
.math {
|
||||
&.math-display {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
> mjx-container.MathJax,
|
||||
blockquote > div > mjx-container.MathJax {
|
||||
display: flex;
|
||||
> svg {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
blockquote > div > mjx-container.MathJax > svg {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: $semiBoldWeight;
|
||||
}
|
||||
@ -64,7 +90,7 @@ a {
|
||||
color: var(--secondary);
|
||||
|
||||
&:hover {
|
||||
color: var(--tertiary) !important;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
&.internal {
|
||||
@ -74,8 +100,17 @@ a {
|
||||
border-radius: 5px;
|
||||
line-height: 1.4rem;
|
||||
|
||||
&.broken {
|
||||
color: var(--secondary);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s ease;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(> img) {
|
||||
background-color: none;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@ -96,27 +131,39 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.flex-component {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.desktop-only {
|
||||
display: initial;
|
||||
@media all and (max-width: $fullPageWidth) {
|
||||
&.flex-component {
|
||||
display: flex;
|
||||
}
|
||||
@media all and ($mobile) {
|
||||
&.flex-component {
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: none;
|
||||
@media all and (max-width: $fullPageWidth) {
|
||||
&.flex-component {
|
||||
display: none;
|
||||
}
|
||||
@media all and ($mobile) {
|
||||
&.flex-component {
|
||||
display: flex;
|
||||
}
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
@media all and (max-width: $fullPageWidth) {
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
max-width: $pageWidth;
|
||||
}
|
||||
|
||||
max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
|
||||
margin: 0 auto;
|
||||
& article {
|
||||
& > h1 {
|
||||
font-size: 2rem;
|
||||
@ -144,70 +191,122 @@ a {
|
||||
}
|
||||
|
||||
& > #quartz-body {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@media all and (max-width: $fullPageWidth) {
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: #{map.get($desktopGrid, templateColumns)};
|
||||
grid-template-rows: #{map.get($desktopGrid, templateRows)};
|
||||
column-gap: #{map.get($desktopGrid, columnGap)};
|
||||
row-gap: #{map.get($desktopGrid, rowGap)};
|
||||
grid-template-areas: #{map.get($desktopGrid, templateAreas)};
|
||||
|
||||
@media all and ($tablet) {
|
||||
grid-template-columns: #{map.get($tabletGrid, templateColumns)};
|
||||
grid-template-rows: #{map.get($tabletGrid, templateRows)};
|
||||
column-gap: #{map.get($tabletGrid, columnGap)};
|
||||
row-gap: #{map.get($tabletGrid, rowGap)};
|
||||
grid-template-areas: #{map.get($tabletGrid, templateAreas)};
|
||||
}
|
||||
@media all and ($mobile) {
|
||||
grid-template-columns: #{map.get($mobileGrid, templateColumns)};
|
||||
grid-template-rows: #{map.get($mobileGrid, templateRows)};
|
||||
column-gap: #{map.get($mobileGrid, columnGap)};
|
||||
row-gap: #{map.get($mobileGrid, rowGap)};
|
||||
grid-template-areas: #{map.get($mobileGrid, templateAreas)};
|
||||
}
|
||||
|
||||
@media all and not ($desktop) {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
@media all and ($mobile) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
& .sidebar {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
top: 0;
|
||||
width: $sidePanelWidth;
|
||||
margin-top: $topSpacing;
|
||||
box-sizing: border-box;
|
||||
padding: 0 4rem;
|
||||
position: fixed;
|
||||
@media all and (max-width: $fullPageWidth) {
|
||||
position: initial;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
width: initial;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
padding: $topSpacing 2rem 2rem 2rem;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
& .sidebar.left {
|
||||
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
|
||||
@media all and (max-width: $fullPageWidth) {
|
||||
z-index: 1;
|
||||
grid-area: grid-sidebar-left;
|
||||
flex-direction: column;
|
||||
@media all and ($mobile) {
|
||||
gap: 0;
|
||||
align-items: center;
|
||||
position: initial;
|
||||
display: flex;
|
||||
height: unset;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
& .sidebar.right {
|
||||
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
|
||||
flex-wrap: wrap;
|
||||
& > * {
|
||||
@media all and (max-width: $fullPageWidth) {
|
||||
grid-area: grid-sidebar-right;
|
||||
margin-right: 0;
|
||||
flex-direction: column;
|
||||
@media all and ($mobile) {
|
||||
margin-left: inherit;
|
||||
margin-right: inherit;
|
||||
}
|
||||
@media all and not ($desktop) {
|
||||
position: initial;
|
||||
height: unset;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
& > * {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
max-height: 24rem;
|
||||
}
|
||||
& > .toc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .page-header {
|
||||
width: $pageWidth;
|
||||
margin: $topSpacing auto 0 auto;
|
||||
@media all and (max-width: $fullPageWidth) {
|
||||
width: initial;
|
||||
margin-top: 2rem;
|
||||
& .page-header,
|
||||
& .page-footer {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
& .center,
|
||||
& footer {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: $pageWidth;
|
||||
@media all and (max-width: $fullPageWidth) {
|
||||
width: initial;
|
||||
& .page-header {
|
||||
grid-area: grid-header;
|
||||
margin: $topSpacing 0 0 0;
|
||||
@media all and ($mobile) {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .center > article {
|
||||
grid-area: grid-center;
|
||||
}
|
||||
|
||||
& footer {
|
||||
grid-area: grid-footer;
|
||||
}
|
||||
|
||||
& .center,
|
||||
& footer {
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@media all and ($tablet) {
|
||||
margin-right: 0;
|
||||
}
|
||||
@media all and ($mobile) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
& footer {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -292,6 +391,10 @@ h6 {
|
||||
&[id]:hover > a {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:not([id]) > a[role="anchor"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// typography improvements
|
||||
@ -332,7 +435,7 @@ figure[data-rehype-pretty-code-figure] {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border: 1px solid var(--lightgray);
|
||||
width: max-content;
|
||||
width: fit-content;
|
||||
border-radius: 5px;
|
||||
margin-bottom: -0.5rem;
|
||||
color: var(--darkgray);
|
||||
@ -363,7 +466,7 @@ pre {
|
||||
counter-increment: line 0;
|
||||
display: grid;
|
||||
padding: 0.5rem 0;
|
||||
overflow-x: scroll;
|
||||
overflow-x: auto;
|
||||
|
||||
& [data-highlighted-chars] {
|
||||
background-color: var(--highlight);
|
||||
@ -456,6 +559,7 @@ img {
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
margin: 1rem 0;
|
||||
content-visibility: auto;
|
||||
}
|
||||
|
||||
p > img + em {
|
||||
@ -478,33 +582,32 @@ video {
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
flex: 2 1 auto;
|
||||
}
|
||||
|
||||
div:has(> .overflow) {
|
||||
max-height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
ul.overflow,
|
||||
ol.overflow {
|
||||
max-height: 400;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
// clearfix
|
||||
content: "";
|
||||
clear: both;
|
||||
|
||||
& > li:last-of-type {
|
||||
margin-bottom: 30px;
|
||||
& > li.overflow-end {
|
||||
height: 0.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
background: linear-gradient(transparent 0px, var(--light));
|
||||
&.gradient-active {
|
||||
mask-image: linear-gradient(to bottom, black calc(100% - 50px), transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -515,6 +618,26 @@ ol.overflow {
|
||||
}
|
||||
|
||||
.katex-display {
|
||||
display: initial;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.external-embed.youtube,
|
||||
iframe.pdf {
|
||||
aspect-ratio: 16 / 9;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.navigation-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
background: var(--secondary);
|
||||
transition: width 0.2s ease;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@ -7,11 +7,19 @@
|
||||
border-radius: 5px;
|
||||
padding: 0 1rem;
|
||||
overflow-y: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > *:nth-child(2) {
|
||||
margin-top: 0;
|
||||
& > .callout-content {
|
||||
display: grid;
|
||||
transition: grid-template-rows 0.3s ease;
|
||||
|
||||
& > .callout-content-inner {
|
||||
overflow: hidden;
|
||||
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>');
|
||||
|
||||
@ -1,10 +1,59 @@
|
||||
$pageWidth: 750px;
|
||||
$mobileBreakpoint: 600px;
|
||||
$tabletBreakpoint: 1000px;
|
||||
$sidePanelWidth: 380px;
|
||||
$topSpacing: 2rem;
|
||||
$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
|
||||
$maxFullPageWidth: $fullPageWidth + 250px;
|
||||
@use "sass:map";
|
||||
|
||||
/**
|
||||
* Layout breakpoints
|
||||
* $mobile: screen width below this value will use mobile styles
|
||||
* $desktop: screen width above this value will use desktop styles
|
||||
* Screen width between $mobile and $desktop width will use the tablet layout.
|
||||
* assuming mobile < desktop
|
||||
*/
|
||||
$breakpoints: (
|
||||
mobile: 1200px,
|
||||
desktop: 1201px,
|
||||
);
|
||||
|
||||
$mobile: "(max-width: #{map.get($breakpoints, mobile)})";
|
||||
$tablet: "(min-width: #{map.get($breakpoints, mobile)}) and (max-width: #{map.get($breakpoints, desktop)})";
|
||||
$desktop: "(min-width: #{map.get($breakpoints, desktop)})";
|
||||
$maxDesktop: "(min-width: 1500px)";
|
||||
|
||||
$pageWidth: #{map.get($breakpoints, mobile)};
|
||||
$sidePanelWidth: 320px;
|
||||
$topSpacing: 6rem;
|
||||
$boldWeight: 700;
|
||||
$semiBoldWeight: 600;
|
||||
$normalWeight: 400;
|
||||
|
||||
$mobileGrid: (
|
||||
templateRows: "auto auto auto auto auto",
|
||||
templateColumns: "auto",
|
||||
rowGap: "5px",
|
||||
columnGap: "5px",
|
||||
templateAreas:
|
||||
'"grid-sidebar-left"\
|
||||
"grid-header"\
|
||||
"grid-center"\
|
||||
"grid-sidebar-right"\
|
||||
"grid-footer"',
|
||||
);
|
||||
$tabletGrid: (
|
||||
templateRows: "auto auto auto auto",
|
||||
templateColumns: "#{$sidePanelWidth} auto",
|
||||
rowGap: "5px",
|
||||
columnGap: "5px",
|
||||
templateAreas:
|
||||
'"grid-sidebar-left grid-header"\
|
||||
"grid-sidebar-left grid-center"\
|
||||
"grid-sidebar-left grid-sidebar-right"\
|
||||
"grid-sidebar-left grid-footer"',
|
||||
);
|
||||
$desktopGrid: (
|
||||
templateRows: "auto auto auto",
|
||||
templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
|
||||
rowGap: "5px",
|
||||
columnGap: "5px",
|
||||
templateAreas:
|
||||
'"grid-sidebar-left grid-header grid-sidebar-right"\
|
||||
"grid-sidebar-left grid-center grid-sidebar-right"\
|
||||
"grid-sidebar-left grid-footer grid-sidebar-right"',
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user