From fd6c0cb28e7ba83f71d30cab2dd7ab8d04562d22 Mon Sep 17 00:00:00 2001
From: "Kaz Saita(raspi5)" <saita@kinoshita-lab.org>
Date: Thu, 24 Oct 2024 17:37:33 +0900
Subject: [PATCH] tweak

---
 quartz/styles/base.scss      | 64 +++++++++++++++++++++++-------------
 quartz/styles/callouts.scss  |  8 ++---
 quartz/styles/custom.scss    |  4 +--
 quartz/styles/syntax.scss    |  2 +-
 quartz/styles/variables.scss | 11 +++----
 5 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 34d7e40..d769ab9 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -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: "";
@@ -586,4 +606,4 @@ iframe.pdf {
   height: 100%;
   width: 100%;
   border-radius: 5px;
-}
+}
\ No newline at end of file
diff --git a/quartz/styles/callouts.scss b/quartz/styles/callouts.scss
index d6f65aa..8b8cd20 100644
--- a/quartz/styles/callouts.scss
+++ b/quartz/styles/callouts.scss
@@ -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;
   }
@@ -159,4 +159,4 @@
   .callout-title-inner {
     font-weight: $semiBoldWeight;
   }
-}
+}
\ No newline at end of file
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index a56c58d..fce622a 100644
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@@ -1,4 +1,3 @@
-/*
 @use "./base.scss";
 
 $root-font-size: 18px;
@@ -138,5 +137,4 @@ code {
     font-size: 1rem !important;
     font-family: $pre-font-family !important;
     line-height: 1rem !important;
-}
-    */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/quartz/styles/syntax.scss b/quartz/styles/syntax.scss
index ba20563..9bfff78 100644
--- a/quartz/styles/syntax.scss
+++ b/quartz/styles/syntax.scss
@@ -14,4 +14,4 @@ code[data-theme*=" "] span {
 
 [saved-theme="dark"] code[data-theme*=" "] span {
   color: var(--shiki-dark);
-}
+}
\ No newline at end of file
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index 4a5cea5..5542640 100644
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@@ -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"',
-);
+);
\ No newline at end of file