From 534c76198b41d40a90d6885ac37ba2a01e12426d Mon Sep 17 00:00:00 2001 From: tobySolutions Date: Sat, 14 Jan 2023 01:35:59 +0100 Subject: [PATCH] feat: change entire site's UI --- src/components/HomepageFeatures/index.js | 13 +- src/css/custom.css | 807 ++++++++++++++++++++++- src/pages/index.js | 2 +- src/pages/markdown-page.md | 7 - 4 files changed, 790 insertions(+), 39 deletions(-) delete mode 100644 src/pages/markdown-page.md diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js index 78f410ba6..c7ef291fe 100644 --- a/src/components/HomepageFeatures/index.js +++ b/src/components/HomepageFeatures/index.js @@ -8,28 +8,25 @@ const FeatureList = [ Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, description: ( <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. + This is a simple and easy to use website to find resources for web3 ), }, { - title: 'Focus on What Matters', + title: 'Managed by a community', Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, description: ( <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. + The 4c community is the community behind the free web3 resources site ), }, { - title: 'Powered by React', + title: 'Powered by Docusaurus', Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, description: ( <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. + The React Docusaurus framework for making documentation is what this site was built with. ), }, diff --git a/src/css/custom.css b/src/css/custom.css index d738e71f8..cd1d0f91b 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -5,29 +5,790 @@ */ /* You can override the default Infima variables here. */ + +:root { + /* + See css var + hsl color palette technique: + https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables/ + */ + + --site-primary-hue-saturation: 1, 1%; + --site-primary-hue-saturation-light: 167, 56%; + --ifm-font-size-base: 112.5%; + --ifm-font-family-base: system-ui, 'Segoe UI', Tahoma, sans-serif; + + --doc-sidebar-width: 330px !important; + + --ifm-color-primary: hsl(var(--site-primary-hue-saturation), 45%); + --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation), 41%); + --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation), 38%); + --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation), 32%); + + --ifm-color-primary-light: hsl(var(--site-primary-hue-saturation-light), 54%); + --ifm-color-primary-lighter: hsl( + var(--site-primary-hue-saturation-light), + 62% + ); + --ifm-color-primary-lightest: hsl( + var(--site-primary-hue-saturation-light), + 73% + ); + + --ifm-color-feedback-background: #fff; +} + +/* Dark theme */ +html[data-theme='dark'] { + --ifm-color-feedback-background: #f0f8ff; + --ifm-background-color: #0e1217; +} + +.docusaurus-highlight-code-line { + background-color: rgba(0, 0, 0, 0.1); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + +html[data-theme='dark'] .docusaurus-highlight-code-line { + background-color: rgba(0, 0, 0, 0.3); +} + +.header-github-link:hover { + opacity: 0.6; +} + +.header-github-link:before { + content: ''; + width: 24px; + height: 24px; + display: flex; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") + no-repeat; +} + +html[data-theme='dark'] .header-github-link:before { + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") + no-repeat; +} + +.footer--dark { + --ifm-footer-background-color: #17191f; +} + +.unique-tabs .tabs__item { + line-height: 16px; + margin-right: 8px; +} + +.unique-tabs .tabs__item--active { + border: 0; + color: #fff; + border-radius: var(--ifm-global-radius); + background-color: var(--ifm-tabs-color-active); +} + +html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] { + fill: greenyellow; +} + +html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] { + fill: seagreen; +} + +html[data-theme='light'] .DocSearch { + /* --docsearch-primary-color: var(--ifm-color-primary); */ + /* --docsearch-text-color: var(--ifm-font-color-base); */ + --docsearch-muted-color: var(--ifm-color-secondary-darkest); + --docsearch-container-background: rgba(94, 100, 112, 0.7); + /* Modal */ + --docsearch-modal-background: var(--ifm-color-secondary-lighter); + /* Search box */ + --docsearch-searchbox-background: var(--ifm-color-secondary); + --docsearch-searchbox-focus-background: var(--ifm-color-white); + /* Hit */ + --docsearch-hit-color: var(--ifm-font-color-base); + --docsearch-hit-active-color: var(--ifm-color-white); + --docsearch-hit-background: var(--ifm-color-white); + /* Footer */ + --docsearch-footer-background: var(--ifm-color-white); +} + +html[data-theme='dark'] .DocSearch { + /* --ifm-background-surface-color: #242526; */ + --ifm-background-surface-color: rgba(20, 73, 180, 0.7); + --docsearch-text-color: var(--ifm-font-color-base); + --docsearch-muted-color: var(--ifm-color-secondary-darkest); + --docsearch-container-background: rgba(47, 55, 69, 0.7); + /* Modal */ + --docsearch-modal-background: var(--ifm-background-color); + /* Search box */ + --docsearch-searchbox-background: var(--ifm-background-color); + --docsearch-searchbox-focus-background: var(--ifm-color-black); + /* Hit */ + --docsearch-hit-color: var(--ifm-font-color-base); + --docsearch-hit-active-color: var(--ifm-color-white); + --docsearch-hit-background: var(--ifm-color-emphasis-100); + /* Footer */ + --docsearch-footer-background: var(--ifm-background-surface-color); + --docsearch-key-gradient: linear-gradient( + -26.5deg, + var(--ifm-color-emphasis-200) 0%, + var(--ifm-color-emphasis-100) 100% + ); +} + +.navbar { + background-color: #0e1217; +} + +html[data-theme='light'] .navbar { + background-color: #fff; +} + +div[class^='announcementBar_'] { + --site-announcement-bar-stripe-color1: hsl( + var(--site-primary-hue-saturation), + 85% + ); + --site-announcement-bar-stripe-color2: hsl( + var(--site-primary-hue-saturation), + 95% + ); + background: repeating-linear-gradient( + 35deg, + var(--site-announcement-bar-stripe-color1), + var(--site-announcement-bar-stripe-color1) 20px, + var(--site-announcement-bar-stripe-color2) 10px, + var(--site-announcement-bar-stripe-color2) 40px + ); + font-weight: bold; +} + +.red > a { + color: red; +} + +img[src] { + border-radius: 16px; +} + +img[src='/img/logo.png'] { + border-radius: 0px; + border: none; +} + :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; - --ifm-code-font-size: 95%; - --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-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --white: #ffffff; + --black: #000000; + + /* dark grey - "pepper" */ + /* color: #ffffff; */ + --pepper10: #525866; + --pepper20: #494e5b; + --pepper30: #404551; + --pepper40: #383c47; + --pepper50: #2d313a; + --pepper60: #22262d; + --pepper70: #1c1f26; + --pepper80: #17191f; + --pepper90: #0e1217; + + /* light grey / very light blue - "salt" */ + /* color: --pepper90 / #0E1217 */ + --salt10: #f5f8fc; + --salt20: #edf0f7; + --salt30: #e4e9f2; + --salt40: #dbe1ed; + --salt50: #cfd6e6; + --salt60: #c2cade; + --salt70: #b9c2d9; + --salt80: #b0bbd4; + --salt90: #a8b3cf; + + /* blues - "water" */ + /* color: --pepper90 / #0E1217 */ + --water10: #68a6fc; + --water20: #5c9bfa; + --water30: #508cf9; + --water40: #427ef7; + /* color: #ffffff; */ + --water50: #3169f5; + --water60: #2556ed; + --water70: #1d49e6; + --water80: #153ce0; + --water90: #0d31d9; + + /* dark purples - "onion" */ + /* color: --pepper90 / #0E1217 */ + --onion10: #9d70f8; + --onion20: #8d62f4; + /* color: #ffffff; */ + --onion30: #8055f0; + --onion40: #7147ed; + --onion50: #5f37e9; + --onion60: #4e2cd7; + --onion70: #4325c8; + --onion80: #3b1eba; + --onion90: #3319ad; + + /* pinks - "cabbage" */ + /* color: --pepper90 / #0E1217 */ + --cabbage10: #e669fb; + --cabbage20: #e05cf8; + --cabbage30: #d74cf6; + --cabbage40: #ce3df3; + --cabbage50: #c029f0; + /* color: #ffffff; */ + --cabbage60: #ac1de4; + --cabbage70: #9e15d9; + --cabbage80: #900dcf; + --cabbage90: #8505c4; + + /* hot red / pink - "bacon" */ + /* color: --pepper90 / #0E1217 */ + --bacon10: #fe7ab6; + --bacon20: #fd6ea9; + --bacon30: #fd619d; + --bacon40: #fc538d; + --bacon50: #fc4079; + --bacon60: #f33163; + --bacon70: #ea2654; + /* color: #ffffff; */ + --bacon80: #e21c48; + --bacon90: #d9113a; + + /* dark red - "ketchup" */ + /* color: --pepper90 / #0E1217 */ + --ketchup10: #f3796c; + --ketchup20: #ed685c; + --ketchup30: #e95245; + --ketchup40: #e7574b; + /* color: #ffffff; */ + --ketchup50: #d52b20; + --ketchup60: #c72017; + --ketchup70: #bd1911; + --ketchup80: #b3110b; + --ketchup90: #a90a05; + + /* orange - "bun" */ + /* color: --pepper90 / #0E1217 */ + --bun10: #ffb760; + --bun20: #ffaa55; + --bun30: #ff9d48; + --bun40: #ff8e3b; + --bun50: #ff7a2b; + --bun60: #fa6620; + --bun70: #f55919; + --bun80: #f04c11; + --bun90: #eb3f0a; + + /* yellow - "cheese" */ + /* color: --pepper90 / #0E1217 */ + --cheese10: #fff76f; + --cheese20: #fff35a; + --cheese30: #ffef40; + --cheese40: #ffe923; + --cheese50: #ffdf00; + --cheese60: #fcd400; + --cheese70: #f9cc00; + --cheese80: #f6c400; + --cheese90: #f3bc00; + + /* lime - "lettuce" */ + /* color: --pepper90 / #0E1217 */ + --lettuce10: #dbfe6c; + --lettuce20: #ccfb5b; + --lettuce30: #cbff52; + --lettuce40: #bdf849; + --lettuce50: #92f21d; + --lettuce60: #7de914; + --lettuce70: #6fe20f; + --lettuce80: #62db09; + --lettuce90: #58d404; + + /* green- "avacado" */ + /* color: --pepper90 / #0E1217 */ + --avacado10: #74f3bc; + --avacado20: #65f1ae; + --avacado30: #51eba0; + --avacado40: #39e58c; + --avacado50: #1ddc6f; + --avacado60: #15ce5c; + --avacado70: #0fc54f; + --avacado80: #0abd42; + --avacado90: #04b435; + + /* turquoise - "blue cheese" */ + /* color: --pepper90 / #0E1217 */ + --bluecheese10: #6ff1f6; + --bluecheese20: #5cecf1; + --bluecheese30: #45e5ed; + --bluecheese40: #2cdce6; + --bluecheese50: #0dcfdc; + --bluecheese60: #08c0ce; + --bluecheese70: #05b5c5; + --bluecheese80: #02aabd; + --bluecheese90: #009fb3; + + /* brown - "burger" */ + /* color: --pepper90 / #0E1217 */ + --burger10: #c98464; + --burger20: #c07a5b; + --burger30: #b67052; + --burger40: #ad6648; + /* color: #ffffff; */ + --burger50: #a0583c; + --burger60: #914b31; + --burger70: #864129; + --burger80: #7c3822; + --burger90: #722f1b; + + --ifm-container-width-xl: 1600px; + --ifm-line-height-base: 1.333; + /* a11y - needs upping to at least 1.5 */ + + /* these font and margin calculations are a little over complicated, + but allow for us to change the h6 size and keep the ratios set by the design team, + needs replacing once sizes are finalised */ + + /* calculate heading relative to the h6 size */ + --dd-h1-ratio: 1.6; + --dd-h2-ratio: 1.333; + --dd-h3-ratio: 1.1333; + --dd-h4-ratio: 1.1333; + --dd-h5-ratio: 1.1333; + --dd-h6-size: 1.0625rem; + --dd-h6-size: 0.9375rem; + /* ally - this needs removing and setting to 1.0625 or higher so headings are at least minimum sizes */ + + /* font size calculated as ratio relative to h6 */ + --dd-h1-font-size: 4rem; + --dd-h2-font-size: 1.5rem; + --dd-h3-font-size: 1.25rem; + --dd-h4-font-size: calc(var(--dd-h6-size) * var(--dd-h4-ratio)); + --dd-h5-font-size: calc(var(--dd-h6-size) * var(--dd-h5-ratio)); + --dd-h6-font-size: var(--dd-h6-size); + + /* margin multipliers used to calculate margins based on font size */ + --dd-mar-mutiplier-top-1: 1.66666; + --dd-mar-mutiplier-bot-1: 1.16666; + + --dd-mar-mutiplier-top-2: 1.6; + --dd-mar-mutiplier-bot-2: 1.2; + + --dd-mar-mutiplier-top-3: 1.66666; + --dd-mar-mutiplier-bot-3: 1.1666; + + --dd-mar-mutiplier-top-4: 1.4; + --dd-mar-mutiplier-bot-4: 0.94; + + --dd-mar-mutiplier-top-5: 1.175; + --dd-mar-mutiplier-bot-5: 0.94; + + --dd-mar-mutiplier-top-6: 1.0666; + --dd-mar-mutiplier-bot-6: 0.8; + + --dd-mar-top-h1: 0.5rem; + --dd-mar-bot-h1: 1.5rem; + + --dd-mar-top-h2: 2.5rem; + --dd-mar-bot-h2: 1rem; + + --dd-mar-top-h3: 2rem; + --dd-mar-bot-h3: 1rem; + + --dd-mar-top-h4: calc(var(--dd-h4-font-size) * var(--dd-mar-mutiplier-top-4)); + --dd-mar-bot-h4: calc(var(--dd-h4-font-size) * var(--dd-mar-mutiplier-bot-4)); + + --dd-mar-top-h5: calc(var(--dd-h5-font-size) * var(--dd-mar-mutiplier-top-5)); + --dd-mar-bot-h5: calc(var(--dd-h5-font-size) * var(--dd-mar-mutiplier-bot-5)); + + --dd-mar-top-h6: calc(var(--dd-h6-font-size) * var(--dd-mar-mutiplier-top-6)); + --dd-mar-bot-h6: calc(var(--dd-h6-font-size) * var(--dd-mar-mutiplier-bot-6)); + + /* colours */ + --dd-background: var(--pepper90); + --ifm-link-color: var(--bacon90); + --ifm-link-hover-color: var(--water40); + --ifm-color-warning-dark: var(--cheese90); + + + /* menu */ + --ifm-menu-link-padding-vertical: 0.5rem; + + --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,'); + /* --ifm-menu-link-sublist-icon-before: url('../img/test.svg'); */ + + /* table of contents */ + --ifm-toc-padding-vertical: 1rem; +} + +html[data-theme='dark'] { + --ifm-menu-color: var(--white); + --ifm-link-color: var(--onion10); +} + +html[data-theme='dark'] *:focus-visible { + outline: 2px solid var(--bluecheese40) !important; +} + +html *:focus-visible { + outline: 2px solid var(--bluecheese60) !important; + /* A11y contrast not high enough, suggest Blue Cheese 90 + #009FB3 but needs discussion with Tsahi */ +} + +article { + margin: 0 auto; + max-width: 80ch; +} + +.footer { + padding-top: 6rem; +} + +/* menu */ + +.menu__list-item:not(:first-child) { + margin: 0; +} + +.menu__link--active { + color: var(--ifm-font-color-base) !important; +} +.menu__link--active:not(.menu__link--sublist) { + background: #a8b3cf33; +} + +/************************ICONS ON MENU ITEMS**************************/ + +html[data-theme='light'] .menu__link { + color: #000; +} + +.menu__link { + margin-left: 1.55rem; + color: var(--salt80); + color: rgb(168, 179, 255); + font-weight: normal; + font-size: 1rem; + line-height: 1.25; +} +html[data-theme='light'] .menu__link:before { + filter: brightness(0.5); +} +.theme-doc-sidebar-menu .menu__link:before { + content: ''; + position: absolute; + /* background: var(--ifm-menu-link-sublist-icon-before) 50% / 1.25rem 1.25rem; */ + height: 1.25rem; + width: 1.25rem; + left: 0.25rem; } +.menu__link--sublist:before { + left: 0.25rem; +} + +.menu__list li:nth-child(1) .menu__link:before { + background: none; +} +/**getting started**/ +/* .theme-doc-sidebar-menu li:nth-child(2) .menu__link:before { + background: url('../img/menu/getting-started.svg') 50% / 1.25rem 1rem; + filter: none; +} */ + +/* .theme-doc-sidebar-menu li:nth-child(3) .menu__link:before { + background: url('../img/menu/setting-up-feed.svg'); +} */ + +/* .theme-doc-sidebar-menu li:nth-child(4) .menu__link:before { + background: url('../img/menu/key-features.svg'); +} */ + +/* .theme-doc-sidebar-menu li:nth-child(5) .menu__link:before { + background: url('../img/menu/your-profile.svg'); +} */ + +/* .theme-doc-sidebar-menu li:nth-child(6) .menu__link:before { + background: url('../img/menu/customization.svg'); +} */ + +/* .theme-doc-sidebar-menu li:nth-child(7) .menu__link:before { + background: url('../img/menu/useful-guides.svg'); +} */ + +/* .theme-doc-sidebar-menu li:nth-child(8) .menu__link:before { + background: url('../img/menu/integration.svg'); +} */ + +/* .theme-doc-sidebar-menu li:nth-child(9) .menu__link:before { + background: url('../img/menu/content-creator.svg'); +} */ + +/* .theme-doc-sidebar-menu li:nth-child(10) .menu__link:before { + background: url('../img/menu/oss-contributors.svg'); +} */ +.theme-doc-sidebar-menu li:nth-child(11) .menu__link:before { + /* background: url('../img/menu/community.svg'); */ + left: 0.75rem; +} + +.theme-doc-sidebar-item-link-level-2 > .menu__link { + margin-left: 1.25rem; +} + +.theme-doc-sidebar-item-link-level-2 > .menu__link:before { + background: none !important; +} + +.menu__link--sublist:after { + background: var(--ifm-menu-link-sublist-icon) 50% / 1.75rem 1.75rem; + opacity: 0.5; +} + +/* side contents */ +.table-of-contents { + font-size: 1rem; +} + +/* footer */ + +.footer__title { + font-size: var(--dd-h2-font-size); + text-transform: uppercase; +} + +.footer__col:nth-of-type(1) .footer__title { + color: var(--water40); +} + +.footer__col:nth-of-type(2) .footer__title { + color: var(--onion40); +} + +.footer__col:nth-of-type(3) .footer__title { + color: var(--avacado40); +} + +.footer__col:nth-of-type(4) .footer__title { + color: var(--bluecheese40); +} + +.footer__bottom, +.footer__item { + padding: 8px 0; + opacity: 0.64; +} + +/* main adjustments */ + +.main-wrapper { + padding-bottom: 15%; + background-image: url('https://assets.website-files.com/5e0a5d9d743608d0f3ea6753/619650c123dedf5abe6feaa5_CTA%20Footer%20Circles.png'); + background-repeat: no-repeat; + background-position: center bottom; + background-size: contain; +} + +div[class^='announcementBar_'] { + --docusaurus-announcement-bar-height: 2.5rem; + background: var(--onion40) !important; + color: var(--white) !important; +} + +@media screen and (max-width: 1200px) { + main .col--3{ + display: none; + } + main .row > div{ + max-width: 100%!important; + } +} + +@media screen and (max-width: 1000px) { + :root{ + --ifm-font-size-base: 100%; + --dd-h1-font-size: 3rem; + } +} + + +/* typography */ + +.markdown h1, +.markdown h1:first-child { + font-size: var(--dd-h1-font-size); + margin: var(--dd-mar-top-h1) 0 var(--dd-mar-bot-h1) 0; + line-height: 1.2; +} + +.markdown h2 { + font-size: var(--dd-h2-font-size); + margin: var(--dd-mar-top-h2) 0 var(--dd-mar-bot-h2) 0; +} + +.markdown h3 { + font-size: var(--dd-h3-font-size); + margin: var(--dd-mar-top-h3) 0 var(--dd-mar-bot-h3) 0; +} + +.markdown h4 { + font-size: var(--dd-h4-font-size); + margin: var(--dd-mar-top-h4) 0 var(--dd-mar-bot-h4) 0; +} + +.markdown h5 { + font-size: var(--dd-h5-font-size); + margin: var(--dd-mar-top-h5) 0 var(--dd-mar-bot-h5) 0; +} + +.markdown h6 { + font-size: var(--dd-h6-font-size); + margin: var(--dd-mar-top-h6) 0 var(--dd-mar-bot-h6) 0; +} + +/* readability and layout */ +.markdown *{ + line-height: 1.75em; +} + +.markdown a, +summary a, +.alert a{ + font-weight: bold;; +} + +.markdown p + ul, +.markdown p + ol{ + margin-top: -1rem; +} + + +.markdown li{ + margin-bottom: 8px; +} + +table{ + display: table; + width: 100%; +} + +/* alerts */ + +div.alert{ + margin-top: 2rem; +} + +div.alert h5{ + margin: 0 0 0.25rem 0; + font-size: 1.3rem; + line-height: 1em; +} + +div.alert ul{ + margin-top: 0; +} + + +/* images and media */ +.theme-doc-markdown img { + width: 100%; + height: auto; +} + +iframe { + width: 100%; + height: auto; + aspect-ratio: 16/9; +} + +/* Accordion */ + +summary { + padding: 1.5rem 1.5rem !important; + margin-right: 1.75rem; + display: block; + color: white; + position: relative; + cursor: pointer; + outline: transparent !important; + font-weight: bold; +} + +details { + max-width: 80ch; + margin: 10px auto 0px auto !important; + padding: 0 !important; + box-sizing: border-box; + border: none !important; + border-radius: 1rem !important; + background-color: #151618 !important; + transition: box-shadow 0.3s 0s ease; + box-shadow: 0px 0px 0px 0px #333; + line-height: 1.75rem; +} + +details:focus-within { + box-shadow: 0 0 0 4px #000, 0 0 0 6px #2cdce6; +} +details > summary { + list-style: none; +} + +details > summary::marker, +details > summary::-webkit-details-marker { + display: none; +} + +details[open] > summary:before { + transform: rotate(180deg) !important; +} + +summary:before { + content: ''; + opacity: 0.6; + /* background-image: url('../img/chevron.svg'); */ + background-repeat: no-repeat; + background-size: 100% 100%; + width: 2rem; + height: 2rem; + position: absolute; + top: 1.5rem !important; + right: -0.25rem !important; + left: auto !important; + transform: rotate(0deg) !important; + transform-origin: 1rem 50% !important; + transition: 0.25s transform ease; + border: none !important; +} + +details > div > div { + padding: 0rem 2rem 2rem 2rem !important; + + margin-top: 0 !important; + border-top: none !important; + color: #a9abb3; +} + +p { + margin: 0; + padding-bottom: 10px; +} +p:last-child { + padding: 0; +} + +.markdown img { + max-width: min(600px, 100%); + margin: 0 auto 1.5rem auto; + display: block; + border: 2px solid var(--cabbage60); + +} + + ::-webkit-scrollbar { width: 8px; } @@ -38,11 +799,11 @@ } ::-webkit-scrollbar-thumb { - background: #25C2A0; + background: linear-gradient( 34deg, rgba(68, 18, 115, 1) 0%, rgba(5, 30, 75, 1) 21%, rgba(52, 79, 141, 1) 58%, rgba(106, 137, 223, 1) 80%, rgba(145, 227, 226, 1) 99% ); border: 1px solid #2E8555 ; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { - background: #2E8555; + background: linear-gradient( 34deg, rgba(68, 18, 115, 1) 0%, rgba(5, 30, 75, 1) 21%, rgba(52, 79, 141, 1) 58%, rgba(106, 137, 223, 1) 80%, rgba(145, 227, 226, 1) 99% );; } diff --git a/src/pages/index.js b/src/pages/index.js index 1d4072df5..9adfcdfe5 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -31,7 +31,7 @@ export default function Home() { return ( + description="This site holds swarms of resources for people to learn web3">
diff --git a/src/pages/markdown-page.md b/src/pages/markdown-page.md deleted file mode 100644 index 9756c5b66..000000000 --- a/src/pages/markdown-page.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Markdown page example ---- - -# Markdown page example - -You don't need React to write simple standalone pages.