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

df

Browse Source
This commit is contained in:
Janis
2022-12-23 00:16:56 +01:00
parent e44d6cc967
commit 1bb4cc82e2
12 changed files with 164 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/Nav.tsx
View File

@@ -1,19 +1,53 @@
"use client"; "use client";
import React, { useRef } from "react"; import { time } from "console";
import styles from "../styles/Nav.module.scss"; import styles from "../styles/Nav.module.scss";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import "../styles/test.css"; import { useEffect } from "react";
function switchTheme() {}
function switchTheme(theme) {
const bodyElement = document.getElementsByTagName("body")[0];
if (theme == "dark") {
bodyElement.classList.remove("theme-light");
} else {
bodyElement.classList.add("theme-light");
}
}
function toggleTheme() {
const svgElement = document.getElementById("themeSwitchSvg");
if (localStorage.getItem("theme") == "light") {
svgElement.style.animationDirection = "normal";
svgElement.style.animationName = styles.spinThemeSwitch;
} else {
svgElement.style.animationDirection = "reverse";
svgElement.style.animationName = styles.spinThemeSwitch;
}
setTimeout(() => {
if (localStorage.getItem("theme") == "light") {
localStorage.setItem("theme", "dark");
switchTheme("dark");
} else {
localStorage.setItem("theme", "light");
switchTheme("light");
}
svgElement.style.animationName = "";
}, 150);
}
export default function Nav() { export default function Nav() {
const switchThemeSvgRef = useRef(); useEffect(() => {
if (localStorage.getItem("theme") == "dark") {
switchTheme("dark");
} else {
switchTheme("light");
}
}, []);
return ( return (
<nav className={styles.nav}> <nav className={styles.nav}>
<div className="dark">
<div className="test"></div>
</div>
<div className={styles.containerLeft}> <div className={styles.containerLeft}>
<Image <Image
src={"/images/logo.svg"} src={"/images/logo.svg"}
@@ -39,11 +73,11 @@ export default function Nav() {
<div <div
className={styles.themeSwitch} className={styles.themeSwitch}
onClick={() => { onClick={() => {
switchTheme(); toggleTheme();
}} }}
> >
<svg <svg
ref={switchThemeSvgRef} id="themeSwitchSvg"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" viewBox="0 0 512 512"
> >

4
app/layout.tsx
View File

@@ -1,6 +1,7 @@
import "../styles/globals.scss"; import "../styles/globals.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,
@@ -10,7 +11,8 @@ export default function RootLayout({
return ( return (
<html style={{ scrollBehavior: "smooth" }}> <html style={{ scrollBehavior: "smooth" }}>
<head></head> <head></head>
<body className="theme-dark">
<body className="body">
<header> <header>
<Nav /> <Nav />
</header> </header>

6
app/tutorials/[tutorialId]/LoadMarkdown.tsx
View File

@@ -14,6 +14,12 @@ export default function LoadMarkdown() {
} }
}); });
document.querySelectorAll("code").forEach((c) => {
if (c.classList.length < 1) {
c.classList.add("language-");
}
});
document.querySelectorAll("blockquote").forEach((bq) => { document.querySelectorAll("blockquote").forEach((bq) => {
bq.classList.add("blockquote"); bq.classList.add("blockquote");
}); });

17
styles/Footer.module.scss
View File

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

20
styles/Nav.module.scss
View File

@@ -1,12 +1,11 @@
@import "variables.scss";
.nav { .nav {
background-color: $color-background-nav; background-color: var(--color-background-nav);
height: 60px; height: 60px;
margin-bottom: 50px; margin-bottom: 50px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
align-items: center; align-items: center;
box-shadow: $color-shadow-nav 0px 4px 8px; box-shadow: var(--color-shadow-nav) 0px 4px 8px;
& > div { & > div {
height: 100%; height: 100%;
@@ -39,7 +38,7 @@
.icon { .icon {
svg { svg {
fill: $color-font; fill: var(--color-font);
} }
} }
} }
@@ -48,7 +47,7 @@
border-color: rgba(91, 91, 91, 0.9); border-color: rgba(91, 91, 91, 0.9);
.icon { .icon {
svg { svg {
fill: $color-font; fill: var(--color-font);
} }
} }
} }
@@ -60,7 +59,7 @@
border: 0px; border: 0px;
outline: 0; outline: 0;
padding-right: 10px; padding-right: 10px;
color: $color-font; color: var(--color-font);
} }
.icon { .icon {
@@ -82,11 +81,13 @@
transition: all 50ms linear; transition: all 50ms linear;
height: 24px; height: 24px;
cursor: pointer; cursor: pointer;
animation-duration: 100ms; animation-duration: 150ms;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: 1; animation-iteration-count: 1;
animation-direction: normal;
&:hover { &:hover {
fill: $color-font; fill: var(--color-font);
} }
} }
} }
@@ -94,7 +95,7 @@
svg { svg {
aspect-ratio: 1; aspect-ratio: 1;
fill: mix($color-font, $color-background-body, 70%); fill: var(--color-svg-nav);
} }
@keyframes spinThemeSwitch { @keyframes spinThemeSwitch {
@@ -103,7 +104,6 @@
} }
to { to {
transform: rotate(-180deg); transform: rotate(-180deg);
fill: #000;
} }
} }
} }

7
styles/Sidebar.module.scss
View File

@@ -1,20 +1,19 @@
@import "variables.scss";
.sidebar { .sidebar {
.stickyContainer { .stickyContainer {
position: sticky; position: sticky;
top: $tutorial-grid-sticky-top; top: var(--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: $tutorial-breakpoint-1) { @media (max-width: var(--tutorial-breakpoint-1)) {
display: none; display: none;
} }
.sidebarContainer { .sidebarContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 5px; row-gap: 5px;
background-color: $color-background-card; background-color: var(--color-background-card);
border-radius: 10px; border-radius: 10px;
padding: 10px 10px 15px 10px; padding: 10px 10px 15px 10px;
} }

11
styles/Tutorial.module.scss
View File

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

6
styles/TutorialContentTable.module.scss
View File

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

10
styles/globals.scss
View File

@@ -19,8 +19,8 @@ body {
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background-color: $color-background-body; background-color: var(--color-background-body);
color: $color-font; color: var(--color-font);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -34,14 +34,14 @@ p,
a { a {
letter-spacing: 1px; letter-spacing: 1px;
&:visited { &:visited {
color: $color-font; color: var(--color-font);
} }
} }
a { a {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
color: $color-font-link; color: var(--color-font-link);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@@ -49,6 +49,6 @@ a {
&:visited { &:visited {
text-decoration: none; text-decoration: none;
color: $color-font-link; color: var(--color-font-link);
} }
} }

19
styles/markdown.scss
View File

@@ -1,10 +1,9 @@
@import "variables.scss";
.markdown { .markdown {
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
color: $md-color-font; color: var(--md-color-font);
hr { hr {
border: 1px solid $md-color-hr; border: 1px solid var(--md-color-hr);
} }
/* Texts */ /* Texts */
@@ -14,7 +13,7 @@
h4, h4,
h5, h5,
h6 { h6 {
color: $md-color-headline; color: var(--md-color-headline);
} }
p { p {
@@ -70,9 +69,9 @@
/* Blockquotes */ /* Blockquotes */
.blockquote { .blockquote {
border-left: 5px solid $md-color-blockquote-border; border-left: 5px solid var(--md-color-blockquote-border);
padding-left: 20px; padding-left: 20px;
background-color: $md-color-blockquote-background; background-color: var(--md-color-blockquote-background);
} }
/* Table */ /* Table */
table { table {
@@ -88,13 +87,13 @@
} }
thead th:nth-child(odd) { thead th:nth-child(odd) {
color: #ffffff; color: #ffffff;
background: $md-color-table-col-odd-background; background: var(--md-color-table-col-odd-background);
} }
tr { tr {
background: $md-color-table-row-odd-background; background: var(--md-color-table-row-odd-background);
} }
tr:nth-child(even) { tr:nth-child(even) {
background: $md-color-table-row-even-background; background: var(--md-color-table-row-even-background);
} }
th, th,
td { td {
@@ -106,7 +105,7 @@
} }
th { th {
color: #ffffff; color: #ffffff;
background: $md-color-table-col-even-background; background: var(--md-color-table-col-even-background);
} }
} }
} }

13
styles/test.css
View File

@@ -1,13 +0,0 @@
:root {
--test-test: red;
}
.dark {
--test-test: black;
}
.test {
background-color: var(--test-test);
height: 100px;
width: 100px;
}

125
styles/variables.scss
View File

@@ -1,59 +1,70 @@
/* By default colors are in dark mode */ :root {
/* Colors: General */ /*! By default colors are in DARK mode */
/* Colors: General */
--color-background-body: #181a1b;
--color-font: #ffffff;
--color-shadow-nav: #00000033;
$color-background-body: #ffffff; //181a1b --color-overlay-mix: var(--color-font);
$color-font: #000000; --color-background-nav: transparent;
$color-shadow-nav: #000c2b0d; --color-svg-nav: rgb(191, 191, 191);
// Light
.theme-light { --color-background-card: rgba(123, 123, 123, 0.13);
$color-background-body: #ffffff; //181a1b --color-accent: #2294ff;
$color-font: #000000; --color-font-link: var(--color-accent);
$color-shadow-nav: #000c2b0d;
/* 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-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;
} }
// Dark
.theme-dark {
$color-background-body: #181a1b; //181a1b
$color-font: #ffffff;
$color-shadow-nav: #00000033;
}
$color-overlay-mix: $color-font;
$color-background-nav: transparent;
$color-background-card: mix($color-overlay-mix, $color-background-body, 5%);
$color-accent: #2294ff;
$color-font-link: $color-accent;
/* Colors: Markdown */
$md-color-font: mix($color-background-body, $color-font, 5%);
$md-color-headline: mix($color-background-body, $color-font, 20%);
$md-color-hr: mix($color-background-body, $color-overlay-mix, 80%);
$md-color-table-col-even-background: #3b556f;
$md-color-table-col-odd-background: #2f4459;
$md-color-table-row-even-background: mix(
$color-background-body,
$color-font,
95%
);
$md-color-table-row-odd-background: transparent;
$md-color-blockquote-border: $color-accent;
$md-color-blockquote-background: mix($color-background-body, $color-font, 95%);
/* 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;