From 4a13760def345e24ed65d3634794e4d5b71080d8 Mon Sep 17 00:00:00 2001 From: Ryan Prather Date: Sat, 13 Jun 2026 12:10:58 -0400 Subject: [PATCH] add: sidebar-style --- assets/css/sidebar-style.css | 197 ++++++++++++++++++++++++++++++ assets/css/sidebar-style.css.map | 1 + assets/css/sidebar-style.scss | 203 +++++++++++++++++++++++++++++++ 3 files changed, 401 insertions(+) create mode 100644 assets/css/sidebar-style.css create mode 100644 assets/css/sidebar-style.css.map create mode 100644 assets/css/sidebar-style.scss diff --git a/assets/css/sidebar-style.css b/assets/css/sidebar-style.css new file mode 100644 index 0000000..f6bfdce --- /dev/null +++ b/assets/css/sidebar-style.css @@ -0,0 +1,197 @@ +/** + * Sidebar + */ +#sidebar-header { + grid-area: sidebar-header; + background-color: var(--background); + overflow: hidden; + min-width: 0; + padding: 10px; +} +#sidebar-header #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; +} +#sidebar .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; +} +.container #sidebar-link.toggle: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 { + -webkit-user-select: none; + -moz-user-select: none; + 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 { + -webkit-appearance: none; + -moz-appearance: none; + 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; +} +.mini-posts article a { + font-size: 12pt; + border-bottom: dotted 1px; + color: var(--primary); + text-decoration: none; + cursor: pointer; +} +.mini-posts article 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; +} +ul.contact 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; +} +ul.contact a { + color: var(--primary); + margin-left: 35px; +}/*# sourceMappingURL=sidebar-style.css.map */ \ No newline at end of file diff --git a/assets/css/sidebar-style.css.map b/assets/css/sidebar-style.css.map new file mode 100644 index 0000000..1e52d97 --- /dev/null +++ b/assets/css/sidebar-style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["sidebar-style.scss","sidebar-style.css"],"names":[],"mappings":"AAAA;;EAAA;AAIA;EACI,yBAAA;EACA,mCAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;ACAJ;ADEI;EACI,UAAA;ACAR;;ADIA;EACI,kBAAA;EACA,MAAA;EACA,cAAA;EACA,gBAAA;EACA,YAAA;EACA,qCAAA;EAEA,mCAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACFJ;ADII;EACI,WAAA;ACFR;;ADMA;EACI,oBAAA;EACA,kBAAA;EACA,cAAA;ACHJ;;ADMA;EACI,kBAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,cAAA;EACA,iCAAA;EACA,mCAAA;EACA,qBAAA;EACA,SAAA;EACA,gBAAA;EACA,oBAAA;ACHJ;ADKI;EACI,gBAAA;EACA,kCAAA;EACA,gBAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,eAAA;EACA,kBAAA;ACHR;;ADOA;EACI,aAAA;ACJJ;;ADOA;EACI,kBAAA;ACJJ;;ADOA;EACC,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,iCAAA;EACA,gBAAA;EACA,uBAAA;EACA,gBAAA;EACA,UAAA;EACA,yBAAA;ACJD;;ADOA;EACC,mCAAA;EACA,mBAAA;EACA,oBAAA;ACJD;;ADOA;EACC,aAAA;EACA,aAAA;EACA,cAAA;ACJD;;ADOA;EACC,gBAAA;EACA,cAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;EACG,qBAAA;ACJJ;;ADOA;EACI,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,6BAAA;EACA,sBAAA;EACA,+BAAA;EACA,cAAA;EACA,cAAA;EACA,UAAA;EACA,cAAA;EACA,qBAAA;EACA,UAAA;EACA,gBAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;ACJJ;;ADOA;EACI,sCAAA;EACA,mCAAA;EACA,cAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;ACJJ;;ADOA;EACI,aAAA;ACJJ;;ADOA;EACI,cAAA;EACA,WAAA;EACA,kBAAA;EAEA,mCAAA;EACA,gBAAA;ACLJ;ADOI;EACI,eAAA;EACA,yBAAA;EACA,qBAAA;EACA,qBAAA;EACA,eAAA;ACLR;ADQI;EACI,eAAA;EACA,cAAA;EACA,aAAA;ACNR;;ADUA;EACI,aAAA;EACA,eAAA;EACA,cAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,kBAAA;EACA,iBAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,eAAA;EACA,cAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,UAAA;ACPJ;ADSI;EACI,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,kBAAA;EACA,YAAA;ACPR;ADUI;EACI,qBAAA;EACA,iBAAA;ACRR","file":"sidebar-style.css"} \ No newline at end of file diff --git a/assets/css/sidebar-style.scss b/assets/css/sidebar-style.scss new file mode 100644 index 0000000..61f8681 --- /dev/null +++ b/assets/css/sidebar-style.scss @@ -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; + } +} \ No newline at end of file