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