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

add api

Browse Source
This commit is contained in:
Janis
2023-01-07 08:52:59 +01:00
parent 6ed3cc22f3
commit dd121030e4
30 changed files with 7745 additions and 8665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
styles/modules/Article.module.scss Normal file
View File

@@ -0,0 +1,37 @@
@import "../variables.scss";
.article {
display: grid;
gap: 70px;
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: $tutorial-breakpoint-1) {
grid-template-columns: $tutorial-content-table-width 1fr;
}
@media (max-width: $tutorial-breakpoint-2) {
grid-template-columns: 1fr;
}
.header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px 0px 10px 0px;
gap: 10px 0px;
h1 {
}
img {
width: min(100%, 750px);
height: auto;
aspect-ratio: 15/7;
}
}
.tutorialContent {
min-width: 0;
}
}

29
styles/modules/ArticleContentTable.module.scss Normal file
View File

@@ -0,0 +1,29 @@
@import "../variables.scss";
.articleContentTable {
@media (max-width: $tutorial-breakpoint-2) {
display: none;
}
.stickyContainer {
position: sticky;
top: $tutorial-grid-sticky-top;
.list {
align-items: flex-start;
display: flex;
flex-direction: column;
margin-bottom: 16px;
padding-bottom: 16px;
row-gap: 10px;
}
.adContainer {
background-color: #ff00003e;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
}
}

1
styles/modules/Nav.module.scss
View File

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

21
styles/modules/Tutorial.module.scss
View File

@@ -1,21 +0,0 @@
@import "../variables.scss";
.tutorial {
display: grid;
gap: 70px;
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: $tutorial-breakpoint-1) {
grid-template-columns: $tutorial-content-table-width 1fr;
}
@media (max-width: $tutorial-breakpoint-2) {
grid-template-columns: 1fr;
}
.tutorialContent {
min-width: 0;
}
}

29
styles/modules/TutorialContentTable.module.scss
View File

@@ -1,29 +0,0 @@
@import "../variables.scss";
.tutorialContentTable {
@media (max-width: $tutorial-breakpoint-2) {
display: none;
}
.stickyContainer {
position: sticky;
top: $tutorial-grid-sticky-top;
.list {
align-items: flex-start;
display: flex;
flex-direction: column;
margin-bottom: 16px;
padding-bottom: 16px;
row-gap: 10px;
}
.adContainer {
background-color: #ff00003e;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
}
}

80
styles/typography.scss
View File

@@ -7,66 +7,72 @@
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;
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;
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;
// 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;
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;
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;
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;
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;
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;
}
&:hover {
text-decoration: underline;
color: var(--color-font-link-hover) !important;
}
&:visited {
text-decoration: none;
color: var(--color-font-link);
}
&:visited {
text-decoration: none;
color: var(--color-font-link);
}
}
.text-muted {
color: var(--color-font-muted);
font-weight: bold;
font-size: 0.8em;
}

93
styles/variables_colors.scss
View File

@@ -3,60 +3,61 @@
// Using CSS variables allows us to change the values at runtime
:root {
/*! By default colors are in DARK mode */
/* Colors: General */
--color-background-body: #181a1b;
--color-font: #ffffff;
--color-shadow-nav: #00000033;
/*! By default colors are in DARK mode */
/* Colors: General */
--color-background-body: #181a1b;
--color-font: #ffffff;
--color-font-muted: #929292;
--color-shadow-nav: #00000033;
--color-overlay-mix: var(--color-font);
--color-background-nav: transparent;
--color-svg-nav: rgb(191, 191, 191);
--color-overlay-mix: var(--color-font);
--color-background-nav: transparent;
--color-svg-nav: #bfbfbf;
--color-background-card: rgba(123, 123, 123, 0.13);
--color-background-dropdown: var(--color-background-body);
--color-accent: #2294ff;
--color-font-link: var(--color-accent);
--color-background-card: #7b7b7b21;
--color-background-dropdown: var(--color-background-body);
--color-accent: #2294ff;
--color-font-link: var(--color-accent);
--color-font-link-hover: #5caffc;
--color-font-link-hover: #5caffc;
/* 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);
/* Colors: Markdown */
--md-color-font: #dcd9d9;
--md-color-headline: #e5e4e4;
--md-color-hr: #7d7d7d7b;
--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);
--md-color-table-col-even-background: #3b556f;
--md-color-table-col-odd-background: #2f4459;
--md-color-table-row-even-background: #3434342c;
--md-color-table-row-odd-background: transparent;
--md-color-blockquote-border: var(--color-accent);
--md-color-blockquote-background: #34343433;
.theme-light {
--color-background-body: #ffffff;
--color-font: #000000;
--color-shadow-nav: #000c2b0d;
.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-overlay-mix: var(--color-font);
--color-background-nav: transparent;
--color-svg-nav: #363636;
--color-background-card: rgba(171, 170, 170, 0.13);
--color-background-dropdown: var(--color-background-body);
--color-accent: #2294ff;
--color-font-link: var(--color-accent);
--color-font-link-hover: #0966be;
--color-background-card: rgba(171, 170, 170, 0.13);
--color-background-dropdown: var(--color-background-body);
--color-accent: #2294ff;
--color-font-link: var(--color-accent);
--color-font-link-hover: #0966be;
/* 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);
/* 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);
}
--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);
}
}