diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 0ed356ae2..a87a15a28 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -1,7 +1,6 @@ @use "variables" as *; @use "syntax"; @use "callouts"; -// @use "explorer"; * { scrollbar-width: thin; @@ -32,8 +31,8 @@ section { } ::selection { - background: color-mix(in srgb, var(--tertiary) 25%, transparent); // 75% - // color: var(--darkgray); + background: color-mix(in srgb, var(--tertiary) 75%, transparent); + color: var(--darkgray); } p, @@ -61,13 +60,16 @@ ul, a { font-weight: 600; - text-decoration: none; - // transition: color 0.5s ease; // 0.2s + text-decoration: underline 0.2rem transparent; // none color: var(--secondary); + // transition: color 0.2s ease; + transition: text-decoration-color 0.5s ease-in-out; - // &:hover { - // color: var(--tertiary) !important; - // } + &:hover { + // color: var(--tertiary) !important; + text-decoration-color: var(--tertiary); + // text-underline-offset: 0.4em; + } &.internal:not(:has(> img)) { text-decoration: none; @@ -161,7 +163,7 @@ a { align-items: center; } } - + & .sidebar.right { right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); @media all and (max-width: $fullPageWidth) { @@ -467,7 +469,7 @@ video { ul.overflow, ol.overflow { max-height: 450; // 400 - overflow-y: auto; // auto, scroll + overflow-y: auto; // clearfix content: ""; @@ -487,7 +489,7 @@ ol.overflow { bottom: 0; opacity: 1; // Removes opacity fade - // transition: opacity 0.3s ease; + transition: opacity 0.3s ease; // background: linear-gradient(transparent 0px, var(--light)); } } diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index bdcf64aa1..06998ca44 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1,44 +1,15 @@ -@use "./base.scss"; +// @use "./base.scss"; -// put your custom CSS here! - -// a { -// display: inline-block; -// position: relative; -// // color: #0087ca; -// } - -// a::after { -// content: ''; -// position: absolute; -// width: 100%; -// transform: scaleX(0); -// height: 2px; -// bottom: 0; -// left: 0; -// background-color: #0087ca; -// transform-origin: bottom right; -// transition: transform 0.25s ease-out; -// } - -// a:hover::after { -// transform: scaleX(1); -// transform-origin: bottom left; -// } - -// a.article-title { - -// } - -a { - // text-decoration: underline 0.15em rgba(0, 0, 0, 1); - // text-underline-offset: 0.2em; - // transition: text-decoration-color 0.3s, text-underline-offset 0.3s; - text-decoration: underline 0.2rem transparent; - transition: text-decoration-color 0.5s; +// Explorer +div[data-folderpath="/Archive"] p[class="folder-title"]::before { + content: "📚 "; } - -a:hover { - text-decoration-color: var(--tertiary); - // text-underline-offset: 0.4em; +div[data-folderpath="/Seedlings"] p[class="folder-title"]::before { + content: "🌱 "; +} +div[data-folderpath="/Evergreen"] p[class="folder-title"]::before { + content: "🌳 "; +} +div[data-folderpath="/Budding"] p[class="folder-title"]::before { + content: "🌿 "; } diff --git a/quartz/styles/explorer.scss b/quartz/styles/explorer.scss deleted file mode 100644 index c5304065f..000000000 --- a/quartz/styles/explorer.scss +++ /dev/null @@ -1,12 +0,0 @@ -div[data-folderpath="/Archive"] p[class="folder-title"]::before { - content: "📚 "; -} -div[data-folderpath="/Seedlings"] p[class="folder-title"]::before { - content: "🌱 "; -} -div[data-folderpath="/Evergreen"] p[class="folder-title"]::before { - content: "🌳 "; -} -div[data-folderpath="/Budding"] p[class="folder-title"]::before { - content: "🌿 "; -}