mirror of
https://github.com/DerTyp7/explainegy-nextjs.git
synced 2025-10-29 12:52:13 +01:00
df
This commit is contained in:
Janis
54
app/Nav.tsx
54
app/Nav.tsx
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
:root {
|
||||
--test-test: red;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--test-test: black;
|
||||
}
|
||||
|
||||
.test {
|
||||
background-color: var(--test-test);
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@@ -1,59 +1,70 @@
|
||||
/* By default colors are in dark mode */
|
||||
: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);
|
||||
|
||||
// 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;
|
||||
--color-background-card: rgba(123, 123, 123, 0.13);
|
||||
--color-accent: #2294ff;
|
||||
--color-font-link: var(--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-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: 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%);
|
||||
--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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user