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";
import React, { useRef } from "react";
import { time } from "console";
import styles from "../styles/Nav.module.scss";
import Image from "next/image";
import Link from "next/link";
import "../styles/test.css";
function switchTheme() {}
import { useEffect } from "react";
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() {
const switchThemeSvgRef = useRef();
useEffect(() => {
if (localStorage.getItem("theme") == "dark") {
switchTheme("dark");
} else {
switchTheme("light");
}
}, []);
return (
<nav className={styles.nav}>
<div className="dark">
<div className="test"></div>
</div>
<div className={styles.containerLeft}>
<Image
src={"/images/logo.svg"}
@@ -39,11 +73,11 @@ export default function Nav() {
<div
className={styles.themeSwitch}
onClick={() => {
switchTheme();
toggleTheme();
}}
>
<svg
ref={switchThemeSvgRef}
id="themeSwitchSvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>

4
app/layout.tsx
View File

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

17
styles/Footer.module.scss
View File

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

20
styles/Nav.module.scss
View File

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

7
styles/Sidebar.module.scss
View File

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

11
styles/Tutorial.module.scss
View File

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

6
styles/TutorialContentTable.module.scss
View File

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

10
styles/globals.scss
View File

@@ -19,8 +19,8 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: $color-background-body;
color: $color-font;
background-color: var(--color-background-body);
color: var(--color-font);
min-height: 100vh;
display: flex;
flex-direction: column;
@@ -34,14 +34,14 @@ p,
a {
letter-spacing: 1px;
&:visited {
color: $color-font;
color: var(--color-font);
}
}
a {
font-weight: bold;
text-decoration: none;
color: $color-font-link;
color: var(--color-font-link);
&:hover {
text-decoration: underline;
@@ -49,6 +49,6 @@ a {
&:visited {
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 {
padding: 0 10px 0 10px;
color: $md-color-font;
color: var(--md-color-font);
hr {
border: 1px solid $md-color-hr;
border: 1px solid var(--md-color-hr);
}
/* Texts */
@@ -14,7 +13,7 @@
h4,
h5,
h6 {
color: $md-color-headline;
color: var(--md-color-headline);
}
p {
@@ -70,9 +69,9 @@
/* Blockquotes */
.blockquote {
border-left: 5px solid $md-color-blockquote-border;
border-left: 5px solid var(--md-color-blockquote-border);
padding-left: 20px;
background-color: $md-color-blockquote-background;
background-color: var(--md-color-blockquote-background);
}
/* Table */
table {
@@ -88,13 +87,13 @@
}
thead th:nth-child(odd) {
color: #ffffff;
background: $md-color-table-col-odd-background;
background: var(--md-color-table-col-odd-background);
}
tr {
background: $md-color-table-row-odd-background;
background: var(--md-color-table-row-odd-background);
}
tr:nth-child(even) {
background: $md-color-table-row-even-background;
background: var(--md-color-table-row-even-background);
}
th,
td {
@@ -106,7 +105,7 @@
}
th {
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 */
/* Colors: General */
:root {
/*! 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-font: #000000;
$color-shadow-nav: #000c2b0d;
// Light
.theme-light {
$color-background-body: #ffffff; //181a1b
$color-font: #000000;
$color-shadow-nav: #000c2b0d;
--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-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;