diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index 754f314..1cf829f 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -5,8 +5,12 @@ left: 0; width: 100vw !important; margin: 0 !important; - z-index: 50; + z-index: 1; } +.page-title a{ + font-weight: 700 !important; +} + header{ padding: 0 3rem; margin: 3rem 0 !important; @@ -45,6 +49,14 @@ footer { margin-bottom: 0rem!important; height: 6rem; } +.footer-container { + display: flex; + align-items: center; + column-gap: 1rem; +} +.footer-container ul { + margin: 1rem 0; +} .article-title { margin-top:1rem !important ; } @@ -56,9 +68,33 @@ footer { } /*GRAPH*/ -// .graph { - -// } +header { + // padding-right: 7rem !important; +} +.graph-outer { + // position: static !important; +} +#global-graph-icon { + opacity: 1!important; + // z-index: 100; + // position: fixed; +} +#global-graph-container{ + border: 0 !important; + background-color: var(--light); + opacity: .8; + box-sizing: border-box; + border-radius: 0 !important; + width: 100vw !important; + height: 100vh !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + transform: none !important; +} +#global-graph-container svg { + opacity: 1; +} // .graph > #global-graph-outer { // z-index: 10 !important; // left: 0; @@ -93,4 +129,78 @@ footer { margin: 0 auto !important; padding: 0 1rem !important; } -} \ No newline at end of file + #quartz-body .sidebar.left { + left: 0!important; + padding: 2rem !important; + } + .page>#quartz-body .sidebar.right { + right: 0 !important; + padding: 2rem !important; + } + .graph { + width: 50% !important; + } +} +@media (max-width: 768px){ + #quartz-body { + padding: 6rem 0!important; + min-height: 65vh !important; + } + .page-header{ + width: 100%!important; + } + .page-title{ + font-size: 1rem!important; + margin: 0!important; + } + .page{ + margin: 0 !important; + padding: 0!important; + } + #quartz-body .sidebar.left { + display: none !important; + left: 0!important; + padding: 2rem !important; + } + .page>#quartz-body .sidebar.right { + flex-direction: column; + padding: 1rem !important; + margin-top: 0 !important; + } + .graph { + width: 100% !important; + } + .graph > .graph-outer{ + height: 50vh!important; + } + header{ + padding: 0 1rem !important; + margin: 1rem 0 !important; + gap: .5rem!important; + } + .darkmode{ + margin-right: 0rem!important; + } + .center { + padding: 1rem !important; + } + .page-title{ + width: auto!important; + } + .search{ + max-width: 20rem!important; + } + #search-icon p { + font-size: .75rem; + } + .page footer { + padding: 1rem!important; + height: 6rem; + } + footer hr { + margin: 1rem auto; + } + .backlinks .overflow { + max-height: 150px; + } +} diff --git a/quartz/styles/syntax.scss b/quartz/styles/syntax.scss index 623ee6f..0df20ae 100644 --- a/quartz/styles/syntax.scss +++ b/quartz/styles/syntax.scss @@ -16,7 +16,7 @@ // npx convert-sh-theme https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/themes/github-dark.json [saved-theme="dark"] { --shiki-color-text: #e1e4e8 !important; - --shiki-color-background: #24292e !important; + --shiki-color-background: black !important; --shiki-token-constant: #79b8ff !important; --shiki-token-string: #9ecbff !important; --shiki-token-comment: #6a737d !important;