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

restructerd scss

Browse Source
This commit is contained in:
Janis
2022-12-28 04:15:26 +01:00
parent aaa326c950
commit b20abeef41
20 changed files with 129 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/Footer.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import styles from "../styles/Footer.module.scss";
import styles from "../styles/modules/Footer.module.scss";
import Image from "next/image";
export default function Footer() {
return (

2
app/Nav.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import styles from "../styles/Nav.module.scss";
import styles from "../styles/modules/Nav.module.scss";
import Image from "next/image";
import Link from "next/link";
import { useEffect } from "react";

2
app/articles/[categoryName]/[articleName]/ContentTable.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import prisma from "../../../../lib/prisma";
import styles from "../../../../styles/TutorialContentTable.module.scss";
import styles from "../../../../styles/modules/TutorialContentTable.module.scss";
import { Article, ContentTableEntry } from "@prisma/client";
export default function ContentTable({

2
app/articles/[categoryName]/[articleName]/Sidebar.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import styles from "../../../../styles/Sidebar.module.scss";
import styles from "../../../../styles/modules/Sidebar.module.scss";
export default function Sidebar() {
return (
<div className={styles.sidebar}>

2
app/articles/[categoryName]/[articleName]/page.tsx
View File

@@ -1,7 +1,7 @@
import { marked } from "marked";
import ContentTable from "./ContentTable";
import Sidebar from "./Sidebar";
import styles from "../../../../styles/Tutorial.module.scss";
import styles from "../../../../styles/modules/Tutorial.module.scss";
import LoadMarkdown from "./LoadMarkdown";
import prisma from "../../../../lib/prisma";
import { Article, Category, ContentTableEntry } from "@prisma/client";

2
app/articles/[categoryName]/page.tsx
View File

@@ -1,4 +1,4 @@
import styles from "../../../styles/Category.module.scss";
import styles from "../../../styles/modules/Category.module.scss";
import Link from "next/link";
import prisma from "../../../lib/prisma";
import { Article, Category } from "@prisma/client";

2
app/articles/page.tsx
View File

@@ -1,4 +1,4 @@
import styles from "../../styles/CategoryList.module.scss";
import styles from "../../styles/modules/CategoryList.module.scss";
import Link from "next/link";
import prisma from "../../lib/prisma";
import { Category, Svg, Prisma } from "@prisma/client";

2
app/layout.tsx
View File

@@ -1,5 +1,5 @@
import "../styles/globals.scss";
import "../styles/colorVariables.scss";
import "../styles/variables_colors.scss";
import "../styles/variables.scss";
import Nav from "./Nav";
import Footer from "./Footer";

23
app/testing/typography/page.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
export default function Typograhy() {
return (
<div>
<h1>Testing this headline</h1>
<h2>Testing this headline</h2>
<h3>Testing this headline</h3>
<h4>Testing this headline</h4>
<h5>Testing this headline</h5>
<h6>Testing this headline</h6>
<br />
<p>
This is a paragraph Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Dolores enim unde obcaecati ea harum voluptate, nisi quia. Quod,
et autem! Aperiam mollitia ullam ab eaque quidem facilis est ducimus
delectus.
</p>
<br />
<a href="#">This is a link</a>
</div>
);
}

35
styles/globals.scss
View File

@@ -1,5 +1,7 @@
@import "colorVariables.scss";
@import "variables_colors.scss";
@import "variables.scss";
@import "typography.scss";
* {
box-sizing: border-box;
padding: 0;
@@ -15,13 +17,7 @@
html,
body {
max-width: 100vw;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--color-background-body);
color: var(--color-font);
min-height: 100vh;
display: flex;
flex-direction: column;
@@ -30,28 +26,3 @@ body {
flex: 1;
}
}
p,
a {
letter-spacing: 1px;
&:visited {
color: var(--color-font);
}
}
a {
font-weight: bold;
text-decoration: none;
color: var(--color-font-link);
transition: color 50ms linear;
&:hover {
text-decoration: underline;
color: var(--color-font-link-hover) !important;
}
&:visited {
text-decoration: none;
color: var(--color-font-link);
}
}

2
styles/Category.module.scss → styles/modules/Category.module.scss
View File

@@ -1,4 +1,4 @@
@import "variables.scss";
@import "../variables.scss";
.category {
h1 {
text-align: center;

5
styles/CategoryList.module.scss → styles/modules/CategoryList.module.scss
View File

@@ -1,9 +1,6 @@
@import "variables.scss";
@import "../variables.scss";
.categoryList {
h1 {
text-align: center;
font-size: 1.5em;
}
.content {
margin-top: 30px;

2
styles/Footer.module.scss → styles/modules/Footer.module.scss
View File

@@ -1,4 +1,4 @@
@import "variables.scss";
@import "../variables.scss";
.footer {
padding: 200px 15px 30px 15px;
display: flex;

2
styles/Nav.module.scss → styles/modules/Nav.module.scss
View File

@@ -1,4 +1,4 @@
@import "variables.scss";
@import "../variables.scss";
.nav {
background-color: var(--color-background-nav);
height: $nav-height-inital;

2
styles/Sidebar.module.scss → styles/modules/Sidebar.module.scss
View File

@@ -1,4 +1,4 @@
@import "variables.scss";
@import "../variables.scss";
.sidebar {
.stickyContainer {

2
styles/Tutorial.module.scss → styles/modules/Tutorial.module.scss
View File

@@ -1,4 +1,4 @@
@import "variables.scss";
@import "../variables.scss";
.tutorial {
display: grid;
gap: 70px;

3
styles/TutorialContentTable.module.scss → styles/modules/TutorialContentTable.module.scss
View File

@@ -1,4 +1,5 @@
@import "variables.scss";
@import "../variables.scss";
.tutorialContentTable {
@media (max-width: $tutorial-breakpoint-2) {
display: none;

72
styles/typography.scss Normal file
View File

@@ -0,0 +1,72 @@
// This file includes styles for text and font styles in the project.
// It does not include color styles, which are defined in the 'variables_colors.scss' and 'global.scss' files.
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import "variables_colors.scss";
@import "variables.scss";
html,
body {
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--color-font);
font-size: $font-size-default;
letter-spacing: $font-letter-spacing-default;
}
/* Headings */
h1 {
font-size: calc($font-size-default + $font-size-headline-step * 6);
font-weight: bold;
letter-spacing: $font-letter-spacing-headline-large;
}
h2 {
// 5 skipped on purpose
font-size: calc($font-size-default + $font-size-headline-step * 4);
font-weight: bold;
letter-spacing: $font-letter-spacing-headline-medium;
}
h3 {
font-size: calc($font-size-default + $font-size-headline-step * 3);
font-weight: bold;
letter-spacing: $font-letter-spacing-headline-small;
}
h4 {
font-size: calc($font-size-default + $font-size-headline-step * 2);
font-weight: bold;
letter-spacing: $font-letter-spacing-headline-small;
}
h5 {
font-size: calc($font-size-default + $font-size-headline-step * 1);
font-weight: bold;
letter-spacing: $font-letter-spacing-headline-small;
}
h6 {
font-size: $font-size-default;
font-weight: bold;
letter-spacing: 1.25px;
}
/* General Texts */
a {
font-weight: bold;
text-decoration: none;
color: var(--color-font-link);
transition: color 50ms linear;
&:hover {
text-decoration: underline;
color: var(--color-font-link-hover) !important;
}
&:visited {
text-decoration: none;
color: var(--color-font-link);
}
}

11
styles/variables.scss
View File

@@ -1,3 +1,13 @@
// This file stores all SCSS variables in one place to simplify the use of variables throughout the project.
/* Typography */
$font-size-default: 1em;
$font-size-headline-step: 0.12em;
$font-letter-spacing-default: 1px;
$font-letter-spacing-headline-large: 2px;
$font-letter-spacing-headline-medium: 1.5px;
$font-letter-spacing-headline-small: 1.25px;
/* Tutorial Page */
$tutorial-grid-sticky-top: 60px;
$tutorial-content-table-width: 200px;
@@ -28,6 +38,5 @@ $categoryList-breakpoint-1: 850px;
$categoryList-breakpoint-2: 600px;
/* Category */
$category-breakpoint-1: 800px;
$category-breakpoint-2: 550px;

4
styles/colorVariables.scss → styles/variables_colors.scss
View File

@@ -1,3 +1,7 @@
// We use pure CSS variables in this file because SCSS variables get hardcoded after compiling,
// which means the dynamic changing effect is lost.
// Using CSS variables allows us to change the values at runtime
:root {
/*! By default colors are in DARK mode */
/* Colors: General */