From 8b1b423332ca11f26e7e361aa87420218bd5a008 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Sat, 2 Oct 2021 00:09:40 -0300 Subject: [PATCH] Responsive desing done --- public/css_styles/styles.css | 205 +++++++++++++++++- public/css_styles/styles.css.map | 2 +- public/sass_styles/_aboutThis.scss | 8 + public/sass_styles/_banner-login.scss | 44 ++++ .../sass_styles/_clockify-tasks-display.scss | 47 ++++ .../sass_styles/_dark-mode_toogle-switch.scss | 25 +++ public/sass_styles/_goDownArrow.scss | 16 ++ public/sass_styles/_goToAccount.scss | 47 +++- public/sass_styles/_header.scss | 24 +- public/sass_styles/_mainPomodoro.scss | 15 ++ public/sass_styles/_pomodoro-counter.scss | 10 + public/sass_styles/_styleSelector.scss | 84 ++++++- src/App.js | 34 +-- src/components/GoDownArrow.jsx | 13 ++ 14 files changed, 543 insertions(+), 31 deletions(-) diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css index 88adf74..ebf0d52 100644 --- a/public/css_styles/styles.css +++ b/public/css_styles/styles.css @@ -11,7 +11,7 @@ } .header-main-page h1 { color: #ffffff; - font-size: 7vh; + font-size: 3vw; font-family: "Raleway", sans-serif; font-weight: 700; margin: 0; @@ -20,7 +20,7 @@ } .header-main-page h3 { color: rgba(255, 255, 255, 0.75); - font-size: 2vh; + font-size: 1vw; font-family: "Raleway", sans-serif; font-weight: 700; margin: 0; @@ -44,6 +44,18 @@ color: #000000; } +@media (max-width: 991.98px) { + .header-main-page { + height: auto; + padding: 3vw 0px; + } + .header-main-page h1 { + font-size: 26pt; + } + .header-main-page h3 { + font-size: 13pt; + } +} .banner-login { background-color: #D17262; color: white; @@ -86,6 +98,36 @@ opacity: 0%; } +@media (max-width: 918px) { + .banner-login { + justify-content: initial; + height: auto; + padding: 2vh 2vw; + } + .banner-login p { + width: 33.3%; + } + .banner-login .button-container { + width: 66.6%; + justify-content: space-around; + } + .banner-login .button-container button { + width: 30%; + } +} +@media (max-width: 576px) { + .banner-login p { + width: 50%; + } + .banner-login .button-container { + width: 50%; + flex-direction: column; + } + .banner-login .button-container button { + width: 75%; + margin: 10px; + } +} .main-pomodoro { display: flex; flex-direction: column; @@ -137,6 +179,14 @@ color: white; } +@media (max-width: 576px) { + .main-pomodoro .timer { + font-size: 80pt; + } + .main-pomodoro .start-pomodoro { + font-size: 13pt; + } +} .style-selector { width: calc(20vw - 1px); padding-left: 3vw; @@ -210,6 +260,47 @@ pointer-events: none; } +@media (max-width: 991.98px) { + .style-selector { + position: initial; + margin: 0 0 5% 0; + width: 100%; + padding: 0; + padding: 0px 5vw; + box-sizing: border-box; + } + .style-selector h2 { + text-align: start; + margin-left: 0; + } + .style-selector .style-selection-container { + display: flex; + flex-wrap: wrap; + width: 100%; + } + .style-selector .style-selection-container .style-container { + height: 100%; + width: 30%; + margin: 1% 10%; + } +} +@media (max-width: 918px) { + .style-selector { + margin-bottom: 5vh; + } + .style-selector .style-selection-container { + flex-wrap: nowrap; + flex-direction: column; + } + .style-selector .style-selection-container .style-container { + width: 60%; + } +} +@media (max-width: 462px) { + .style-selector .style-selection-container .style-container { + width: 100%; + } +} .go-down { height: 7vh; width: 100%; @@ -225,6 +316,18 @@ fill: #aaaaaa; } +.go-down-separator-line { + width: 100%; + display: flex; + justify-content: center; +} +.go-down-separator-line hr { + height: 1px; + width: 75%; + border: none; + border-top: 1px solid #b8b8b8; +} + #about-this, #credits { height: 83vh; padding: 0px 3vw; @@ -275,6 +378,12 @@ height: 95vh; } +@media (max-width: 918px) { + #about-this, #credits { + height: auto; + padding-bottom: 5vh; + } +} .history-button { background: none; border: none; @@ -343,6 +452,12 @@ background-color: #9DF3C4; } +@media (max-width: 991.98px) { + .pomodoro-counter { + position: initial; + padding-bottom: 5vh; + } +} .identify-container { display: flex; flex-direction: column; @@ -454,6 +569,24 @@ background-color: #b632eb; } +@media (max-width: 991.98px) { + .dark-mode { + position: initial; + } +} +@media (max-width: 576px) { + .dark-mode { + margin-bottom: 20px; + } + .dark-mode label { + width: 50px; + height: 20px; + } + .dark-mode label::after { + width: 15px; + height: 15px; + } +} .account-container #message { padding-left: 5vw; background-color: #ff6a6a; @@ -567,13 +700,14 @@ .go-to-account .go-to-account-text { font-family: "Raleway", sans-serif; font-weight: 700; + font-size: 1vw; text-decoration: none; user-select: none; color: #ffffff; } .close-session { - width: 6vw; + width: 7vw; height: 3vw; position: absolute; left: 10vw; @@ -586,11 +720,41 @@ .close-session .close-session-text { font-family: "Raleway", sans-serif; font-weight: 700; + font-size: 1vw; text-decoration: none; user-select: none; color: #ffffff; } +@media (max-width: 991.98px) { + .go-to-account, .close-session { + position: initial; + padding: 1vw; + } + + .go-to-account { + margin-top: 10px; + margin-bottom: 10px; + } + .go-to-account .go-to-account-text { + font-size: 9pt; + } + + .close-session .close-session-text { + font-size: 9pt; + } +} +@media (max-width: 576px) { + .go-to-account, .close-session { + width: auto; + height: auto; + } + + .go-to-account-text, .close-session-text { + position: initial; + margin: 10px 10px; + } +} .clockify-tasks-display { width: 20vw; position: absolute; @@ -638,6 +802,41 @@ opacity: 30%; } +@media (max-width: 991.98px) { + .clockify-tasks-display { + position: initial; + width: auto; + display: flex; + justify-content: space-around; + padding: 0px 5vw; + } + .clockify-tasks-display.loading-container { + width: 90%; + height: auto; + } + .clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] { + width: 20vw; + height: 5vw; + } +} +@media (max-width: 576px) { + .clockify-tasks-display { + position: initial; + width: auto; + display: flex; + flex-direction: column; + align-items: center; + } + .clockify-tasks-display.loading-container { + width: 90%; + height: auto; + } + .clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] { + width: 70%; + height: 4vh; + margin-top: 1vh; + } +} html, body { margin: 0; padding: 0; diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map index 4bb7b18..2d2d628 100644 --- a/public/css_styles/styles.css.map +++ b/public/css_styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss"],"names":[],"mappings":"AACA;EACI,kBCsCS;EDpCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADiBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AAUnB;EACI;IACG;IACA;;EACA;IACI;;EAGJ;IACI;;;AEpEZ;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAOZ;EACI;;;AAGJ;EACI;IACI;IAEA;IAEA;;EAEA;IACI;;EAGJ;IACI;IAEA;;EAEA;IACI;;;AAMhB;EAGQ;IACI;;EAGJ;IACI;IAEA;;EAEA;IACI;IACA;;;AC7FhB;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFuBO;;AEpBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFOG;EENH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFHG;EEKH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFlBO;EEmBP;EAEA;EACA;;;AAKR;EAIQ;IACI;;EAGJ;IACI;;;AC7EZ;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHuBO;EGtBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHVL;EGWK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH7CE;;;AGsDd;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;IACI;IAEA;IAEA;IAEA;IACA;IAEA;;EAEA;IACI;IAEA;;EAIJ;IAEI;IAEA;IAEA;;EAEA;IACI;IACA;IAEA;;;AAMhB;EAEI;IAWI;;EATA;IACI;IAEA;;EAEA;IACI;;;AAQhB;EAMY;IACI;;;AC1KhB;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;AAMZ;EAEI;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;;;ACjCR;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAEA;EAEI;;AAEA;ELxBZ;EACA;EACA;EANA;EK+BgB;;AAGJ;ELxBZ;EACA;EAXA;EKqCgB;EACA;EACA;;;AAOpB;EACI;;;AAGJ;EACI;IACI;IAEA;;;AC9DR;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN0BU;;AMxBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPED;EODC,kBPGF;;;AOId;EAEI;IAEI;IACA;;;ACpDR;EACI;EACA;EACA;;AAEA;EACI;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;ERbR;EACA;EQeQ;EAEA;;AAMR;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRCD;EQCC;EAEA;;AAEA;ER3CZ;EACA;EAQA;EACA;EACA;EQoCgB;;AAIR;EACI;EACA,kBRdM;;AQkBd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;ACzFpB;EAEI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA,kBT6BS;ES5BT;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EAEA,kBTKS;;ASFb;EACI;;;AAIR;EAEI;IACI;;;AAMR;EACI;IAWI;;EAVA;IACI;IACA;;EAGJ;IACI;IACA;;;AC/DR;EACI;EAEA;;AAEA;EVJJ;EACA;EAQA;EACA;EACA;EUHQ;EACA;;AAIR;EACI;;AAEA;EAAI;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA,kBVOE;;AULF;EV1BR;EACA;EACA;EAXA;EACA;EUuCY,OVFD;EUIC;;AAIR;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAEA;EACI;EACA,kBV1CC;EU4CD;EACA;EAEA;EAEA;;AAKI;EVtFhB;EACA;EACA;EAXA;EACA;;AUmGgB;EACI;;AAIR;EACI;EACA;EAEA;EAEA;EACA;EAEA;;;AAOpB;EACI;EACA;EAEA;EACA;EACA;;;AClIJ;EAEI;EACA;EAEA;EAEA;EAEA,kBXgCW;EW9BX;EACA;EACA;EAEA;;AAEA;EXdA;EACA;EWiBI;EACA;EACA;EAEA;;;AAIR;EACI;EACA;EAEA;EAEA;EAEA,kBXIW;EWFX;EACA;EACA;EAEA;;AAEA;EX1CA;EACA;EW4CI;EAEA;EAEA;EAEA;;;AAKR;EAEI;IACG;IACA;;;EAIH;IAOI;IACA;;EANA;IACI;;;EAUJ;IACI;;;AAKZ;EACI;IACI;IACA;;;EAGJ;IACI;IACA;;;AC9FR;EAEI;EACA;EAEA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EZhCJ;EYoCI;EAEA;EACA;EAEA;;AAEA;EACI;EACA;EACA;EACA;;;AAKZ;EAEI;IACI;IACA;IAEA;IACA;IAEA;;EAEA;IACI;IACA;;EAGJ;IACI;IACA;;;AAMZ;EAEI;IACI;IACA;IAEA;IACA;IACA;;EAEA;IACI;IACA;;EAGJ;IACI;IACA;IACA;;;AZrCZ;EACI;EACA;;;AAGJ;EACI;EACA,kBAnCe","file":"styles.css"} \ No newline at end of file diff --git a/public/sass_styles/_aboutThis.scss b/public/sass_styles/_aboutThis.scss index 8bb31e4..79a5fc9 100644 --- a/public/sass_styles/_aboutThis.scss +++ b/public/sass_styles/_aboutThis.scss @@ -54,4 +54,12 @@ #credits { height: 95vh; +} + +@media (max-width: 918px) { + #about-this, #credits { + height: auto; + + padding-bottom: 5vh; + } } \ No newline at end of file diff --git a/public/sass_styles/_banner-login.scss b/public/sass_styles/_banner-login.scss index 5608a0e..56e04f8 100644 --- a/public/sass_styles/_banner-login.scss +++ b/public/sass_styles/_banner-login.scss @@ -51,4 +51,48 @@ .blank { opacity: 0%; +} + +@media (max-width: 918px) { + .banner-login { + justify-content: initial; + + height: auto; + + padding: 2vh 2vw; + + p { + width: 33.3%; + } + + .button-container { + width: 66.6%; + + justify-content: space-around; + + button { + width: 30%; + } + } + } +} + +@media (max-width: 576px) { + .banner-login { + + p { + width: 50%; + } + + .button-container { + width: 50%; + + flex-direction: column; + + button { + width: 75%; + margin: 10px; + } + } + } } \ No newline at end of file diff --git a/public/sass_styles/_clockify-tasks-display.scss b/public/sass_styles/_clockify-tasks-display.scss index e9411f7..ecf761b 100644 --- a/public/sass_styles/_clockify-tasks-display.scss +++ b/public/sass_styles/_clockify-tasks-display.scss @@ -56,4 +56,51 @@ opacity: 30%; } } +} + +@media (max-width: 991.98px) { + + .clockify-tasks-display { + position: initial; + width: auto; + + display: flex; + justify-content:space-around; + + padding: 0px 5vw; + + &.loading-container { + width: 90%; + height: auto; + } + + .workspace-selector, .project-selector, input[type=text] { + width: 20vw; + height: 5vw; + } + + } +} + +@media (max-width: 576px) { + + .clockify-tasks-display { + position: initial; + width: auto; + + display: flex; + flex-direction: column; + align-items: center; + + &.loading-container { + width: 90%; + height: auto; + } + + .workspace-selector, .project-selector, input[type=text] { + width: 70%; + height: 4vh; + margin-top: 1vh; + } + } } \ No newline at end of file diff --git a/public/sass_styles/_dark-mode_toogle-switch.scss b/public/sass_styles/_dark-mode_toogle-switch.scss index ce36927..7608447 100644 --- a/public/sass_styles/_dark-mode_toogle-switch.scss +++ b/public/sass_styles/_dark-mode_toogle-switch.scss @@ -44,3 +44,28 @@ background-color: #b632eb; } } + +@media (max-width: 991.98px) { + + .dark-mode { + position: initial; + + } +} + + +@media (max-width: 576px) { + .dark-mode { + label { + width: 50px; + height: 20px; + } + + label::after { + width: 15px; + height: 15px; + } + + margin-bottom: 20px; + } +} \ No newline at end of file diff --git a/public/sass_styles/_goDownArrow.scss b/public/sass_styles/_goDownArrow.scss index bcdb09b..c1f300f 100644 --- a/public/sass_styles/_goDownArrow.scss +++ b/public/sass_styles/_goDownArrow.scss @@ -17,4 +17,20 @@ // CREDITS TO https://stackoverflow.com/a/49627345 } } +} + +.go-down-separator-line { + + width: 100%; + + display: flex; + justify-content: center; + + hr { + height: 1px; + width: 75%; + + border: none; + border-top: 1px solid rgb(184, 184, 184); + } } \ No newline at end of file diff --git a/public/sass_styles/_goToAccount.scss b/public/sass_styles/_goToAccount.scss index 751f209..8c84255 100644 --- a/public/sass_styles/_goToAccount.scss +++ b/public/sass_styles/_goToAccount.scss @@ -18,6 +18,8 @@ .go-to-account-text { @include titleFont(); + + font-size: 1vw; text-decoration: none; user-select: none; @@ -26,7 +28,7 @@ } .close-session { - width: 6vw; + width: 7vw; height: 3vw; position: absolute; @@ -44,10 +46,53 @@ .close-session-text { @include titleFont(); + font-size: 1vw; + text-decoration: none; user-select: none; color: #ffffff; } +} + + +@media (max-width: 991.98px) { + //! I fucking hate make the responsive design + .go-to-account, .close-session { + position: initial; + padding: 1vw; + + } + + .go-to-account { + + .go-to-account-text { + font-size: 9pt; + + } + + margin-top: 10px; + margin-bottom: 10px; + } + + .close-session { + + .close-session-text { + font-size: 9pt; + } + } +} + +@media (max-width: 576px) { + .go-to-account, .close-session { + width: auto; + height: auto; + } + + .go-to-account-text, .close-session-text { + position: initial; + margin:10px 10px; + + } } \ No newline at end of file diff --git a/public/sass_styles/_header.scss b/public/sass_styles/_header.scss index a951f74..8f9079c 100644 --- a/public/sass_styles/_header.scss +++ b/public/sass_styles/_header.scss @@ -16,7 +16,7 @@ h1 { color: #ffffff; - font-size: 7vh; + font-size: 3vw; @include titleFont(); @include normalizeTitle(); } @@ -24,7 +24,8 @@ h3 { color: rgba(255, 255, 255, 0.75); - font-size: 2vh; + font-size: 1vw; + @include titleFont(); @include normalizeTitle(); @@ -51,4 +52,21 @@ } } } -} \ No newline at end of file +} + + + + + @media (max-width: 991.98px) { + .header-main-page { + height: auto; + padding: 3vw 0px; + h1 { + font-size: 26pt; + } + + h3 { + font-size: 13pt; + } + } + } \ No newline at end of file diff --git a/public/sass_styles/_mainPomodoro.scss b/public/sass_styles/_mainPomodoro.scss index 73d77e4..9250cef 100644 --- a/public/sass_styles/_mainPomodoro.scss +++ b/public/sass_styles/_mainPomodoro.scss @@ -63,4 +63,19 @@ font-size: 5vh; color: white; } +} + + +@media (max-width: 576px) { + + .main-pomodoro { + + .timer { + font-size: 80pt; + } + + .start-pomodoro { + font-size: 13pt; + } + } } \ No newline at end of file diff --git a/public/sass_styles/_pomodoro-counter.scss b/public/sass_styles/_pomodoro-counter.scss index f02a9c5..1aed09b 100644 --- a/public/sass_styles/_pomodoro-counter.scss +++ b/public/sass_styles/_pomodoro-counter.scss @@ -42,4 +42,14 @@ } } } +} + + +@media (max-width: 991.98px) { + + .pomodoro-counter { + + position: initial; + padding-bottom: 5vh; + } } \ No newline at end of file diff --git a/public/sass_styles/_styleSelector.scss b/public/sass_styles/_styleSelector.scss index 08fa53c..c54a92c 100644 --- a/public/sass_styles/_styleSelector.scss +++ b/public/sass_styles/_styleSelector.scss @@ -95,12 +95,82 @@ transition: 0.2s ease-in-out; } - .style-selector-show { - opacity: 100%; - pointer-events: auto; +.style-selector-show { + opacity: 100%; + pointer-events: auto; +} + +.style-selector-hidden { + opacity: 0%; + pointer-events: none; +} + +@media (max-width: 991.98px) { + .style-selector { + position: initial; + + margin: 0 0 5% 0; + + width: 100%; + + padding: 0; + padding: 0px 5vw; + + box-sizing: border-box; + + h2 { + text-align: start; + + margin-left: 0; + } - .style-selector-hidden { - opacity: 0%; - pointer-events: none; - } \ No newline at end of file + .style-selection-container { + + display: flex; + + flex-wrap: wrap; + + width: 100%; + + .style-container{ + height: 100%; + width: 30%; + + margin: 1% 10%; + } + } + } +} + +@media (max-width: 918px) { + + .style-selector { + + .style-selection-container { + flex-wrap: nowrap; + + flex-direction: column; + + .style-container { + width: 60% ; + } + } + margin-bottom: 5vh; + + } +} + +@media (max-width: 462px) { + + .style-selector { + + .style-selection-container { + + .style-container{ + width: 100%; + } + } + } + +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 33036aa..d0e0574 100644 --- a/src/App.js +++ b/src/App.js @@ -66,6 +66,24 @@ function App() { + + + - diff --git a/src/components/GoDownArrow.jsx b/src/components/GoDownArrow.jsx index 87b5431..74ffed0 100644 --- a/src/components/GoDownArrow.jsx +++ b/src/components/GoDownArrow.jsx @@ -3,6 +3,19 @@ import { Link, animateScroll as scroll } from "react-scroll"; const GoDownArrow = (props) => { + + const width = window.screen.width + + console.log(width) + + if (width <= '991.98') { + return ( +
+
+
+ ) + } + console.log('GO DOWN ARROW DEPLOYED') return (