diff --git a/css/main.css b/css/main.css index c2447b1..e1734b4 100644 --- a/css/main.css +++ b/css/main.css @@ -1718,7 +1718,7 @@ u { justify-content: center; align-items: center; } .people-2 .people_2a .top__nav .top__nav--txtt { - width: 68%; + width: 69%; line-height: 1.6; font-size: 20px; font-weight: 300; @@ -1812,93 +1812,95 @@ u { border-radius: 5px 0 0 5px; border: none; cursor: pointer; } - .people-2 .people-mob { - display: none; - background: #f4f7fb; } - @media (max-width: 599px) { - .people-2 .people-mob { - display: block; - max-width: 100%; - margin: 0 auto; - padding: 0 5%; } } - @media (max-width: 599px) { - .people-2 .people-mob .activities--mob { - font-size: 26px; - font-weight: 700; - padding: 15px 0; - z-index: 3; } } - @media (max-width: 599px) { - .people-2 .people-mob .activities__txt--mob { - font-size: 16px; - font-weight: 300; - line-height: 1.2; - width: 90%; - margin-bottom: 20px; - color: rgba(0, 0, 0, 0.5); } } - @media (max-width: 599px) { - .people-2 .people-mob .sec__top__nav--mob { - border: 1px solid grey; - box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7); - z-index: 4; - background: #fff; } } - @media (max-width: 599px) { - .people-2 .people-mob .sec__top__nav--mob .activities { - display: flex; - flex-direction: column; - margin: 5px 0; - padding: 5px; } } - .people-2 .people-mob .sec__top__nav--mob .activities .activities__txt { - font-size: 20px; } - .people-2 .people-mob .sec__top__nav--mob .activities .icons { - display: flex; - border-bottom: 1px solid grey; - margin-bottom: 0 15px 30px 0; - font-size: 16px; } - .people-2 .people-mob .sec__top__nav--mob .activities .icons i { - padding: 5px; - margin: 3px; } - .people-2 .people-mob .sec__top__nav--mob .activities .icons h5 { - padding: 5px; - margin: 3px; } - .people-2 .people-mob .sec__top__nav--mob .activities hr { - height: 30px; } - .people-2 .people-mob .sec__top__nav--mob .users__activities--mob .user--mob { + +.people-mob { + display: none; + background: #f4f7fb; } + @media (max-width: 599px) { + .people-mob { + display: block; + max-width: 100%; + margin: 0 auto; + padding: 0 5%; + margin-top: 49rem; } } + @media (max-width: 599px) { + .people-mob .activities--mob { + font-size: 26px; + font-weight: 700; + padding: 15px 0; + z-index: 3; } } + @media (max-width: 599px) { + .people-mob .activities__txt--mob { + font-size: 16px; + font-weight: 300; + line-height: 1.2; + width: 90%; + margin-bottom: 20px; + color: rgba(0, 0, 0, 0.5); } } + @media (max-width: 599px) { + .people-mob .sec__top__nav--mob { + border: 1px solid grey; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7); + z-index: 4; + background: #fff; } } + @media (max-width: 599px) { + .people-mob .sec__top__nav--mob .activities { display: flex; - margin-bottom: 15px; } - .people-2 .people-mob .sec__top__nav--mob .users__activities--mob .user--mob img { - width: 20%; - padding: 0 10px; } - .people-2 .people-mob .sec__top__nav--mob .users__activities--mob .user--mob .user--time { + flex-direction: column; + margin: 5px 0; + padding: 5px; } } + .people-mob .sec__top__nav--mob .activities .activities__txt { + font-size: 20px; } + .people-mob .sec__top__nav--mob .activities .icons { + display: flex; + border-bottom: 1px solid grey; + margin-bottom: 0 15px 30px 0; + font-size: 16px; } + .people-mob .sec__top__nav--mob .activities .icons i { + padding: 5px; + margin: 3px; } + .people-mob .sec__top__nav--mob .activities .icons h5 { + padding: 5px; + margin: 3px; } + .people-mob .sec__top__nav--mob .activities hr { + height: 30px; } + .people-mob .sec__top__nav--mob .users__activities--mob .user--mob { + display: flex; + margin-bottom: 15px; } + .people-mob .sec__top__nav--mob .users__activities--mob .user--mob img { + width: 20%; + padding: 0 10px; } + .people-mob .sec__top__nav--mob .users__activities--mob .user--mob .user--time { + color: rgba(0, 0, 0, 0.5); } + .people-mob .sec__top__nav--mob .users__activities--mob .user--mob .user__message { + padding-left: 20px; + font-size: 16px; + align-self: flex-end; } + .people-mob .sec__top__nav--mob .users__activities--mob .user--mob .user__message .user--txt { color: rgba(0, 0, 0, 0.5); } - .people-2 .people-mob .sec__top__nav--mob .users__activities--mob .user--mob .user__message { - padding-left: 20px; - font-size: 16px; - align-self: flex-end; } - .people-2 .people-mob .sec__top__nav--mob .users__activities--mob .user--mob .user__message .user--txt { - color: rgba(0, 0, 0, 0.5); } - @media (max-width: 599px) { - .people-2 .people-mob .activities__txt1 { - margin: 50px 0; } } - @media (max-width: 599px) { - .people-2 .people-mob .activities__txt1 .activities__txt1t { - font-weight: 700; - font-size: 26px; - margin: 15px 0; } } - @media (max-width: 599px) { - .people-2 .people-mob .activities__txt1 .activities__txt1tt { - font-size: 16px; - font-weight: 300; - line-height: 1.2; - width: 90%; - margin-bottom: 20px; - color: rgba(0, 0, 0, 0.5); } } - .people-2 .people-mob .activities__txt1 a { - color: aqua; - font-size: 20px; } - @media (max-width: 599px) { - .people-2 .people-mob .activities__txt1 .chilling--rabbits { - margin: 30px 0; - overflow-x: hidden; } } + @media (max-width: 599px) { + .people-mob .activities__txt1 { + margin: 50px 0; } } + @media (max-width: 599px) { + .people-mob .activities__txt1 .activities__txt1t { + font-weight: 700; + font-size: 26px; + margin: 15px 0; } } + @media (max-width: 599px) { + .people-mob .activities__txt1 .activities__txt1tt { + font-size: 16px; + font-weight: 300; + line-height: 1.2; + width: 90%; + margin-bottom: 20px; + color: rgba(0, 0, 0, 0.5); } } + .people-mob .activities__txt1 a { + color: aqua; + font-size: 20px; } + @media (max-width: 599px) { + .people-mob .activities__txt1 .chilling--rabbits { + margin: 30px 0; + overflow-x: hidden; } } .people-subnav-1 { display: grid; @@ -2113,15 +2115,41 @@ u { display: flex; flex-direction: column; margin-top: 270%; - margin-left: 10%; } - .people-2Mobile__header { - font-size: 22px; - line-height: 27px; - color: #555555; } - .people-2Mobile__paragraph { - font-size: 14px; - line-height: 19px; - color: #878787; } + margin-left: 10%; + border: 1px solid red; + margin-top: 85rem; } } + @media screen and (max-width: 580px) and (max-width: 599px) { + .people-2Mobile .people_2a .top__nav { + border: 1px solid pink; } } + @media screen and (max-width: 580px) and (max-width: 599px) { + .people-2Mobile .sec__top__nav .activities { + border: 2px dashed red; + margin-top: 5px; + margin-left: 5px; + display: flex; + flex-direction: column; + font-size: 20px; } } + @media screen and (max-width: 580px) and (max-width: 599px) { + .people-2Mobile .sec__top__nav .activities .icons { + display: flex; } } + @media screen and (max-width: 580px) and (max-width: 599px) { + .people-2Mobile .sec__top__nav .users__activities .user { + border: 2px solid red; + display: flex; } } + +@media screen and (max-width: 580px) { + .people-2Mobile .sec__top__nav .users__activities .user img { + width: 20%; + height: 5%; } } + @media screen and (max-width: 580px) and (max-width: 599px) { + .people-2Mobile .sec__top__nav .users__activities .user .user--name { + border: 1px solid blue; + margin-top: 4px; } } + @media screen and (max-width: 580px) and (max-width: 599px) { + .people-2Mobile .sec__top__nav .users__activities .user .user--txt { + margin-top: 3px; } } + +@media screen and (max-width: 580px) { .thought { display: none; } .mobilethought { diff --git a/pages/people.html b/pages/people.html index 1a7a7c2..19a214d 100644 --- a/pages/people.html +++ b/pages/people.html @@ -384,84 +384,94 @@
FunbunTM
-
-
-
-

- Activities -

-
- As much as we prefer to have fun, at times workdays can be stressful. We've got these times covered, organising events, games, BBQs, ping-pong tournaments, karaoke, lunch and learns, dinners and even team trips. We all like to adventure. After all, its what we do best. -
+
+
+

+ Activities +

+

+ As much as we prefer to have fun, at times workdays can be stressful. We've got these times covered, Organising events, games, BBQs, ping-pong tournament, karaoke, lunch and learns, dinners and team trips. We all like to adentire. After all, its what we do best. +

+
+
+
+

+ #activities +

+
+ +
+ 175 +
+ +
Fun topic
+
- -
-
-

- #activities -

-
- -
- 201 -
-
FunbunTM
-
-
-
-
- dan-smiling -
-

- Dan 5:21 PM -

-

- Who's up for bouldering after work? -

-
+
+
+
+ dan-smiling +
+

+ Kim 5:26 PM +

+

+ Who's down for a Mario Kart Race? +

- - -
- dan-smiling -
-

- Mackenzie 5:22 PM -

-

- Race you to the top! -

-
+
+ +
+ dan-smiling +
+

+ Fred 5:26 PM +

+

+ My body is ready +

- -
- dan-smiling -
-

- Krysi 5:21 PM -

-

- There's also a BBQ outside at 7, are you guys in? 💪 -

-
+
+ +
+ dan-smiling +
+

+ Joost 5:26 PM +

+

+ Same. But there's BBQ outside at 7, are you in? +

- -
- dan-smiling -
-

- Fitz5:21 PM -

-

- Wish i could make it, but I'm in Hawaii drawing burnies from the beach 🐰 -

-
+
+
+ dan-smiling +
+

+ Pk5:26 PM +

+

+ + I'm bringing chips? Can anyon bring 🍺 +

-
-
-
-
- + + + +
+
+
+
diff --git a/scss/pages/_people.scss b/scss/pages/_people.scss index f9750e8..551a507 100644 --- a/scss/pages/_people.scss +++ b/scss/pages/_people.scss @@ -142,7 +142,7 @@ margin-left:-0.5rem; align-items: center; .top__nav--txtt{ - width: 68%; + width: 69%; line-height: 1.6; font-size: 20px; font-weight: 300; @@ -279,139 +279,141 @@ margin-left:-0.5rem; } - .people-mob{ - display: none; - background: hsl(216,45,97); - + + } + .people-mob{ + display: none; + background: hsl(216,45,97); + + + @include for-phone-only(){ + display: block; + max-width: 100%; + margin: 0 auto; + padding: 0 5%; + margin-top: 49rem; + + } + .activities--mob { + @include for-phone-only(){ + font-size: 26px; + font-weight: 700; + padding: 15px 0; + z-index: 3; + + } + } + .activities__txt--mob{ + @include for-phone-only(){ + font-size: 16px; + font-weight: 300; + line-height: 1.2; + width: 90%; + margin-bottom: 20px; + color: rgba(0,0,0 , 0.5); + } + } + .sec__top__nav--mob{ @include for-phone-only(){ - display: block; - max-width: 100%; - margin: 0 auto; - padding: 0 5%; - + border: 1px solid grey; + box-shadow: 0 10px 10px rgba(0,0,0 , 0.7); + z-index: 4; + background: #fff; + } - .activities--mob { - @include for-phone-only(){ - font-size: 26px; - font-weight: 700; - padding: 15px 0; - z-index: 3; - - } + .activities{ + @include for-phone-only(){ + display: flex; + flex-direction: column; + margin: 5px 0; + padding: 5px; + } - .activities__txt--mob{ - @include for-phone-only(){ - font-size: 16px; - font-weight: 300; - line-height: 1.2; - width: 90%; - margin-bottom: 20px; - color: rgba(0,0,0 , 0.5); - } + .activities__txt{ + font-size: 20px; } - .sec__top__nav--mob{ - @include for-phone-only(){ - border: 1px solid grey; - box-shadow: 0 10px 10px rgba(0,0,0 , 0.7); - z-index: 4; - background: #fff; - - } - .activities{ - @include for-phone-only(){ - display: flex; - flex-direction: column; - margin: 5px 0; - padding: 5px; - - } - .activities__txt{ - font-size: 20px; - } - - .icons{ - display: flex; - border-bottom: 1px solid grey; - margin-bottom: 0 15px 30px 0; - font-size: 16px; - i { - padding: 5px; - margin: 3px; - } - h5{ - padding: 5px; - margin: 3px; - - } - } - hr{height: 30px} - + + .icons{ + display: flex; + border-bottom: 1px solid grey; + margin-bottom: 0 15px 30px 0; + font-size: 16px; + i { + padding: 5px; + margin: 3px; } - .users__activities--mob{ - - .user--mob{ - display: flex; - margin-bottom: 15px; - - img{ - width: 20%; - padding:0 10px; - } - - .user--time{ - color: rgba(0,0,0, 0.5); - } - .user__message { - padding-left: 20px; - font-size: 16px; - align-self: flex-end; - - .user--txt{ - color: rgba(0,0,0, 0.5); - } - } - } + h5{ + padding: 5px; + margin: 3px; + } } - - .activities__txt1{ - - @include for-phone-only(){ - margin: 50px 0; - } - - .activities__txt1t{ - @include for-phone-only(){ - font-weight: 700; - font-size: 26px; - margin: 15px 0; - } - } - .activities__txt1tt{ - @include for-phone-only(){ - font-size: 16px; - font-weight: 300; - line-height: 1.2; - width: 90%; - margin-bottom: 20px; - color: rgba(0,0,0 , 0.5); - } + hr{height: 30px} + + } + .users__activities--mob{ + + .user--mob{ + display: flex; + margin-bottom: 15px; + + img{ + width: 20%; + padding:0 10px; } - a{ - color: aqua; - font-size: 20px; + + .user--time{ + color: rgba(0,0,0, 0.5); } - .chilling--rabbits{ - @include for-phone-only(){ - margin: 30px 0; - overflow-x: hidden; + .user__message { + padding-left: 20px; + font-size: 16px; + align-self: flex-end; + + .user--txt{ + color: rgba(0,0,0, 0.5); } } } - } - } - + } + } + + .activities__txt1{ + + @include for-phone-only(){ + margin: 50px 0; + } + + .activities__txt1t{ + @include for-phone-only(){ + font-weight: 700; + font-size: 26px; + margin: 15px 0; + } + } + .activities__txt1tt{ + @include for-phone-only(){ + font-size: 16px; + font-weight: 300; + line-height: 1.2; + width: 90%; + margin-bottom: 20px; + color: rgba(0,0,0 , 0.5); + } + } + a{ + color: aqua; + font-size: 20px; + } + .chilling--rabbits{ + @include for-phone-only(){ + margin: 30px 0; + overflow-x: hidden; + } + } + } +} .people-subnav-1 { display: grid; grid-template-columns: repeat(2, 1fr); @@ -672,17 +674,68 @@ margin-left:-0.5rem; flex-direction: column; margin-top: 270%; margin-left: 10%; - } - .people-2Mobile__header { - font-size: 22px; - line-height: 27px; - color: #555555; - } - .people-2Mobile__paragraph { - font-size: 14px; - line-height: 19px; - color: $midGrey; - } + border: 1px solid red; + margin-top: 85rem; + + .people_2a { + + .top__nav{ + @include for-phone-only(){ + border: 1px solid pink; + } + } + } +.sec__top__nav { + .activities{ + @include for-phone-only(){ + border: 2px dashed red; + margin-top: 5px; + margin-left: 5px; + display: flex; + flex-direction: column; + font-size: 20px; + } + .icons{ + @include for-phone-only(){ + display: flex; + } + } + } + .users__activities { + + .user { + @include for-phone-only(){ + border: 2px solid red; + display: flex; + } + img { + width: 20%; + height: 5%; + } + .user--name { + @include for-phone-only(){ + border: 1px solid blue; + margin-top: 4px; + } + } + .user--txt { + @include for-phone-only(){ + margin-top: 3px; + } + } + } + } + }} + // .people-2Mobile__header { + // font-size: 22px; + // line-height: 27px; + // color: #555555; + // } + // .people-2Mobile__paragraph { + // font-size: 14px; + // line-height: 19px; + // color: $midGrey; + // } .thought { display: none; }