From d58190b8575aa298af49a9481b35981290e416d9 Mon Sep 17 00:00:00 2001 From: Eric Date: Tue, 26 May 2020 18:35:51 -0700 Subject: [PATCH 1/4] added responsiveness to mobile and added missing desktop layout items --- css/index.css | 324 ++++++++++++++++++++++++++++++++++++++++++- index.html | 188 ++++++++++++++++--------- less/home-page.less | 73 +++++++++- less/index.less | 9 ++ less/mixins.less | 54 +++++++- less/navigation.less | 45 +++++- less/variables.less | 3 +- 7 files changed, 627 insertions(+), 69 deletions(-) diff --git a/css/index.css b/css/index.css index e764f2b01f..e748c94054 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,323 @@ -/* LESS needs to be processed */ \ No newline at end of file +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Roboto', sans-serif; +} +h1, +h2, +h3, +h4, +h5 { + font-family: 'Indie Flower', cursive; +} +h1 { + font-size: 4rem; +} +h2 { + font-size: 3.2rem; + padding-bottom: 10px; +} +h4 { + font-size: 2.5rem; + padding-bottom: 10px; +} +p { + line-height: 1.5; + font-size: 1.6rem; + padding-bottom: 10px; +} +img { + max-width: 100%; + height: auto; +} +.container { + max-width: 800px; + width: 100%; + margin: 0 auto; +} +.navContainer { + margin: 10px; + padding: 20px; +} +.navContainer a { + text-decoration: none; + font-family: Arial, Helvetica, sans-serif; + color: black; + font-size: 1.6rem; + padding: 10px; +} +.homeButton { + display: flex; + justify-content: flex-start; + padding: 20px; + margin: 20px; + text-decoration: none; + color: black; + font-family: "Comic Sans MS", "Comic Sans", cursive; +} +.topPage { + display: flex; + justify-content: space-between; +} +.btn { + display: flex; + justify-content: center; + border-radius: 12px; + box-shadow: inset 0px -3px 7px 0px #29bbff; + color: white; + background-color: #008080; + font-size: 2rem; + padding: 9px 23px; + text-decoration: none; + text-shadow: 0px 1px 0px #263666; +} +.btn:hover { + background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%); + background-color: #0688fa; +} +.btn .btn:active { + position: relative; + top: 1px; +} +.footer { + width: 100%; + border-top: 2px dashed silver; + background: #FFEBCD; +} +.footer p { + text-align: center; + color: #212529; + font-size: 1.6rem; + padding: 20px; +} +@media (max-width: 500px) { + body { + width: 100%; + padding: 20px; + } + body .homeButton { + display: flex; + justify-content: center; + } + body .navContainer { + display: flex; + justify-content: space-between; + } + body .heroImage { + width: 100%; + max-width: 50rem; + height: auto; + } + body .topPage { + display: flex; + flex-direction: column; + } + body .text-content { + display: flex; + flex-wrap: wrap; + } + body .container-Home { + display: flex; + flex-direction: column; + width: 100%; + } +} +.home .content-section { + margin: 30px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.home .content-section .text-content { + width: 48%; + padding-right: 1%; +} +.home .content-section .img-content { + width: 48%; + padding-left: 1%; +} +.home .content-section .img-content img { + border-radius: 10px; +} +.home .inverse-content { + padding-bottom: 30px; + border-bottom: 2px dashed #C0C0C0; +} +.home .inverse-content .text-content { + padding-left: 1%; + padding-right: 0; +} +.home .inverse-content .img-content { + padding-right: 1%; + padding-left: 0; +} +.home .content-destination { + width: 75%; + margin: 0 auto 30px; +} +.home .content-destination img { + border-radius: 10px; +} +.home .content-pick { + padding-top: 30px; + border-top: 2px dashed #C0C0C0; + display: flex; + justify-content: space-between; +} +.home .content-pick .destination { + width: 30%; + margin-bottom: 30px; +} +.heroImage { + display: flex; + justify-content: center; + align-items: center; + border-top: 2px dashed #C0C0C0; +} +.middleContent { + justify-content: center; + margin: 40px; + padding: 20px; +} +.middleContent p { + border-bottom: 2px dashed #C0C0C0; + display: flex; + flex-wrap: wrap; +} +.text-content { + display: flex; + flex-direction: column; +} diff --git a/index.html b/index.html index bb8663b768..48864a54c1 100644 --- a/index.html +++ b/index.html @@ -1,74 +1,134 @@ - + - - + + - Fun Bus Travel Agency - Solution + Fun Bus Travel Agency - Solution - - + + - - + + - + - - -
- -
-
-

Let's Go!

-

Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.

-

Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.

-
-
- Let's go on an adventure! -
-
-
-
- Lets have fun! -
-
-

Adventure Awaits

-

Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.

-

Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.

-
- -
-
-

Pick Your Destination

-

Expedition excursion design darn excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.

- Second slide -
-
+
-
-

Fun In The Sun

-

Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.

-
Sign Me Up!
-
-
-

Mountain Excursion

-

Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.

-
Sign Me Up!
-
-
-

Island Getaway

-

Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.

-
Sign Me Up!
-
-
-
+

Fun Bus +

+ - + + - - \ No newline at end of file +
+ +
+ +
+

Welcome to the Fun Bus!

+

+ Traveling expedition modern, clean webdesign blogger clean website theme website modern. Design pretty design, traveloggewr adventure Wordpress wanderlust theme blogger website expedition theme travelblogger Adventer fun travler pretty design website expedition. +

+ + +
+ +
+
+
+

Let's Go!

+

+ Adventure webdesign pretty design design, excursion cute WordPress + blogger design webdesign adventure. Pretty simple traveling fun + WordPress wanderlust darn simple organized. +

+

+ Expedition colorful design simple excursion blogger blogger design + WordPress design, design organized website theme. +

+
+
+ Let's go on an adventure! +
+
+
+
+ Lets have fun! +
+
+

Adventure Awaits

+

+ Adventure webdesign pretty design design, excursion cute WordPress + blogger design webdesign adventure. Pretty simple traveling fun + WordPress wanderlust darn simple organized. +

+

+ Expedition colorful design simple excursion blogger blogger design + WordPress design, design organized website theme. +

+
+
+
+

Pick Your Destination

+

+ Expedition excursion design darn excursion fun, clean simple organized + WordPress Travel colorful webdesign. Traveler blogger website design + expedition clean excursion traveling. +

+ Second slide +
+
+
+

Fun In The Sun

+

+ Expedition excursion design excursion fun, clean simple organized + WordPress Travel colorful webdesign. Traveler blogger website design + expedition clean excursion traveling. +

+
Sign Me Up!
+
+
+

Mountain Excursion

+

+ Expedition excursion design excursion fun, clean simple organized + WordPress Travel colorful webdesign. Traveler blogger website design + expedition clean excursion traveling. +

+
Sign Me Up!
+
+
+

Island Getaway

+

+ Expedition excursion design excursion fun, clean simple organized + WordPress Travel colorful webdesign. Traveler blogger website design + expedition clean excursion traveling. +

+
Sign Me Up!
+
+
+
+ + + + + diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..88ea381f20 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,5 +1,46 @@ + +@media @mobile { + + body { + + width: 100%; + padding: 20px; + .homeButton { + display: flex; + justify-content: center; + } + .navContainer { + display: flex; + justify-content: space-between; + } + + .heroImage { + width: 100%; + max-width: 50rem; + height: auto; + } + .topPage { + .column(); + } + + .text-content { + + display: flex; + flex-wrap: wrap; + } + + .container-Home { + .column(); + width: 100%; + } +} +} + + + .home { + .content-section { margin: 30px 0; display: flex; @@ -58,4 +99,34 @@ margin-bottom: 30px; } } -}// home \ No newline at end of file +}// home + +.heroImage { + display: flex; + justify-content: center; + align-items: center; + border-top: 2px dashed @silver; +} + + +.middleContent { + justify-content: center; + margin: 40px; + padding: 20px; + + p { + border-bottom: 2px dashed @navigation-border; + display: flex; + flex-wrap: wrap; + } + +} + +.text-content { + display: flex; + flex-direction: column; +} + + + + diff --git a/less/index.less b/less/index.less index c113ca2c46..0fdb6304c5 100644 --- a/less/index.less +++ b/less/index.less @@ -1 +1,10 @@ // Follow the order in the readme + +@import "variables.less"; +@import "mixins.less"; +@import "reset.less"; +@import "global.less"; +@import "navigation.less"; +@import "footer.less"; +@import "home-page.less"; + diff --git a/less/mixins.less b/less/mixins.less index 2d5c603558..e8d9113b9f 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,53 @@ -// Mixins in here \ No newline at end of file +// Mixins in here + +.flexAlign(@justify,@align) { + display: flex; + justify-content: @justify; + align-items: @align; +} + + +.centerColumn(){ + display: flex; + justify-content: center; + flex-wrap: wrap; +} + + +.buttonStyle(){ + display: flex; + justify-content: center; + border-radius: 12px; + box-shadow:inset 0px -3px 7px 0px #29bbff; + color: white; + background-color:#008080; + font-size: 2rem; + padding:9px 23px; + text-decoration:none; + text-shadow:0px 1px 0px #263666; + &:hover { + background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%); + background-color:#0688fa; + } + + .btn:active { + position:relative; + top:1px; + } +} + + +.column() { + display: flex; + flex-direction: column; +} + + + + + + + + + + diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..ea5f365182 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,44 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + + + +.navContainer { + margin: 10px; + padding: 20px; + + + a { + text-decoration: none; + font-family: Arial, Helvetica, sans-serif; + color: black; + font-size: 1.6rem; + padding: 10px; + + + } + +} + +.homeButton { + display: flex; + justify-content: flex-start; + padding: 20px; + margin: 20px; + text-decoration: none; + color: black; + font-family: "Comic Sans MS", "Comic Sans", cursive; + +} + + +.topPage { + display: flex; + justify-content: space-between; +} + + +.btn { + .buttonStyle(); + + +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..678d90651f 100644 --- a/less/variables.less +++ b/less/variables.less @@ -11,4 +11,5 @@ @silver: #C0C0C0; @shark: #212529; @eastern-blue: #17A2B8; -@sandy-beach: #FFEBCD; \ No newline at end of file +@sandy-beach: #FFEBCD; +@mobile: ~"(max-width: 500px)"; \ No newline at end of file From 2c256427410e365e4c644681147c21646e75c43b Mon Sep 17 00:00:00 2001 From: Eric Date: Tue, 26 May 2020 18:43:49 -0700 Subject: [PATCH 2/4] Added responsiveness to mobile --- css/index.css | 8 ++++++++ index.html | 3 ++- less/home-page.less | 16 +++++++++++++++- 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index e748c94054..baab314e95 100644 --- a/css/index.css +++ b/css/index.css @@ -245,6 +245,10 @@ img { display: flex; flex-direction: column; } + body .middleContainer { + display: flex; + justify-content: space-between; + } body .text-content { display: flex; flex-wrap: wrap; @@ -254,6 +258,10 @@ img { flex-direction: column; width: 100%; } + body .container-Home .content-section { + padding: 20px; + margin: 10px; + } } .home .content-section { margin: 30px 0; diff --git a/index.html b/index.html index 48864a54c1..a3b7d16be7 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@

Fun Bus
- +

Welcome to the Fun Bus!

@@ -45,6 +45,7 @@

Welcome to the Fun Bus!

+
diff --git a/less/home-page.less b/less/home-page.less index 88ea381f20..a6e4194114 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -7,7 +7,7 @@ padding: 20px; .homeButton { display: flex; - justify-content: center; + justify-content:center; } .navContainer { display: flex; @@ -23,6 +23,14 @@ .column(); } + .middleContainer { + + display: flex; + justify-content: space-between; + + + + } .text-content { display: flex; @@ -32,6 +40,12 @@ .container-Home { .column(); width: 100%; + + .content-section { + padding: 20px; + margin: 10px; + } + } } } From ccf50fd2ec04146c61f21426616d22ca96e6e602 Mon Sep 17 00:00:00 2001 From: Eric Date: Tue, 26 May 2020 18:50:11 -0700 Subject: [PATCH 3/4] New PR --- css/index.css | 2 +- less/mixins.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index baab314e95..23662498cc 100644 --- a/css/index.css +++ b/css/index.css @@ -199,7 +199,7 @@ img { box-shadow: inset 0px -3px 7px 0px #29bbff; color: white; background-color: #008080; - font-size: 2rem; + font-size: 3rem; padding: 9px 23px; text-decoration: none; text-shadow: 0px 1px 0px #263666; diff --git a/less/mixins.less b/less/mixins.less index e8d9113b9f..afcf86692d 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -21,7 +21,7 @@ box-shadow:inset 0px -3px 7px 0px #29bbff; color: white; background-color:#008080; - font-size: 2rem; + font-size: 1 + 2rem; padding:9px 23px; text-decoration:none; text-shadow:0px 1px 0px #263666; From 58c01e1660f73679c0139032f1563274e514ebc6 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 27 May 2020 14:52:50 -0700 Subject: [PATCH 4/4] fixed layout --- css/index.css | 226 ++++++++++++++++++++++++------------------- less/global.less | 12 ++- less/home-page.less | 149 +++++++++++++++------------- less/index.less | 19 ++-- less/mixins.less | 58 +++-------- less/navigation.less | 87 ++++++++++------- less/variables.less | 6 +- 7 files changed, 296 insertions(+), 261 deletions(-) diff --git a/css/index.css b/css/index.css index 23662498cc..85e87be718 100644 --- a/css/index.css +++ b/css/index.css @@ -163,54 +163,64 @@ img { max-width: 100%; height: auto; } +@media (max-width: 500px) { + img { + width: 96%; + } +} .container { max-width: 800px; width: 100%; margin: 0 auto; } -.navContainer { - margin: 10px; - padding: 20px; -} -.navContainer a { - text-decoration: none; - font-family: Arial, Helvetica, sans-serif; - color: black; - font-size: 1.6rem; - padding: 10px; +@media (max-width: 500px) { + .container { + max-width: 500px; + width: 100%; + margin: 0 auto; + } } -.homeButton { +.navContainer { + border-bottom: 2px dashed #C0C0C0; display: flex; - justify-content: flex-start; - padding: 20px; - margin: 20px; - text-decoration: none; - color: black; - font-family: "Comic Sans MS", "Comic Sans", cursive; + justify-content: center; } -.topPage { +.navContainer .navTop { + width: 800px; display: flex; justify-content: space-between; + align-items: baseline; + margin: 25px 0px 0px 0px; + padding-bottom: 25px; +} +@media (max-width: 500px) { + .navContainer .navTop { + flex-direction: column; + align-items: center; + margin: 3% 0 0 0; + padding-bottom: 2%; + } +} +.navContainer .navTop h1 { + width: fit-content; } -.btn { +.navContainer .navTop nav { + width: 50%; display: flex; - justify-content: center; - border-radius: 12px; - box-shadow: inset 0px -3px 7px 0px #29bbff; - color: white; - background-color: #008080; - font-size: 3rem; - padding: 9px 23px; - text-decoration: none; - text-shadow: 0px 1px 0px #263666; + justify-content: space-around; } -.btn:hover { - background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%); - background-color: #0688fa; +@media (max-width: 500px) { + .navContainer .navTop nav { + width: 100%; + display: flex; + justify-content: space-around; + padding-top: 3%; + } } -.btn .btn:active { - position: relative; - top: 1px; +.navContainer .navTop nav a { + color: #212529; + font-size: 17.5px; + text-decoration: none; } .footer { width: 100%; @@ -223,109 +233,125 @@ img { font-size: 1.6rem; padding: 20px; } +.home .headerInfo { + border-bottom: 2px dashed #C0C0C0; + padding-bottom: 10px; + display: flex; + flex-direction: column; +} +.home .headerInfo img { + margin-bottom: 10px; +} +.home .headerInfo h1 { + margin: 10px 0px; +} @media (max-width: 500px) { - body { - width: 100%; - padding: 20px; - } - body .homeButton { - display: flex; - justify-content: center; - } - body .navContainer { - display: flex; - justify-content: space-between; - } - body .heroImage { - width: 100%; - max-width: 50rem; - height: auto; - } - body .topPage { - display: flex; - flex-direction: column; - } - body .middleContainer { - display: flex; - justify-content: space-between; - } - body .text-content { - display: flex; - flex-wrap: wrap; - } - body .container-Home { - display: flex; - flex-direction: column; - width: 100%; - } - body .container-Home .content-section { - padding: 20px; - margin: 10px; + .home { + align-items: center; + margin: 0 auto; } } -.home .content-section { +.content-section { margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between; + align-items: center; } -.home .content-section .text-content { +.content-section .text-content { width: 48%; padding-right: 1%; } -.home .content-section .img-content { +.content-section .img-content { width: 48%; padding-left: 1%; } -.home .content-section .img-content img { +.content-section .img-content img { border-radius: 10px; } -.home .inverse-content { +@media (max-width: 500px) { + .content-section { + flex-direction: column; + justify-content: flex-start; + align-items: center; + width: 100%; + } + .content-section .text-content { + padding-right: 1%; + width: 96%; + } + .content-section .img-content { + width: 100%; + padding-left: 0%; + } + .content-section .img-content img { + color: red; + } +} +.inverse-content { padding-bottom: 30px; border-bottom: 2px dashed #C0C0C0; } -.home .inverse-content .text-content { +@media (max-width: 500px) { + .inverse-content { + flex-direction: column-reverse; + } +} +.inverse-content .text-content { padding-left: 1%; padding-right: 0; } -.home .inverse-content .img-content { +.inverse-content .img-content { padding-right: 1%; padding-left: 0; } -.home .content-destination { +.content-destination { width: 75%; margin: 0 auto 30px; } -.home .content-destination img { +.content-destination img { border-radius: 10px; } -.home .content-pick { +@media (max-width: 500px) { + .content-destination { + width: 100%; + margin: 0 auto 30px auto; + } + .content-destination img { + border-radius: 10px; + } +} +.content-pick { padding-top: 30px; border-top: 2px dashed #C0C0C0; display: flex; justify-content: space-between; } -.home .content-pick .destination { +.content-pick .destination { width: 30%; margin-bottom: 30px; } -.heroImage { - display: flex; - justify-content: center; - align-items: center; - border-top: 2px dashed #C0C0C0; -} -.middleContent { - justify-content: center; - margin: 40px; - padding: 20px; -} -.middleContent p { - border-bottom: 2px dashed #C0C0C0; - display: flex; - flex-wrap: wrap; +.content-pick .destination .btn { + width: 80%; + color: white; + border-radius: 15px; + font-size: 20px; + background-color: #17A2B8; + text-align: center; + padding: 12px 20px; } -.text-content { - display: flex; - flex-direction: column; +@media (max-width: 500px) { + .content-pick { + display: flex; + flex-direction: column; + align-items: center; + } + .content-pick .destination { + width: 75%; + display: flex; + flex-direction: column; + } + .content-pick .destination .btn { + width: auto; + } } diff --git a/less/global.less b/less/global.less index abe21bf970..e13850e0b0 100644 --- a/less/global.less +++ b/less/global.less @@ -37,10 +37,20 @@ p { img { max-width: 100%; height: auto; + + @media @mobile { + width: 96%; + } } .container { max-width: 800px; width: 100%; margin: 0 auto; -} + + @media @mobile { + max-width: 500px; + width: 100%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/less/home-page.less b/less/home-page.less index a6e4194114..e7ac1a743f 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,87 +1,93 @@ +.home { -@media @mobile { - - body { + .headerInfo { + border-bottom: 2px dashed @silver; + padding-bottom: 10px; + display: flex; + flex-direction: column; - width: 100%; - padding: 20px; - .homeButton { - display: flex; - justify-content:center; - } - .navContainer { - display: flex; - justify-content: space-between; - } - - .heroImage { - width: 100%; - max-width: 50rem; - height: auto; - } - .topPage { - .column(); - } + img { + margin-bottom: 10px; + } - .middleContainer { - - display: flex; - justify-content: space-between; - + h1 { + margin: 10px 0px; + } + } - - } - .text-content { - - display: flex; - flex-wrap: wrap; - } + @media @mobile { + align-items: center; + margin: 0 auto; + - .container-Home { - .column(); - width: 100%; - .content-section { - padding: 20px; - margin: 10px; - } - - } -} -} + } + } + + + -.home { - .content-section { margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between; + align-items: center; - - .text-content { width: 48%; padding-right: 1%; - } + + } .img-content { width: 48%; padding-left: 1%; + img { border-radius: 10px; + + } + } + @media @mobile { + flex-direction: column; + justify-content: flex-start; + align-items: center; + width: 100%; + + .text-content { + padding-right: 1%; + width: 96%; + + } + + .img-content { + width: 100%; + padding-left: 0%; + + img { + color: red; + + } + } + } } + .inverse-content { padding-bottom: 30px; border-bottom: 2px dashed @navigation-border; + @media @mobile { + flex-direction: column-reverse; + } + .text-content { padding-left: 1%; padding-right: 0; @@ -100,6 +106,15 @@ img { border-radius: 10px; } + + @media @mobile { + width: 100%; + margin: 0 auto 30px auto; + + img { + border-radius: 10px; + } + } } .content-pick { @@ -111,36 +126,32 @@ .destination { width: 30%; margin-bottom: 30px; + + .btn { + .btnMaker(); + } } - } -}// home -.heroImage { +@media @mobile { display: flex; - justify-content: center; + flex-direction: column; align-items: center; - border-top: 2px dashed @silver; -} + -.middleContent { - justify-content: center; - margin: 40px; - padding: 20px; - p { - border-bottom: 2px dashed @navigation-border; + .destination { + width: 75%; display: flex; - flex-wrap: wrap; - } + flex-direction: column; -} + .btn { + width: auto; + } + } -.text-content { - display: flex; - flex-direction: column; } - + } \ No newline at end of file diff --git a/less/index.less b/less/index.less index 0fdb6304c5..302c8821ca 100644 --- a/less/index.less +++ b/less/index.less @@ -1,10 +1,15 @@ // Follow the order in the readme -@import "variables.less"; -@import "mixins.less"; -@import "reset.less"; -@import "global.less"; -@import "navigation.less"; -@import "footer.less"; -@import "home-page.less"; +@import 'variables'; +@import 'mixins'; + +@import 'reset'; + +@import 'global'; + +@import 'navigation'; + +@import 'footer'; + +@import 'home-page'; \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index afcf86692d..c07cdc9133 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1,53 +1,17 @@ // Mixins in here -.flexAlign(@justify,@align) { - display: flex; - justify-content: @justify; - align-items: @align; -} - - -.centerColumn(){ - display: flex; - justify-content: center; - flex-wrap: wrap; -} - - -.buttonStyle(){ - display: flex; - justify-content: center; - border-radius: 12px; - box-shadow:inset 0px -3px 7px 0px #29bbff; - color: white; - background-color:#008080; - font-size: 1 + 2rem; - padding:9px 23px; - text-decoration:none; - text-shadow:0px 1px 0px #263666; - &:hover { - background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%); - background-color:#0688fa; - } - - .btn:active { - position:relative; - top:1px; - } -} - - -.column() { - display: flex; - flex-direction: column; -} - - - - - - +//BUTTONS +.btnMaker(@color:white, @border-radius:15px, @font-size +:20px, @background-color: @button-bg) { + width: 80%; + color:@color; + border-radius:@border-radius; + font-size:@font-size ; + background-color:@background-color; + text-align: center; + padding: 12px 20px; +} \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index ea5f365182..cc13bd9a6d 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,44 +1,59 @@ // Navigation Styles here - - .navContainer { - margin: 10px; - padding: 20px; + border-bottom: 2px dashed @silver; + display: flex; + justify-content: center; - - a { - text-decoration: none; - font-family: Arial, Helvetica, sans-serif; - color: black; - font-size: 1.6rem; - padding: 10px; - + @media @mobile { } - -} - -.homeButton { - display: flex; - justify-content: flex-start; - padding: 20px; - margin: 20px; - text-decoration: none; - color: black; - font-family: "Comic Sans MS", "Comic Sans", cursive; - -} - - -.topPage { - display: flex; - justify-content: space-between; -} - - -.btn { - .buttonStyle(); - + .navTop { + width: 800px; + display: flex; + justify-content: space-between; + align-items: baseline; + margin: 25px 0px 0px 0px; + padding-bottom: 25px; + + @media @mobile { + flex-direction: column; + align-items: center; + margin: 3% 0 0 0; + padding-bottom: 2%; + + } + + h1 { + width: fit-content; + + } + + nav { + width: 50%; + display: flex; + justify-content: space-around; + + @media @mobile { + width: 100%; + display: flex; + justify-content: space-around; + padding-top: 3%; + + } + + + + a { + color: @shark; + font-size: 17.5px; + text-decoration: none; + + + } + + } + } + } \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 678d90651f..6a4ce14337 100644 --- a/less/variables.less +++ b/less/variables.less @@ -12,4 +12,8 @@ @shark: #212529; @eastern-blue: #17A2B8; @sandy-beach: #FFEBCD; -@mobile: ~"(max-width: 500px)"; \ No newline at end of file + + +// MOBILE DESIGN + +@mobile: (max-width: 500px); \ No newline at end of file