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

64
quartz/styles/base.scss
View file

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

8
quartz/styles/callouts.scss
View file

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

4
quartz/styles/custom.scss
View file

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

2
quartz/styles/syntax.scss
View file

@ -14,4 +14,4 @@ code[data-theme*=" "] span {
[saved-theme="dark"] code[data-theme*=" "] span { [saved-theme="dark"] code[data-theme*=" "] span {
color: var(--shiki-dark); color: var(--shiki-dark);
} }

11
quartz/styles/variables.scss
View file

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