custom css & colors

AmauryHamon · Sep 11, 2023 · 5db21fd · 5db21fd
1 parent 108db0a
commit 5db21fd
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 6 deletions.
diff --git 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;        
     }
-}
+    #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
@@ -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;