diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 45c21aa..8c960cb 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -24,6 +24,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); @@ -90,6 +91,7 @@ a { border-radius: 0; padding: 0; } + &.tag-link { &::before { content: "#"; @@ -101,7 +103,7 @@ a { height: 1ex; margin: 0 0.15em; - > path { + >path { fill: var(--dark); } } @@ -109,60 +111,29 @@ a { .desktop-only { display: initial; -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -======= ->>>>>>> parent of fd6c0cb (tweak) -======= ->>>>>>> parent of fd6c0cb (tweak) - @media all and ($mobile) { -======= @media all and (max-width: $fullPageWidth) { ->>>>>>> parent of b41a266 (merge upstream) display: none; } } .mobile-only { display: none; -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -======= ->>>>>>> parent of fd6c0cb (tweak) -======= ->>>>>>> parent of fd6c0cb (tweak) - @media all and ($mobile) { -======= @media all and (max-width: $fullPageWidth) { ->>>>>>> parent of b41a266 (merge upstream) display: initial; } } .page { -<<<<<<< HEAD - max-width: calc(#{map-get($breakpoints, desktop)} + 300px); - margin: 0 auto; -<<<<<<< HEAD -<<<<<<< HEAD -======= @media all and (max-width: $fullPageWidth) { margin: 0 auto; padding: 0 1rem; max-width: $pageWidth; } ->>>>>>> parent of b41a266 (merge upstream) -======= ->>>>>>> parent of fd6c0cb (tweak) -======= ->>>>>>> parent of fd6c0cb (tweak) & article { - & > h1 { + &>h1 { font-size: 2rem; } @@ -177,59 +148,22 @@ a { color: var(--gray); } - & li > * { + & li>* { margin-top: 0; margin-bottom: 0; } - p > strong { + p>strong { color: var(--dark); } } -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD &>#quartz-body { -======= - & > #quartz-body { ->>>>>>> parent of fd6c0cb (tweak) -======= - & > #quartz-body { ->>>>>>> parent of fd6c0cb (tweak) - 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; -======= - & > #quartz-body { width: 100%; display: flex; + @media all and (max-width: $fullPageWidth) { flex-direction: column; ->>>>>>> parent of b41a266 (merge upstream) } & .sidebar { @@ -243,6 +177,7 @@ a { box-sizing: border-box; padding: 0 4rem; position: fixed; + @media all and (max-width: $fullPageWidth) { position: initial; flex-direction: row; @@ -253,63 +188,19 @@ a { } & .sidebar.left { -<<<<<<< HEAD - z-index: 1; - grid-area: grid-sidebar-left; - flex-direction: column; - @media all and ($mobile) { -======= left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); + @media all and (max-width: $fullPageWidth) { ->>>>>>> parent of b41a266 (merge upstream) gap: 0; align-items: center; } } & .sidebar.right { -<<<<<<< HEAD - 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 { - display: none; - } - } - } - & .page-header, - & .page-footer { - margin-top: 1rem; - } - - & .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; -======= right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); flex-wrap: wrap; - & > * { + + &>* { @media all and (max-width: $fullPageWidth) { flex: 1; min-width: 140px; @@ -325,42 +216,25 @@ a { @media all and (max-width: $fullPageWidth) { width: initial; ->>>>>>> parent of b41a266 (merge upstream) } } & .page-header { margin: $topSpacing auto 0 auto; + @media all and (max-width: $fullPageWidth) { margin-top: 2rem; } } -<<<<<<< HEAD - & .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 { -======= & .center, & footer { margin-left: auto; margin-right: auto; width: $pageWidth; + @media all and (max-width: $fullPageWidth) { width: initial; ->>>>>>> parent of b41a266 (merge upstream) margin-left: 0; margin-right: 0; } @@ -423,7 +297,7 @@ thead { font-weight: revert; margin-bottom: 0; - article > & > a[role="anchor"] { + article>&>a[role="anchor"] { color: var(--dark); background-color: transparent; } @@ -435,7 +309,7 @@ h3, h4, h5, h6 { - &[id] > a[href^="#"] { + &[id]>a[href^="#"] { margin: 0 0.5rem; opacity: 0; transition: opacity 0.2s ease; @@ -444,7 +318,7 @@ h6 { user-select: none; } - &[id]:hover > a { + &[id]:hover>a { opacity: 1; } } @@ -482,7 +356,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; @@ -493,7 +367,7 @@ figure[data-rehype-pretty-code-figure] { color: var(--darkgray); } - & > pre { + &>pre { padding: 0; } } @@ -510,7 +384,7 @@ pre { border: none; } - & > code { + &>code { background: none; padding: 0; font-size: 0.85rem; @@ -525,7 +399,7 @@ pre { border-radius: 5px; } - & > [data-line] { + &>[data-line] { padding: 0 0.25rem; box-sizing: border-box; border-left: 3px solid transparent; @@ -546,11 +420,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; } } @@ -574,7 +448,7 @@ p { .table-container { overflow-x: auto; - & > table { + &>table { margin: 1rem; padding: 1.5rem; border-collapse: collapse; @@ -584,7 +458,7 @@ p { min-width: 75px; } - & > * { + &>* { line-height: 2rem; } } @@ -602,6 +476,7 @@ td { tr { border-bottom: 1px solid var(--lightgray); + &:last-child { border-bottom: none; } @@ -613,7 +488,7 @@ img { margin: 1rem 0; } -p > img + em { +p>img+em { display: block; transform: translateY(-1rem); } @@ -649,21 +524,11 @@ ol.overflow { content: ""; clear: both; - & > li:last-of-type { + &>li:last-of-type { margin-bottom: 30px; } -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -======= ->>>>>>> parent of fd6c0cb (tweak) -======= ->>>>>>> parent of fd6c0cb (tweak) - /*&:after { -======= &:after { ->>>>>>> parent of b41a266 (merge upstream) pointer-events: none; content: ""; width: 100%; @@ -694,4 +559,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 81d28e4..264b612 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1,4 +1,3 @@ -/* @use "./base.scss"; $root-font-size: 18px; @@ -143,5 +142,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