From faa8c7ed14470353fb81af65fe8abb9575a510dd Mon Sep 17 00:00:00 2001 From: Shaokun Zhang Date: Wed, 23 Oct 2024 18:48:19 -0400 Subject: [PATCH] update style (#82) --- website/src/css/custom.css | 167 +++++++++++++++++++++-------- website/src/pages/index.js | 2 +- website/src/pages/index.module.css | 2 +- 3 files changed, 125 insertions(+), 46 deletions(-) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 636a5d216168..36fdd7270788 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -1,68 +1,147 @@ -@use 'proxy'; -@use 'api'; +/* stylelint-disable docusaurus/copyright-header */ +/* cspell:ignore Infima,Csvg */ +/** + * 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. + */ + +/* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #f7912d; - --ifm-color-primary-dark: #f68211; - --ifm-color-primary-darker: #ef7b09; - --ifm-color-primary-darkest: #c56508; - --ifm-color-primary-light: #f8a049; - --ifm-color-primary-lighter: #f9a757; - --ifm-color-primary-lightest: #fabd81; + /* Colors generated from: https://docusaurus.io/docs/styling-layout */ + --ifm-color-primary: #4b9cd6; + --ifm-color-primary-dark: #338fd1; + --ifm-color-primary-darker: #2e88c8; + --ifm-color-primary-darkest: #2670a5; + --ifm-color-primary-light: #63a9db; + --ifm-color-primary-lighter: #6eafde; + --ifm-color-primary-lightest: #92c3e6; --ifm-code-font-size: 95%; - --ifm-background-color: #fff; +} + +.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: #4b9cd6; +} + +/* For top navbar */ + +.header-github-link { + display: flex; + min-height: 28px; +} + +.header-github-link:hover { + opacity: 0.6; +} + +.header-github-link:before { + content: ""; + width: 24px; + height: 24px; + 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; +} + +.header-github-link:after { + content: "GitHub"; + padding-left: 0.5em; +} + +.header-discord-link { + display: flex; + min-height: 28px; +} - --docusaurus-highlighted-code-line-bg: rgb(235, 235, 235); +.header-discord-link:hover { + opacity: 0.6; } -[data-theme='dark'] { - --docusaurus-highlighted-code-line-bg: #3f4255; +.header-discord-link:before { + content: ""; + width: 28px; + height: 28px; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E") + no-repeat; } -.theme-code-block-highlighted-line { - display: table-row !important; +html[data-theme="dark"] .header-discord-link:before { + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E") + no-repeat; } -.video-container { - height: 0; - margin: 0; - margin-bottom: 30px; - overflow: hidden; - padding-bottom: 56.25%; - padding-top: 30px; +.header-discord-link:after { + content: "Discord"; + padding-left: 0.5em; + + /* The Discord icon makes the text misaligned by 1 pixel for some reason. */ position: relative; + top: 1px; +} + +.header-wof-link { + display: flex; + min-height: 28px; +} + +.header-wof-link:hover { + opacity: 0.6; } -.video-container iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; +.header-wof-link:before { + content: ""; + width: 24px; + height: 24px; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z'/%3E%3C/svg%3E") + no-repeat; } -.saml-tutorial-img { - border: 1px solid rgb(224, 224, 224); - margin-bottom: 1rem; +html[data-theme="dark"] .header-wof-link:before { + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z'/%3E%3C/svg%3E") + no-repeat; } -.zoomed-in-img { - border: 1px solid rgb(224, 224, 224); +.header-wof-link:after { + content: "Vanilla API Docs"; + padding-left: 0.5em; } -table td:first-child { - white-space: nowrap; +/* Added styles */ + +.landing-logo { + width: 7.5em; + height: 7.5em; +} + +.landing-button { + margin-left: 0.5em; + margin-right: 0.5em; +} + +.features-icon { + position: relative; + top: 1em; } -.bottom-spaced { - margin-bottom: 1em; +.features-language-icon { + position: relative; + top: 0.6em; } -span[class*='codeLineNumber'] { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Safari */ - -khtml-user-select: none; /* Konqueror HTML */ - -moz-user-select: none; /* Old versions of Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ +/* Added styles for TypeDoc pages */ + +html[class*="isaacscript-common"] h3 { + color: #ac4b29; } diff --git a/website/src/pages/index.js b/website/src/pages/index.js index e296825f5877..526a5d675b89 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -14,7 +14,7 @@ function HomepageHeader() { return (
- +

{siteConfig.title}

{siteConfig.tagline}

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index bbd7327174b9..5c0d4f6e20c4 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -6,7 +6,7 @@ */ .heroBanner { - padding: 15rem 0; + padding: 4rem 0; text-align: center; position: relative; overflow: hidden;