diff --git a/src/css/custom.css b/src/css/custom.css index ca5d61f..4bb8886 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,32 +1,37 @@ +/* stylelint-disable selector-class-pattern */ + /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. */ -@tailwind base; -@tailwind components; -@tailwind utilities; - @import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"); @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap"); +/* Tailwind base styles */ +@tailwind base; +@tailwind components; +@tailwind utilities; + /* You can override the default Infima variables here. */ :root { --ifm-color-primary: #327eff; --ifm-color-primary-dark: #2a2978; --ifm-color-primary-darker: #362771; - --ifm-color-primary-darkest: #000000; - --ifm-color-primary-light: hwb(216 27% 39%); + --ifm-color-primary-darkest: #000; + --ifm-color-primary-light: hwb(216deg 27% 39%); --ifm-footer-background-color: #111; --ifm-color-primary-lighter: #7062c8; --ifm-color-primary-lightest: #6c87c5; --ifm-link-color: #333; --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%); --ifm-hover-overlay: #fafafa; --ifm-heading-color: #111; + --ifm-font-family-base: "Archivo"; + --ifm-global-shadow-md: 0px; /* Remove shadow on the left */ } [data-theme="light"] { @@ -34,7 +39,7 @@ } .theme-doc-sidebar-container { - border-width: 0px !important; + border-width: 0 !important; } /* .hiring-link { @@ -59,30 +64,35 @@ --ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lightest: #4fddbf; --ifm-link-color: #ccc; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%); --ifm-heading-color: #fff; } code { color: #eb5757; - border-width: 0px; + border-width: 0; padding: 3px 8px; font-size: 0.8em; font-weight: 600; } + [data-theme="light"] code { background-color: #f0f0f0; } + [data-theme="dark"] code { background-color: #111; } + .theme-code-block { font-family: "IBM Plex Mono", monospace; font-size: 0.9em; } + .theme-code-block .token { font-family: "IBM Plex Mono", monospace; } + [data-theme="light"] .theme-code-block pre { background-color: #fafafa; } @@ -98,7 +108,7 @@ code { nav.menu { margin-right: 1px; - padding: 0px; + padding: 0; } nav.menu::-webkit-scrollbar { @@ -108,10 +118,10 @@ nav.menu::-webkit-scrollbar { .menu__link { transition-property: none; line-height: 1.5; - border-radius: 0px 0px 0px 0px; padding-left: 20px; + /* word-spacing: 7px; */ - margin: 0px 10px; + margin: 0 10px; border-radius: 3px; } @@ -127,24 +137,20 @@ blockquote { margin-left: 20px; margin-right: 20px; } + [data-theme="light"] blockquote { background-color: #f0f0f0; color: #000; } + [data-theme="dark"] blockquote { background-color: #111; } -[data-theme="light"] .pagination-nav__link:hover { - border-color: #000; -} -[data-theme="dark"] .pagination-nav__link:hover { - border-color: #fff; -} - [data-theme="light"] .navbar__brand:hover { color: #000; } + [data-theme="dark"] .navbar__brand:hover { color: #fff; } @@ -152,17 +158,20 @@ blockquote { .iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module { display: none; } + /* .navbar__items svg { display: none; } */ .pagination-nav__link { - border-radius: 0px; - border: 0px; + border-radius: 0; + border: 0; } + [data-theme="light"] .pagination-nav__link { border-top: 1px solid #ccc; } + [data-theme="dark"] .pagination-nav__link { border-top: 1px solid #ccc; } @@ -170,6 +179,7 @@ blockquote { [data-theme="light"] .pagination-nav__link:hover { border-top: 1px solid #000; } + [data-theme="dark"] .pagination-nav__link:hover { border-top: 1px solid #fff; } @@ -179,25 +189,31 @@ blockquote { margin-bottom: 40px; margin-top: 30px; } + [data-theme="light"] .hero__subtitle { color: #000; } + [data-theme="dark"] .hero__subtitle { color: #fff !important; } + .btn--black { background-color: #000; color: #fff; } + .btn--black:hover { background-color: #000; color: #fff; } + .iconExternalLink_nPIU { display: none; } + .btn--landing { - border-radius: 0px; + border-radius: 0; margin-right: 8px; margin-left: 8px; border-color: #000; @@ -206,109 +222,11 @@ blockquote { [data-theme="light"] .hero--bg { background-color: #fafafa; } + [data-theme="dark"] .hero--bg { background-color: #111 !important; } -.hero--banner { - padding: 10px !important; -} -.hero--banner, -.hero--banner a { - margin: 0px; - - color: #fff; - background-color: #000; - width: 100%; -} - -.homepage-svg svg { - height: auto !important; - width: 100% !important; - padding: 20px; - max-width: 200px; -} -[data-theme="light"] .homepage-svg svg { - background-color: #fafafa; - color: #000; -} -[data-theme="dark"] .homepage-svg svg { - background-color: #111 !important; - color: #fff !important; -} -[data-theme="dark"] .homepage-svg path { - filter: invert(1); -} -.index-buttons { - padding: 0px !important; -} -.hero--container-small img { - max-width: 100%; -} - -.footer__item .hiring-link { - margin-top: 20px; -} -.hiring-link { - background-color: #ffde2d; - color: #000; - font-weight: 600; - padding: 5px 10px; - border-radius: 1px; -} - -@media screen and (min-width: 997px) { - .hero--container { - padding-left: 200px; - padding-right: 200px; - padding-top: 80px; - padding-bottom: 80px; - } - .hero--container-small { - padding-left: 200px; - padding-right: 200px; - padding-top: 40px; - padding-bottom: 40px; - } -} -@media screen and (max-width: 996px) { - .hero--container { - padding-left: 0px; - padding-right: 0px; - padding-top: 20px; - padding-bottom: 0px; - } - .hero--container h2, - .hero--container-small h2 { - font-size: 1.2em; - } - .hero--container-small { - padding-left: 40px; - padding-right: 40px; - padding-top: 20px; - padding-bottom: 20px; - } - .index-buttons { - display: flex; - flex-direction: column; - align-items: center; - } - .index-buttons a { - margin-bottom: 10px; - } - .hero--banner a { - font-size: 0.8em; - } - .hero__subtitle { - font-size: 1.3rem; - margin-bottom: 25px; - } - .homepage-svg svg { - max-width: 120px; - margin-left: 15px; - } -} - article a { /* background-color: #f6f3d2; */ text-decoration: underline; @@ -319,19 +237,130 @@ article p a { font-weight: 600; text-underline-position: under; margin-bottom: 5px; + /* display: block; */ } + +.hero--banner { + padding: 10px !important; +} + +.hero--banner, +.hero--banner a { + margin: 0; + color: #fff; + background-color: #000; + width: 100%; +} + +.homepage-svg svg { + height: auto !important; + width: 100% !important; + padding: 20px; + max-width: 200px; +} + +[data-theme="light"] .homepage-svg svg { + background-color: #fafafa; + color: #000; +} + +[data-theme="dark"] .homepage-svg svg { + background-color: #111 !important; + color: #fff !important; +} + +[data-theme="dark"] .homepage-svg path { + filter: invert(1); +} + +.index-buttons { + padding: 0 !important; +} + +.hero--container-small img { + max-width: 100%; +} + +.hiring-link { + background-color: #ffde2d; + color: #000; + font-weight: 600; + padding: 5px 10px; + border-radius: 1px; +} + +.footer__item .hiring-link { + margin-top: 20px; +} + +@media screen and (width >= 997px) { + .hero--container { + padding: 80px 200px; + } + + .hero--container-small { + padding: 40px 200px; + } +} + +@media screen and (width < 997px) { + .hero--container { + padding: 20px 0 0; + } + + .hero--container h2, + .hero--container-small h2 { + font-size: 1.2em; + } + + .hero--container-small { + padding: 20px 40px; + } + + .index-buttons { + display: flex; + flex-direction: column; + align-items: center; + } + + .index-buttons a { + margin-bottom: 10px; + } + + .hero--banner a { + font-size: 0.8em; + } + + .hero__subtitle { + font-size: 1.3rem; + margin-bottom: 25px; + } + + .homepage-svg svg { + max-width: 120px; + margin-left: 15px; + } +} + +.notbold a { + font-weight: 400 !important; +} + [data-theme="light"] article p a { color: #333; text-decoration-color: #bfbfbf; } + [data-theme="dark"] article p a { color: #ccc; text-decoration-color: #454545; } + [data-theme="light"] article p a:hover { color: #111; } + [data-theme="dark"] article p a:hover { color: #fff; } @@ -340,17 +369,14 @@ article p a { font-weight: 600; } -.margin-bottom--sm { - margin-top: 200px !important; - margin-bottom: 200px !important; -} - .footer__title { color: #fff; } + [data-theme="light"] a.footer__link-item { color: #fff; } + [data-theme="dark"] a.footer__link-item { color: #fff; } @@ -359,45 +385,51 @@ article p a { color: #000; background-color: #f0f0f0; } + [data-theme="dark"] .menu__link--active { color: #fff; background-color: #111; } -@media screen and (min-width: 997px) { +@media screen and (width >= 997px) { .menu_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-Content-styles-module { - padding: 0px !important; + padding: 0 !important; } + .menu__list-item:not(:first-child) { - margin-top: 0px; + margin-top: 0; } } .docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module { - border-right-width: 0px !important; + border-right-width: 0 !important; } /* from here - https://theochu.com/docusaurus/styling/ */ -@media screen and (max-width: 996px) { +@media screen and (width <= 996px) { h1 { font-size: 1.5rem !important; font-weight: 600; } + .hero .hero__title { font-size: 2.5rem; } } -@media screen and (min-width: 997px) { +@media screen and (width >= 997px) { h1 { font-size: 2rem !important; } + h2 { font-size: 1.5rem !important; } + h3 { font-size: 1rem !important; } + article { max-width: 700px; margin-left: auto; @@ -406,32 +438,25 @@ article p a { } } -:root { - --ifm-font-family-base: "Archivo"; -} - /* Header Dropdown Menu */ .dropdown__link { font-size: inherit; } -/* Remove shadow on the left */ -:root { - --ifm-global-shadow-md: 0px; -} - -@media screen and (min-width: 997px) { +@media screen and (width >= 997px) { /* Show inline table of contents on mobile only */ div[class^="tableOfContentsInline"] { display: none; } } +/* .tabs { } +*/ .tabs__item { - padding: 3px 15px 2px 15px; + padding: 3px 15px 2px; font-weight: 600; font-size: 0.9em; border-radius: 30px; @@ -439,15 +464,18 @@ article p a { margin-right: 8px; background-color: #f0f0f0; } + .tabs__item:hover { background-color: #e5e5e5; } + .tabs__item--active { - border-bottom: 0px; + border-bottom: 0; background-color: rgb(50 125 255); border-radius: 30px; - color: #ffffff; + color: #fff; } + .tabs__item--active:hover { background-color: rgb(50 125 255); } @@ -455,9 +483,10 @@ article p a { .tabs + .margin-top--md { margin-top: 5px !important; } + .tabs + .margin-top--md pre { - border-top-right-radius: 0px; - border-top-left-radius: 0px; + border-top-right-radius: 0; + border-top-left-radius: 0; } .margin-bottom--xl { @@ -474,46 +503,49 @@ article p a { } .markdown hr { - background-color: rgba(120, 120, 120, 0.2); + background-color: rgb(120 120 120 / 20%); } div.special_table + table { border: none; /* border-collapse: separate; */ + /* border-spacing: 0px; */ } div.special_table + table thead { - background: rgba(120, 120, 120, 0.1); + background: rgb(120 120 120 / 10%); border-top-right-radius: 10px; overflow: hidden; } div.special_table + table thead tr { - background: rgba(255, 255, 255, 0); - border-top: 0px; - border-bottom: 0px; + background: rgb(255 255 255 / 0%); + border-top: 0; + border-bottom: 0; } + div.special_table + table tr th { - background: rgba(255, 255, 255, 0); + background: rgb(255 255 255 / 0%); color: #000; font-weight: 600; padding: 5px 20px; } + div.special_table + table tr td { padding: 5px 20px; text-align: left; } div.special_table + table tr:nth-child(even) { - background: rgba(255, 255, 255, 0); + background: rgb(255 255 255 / 0%); } div.special_table + table, th, td { - border-width: 0px !important; + border-width: 0 !important; } .custom-tag { @@ -523,6 +555,7 @@ td { margin-right: 5px; border-radius: 8px; font-size: 0.7em; + /* text-transform: uppercase; */ font-weight: 900; color: #000; @@ -539,15 +572,11 @@ td { } .navbar__link:has(div.custom-tag) { - padding: 0px; - margin: 0px; + padding: 0; + margin: 0; margin-left: 5px; } -.notbold a { - font-weight: 400 !important; -} - .small-text { font-size: 0.8em; } @@ -567,14 +596,13 @@ td { margin-top: 40px; } -.category-header .menu__link--sublist-caret:after { +.category-header .menu__link--sublist-caret::after { display: none; } .category-link a::after { content: "\2192"; font-size: 20px; - margin-left: 5px; /* for spacing */ transform: scaleX(-1) rotate(180deg); margin-left: 9px; position: absolute; @@ -607,6 +635,7 @@ td { height: 24px; display: flex; background-color: var(--ifm-navbar-link-color); + /* URL encode an svg https://yoksel.github.io/url-encoder/ */ mask-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21.4-.4.8-.58 1.21-1.69-.25-3.4-.25-5.1 0-.18-.41-.37-.82-.59-1.2-1.6.27-3.14.75-4.6 1.43A19.04 19.04 0 0 0 .96 17.7a18.43 18.43 0 0 0 5.63 2.87c.46-.62.86-1.28 1.2-1.98-.65-.25-1.29-.55-1.9-.92.17-.12.32-.24.47-.37 3.58 1.7 7.7 1.7 11.28 0l.46.37c-.6.36-1.25.67-1.9.92.35.7.75 1.35 1.2 1.98 2.03-.63 3.94-1.6 5.64-2.87.47-4.87-.78-9.09-3.3-12.83ZM8.3 15.12c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.89 2.27-2 2.27Zm7.4 0c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.88 2.27-2 2.27Z' %3E%3C/path%3E%3C/svg%3E"); transition: background-color var(--ifm-transition-fast)