Skip to content

Commit

Permalink
update style (#82)
Browse files Browse the repository at this point in the history
  • Loading branch information
@skzhang1
skzhang1 authored Oct 23, 2024
1 parent cbbc8c1 commit faa8c7e
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 46 deletions.
167 changes: 123 additions & 44 deletions website/src/css/custom.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
2 changes: 1 addition & 1 deletion website/src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function HomepageHeader() {
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<img src={useBaseUrl("img/ag.svg")} width="180em" />
<img src={useBaseUrl("img/ag.svg")} width="160em" />
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
Expand Down
2 changes: 1 addition & 1 deletion website/src/pages/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

.heroBanner {
padding: 15rem 0;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
Expand Down

0 comments on commit faa8c7e

Please sign in to comment.