janis/explainegy-nextjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2025-10-29 12:52:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

sdasd

Browse Source
This commit is contained in:
Janis
2022-12-23 14:53:36 +01:00
parent 1bb4cc82e2
commit 0c2ad4b1b0
11 changed files with 155 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/head.tsx Normal file
View File

@@ -0,0 +1,7 @@
export default async function Head() {
return (
<>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</>
);
}

3
app/layout.tsx
View File

@@ -1,7 +1,8 @@
import "../styles/globals.scss"; import "../styles/globals.scss";
import "../styles/colorVariables.scss";
import "../styles/variables.scss";
import Nav from "./Nav"; import Nav from "./Nav";
import Footer from "./Footer"; import Footer from "./Footer";
import "../styles/variables.scss";
export default function RootLayout({ export default function RootLayout({
children, children,

17
styles/Footer.module.scss
View File

@@ -1,3 +1,4 @@
@import "variables.scss";
.footer { .footer {
padding: 200px 15px 30px 15px; padding: 200px 15px 30px 15px;
display: flex; display: flex;
@@ -8,10 +9,10 @@
.adContainer { .adContainer {
background-color: #ff00003e; background-color: #ff00003e;
width: var(--footer-ad-container-width); width: $footer-ad-container-width;
height: var(--footer-ad-container-height); height: $footer-ad-container-height;
@media (max-width: var(--footer-ad-container-width)) { @media (max-width: $footer-ad-container-width) {
width: 100%; width: 100%;
} }
} }
@@ -21,11 +22,11 @@
gap: 100px 100px; gap: 100px 100px;
align-items: center; align-items: center;
@media (max-width: var(--footer-breakpoint-1)) { @media (max-width: $footer-breakpoint-1) {
column-gap: 10px; column-gap: 10px;
} }
@media (max-width: var(--footer-breakpoint-3)) { @media (max-width: $footer-breakpoint-3) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 100px 20px; gap: 100px 20px;
} }
@@ -41,13 +42,13 @@
text-align: center; text-align: center;
column-gap: 10px; column-gap: 10px;
font-size: 0.8em; font-size: 0.8em;
@media (max-width: var(--footer-breakpoint-1)) { @media (max-width: $footer-breakpoint-1) {
flex-direction: column; flex-direction: column;
font-size: 0.7em; font-size: 0.7em;
column-gap: 0px; column-gap: 0px;
} }
@media (max-width: var(--footer-breakpoint-3)) { @media (max-width: $footer-breakpoint-3) {
grid-row: 2; grid-row: 2;
} }
} }
@@ -62,7 +63,7 @@
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap: 20px 100px; gap: 20px 100px;
@media (max-width: var(--footer-breakpoint-4)) { @media (max-width: $footer-breakpoint-4) {
column-gap: 15px; column-gap: 15px;
} }
} }

37
styles/Nav.module.scss
View File

@@ -1,3 +1,4 @@
@import "variables.scss";
.nav { .nav {
background-color: var(--color-background-nav); background-color: var(--color-background-nav);
height: 60px; height: 60px;
@@ -7,6 +8,15 @@
align-items: center; align-items: center;
box-shadow: var(--color-shadow-nav) 0px 4px 8px; 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 { & > div {
height: 100%; height: 100%;
display: flex; display: flex;
@@ -15,7 +25,14 @@
} }
.containerLeft { .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 { .links {
font-size: 0.8em; font-size: 0.8em;
@@ -24,6 +41,12 @@
} }
.containerCenter { .containerCenter {
width: 100%;
@media (max-width: $nav-breakpoint-2) {
grid-row: 2;
grid-column: span 2;
}
.searchBar { .searchBar {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -60,6 +83,10 @@
outline: 0; outline: 0;
padding-right: 10px; padding-right: 10px;
color: var(--color-font); color: var(--color-font);
@media (max-width: $nav-breakpoint-4) {
width: 200px;
}
} }
.icon { .icon {
@@ -76,6 +103,14 @@
justify-content: flex-end; justify-content: flex-end;
padding-right: 50px; padding-right: 50px;
@media (max-width: $nav-breakpoint-2) {
grid-row: 1;
}
@media (max-width: $nav-breakpoint-4) {
padding-right: 20px;
}
.themeSwitch { .themeSwitch {
svg { svg {
transition: all 50ms linear; transition: all 50ms linear;

6
styles/Sidebar.module.scss
View File

@@ -1,12 +1,14 @@
@import "variables.scss";
.sidebar { .sidebar {
.stickyContainer { .stickyContainer {
position: sticky; position: sticky;
top: var(--tutorial-grid-sticky-top); top: $tutorial-grid-sticky-top;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 20px; row-gap: 20px;
font-size: 14px; font-size: 14px;
@media (max-width: var(--tutorial-breakpoint-1)) { @media (max-width: $tutorial-breakpoint-1) {
display: none; display: none;
} }
.sidebarContainer { .sidebarContainer {

11
styles/Tutorial.module.scss
View File

@@ -1,18 +1,17 @@
@import "variables.scss";
.tutorial { .tutorial {
display: grid; display: grid;
gap: 70px; gap: 70px;
grid-template-columns: var(--tutorial-content-table-width) minmax(0px, 1fr) var( grid-template-columns: $tutorial-content-table-width minmax(0px, 1fr) $tutorial-sidebar-width;
--tutorial-sidebar-width
);
margin: 0px auto; margin: 0px auto;
max-width: 1800px; max-width: 1800px;
padding: 0px 24px; padding: 0px 24px;
@media (max-width: var(--tutorial-breakpoint-1)) { @media (max-width: $tutorial-breakpoint-1) {
grid-template-columns: var(--tutorial-content-table-width) 1fr; 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; grid-template-columns: 1fr;
} }

5
styles/TutorialContentTable.module.scss
View File

@@ -1,10 +1,11 @@
@import "variables.scss";
.tutorialContentTable { .tutorialContentTable {
@media (max-width: var(--tutorial-breakpoint-2)) { @media (max-width: $tutorial-breakpoint-2) {
display: none; display: none;
} }
.stickyContainer { .stickyContainer {
position: sticky; position: sticky;
top: var(--tutorial-grid-sticky-top); top: $tutorial-grid-sticky-top;
.list { .list {
align-items: flex-start; align-items: flex-start;

16
styles/breakpoints.scss Normal file
View File

@@ -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;

53
styles/colorVariables.scss Normal file
View File

@@ -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);
}
}

1
styles/globals.scss
View File

@@ -1,3 +1,4 @@
@import "colorVariables.scss";
@import "variables.scss"; @import "variables.scss";
* { * {
box-sizing: border-box; box-sizing: border-box;

85
styles/variables.scss
View File

@@ -1,70 +1,23 @@
:root { /* Tutorial Page */
/*! By default colors are in DARK mode */ $tutorial-grid-sticky-top: 60px;
/* Colors: General */ $tutorial-content-table-width: 200px;
--color-background-body: #181a1b; $tutorial-sidebar-width: 200px;
--color-font: #ffffff;
--color-shadow-nav: #00000033;
--color-overlay-mix: var(--color-font); $tutorial-breakpoint-1: 1200px;
--color-background-nav: transparent; $tutorial-breakpoint-2: 1000px;
--color-svg-nav: rgb(191, 191, 191); $tutorial-breakpoint-3: 700px;
--color-background-card: rgba(123, 123, 123, 0.13); /* Footer */
--color-accent: #2294ff; $footer-ad-container-width: 920px;
--color-font-link: var(--color-accent); $footer-ad-container-height: 90px;
/* Colors: Markdown */ $footer-breakpoint-1: 1270px;
--md-color-font: rgb(220, 217, 217); $footer-breakpoint-2: 950px;
--md-color-headline: rgb(229, 228, 228); $footer-breakpoint-3: 800px;
--md-color-hr: rgba(125, 125, 125, 0.481); $footer-breakpoint-4: 440px;
--md-color-table-col-even-background: #3b556f; /* Nav */
--md-color-table-col-odd-background: #2f4459; $nav-breakpoint-1: 1040px;
--md-color-table-row-even-background: rgba(52, 52, 52, 0.174); $nav-breakpoint-2: 820px;
--md-color-table-row-odd-background: transparent; $nav-breakpoint-3: 500px;
--md-color-blockquote-border: var(--color-accent); $nav-breakpoint-4: 400px;
--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;
}