kazbo/public_notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

tweak
Some checks failed
Build and Test / build-and-test (macos-latest) (push) Waiting to run
Details
Build and Test / build-and-test (ubuntu-latest) (push) Waiting to run
Details
Build and Test / build-and-test (windows-latest) (push) Waiting to run
Details
Build and Test / publish-tag (push) Waiting to run
Details
/ test (push) Waiting to run
Details
Deploy Quartz site to GitHub Pages / build (push) Waiting to run
Details
Deploy Quartz site to GitHub Pages / deploy (push) Blocked by required conditions
Details
Docker build & push image / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Kaz Saita(raspi5) 2024-10-24 17:37:33 +09:00
parent 724d679386
commit fd6c0cb28e
5 changed files with 52 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
quartz/styles/base.scss
View file

@ -23,6 +23,7 @@ section {
padding: 0 0.1rem;
border-radius: 5px;
}
::selection {
background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
color: var(--darkgray);
@ -89,6 +90,7 @@ a {
border-radius: 0;
padding: 0;
}
&.tag-link {
&::before {
content: "#";
@ -100,7 +102,7 @@ a {
height: 1ex;
margin: 0 0.15em;
> path {
>path {
fill: var(--dark);
}
}
@ -108,6 +110,7 @@ a {
.desktop-only {
display: initial;
@media all and ($mobile) {
display: none;
}
@ -115,6 +118,7 @@ a {
.mobile-only {
display: none;
@media all and ($mobile) {
display: initial;
}
@ -123,8 +127,9 @@ a {
.page {
max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
margin: 0 auto;
& article {
& > h1 {
&>h1 {
font-size: 2rem;
}
@ -139,23 +144,24 @@ a {
color: var(--gray);
}
& li > * {
& li>* {
margin-top: 0;
margin-bottom: 0;
}
p > strong {
p>strong {
color: var(--dark);
}
}
& > #quartz-body {
&>#quartz-body {
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)};
@ -163,6 +169,7 @@ a {
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)};
@ -174,6 +181,7 @@ a {
@media all and not ($desktop) {
padding: 0 1rem;
}
@media all and ($mobile) {
margin: 0 auto;
}
@ -192,6 +200,7 @@ a {
z-index: 1;
grid-area: grid-sidebar-left;
flex-direction: column;
@media all and ($mobile) {
gap: 0;
align-items: center;
@ -208,24 +217,29 @@ a {
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;
}
& > .toc {
&>.toc {
display: none;
}
}
}
& .page-header,
& .page-footer {
margin-top: 1rem;
@ -234,13 +248,14 @@ a {
& .page-header {
grid-area: grid-header;
margin: $topSpacing 0 0 0;
@media all and ($mobile) {
margin-top: 0;
padding: 0;
}
}
& .center > article {
& .center>article {
grid-area: grid-center;
}
@ -254,14 +269,17 @@ a {
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;
}
@ -324,7 +342,7 @@ thead {
font-weight: revert;
margin-bottom: 0;
article > & > a[role="anchor"] {
article>&>a[role="anchor"] {
color: var(--dark);
background-color: transparent;
}
@ -336,7 +354,7 @@ h3,
h4,
h5,
h6 {
&[id] > a[href^="#"] {
&[id]>a[href^="#"] {
margin: 0 0.5rem;
opacity: 0;
transition: opacity 0.2s ease;
@ -345,7 +363,7 @@ h6 {
user-select: none;
}
&[id]:hover > a {
&[id]:hover>a {
opacity: 1;
}
}
@ -383,7 +401,7 @@ figure[data-rehype-pretty-code-figure] {
line-height: 1.6rem;
position: relative;
& > [data-rehype-pretty-code-title] {
&>[data-rehype-pretty-code-title] {
font-family: var(--codeFont);
font-size: 0.9rem;
padding: 0.1rem 0.5rem;
@ -394,7 +412,7 @@ figure[data-rehype-pretty-code-figure] {
color: var(--darkgray);
}
& > pre {
&>pre {
padding: 0;
}
}
@ -411,7 +429,7 @@ pre {
border: none;
}
& > code {
&>code {
background: none;
padding: 0;
font-size: 0.85rem;
@ -426,7 +444,7 @@ pre {
border-radius: 5px;
}
& > [data-line] {
&>[data-line] {
padding: 0 0.25rem;
box-sizing: border-box;
border-left: 3px solid transparent;
@ -447,11 +465,11 @@ pre {
}
}
&[data-line-numbers-max-digits="2"] > [data-line]::before {
&[data-line-numbers-max-digits="2"]>[data-line]::before {
width: 2rem;
}
&[data-line-numbers-max-digits="3"] > [data-line]::before {
&[data-line-numbers-max-digits="3"]>[data-line]::before {
width: 3rem;
}
}
@ -475,7 +493,7 @@ p {
.table-container {
overflow-x: auto;
& > table {
&>table {
margin: 1rem;
padding: 1.5rem;
border-collapse: collapse;
@ -485,7 +503,7 @@ p {
min-width: 75px;
}
& > * {
&>* {
line-height: 2rem;
}
}
@ -503,6 +521,7 @@ td {
tr {
border-bottom: 1px solid var(--lightgray);
&:last-child {
border-bottom: none;
}
@ -514,7 +533,7 @@ img {
margin: 1rem 0;
}
p > img + em {
p>img+em {
display: block;
transform: translateY(-1rem);
}
@ -552,9 +571,10 @@ ol.overflow {
content: "";
clear: both;
& > li:last-of-type {
&>li:last-of-type {
margin-bottom: 30px;
}
/*&:after {
pointer-events: none;
content: "";

6
quartz/styles/callouts.scss
View file

@ -10,7 +10,7 @@
transition: max-height 0.3s ease;
box-sizing: border-box;
& > .callout-content > :first-child {
&>.callout-content> :first-child {
margin-top: 0;
}
@ -113,7 +113,7 @@
--callout-icon: var(--callout-icon-quote);
}
&.is-collapsed > .callout-title > .fold-callout-icon {
&.is-collapsed>.callout-title>.fold-callout-icon {
transform: rotateZ(-90deg);
}
}
@ -134,7 +134,7 @@
--callout-icon: var(--callout-icon-fold);
}
& > .callout-title-inner > p {
&>.callout-title-inner>p {
color: var(--color);
margin: 0;
}

2
quartz/styles/custom.scss
View file

@ -1,4 +1,3 @@
/*
@use "./base.scss";
$root-font-size: 18px;
@ -139,4 +138,3 @@ code {
font-family: $pre-font-family !important;
line-height: 1rem !important;
}
*/

9
quartz/styles/variables.scss
View file

@ -26,8 +26,7 @@ $mobileGrid: (
templateColumns: "auto",
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"grid-sidebar-left"\
templateAreas: '"grid-sidebar-left"\
"grid-header"\
"grid-center"\
"grid-sidebar-right"\
@ -38,8 +37,7 @@ $tabletGrid: (
templateColumns: "#{$sidePanelWidth} auto",
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"grid-sidebar-left grid-header"\
templateAreas: '"grid-sidebar-left grid-header"\
"grid-sidebar-left grid-center"\
"grid-sidebar-left grid-sidebar-right"\
"grid-sidebar-left grid-footer"',
@ -49,8 +47,7 @@ $desktopGrid: (
templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"grid-sidebar-left grid-header grid-sidebar-right"\
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"',
);