diff --git a/app/head.tsx b/app/head.tsx new file mode 100644 index 0000000..08d88ca --- /dev/null +++ b/app/head.tsx @@ -0,0 +1,7 @@ +export default async function Head() { + return ( + <> + + + ); +} diff --git a/app/layout.tsx b/app/layout.tsx index 1bfc7f9..e5d0794 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,7 +1,8 @@ import "../styles/globals.scss"; +import "../styles/colorVariables.scss"; +import "../styles/variables.scss"; import Nav from "./Nav"; import Footer from "./Footer"; -import "../styles/variables.scss"; export default function RootLayout({ children, diff --git a/styles/Footer.module.scss b/styles/Footer.module.scss index 91f50af..8144e99 100644 --- a/styles/Footer.module.scss +++ b/styles/Footer.module.scss @@ -1,3 +1,4 @@ +@import "variables.scss"; .footer { padding: 200px 15px 30px 15px; display: flex; @@ -8,10 +9,10 @@ .adContainer { background-color: #ff00003e; - width: var(--footer-ad-container-width); - height: var(--footer-ad-container-height); + width: $footer-ad-container-width; + height: $footer-ad-container-height; - @media (max-width: var(--footer-ad-container-width)) { + @media (max-width: $footer-ad-container-width) { width: 100%; } } @@ -21,11 +22,11 @@ gap: 100px 100px; align-items: center; - @media (max-width: var(--footer-breakpoint-1)) { + @media (max-width: $footer-breakpoint-1) { column-gap: 10px; } - @media (max-width: var(--footer-breakpoint-3)) { + @media (max-width: $footer-breakpoint-3) { grid-template-columns: 1fr; gap: 100px 20px; } @@ -41,13 +42,13 @@ text-align: center; column-gap: 10px; font-size: 0.8em; - @media (max-width: var(--footer-breakpoint-1)) { + @media (max-width: $footer-breakpoint-1) { flex-direction: column; font-size: 0.7em; column-gap: 0px; } - @media (max-width: var(--footer-breakpoint-3)) { + @media (max-width: $footer-breakpoint-3) { grid-row: 2; } } @@ -62,7 +63,7 @@ grid-template-columns: 1fr 1fr 1fr; gap: 20px 100px; - @media (max-width: var(--footer-breakpoint-4)) { + @media (max-width: $footer-breakpoint-4) { column-gap: 15px; } } diff --git a/styles/Nav.module.scss b/styles/Nav.module.scss index 40b7789..4bbe537 100644 --- a/styles/Nav.module.scss +++ b/styles/Nav.module.scss @@ -1,3 +1,4 @@ +@import "variables.scss"; .nav { background-color: var(--color-background-nav); height: 60px; @@ -7,6 +8,15 @@ align-items: center; box-shadow: var(--color-shadow-nav) 0px 4px 8px; + @media (max-width: $nav-breakpoint-1) { + grid-template-columns: 1fr 1fr 0.25fr; + } + + @media (max-width: $nav-breakpoint-2) { + grid-template-columns: 1fr 1fr; + height: 100px; + } + & > div { height: 100%; display: flex; @@ -15,7 +25,14 @@ } .containerLeft { - column-gap: 100px; + @media (max-width: $nav-breakpoint-2) { + grid-column: 1; + grid-row: 1; + } + + @media (max-width: $nav-breakpoint-3) { + column-gap: 20px; + } .links { font-size: 0.8em; @@ -24,6 +41,12 @@ } .containerCenter { + width: 100%; + + @media (max-width: $nav-breakpoint-2) { + grid-row: 2; + grid-column: span 2; + } .searchBar { display: flex; justify-content: center; @@ -60,6 +83,10 @@ outline: 0; padding-right: 10px; color: var(--color-font); + + @media (max-width: $nav-breakpoint-4) { + width: 200px; + } } .icon { @@ -76,6 +103,14 @@ justify-content: flex-end; padding-right: 50px; + @media (max-width: $nav-breakpoint-2) { + grid-row: 1; + } + + @media (max-width: $nav-breakpoint-4) { + padding-right: 20px; + } + .themeSwitch { svg { transition: all 50ms linear; diff --git a/styles/Sidebar.module.scss b/styles/Sidebar.module.scss index 5c02be3..5067c48 100644 --- a/styles/Sidebar.module.scss +++ b/styles/Sidebar.module.scss @@ -1,12 +1,14 @@ +@import "variables.scss"; + .sidebar { .stickyContainer { position: sticky; - top: var(--tutorial-grid-sticky-top); + top: $tutorial-grid-sticky-top; display: flex; flex-direction: column; row-gap: 20px; font-size: 14px; - @media (max-width: var(--tutorial-breakpoint-1)) { + @media (max-width: $tutorial-breakpoint-1) { display: none; } .sidebarContainer { diff --git a/styles/Tutorial.module.scss b/styles/Tutorial.module.scss index 5585d68..516c30c 100644 --- a/styles/Tutorial.module.scss +++ b/styles/Tutorial.module.scss @@ -1,18 +1,17 @@ +@import "variables.scss"; .tutorial { display: grid; gap: 70px; - grid-template-columns: var(--tutorial-content-table-width) minmax(0px, 1fr) var( - --tutorial-sidebar-width - ); + grid-template-columns: $tutorial-content-table-width minmax(0px, 1fr) $tutorial-sidebar-width; margin: 0px auto; max-width: 1800px; padding: 0px 24px; - @media (max-width: var(--tutorial-breakpoint-1)) { - grid-template-columns: var(--tutorial-content-table-width) 1fr; + @media (max-width: $tutorial-breakpoint-1) { + grid-template-columns: $tutorial-content-table-width 1fr; } - @media (max-width: var(--tutorial-breakpoint-2)) { + @media (max-width: $tutorial-breakpoint-2) { grid-template-columns: 1fr; } diff --git a/styles/TutorialContentTable.module.scss b/styles/TutorialContentTable.module.scss index 4e22752..daf6c65 100644 --- a/styles/TutorialContentTable.module.scss +++ b/styles/TutorialContentTable.module.scss @@ -1,10 +1,11 @@ +@import "variables.scss"; .tutorialContentTable { - @media (max-width: var(--tutorial-breakpoint-2)) { + @media (max-width: $tutorial-breakpoint-2) { display: none; } .stickyContainer { position: sticky; - top: var(--tutorial-grid-sticky-top); + top: $tutorial-grid-sticky-top; .list { align-items: flex-start; diff --git a/styles/breakpoints.scss b/styles/breakpoints.scss new file mode 100644 index 0000000..4768d05 --- /dev/null +++ b/styles/breakpoints.scss @@ -0,0 +1,16 @@ +/* Tutorial Page */ +$tutorial-grid-sticky-top: 60px; +$tutorial-content-table-width: 200px; +$tutorial-sidebar-width: 200px; + +$tutorial-breakpoint-1: 1200px; +$tutorial-breakpoint-2: 1000px; +$tutorial-breakpoint-3: 700px; +/* Footer */ +$footer-ad-container-width: 920px; +$footer-ad-container-height: 90px; + +$footer-breakpoint-1: 1270px; +$footer-breakpoint-2: 950px; +$footer-breakpoint-3: 800px; +$footer-breakpoint-4: 440px; diff --git a/styles/colorVariables.scss b/styles/colorVariables.scss new file mode 100644 index 0000000..ec9958c --- /dev/null +++ b/styles/colorVariables.scss @@ -0,0 +1,53 @@ +:root { + /*! By default colors are in DARK mode */ + /* Colors: General */ + --color-background-body: #181a1b; + --color-font: #ffffff; + --color-shadow-nav: #00000033; + + --color-overlay-mix: var(--color-font); + --color-background-nav: transparent; + --color-svg-nav: rgb(191, 191, 191); + + --color-background-card: rgba(123, 123, 123, 0.13); + --color-accent: #2294ff; + --color-font-link: var(--color-accent); + + /* Colors: Markdown */ + --md-color-font: rgb(220, 217, 217); + --md-color-headline: rgb(229, 228, 228); + --md-color-hr: rgba(125, 125, 125, 0.481); + + --md-color-table-col-even-background: #3b556f; + --md-color-table-col-odd-background: #2f4459; + --md-color-table-row-even-background: rgba(52, 52, 52, 0.174); + --md-color-table-row-odd-background: transparent; + --md-color-blockquote-border: var(--color-accent); + --md-color-blockquote-background: rgba(52, 52, 52, 0.2); + + .theme-light { + --color-background-body: #ffffff; + --color-font: #000000; + --color-shadow-nav: #000c2b0d; + + --color-overlay-mix: var(--color-font); + --color-background-nav: transparent; + --color-svg-nav: rgb(54, 54, 54); + + --color-background-card: rgba(171, 170, 170, 0.13); + --color-accent: #2294ff; + --color-font-link: var(--color-accent); + + /* Colors: Markdown */ + --md-color-font: rgb(33, 33, 33); + --md-color-headline: rgb(22, 22, 22); + --md-color-hr: rgba(145, 145, 145, 0.481); + + --md-color-table-col-even-background: #3b556f; + --md-color-table-col-odd-background: #2f4459; + --md-color-table-row-even-background: rgba(150, 148, 148, 0.174); + --md-color-table-row-odd-background: transparent; + --md-color-blockquote-border: var(--color-accent); + --md-color-blockquote-background: rgba(176, 175, 175, 0.2); + } +} diff --git a/styles/globals.scss b/styles/globals.scss index 8ec35f7..18f08fd 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -1,3 +1,4 @@ +@import "colorVariables.scss"; @import "variables.scss"; * { box-sizing: border-box; diff --git a/styles/variables.scss b/styles/variables.scss index fbb38f9..ac33cca 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -1,70 +1,23 @@ -:root { - /*! By default colors are in DARK mode */ - /* Colors: General */ - --color-background-body: #181a1b; - --color-font: #ffffff; - --color-shadow-nav: #00000033; +/* Tutorial Page */ +$tutorial-grid-sticky-top: 60px; +$tutorial-content-table-width: 200px; +$tutorial-sidebar-width: 200px; - --color-overlay-mix: var(--color-font); - --color-background-nav: transparent; - --color-svg-nav: rgb(191, 191, 191); +$tutorial-breakpoint-1: 1200px; +$tutorial-breakpoint-2: 1000px; +$tutorial-breakpoint-3: 700px; - --color-background-card: rgba(123, 123, 123, 0.13); - --color-accent: #2294ff; - --color-font-link: var(--color-accent); +/* Footer */ +$footer-ad-container-width: 920px; +$footer-ad-container-height: 90px; - /* Colors: Markdown */ - --md-color-font: rgb(220, 217, 217); - --md-color-headline: rgb(229, 228, 228); - --md-color-hr: rgba(125, 125, 125, 0.481); +$footer-breakpoint-1: 1270px; +$footer-breakpoint-2: 950px; +$footer-breakpoint-3: 800px; +$footer-breakpoint-4: 440px; - --md-color-table-col-even-background: #3b556f; - --md-color-table-col-odd-background: #2f4459; - --md-color-table-row-even-background: rgba(52, 52, 52, 0.174); - --md-color-table-row-odd-background: transparent; - --md-color-blockquote-border: var(--color-accent); - --md-color-blockquote-background: rgba(52, 52, 52, 0.2); - - .theme-light { - --color-background-body: #ffffff; - --color-font: #000000; - --color-shadow-nav: #000c2b0d; - - --color-overlay-mix: var(--color-font); - --color-background-nav: transparent; - --color-svg-nav: rgb(54, 54, 54); - - --color-background-card: rgba(171, 170, 170, 0.13); - --color-accent: #2294ff; - --color-font-link: var(--color-accent); - - /* Colors: Markdown */ - --md-color-font: rgb(33, 33, 33); - --md-color-headline: rgb(22, 22, 22); - --md-color-hr: rgba(145, 145, 145, 0.481); - - --md-color-table-col-even-background: #3b556f; - --md-color-table-col-odd-background: #2f4459; - --md-color-table-row-even-background: rgba(150, 148, 148, 0.174); - --md-color-table-row-odd-background: transparent; - --md-color-blockquote-border: var(--color-accent); - --md-color-blockquote-background: rgba(176, 175, 175, 0.2); - } - - /* Tutorial Page */ - --tutorial-grid-sticky-top: 60px; - --tutorial-content-table-width: 200px; - --tutorial-sidebar-width: 200px; - - --tutorial-breakpoint-1: 1200px; - --tutorial-breakpoint-2: 1000px; - --tutorial-breakpoint-3: 700px; - /* Footer */ - --footer-ad-container-width: 920px; - --footer-ad-container-height: 90px; - - --footer-breakpoint-1: 1270px; - --footer-breakpoint-2: 950px; - --footer-breakpoint-3: 800px; - --footer-breakpoint-4: 440px; -} +/* Nav */ +$nav-breakpoint-1: 1040px; +$nav-breakpoint-2: 820px; +$nav-breakpoint-3: 500px; +$nav-breakpoint-4: 400px;