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/colorVariables.scss";
import "../styles/variables.scss";
import Nav from "./Nav";
import Footer from "./Footer";
import "../styles/variables.scss";
export default function RootLayout({
children,

17
styles/Footer.module.scss
View File

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

37
styles/Nav.module.scss
View File

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

6
styles/Sidebar.module.scss
View File

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

11
styles/Tutorial.module.scss
View File

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

5
styles/TutorialContentTable.module.scss
View File

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

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";
* {
box-sizing: border-box;

85
styles/variables.scss
View File

@@ -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;
--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);
}
/* Tutorial Page */
--tutorial-grid-sticky-top: 60px;
--tutorial-content-table-width: 200px;
--tutorial-sidebar-width: 200px;
$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;
--tutorial-breakpoint-1: 1200px;
--tutorial-breakpoint-2: 1000px;
--tutorial-breakpoint-3: 700px;
/* Footer */
--footer-ad-container-width: 920px;
--footer-ad-container-height: 90px;
$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;
}
$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;