From 526f82576722b450ece1149453686db6bb495d03 Mon Sep 17 00:00:00 2001 From: afn Date: Tue, 8 Aug 2023 13:55:41 -0400 Subject: [PATCH] make design consistent with website --- docusaurus/src/css/custom.css | 245 +++++++++++++++++++++++++++++++++- 1 file changed, 243 insertions(+), 2 deletions(-) diff --git a/docusaurus/src/css/custom.css b/docusaurus/src/css/custom.css index 507e36a..7d650c3 100644 --- a/docusaurus/src/css/custom.css +++ b/docusaurus/src/css/custom.css @@ -17,13 +17,13 @@ --ifm-color-primary-light: #33925d; --ifm-color-primary-lighter: #359962; --ifm-color-primary-lightest: #3cad6e; - --ifm-code-font-size: 95%; + --ifm-code-font-size: 87.5%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { - --ifm-background-color: #1a191f !important; + --ifm-background-color: var(--bg-color) !important; --ifm-color-primary: hsl(206, 100%, 81%); --ifm-color-primary-dark: #21af90; --ifm-color-primary-darker: #1fa588; @@ -38,6 +38,12 @@ --ifm-card-background-color: none; --ifm-color-emphasis-200: hsl(221, 17%, 26%) !important; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --ifm-hr-background-color: var(--grey-three); + --ifm-menu-color-background-hover: var(--grey-six); + --ifm-breadcrumb-item-background-active: var(--grey-six); + --ifm-code-background: var(--grey-six) !important; + --ifm-pre-background: var(--grey-six) !important; + --ifm-pagination-nav-border-radius: 20px; } .navbar { @@ -85,6 +91,12 @@ } } +.footnote-ref { + padding: 0.15rem; + font-weight: 700 !important; +} + + .navbar__link--active { background-color: #2a3645; color: #9ed5ff; @@ -96,6 +108,7 @@ } .card { + border-radius: 1.5rem; &:hover { border-color: hsl(221, 17%, 26%) !important; background-color: hsl(230, 9%, 13%); @@ -113,4 +126,232 @@ .menu__caret:hover { background-color: var(--ifm-menu-color-background-hover); filter: brightness(125%); +} + +.container { + padding: 2.5rem; +} + +.menu__link, .menu__caret { + border-radius: 100px; + padding: 0.75rem 1rem; + font-size: .85rem; + font-weight: 600; + gap: 0.6rem; + user-select: none; + letter-spacing: -0.02em; +} + +.menu__list-item-collapsible { + border-radius: 100px; +} + +.menu__caret:before { + width: 0.75rem; + height: 0.75rem; + background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem; +} + +pre code { + background-color: var(--grey-six); +} + +[class*="backToTopButton"] { + border-radius: 0.75rem !important; + background-color: var(--accent-color) !important; +} + +[class*="backToTopButton"]:after { + background-color: var(--grey-four) !important; +} + + +.table-of-contents__left-border { + border: none; +} + +.table-of-contents__link--active, .table-of-contents__link--active code { + color: var(--white); + outline: 1px solid var(--grey-three); + border-radius: 100px; +} + +.table-of-contents a { + padding: 0.5rem 0.75rem; +} + +.pagination-nav__link{ + background-color: var(--grey-six); + border: none; + transition: 0.3s background-color var(--bezier-one), 0.3s border-radius var(--bezier-one); + padding: 1.5rem; +} + +.pagination-nav__link:hover { + background-color: var(--grey-one); +} + +.pagination-nav__link:active { + border-radius: 2.75rem; +} + +.pagination-nav__link--next{ + text-align: left; +} + +.pagination-nav__sublabel { + color: var(--grey-five); +} + +.pagination-nav__label { + font-weight: 600; +} +.pagination-nav__label::before, .pagination-nav__label::after { + content: '' !important; +} + +.pagination-nav__link--next > div::after { + content: ' →'; +} + +.pagination-nav__link--prev > div::before { + content: '← '; +} + +.pagination-nav:has(a:only-child) { + display: flex; +} + +.pagination-nav:has(a:only-child) a { + width: 100%; +} +/* guhhuhuhgugh */ + +:root { + /* TODO properly name these */ + --main-font: 'Manrope', sans-serif; + --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + --white: hsl(206, 100%, 94%); + --accent-color: hsl(206, 100%, 81%); + --accent-color-two: hsl(208, 75%, 82%); + --accent-low-opacity: hsla(205, 91%, 69%, 0.15); + --bg-color: hsl(252, 10%, 11%); + --grey-one: hsl(210, 14%, 17%); + --grey-two: hsl(212, 19%, 19%); + --grey-three: hsl(221, 17%, 26%); + --grey-four: hsl(226, 48%, 18%); + --grey-five: hsl(208, 30%, 75%); + --grey-six: hsl(230, 9%, 13%); + --grey-seven: hsl(240, 9%, 13.5%); + --grey-eight: hsla(207, 30%, 75%, 0.577); + --grey-nine: hsla(240, 6%, 7%, 0.3); + --grey-ten: hsl(230, 9.5%, 17.5%); + --grey-eleven: hsl(208, 10%, 40%); + --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94); + --drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), + 0px 2px 4px -1px rgba(0, 0, 0, 0.2); +} + +* { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +::selection { + background-color: var(--accent-low-opacity); +} + +/*-----headings-----*/ + + +h1, h2, h3, h4, h5, h6, p { + font-family: 'Manrope', sans-serif; +} + +h1 { + color: var(--white); + line-height: 4rem; + font-size: 3rem; + font-weight: 700; + letter-spacing: -0.025em; +} + +h2 { + color: var(--grey-five); + font-size: 2.25rem; + letter-spacing: -0.04rem; + font-weight: 600; +} + +h3 { + font-size: 1.25rem; + font-weight: 600; +} + +h4 { + color: var(--accent-color-two); + font-weight: 400; + font-size: 1rem; + letter-spacing: 0.02rem; + line-height: 2rem; +} + +h5 { + color: var(--grey-five); + font-weight: 400; + font-size: 0.9rem; + letter-spacing: 0.02rem; +} + +h6 { + color: var(--grey-five); + font-weight: 500; + font-size: 0.85rem; +} + +p, p li { + font-weight: 400; + font-size: 1rem; + letter-spacing: 0.01rem; + line-height: 1.75rem; +} + +.footnotes li { + color: var(--grey-five); +} + + + +@media screen and (max-width: 767px) { + h1 { + font-size: 2.6rem; + line-height: 3.75rem; + } + + h2 { + font-size: 2rem; + } +} + +/*---------------*/ + +::-webkit-scrollbar { + width: 5px; + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: var(--accent-color); + background-clip: content-box; + border-radius: 100px; +} + +::-webkit-scrollbar-thumb:hover { + background-color: var(--grey-three); +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid var(--grey-three); } \ No newline at end of file