From fc89ff2680977dbaf1dabb91be01ad2b84903d8a Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 02 May 2022 17:00:41 +0000
Subject: [PATCH] fix: broken semi and graph min-height

---
 assets/styles/base.scss |  103 +++++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 86 insertions(+), 17 deletions(-)

diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 53d98f6..9bbd933 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -12,6 +12,19 @@
   font-weight: revert;
   margin: revert;
   padding: revert;
+
+  &:hover > .hanchor {
+    opacity: 1;
+  }
+}
+
+.hanchor {
+  font-family: Inter;
+  margin-left: -1em;
+  opacity: 0.3;
+  transition: opacity 0.3s ease;
+  color: var(--secondary);
+
 }
 
 p, ul, text {
@@ -23,6 +36,23 @@
   padding: revert;
 }
 
+.mainTOC {
+  background: var(--lightgray);
+  border-radius: 5px;
+  padding: 0.75em 1em;
+}
+
+.mainTOC details summary {
+  cursor: zoom-in;
+  font-family: Inter;
+  color: var(--dark);
+  font-weight: 700;
+}
+
+.mainTOC details[open] summary {
+    cursor: zoom-out;
+}
+
 #TableOfContents > ol {
   counter-reset: section;
   margin-left: 0em;
@@ -50,12 +80,6 @@
   }
 }
 
-footer {
-  margin-top: 4em;
-  text-align: center;
-}
-
-
 table {
   width: 100%;
 }
@@ -185,6 +209,11 @@
       padding: 0 0.1em;
       margin: auto -0.1em;
       border-radius: 3px;
+
+      &.broken {
+        opacity: 0.5;
+        background-color: transparent; 
+      }
     }
   }
   
@@ -259,12 +288,10 @@
 
 footer {
   margin-top: 4em;
-
-  & > a {
-    font-size: 1em;
-    color: var(--secondary);
-    padding: 0 0.5em 3em 0.5em;
-  }
+  text-align: center;
+  & ul {
+    padding-left: 0;
+  } 
 }
 
 hr {
@@ -315,6 +342,13 @@
   & #graph-container {
     border: var(--outlinegray) 1px solid;
     border-radius: 5px;
+    box-sizing: border-box;
+    min-height: 250px;
+
+    & > svg {
+      margin-bottom: -5px;
+
+    }
   }
 }
 
@@ -477,31 +511,50 @@
   }
 }
 
+@keyframes dropin {
+  0% {
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+  1% {
+    display: inline-block;
+    opacity: 0;
+    transform: translate(-50%, 40%);
+  }
+  100% {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, 20%);
+  }
+}
+
 .popover {
   z-index: 999;
   position: absolute;
   width: 20em;
-  display: inline-block;
-  visibility: hidden;
+  display: none;
   background-color: var(--light);
   padding: 1em;
   border: 1px solid var(--outlinegray);
   border-radius: 5px;
   transform: translate(-50%, 40%);
-  opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease, transform 0.2s ease;
-  transition-delay: 0.3s;
   user-select: none;
+  overflow-wrap: anywhere;
+  box-shadow: 6px 6px 36px 0px rgba(0,0,0,0.25);
 
   @media all and (max-width: 600px) {
-    display: none;
+    display: none !important;
   }
 
   &.visible {
     opacity: 1;
     visibility: visible;
     transform: translate(-50%, 20%);
+    display: inline-block;
+    animation: dropin 0.2s ease;
   }
 
   & > h3 {
@@ -512,6 +565,8 @@
   & > .meta {
     margin-top: 0.25em;
     opacity: 0.5;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.8rem;
   }
 
   & > p {
@@ -520,3 +575,17 @@
     user-select: none;
   }
 }
+
+
+
+#contact_buttons ul {
+  list-style-type: none;
+
+  li {
+    display: inline-block;
+  }
+
+  li a {
+    padding: 0 1em;
+  }
+}

--
Gitblit v1.10.0