mirror of
https://github.com/DerTyp7/explainegy-nextjs.git
synced 2025-10-29 21:02:13 +01:00
jh
This commit is contained in:
Janis
72
styles/Footer.module.scss
Normal file
72
styles/Footer.module.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
@import "variables.scss";
|
||||
.footer {
|
||||
padding: 200px 15px 30px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 50px 50px;
|
||||
|
||||
.adContainer {
|
||||
background-color: #ff00003e;
|
||||
width: $footer-ad-container-width;
|
||||
height: $footer-ad-container-height;
|
||||
|
||||
@media (max-width: $footer-ad-container-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 100px 100px;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: $footer-breakpoint-1) {
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: $footer-breakpoint-3) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 100px 20px;
|
||||
}
|
||||
|
||||
.company {
|
||||
float: right;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100;
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
column-gap: 10px;
|
||||
font-size: 0.8em;
|
||||
@media (max-width: $footer-breakpoint-1) {
|
||||
flex-direction: column;
|
||||
font-size: 0.7em;
|
||||
column-gap: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: $footer-breakpoint-3) {
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 20px 100px;
|
||||
|
||||
@media (max-width: $footer-breakpoint-4) {
|
||||
column-gap: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,29 @@
|
||||
.sidebar {
|
||||
.stickyContainer {
|
||||
position: sticky;
|
||||
top: $grid-sticky-top;
|
||||
top: $tutorial-grid-sticky-top;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
font-size: 14px;
|
||||
@media (max-width: $tutorial-breakpoint-1) {
|
||||
display: none;
|
||||
}
|
||||
.sidebarContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
background-color: $color-background-card;
|
||||
border-radius: 10px;
|
||||
padding: 10px 10px 15px 10px;
|
||||
}
|
||||
.adContainer {
|
||||
background-color: #ff00003e;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,36 +2,20 @@
|
||||
.tutorial {
|
||||
display: grid;
|
||||
gap: 70px;
|
||||
grid-template-columns: 200px minmax(0px, 1fr) 200px;
|
||||
grid-template-columns: $tutorial-content-table-width minmax(0px, 1fr) $tutorial-sidebar-width;
|
||||
margin: 0px auto;
|
||||
max-width: 1800px;
|
||||
padding: 0px 24px;
|
||||
|
||||
.tutorialContent {
|
||||
max-width: 100%;
|
||||
@media (max-width: $tutorial-breakpoint-1) {
|
||||
grid-template-columns: $tutorial-content-table-width 1fr;
|
||||
}
|
||||
|
||||
.markdown {
|
||||
padding: 0 10px 0 10px;
|
||||
color: $md-color-font;
|
||||
list-style: inside;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $md-color-headline;
|
||||
}
|
||||
hr {
|
||||
border: 1px solid $md-color-hr;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
@media (max-width: $tutorial-breakpoint-2) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tutorialContent {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,29 @@
|
||||
@import "variables.scss";
|
||||
|
||||
.tutorialContentTable {
|
||||
@media (max-width: $tutorial-breakpoint-2) {
|
||||
display: none;
|
||||
}
|
||||
.stickyContainer {
|
||||
position: sticky;
|
||||
top: $grid-sticky-top;
|
||||
top: $tutorial-grid-sticky-top;
|
||||
|
||||
.list {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
@@ -22,6 +21,13 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: $color-background-body;
|
||||
color: $color-font;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
main {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
|
||||
112
styles/markdown.scss
Normal file
112
styles/markdown.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
@import "variables.scss";
|
||||
.markdown {
|
||||
padding: 0 10px 0 10px;
|
||||
color: $md-color-font;
|
||||
|
||||
hr {
|
||||
border: 1px solid $md-color-hr;
|
||||
}
|
||||
|
||||
/* Texts */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $md-color-headline;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
code {
|
||||
background-color: #282c34;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
word-wrap: normal;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
text-indent: 0;
|
||||
white-space: inherit;
|
||||
background-color: transparent;
|
||||
padding: 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul,
|
||||
ol {
|
||||
list-style: inside;
|
||||
li {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.blockquote {
|
||||
border-left: 5px solid $md-color-blockquote-border;
|
||||
padding-left: 20px;
|
||||
background-color: $md-color-blockquote-background;
|
||||
}
|
||||
/* Table */
|
||||
table {
|
||||
border-radius: 5px;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
display: table;
|
||||
overflow: auto;
|
||||
|
||||
thead,
|
||||
tbody {
|
||||
width: 100%;
|
||||
}
|
||||
thead th:nth-child(odd) {
|
||||
color: #ffffff;
|
||||
background: $md-color-table-col-odd-background;
|
||||
}
|
||||
tr {
|
||||
background: $md-color-table-row-odd-background;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background: $md-color-table-row-even-background;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
}
|
||||
td {
|
||||
border-right: 1px solid #ffffff00;
|
||||
}
|
||||
th {
|
||||
color: #ffffff;
|
||||
background: $md-color-table-col-even-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,13 +2,40 @@
|
||||
/* Colors: General */
|
||||
$color-overlay-mix: #fff;
|
||||
$color-background-body: #181a1b; //181a1b
|
||||
$color-background-card: mix($color-overlay-mix, $color-background-body, 5%);
|
||||
$color-font: #ffffff;
|
||||
$color-font-link: #2294ff;
|
||||
$color-accent: #2294ff;
|
||||
$color-font-link: $color-accent;
|
||||
|
||||
/* Colors: Markdown */
|
||||
$md-color-font: mix($color-overlay-mix, $color-font, 5%);
|
||||
$md-color-headline: mix($color-overlay-mix, $color-font, 20%);
|
||||
$md-color-hr: mix($color-overlay-mix, $color-background-body, 20%);
|
||||
$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%);
|
||||
|
||||
/* Grid */
|
||||
$grid-sticky-top: 60px;
|
||||
$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;
|
||||
|
||||
Reference in New Issue
Block a user