add: sidebar-style

2026-06-13 12:10:58 -04:00
parent 5e81358f47
commit 4a13760def
3 changed files with 401 additions and 0 deletions
@@ -0,0 +1,203 @@
+/**
+ * Sidebar
+ */
+
+#sidebar-header {
+    grid-area: sidebar-header;
+    background-color: var(--background);
+    overflow: hidden;
+    min-width: 0;
+    padding: 10px;
+
+    #search {
+        width: 90%;
+    }
+}
+
+#sidebar {
+    grid-area: sidebar;
+    top: 0;
+    z-index: 10000;
+    overflow-y: auto;
+    min-width: 0;
+    border-right: solid 2px var(--border);
+
+    background-color: var(--background);
+    color: var(--text);
+    font-size: 0.9em;
+    position: relative;
+    overflow-x: hidden;
+
+    .inner {
+        width: 25em;
+    }
+}
+
+#sidebar h2 {
+    font-size: 1.38889em;
+    text-align: center;
+    display: block;
+}
+
+.container #sidebar-link.toggle {
+    position: absolute;
+    top: 0;
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+    z-index: 10001;
+    transition: left 0.5s ease-in-out;
+    background-color: var(--background);
+    text-decoration: none;
+    border: 0;
+    overflow: hidden;
+    text-indent: -9999px;
+
+    &:before {
+        content: '\f0c9';
+        font-family: 'Font Awesome 5 Free';
+        font-weight: 900;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        text-indent: 0;
+        font-size: 2rem;
+        color: var(--text);
+    }
+}
+
+#menu {
+    padding: 25px;
+}
+
+#menu a {
+    color: var(--text);
+}
+
+#menu ul {
+	user-select: none;
+	font-family: "Roboto Slab", serif;
+	font-weight: 400;
+	letter-spacing: 0.075em;
+	list-style: none;
+	padding: 0;
+	text-transform: uppercase;
+}
+
+#menu ul li {
+	border-top: solid 1px var(--medium);
+	margin: 0.5em 0 0 0;
+	padding: 0.5em 0 0 0;
+}
+
+#menu ul li:first-child {
+	border-top: 0;
+	margin-top: 0;
+	padding-top: 0;
+}
+
+#menu ul a {
+	border-bottom: 0;
+	color: inherit;
+	cursor: pointer;
+	display: block;
+	font-size: 0.9em;
+	padding: 0.625em 0;
+    text-decoration: none;
+}
+
+input#query {
+    appearance: none;
+    background: var(--background);
+    border-radius: 0.375em;
+    border: solid 1px var(--medium);
+    color: inherit;
+    display: block;
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    width: 90%;
+    font-weight: 400;
+    line-height: 1.65;
+    font-size: 14pt;
+    height: 1.5em;
+}
+
+#sidebar header.major {
+    border-bottom: solid 3px var(--border);
+    border-top: solid 3px var(--border);
+    display: block;
+    padding: 10px 0;
+    text-align: center;
+    margin: 0 25px;
+}
+
+#old-notes {
+    padding: 25px;
+}
+
+.mini-posts article {
+    display: block;
+    width: 100%;
+    margin-bottom: 1em;
+
+    border-top: solid 1px var(--medium);
+    padding-top: 1em;
+
+    a {
+        font-size: 12pt;
+        border-bottom: dotted 1px;
+        color: var(--primary);
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    p:last-child {
+        font-size: 12pt;
+        text-indent: 0;
+        margin-top: 0;
+    }
+}
+
+.mini-posts article:first-child {
+    border-top: 0;
+    margin-top: 1em;
+    padding-top: 0;
+}
+
+.mini-posts article:last-child {
+    border-bottom: 0;
+    margin-bottom: 1em;
+    padding-bottom: 0;
+}
+
+#old-notes article p:first-child {
+    margin-bottom: 0;
+    font-size: 10pt;
+    text-indent: 0;
+}
+
+ul.contact {
+    list-style: none;
+    padding: 0;
+
+    li:before {
+        font-family: 'Font Awesome 5 Free';
+        color: var(--text);
+        font-weight: 900;
+        display: inline-block;
+        font-size: 1.5em;
+        height: 1.125em;
+        position: absolute;
+        text-align: center;
+        width: 1.5em;
+    }
+
+    a {
+        color: var(--primary);
+        margin-left: 35px;
+    }
+}