janis/explainegy-nextjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2025-10-30 13:17: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

55
styles/modules/Category.module.scss Normal file
View File

@@ -0,0 +1,55 @@
@import "../variables.scss";
.category {
h1 {
text-align: center;
font-size: 1.5em;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
row-gap: 50px;
padding: 0px 20px 0 20px;
.showcase {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px 10px;
@media (max-width: $category-breakpoint-1) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: $category-breakpoint-2) {
grid-template-columns: 1fr;
}
h2 {
font-size: 1em;
grid-column: 1 / -1;
}
a {
background-color: rgba(126, 126, 126, 0.1);
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
transition: all 50ms linear;
text-overflow: ellipsis;
max-width: 300px;
&:hover {
background-color: rgba(126, 126, 126, 0.2);
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
}
}
}
.smallShowcase {
@media (max-width: $category-breakpoint-2) {
& > a:nth-child(n + 5) {
display: none;
}
}
}
}
}

106
styles/modules/CategoryList.module.scss Normal file
View File

@@ -0,0 +1,106 @@
@import "../variables.scss";
.categoryList {
text-align: center;
.content {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px 30px;
@media (max-width: $categoryList-breakpoint-1) {
grid-template-columns: 1fr 1fr;
gap: 10px 10px;
}
@media (max-width: $categoryList-breakpoint-2) {
grid-template-columns: 1fr;
width: 100%;
padding: 0px 20px 0 20px;
}
.linkContainer {
aspect-ratio: 14/9;
width: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@media (max-width: $categoryList-breakpoint-2) {
width: 100%;
}
a {
text-align: center;
aspect-ratio: 14/9;
width: 230px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
row-gap: 20px;
background-color: #383d54;
color: white;
font-size: 0.8em;
transition: all 100ms linear;
&:hover {
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.481);
color: white !important;
text-decoration: none !important;
width: 250px;
row-gap: 30px;
.svgContainer {
svg {
width: 70px;
height: 70px;
}
}
}
@media (max-width: $categoryList-breakpoint-2) {
font-size: 1.2em;
width: 95%;
&:hover {
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0);
width: 100%;
.svgContainer {
svg {
width: 90px;
height: 90px;
}
}
}
}
.svgContainer {
width: 70px;
height: 70px;
@media (max-width: $categoryList-breakpoint-2) {
width: 90px;
height: 90px;
}
svg {
transition: all 100ms linear;
fill: rgb(255, 255, 255);
width: 60px;
height: 60px;
@media (max-width: $categoryList-breakpoint-2) {
width: 80px;
height: 80px;
}
}
}
}
}
}
}
}

72
styles/modules/Footer.module.scss Normal file
View 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;
}
}
}
}
}

181
styles/modules/Nav.module.scss Normal file
View File

@@ -0,0 +1,181 @@
@import "../variables.scss";
.nav {
background-color: var(--color-background-nav);
height: $nav-height-inital;
margin-bottom: 10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
box-shadow: var(--color-shadow-nav) 0px 4px 8px;
@media (max-width: $nav-breakpoint-1) {
grid-template-columns: 1fr 1fr 0.25fr;
}
@media (max-width: $nav-breakpoint-2) {
grid-template-columns: 1fr 1fr;
height: 100px;
}
& > div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.containerLeft {
@media (max-width: $nav-breakpoint-2) {
grid-column: 1;
grid-row: 1;
}
@media (max-width: $nav-breakpoint-3) {
column-gap: 20px;
}
.links {
font-size: 0.8em;
font-weight: bold;
.dropDown {
color: var(--color-font-link);
text-decoration: none;
cursor: pointer;
&:hover {
.dropDownContainer {
display: block;
}
}
.dropDownContainer {
display: none;
position: absolute;
z-index: 1;
.content {
background-color: var(--color-background-dropdown);
min-width: 160px;
box-shadow: 0px 12px 16px 5px rgba(0, 0, 0, 0.2);
margin-top: 21px;
a {
float: none;
color: var(--color-font-link);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
border-left: 2px solid transparent;
transition: all 50ms linear;
&:hover {
border-color: var(--color-accent);
}
}
}
}
}
}
}
.containerCenter {
width: 100%;
@media (max-width: $nav-breakpoint-2) {
grid-row: 2;
grid-column: span 2;
}
.searchBar {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid rgba(95, 95, 95, 0.5);
border-radius: 5px;
padding-left: 10px;
transition: all 50ms linear;
&:hover {
border-color: rgba(91, 91, 91, 0.9);
.icon {
svg {
fill: var(--color-font);
}
}
}
&:focus-within {
border-color: rgba(91, 91, 91, 0.9);
.icon {
svg {
fill: var(--color-font);
}
}
}
input {
width: 300px;
height: 30px;
background-color: transparent;
border: 0px;
outline: 0;
padding-right: 10px;
color: var(--color-font);
@media (max-width: $nav-breakpoint-4) {
width: 200px;
}
}
.icon {
display: block;
padding-right: 10px;
svg {
height: 15px;
}
}
}
}
.containerRight {
justify-content: flex-end;
padding-right: 50px;
@media (max-width: $nav-breakpoint-2) {
grid-row: 1;
}
@media (max-width: $nav-breakpoint-4) {
padding-right: 20px;
}
.themeSwitch {
svg {
transition: all 50ms linear;
height: 24px;
cursor: pointer;
animation-duration: 150ms;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
&:hover {
fill: var(--color-font);
}
}
}
}
svg {
aspect-ratio: 1;
fill: var(--color-svg-nav);
}
@keyframes spinThemeSwitch {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-180deg);
}
}
}

31
styles/modules/Sidebar.module.scss Normal file
View File

@@ -0,0 +1,31 @@
@import "../variables.scss";
.sidebar {
.stickyContainer {
position: sticky;
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: var(--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%;
}
}
}

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

@@ -0,0 +1,21 @@
@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 Normal file
View File

@@ -0,0 +1,29 @@
@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%;
}
}
}