frog-collective/frog-website
frog-collective
/
frog-website
5
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

refactor: use sass variable for media queries breakpoints

This commit is contained in:
Corentin 2024-05-21 09:02:18 +02:00
parent 03f921a15f
commit 77dd7aa0d2
7 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/content.scss
View File

@ -3,7 +3,7 @@
padding: 0 var(--space-small); padding: 0 var(--space-small);
max-width: 1100px; max-width: 1100px;
@media (max-width: 768px) { @media ($mobile-breakpoint) {
margin-top: 0; margin-top: 0;
} }
} }

8
src/lib/nav.scss
View File

@ -30,7 +30,7 @@
margin: 0 -50vw; margin: 0 -50vw;
padding: 0 50vw; padding: 0 50vw;
@media (max-width: 768px) { @media ($mobile-breakpoint) {
max-height: 0; max-height: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -44,7 +44,7 @@
justify-content: space-around; justify-content: space-around;
padding: 0; padding: 0;
margin: 0; margin: 0;
@media (max-width: 768px) { @media ($mobile-breakpoint) {
flex-direction: column; flex-direction: column;
} }
} }
@ -73,13 +73,13 @@
} }
&--toggle-button { &--toggle-button {
@media (max-width: 768px) { @media ($mobile-breakpoint) {
display: block; display: block;
} }
} }
&__open &--menu { &__open &--menu {
@media (max-width: 768px) { @media ($mobile-breakpoint) {
max-height: 100vh; max-height: 100vh;
} }
} }

8
src/lib/section.scss
View File

@ -3,7 +3,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media (max-width: 768px) { @media ($mobile-breakpoint) {
margin-bottom: var(--space-large); margin-bottom: var(--space-large);
} }
@ -12,7 +12,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@media (max-width: 768px) { @media ($mobile-breakpoint) {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
@ -23,7 +23,7 @@
background: center / contain no-repeat var(--image); background: center / contain no-repeat var(--image);
content: ""; content: "";
@media (max-width: 768px) { @media ($mobile-breakpoint) {
width: 50px; width: 50px;
height: 50px; height: 50px;
margin-right: var(--space-small); margin-right: var(--space-small);
@ -40,7 +40,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@media (max-width: 768px) { @media ($mobile-breakpoint) {
grid-area: 2 / 1 / 3 / 4; grid-area: 2 / 1 / 3 / 4;
} }
} }

2
src/lib/typo.scss
View File

@ -40,7 +40,7 @@ p {
} }
@media (max-width: 768px) { @media ($mobile-breakpoint) {
h1, h2, h3 { h1, h2, h3 {
margin: 0 0 var(--space-small) 0; margin: 0 0 var(--space-small) 0;
} }

2
src/lib/variables.scss
View File

@ -1,3 +1,5 @@
$mobile-breakpoint: "max-width: 768px";
:root { :root {
--color: #161616; --color: #161616;

2
src/pages/index/news.scss
View File

@ -15,7 +15,7 @@
background: var(--dark); background: var(--dark);
color: white; color: white;
padding: var(--space-small) var(--space-medium); padding: var(--space-small) var(--space-medium);
@media (max-width: 768px) { @media ($mobile-breakpoint) {
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: auto auto; grid-template-rows: auto auto;
} }

2
src/pages/index/presentation.scss
View File

@ -2,7 +2,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: var(--space-medium); gap: var(--space-medium);
@media (max-width: 768px) { @media ($mobile-breakpoint) {
flex-direction: column; flex-direction: column;
} }
} }