From c530dd819a170e93c282fd9879f06d86cae18ae3 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 19:00:09 -0500 Subject: [PATCH 1/4] Tweak leadership position spacing Signed-off-by: Peter Kos --- index.html | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index e9d780439..08835e689 100644 --- a/index.html +++ b/index.html @@ -212,58 +212,51 @@

Leadership Team

Michael's photo -

Michael

-

Van Leeuwen

+

Michael Van Leeuwen

President

Abhaya's photo

Abhaya Tamrakar

-

BrickHack

-

Director

+

BrickHack Director

May's photo

May Ren

-

Design

-

Director

+

Design Director

Peter's photo

Peter Kos

-

Engineering

-

Director

+

Engineering Director

Mark's photo

Mark Maluenda

-

Community

-

Outreach Director

+

Community Outreach

+

Director

Olivia's photo

Olivia Simmons

-

Logistics

-

Co-Director

+

Logistics Co-Director

Makenna's photo

Makenna M.

-

Logistics

-

Co-Director

+

Logistics Co-Director

Mira's photo

Mira Antolovich

-

Logistics

-

Co-Director

+

Logistics Co-Director

From 9e052be6a963e348a26cf30f8a24e2b6341a56ed Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 19:02:47 -0500 Subject: [PATCH 2/4] Some minor tweaks for leadership Signed-off-by: Peter Kos --- sass/main.scss | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/sass/main.scss b/sass/main.scss index 8345de3ec..5514d5ea7 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -15,10 +15,12 @@ $nav-height: 90px; $section-padding: 140px; $img-border-radius: 20px; -$leadership-size: 220px; $wire-height: 15px; +$leadership-size: 220px; +$leadership-size-mobile: 180px; + // Just to make it more semantic $font-extrabold: 700; $font-bold: 600; @@ -473,21 +475,19 @@ nav { // Grid is easier than flex here display: grid; grid-template-columns: repeat(5, $leadership-size); - gap: 30px; + gap: 50px; justify-items: center; justify-content: center; - margin-top: 40px; .leader { - width: $leadership-size; text-align: center; margin-left: auto; margin-right: auto; img { - border-radius: 20px; + border-radius: $img-border-radius; width: $leadership-size; height: $leadership-size; } @@ -534,11 +534,25 @@ footer { } } -@media screen and (max-width: 1200px) { +@media screen and (max-width: 1400px) { // Scaling idea, key is clip #shelf { width: 800px; overflow: clip; } + + #leadership #leaders { + grid-template-columns: repeat(5, $leadership-size-mobile); + gap: 30px; + + .leader { + width: $leadership-size-mobile; + + img { + width: $leadership-size-mobile; + height: $leadership-size-mobile; + } + } + } } From 52684570a6770ed67583f42ed1839f591b815e88 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 19:41:57 -0500 Subject: [PATCH 3/4] Test remove director name Signed-off-by: Peter Kos --- index.html | 14 ++++++-------- sass/main.scss | 4 ++++ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 08835e689..335c14bfb 100644 --- a/index.html +++ b/index.html @@ -219,44 +219,43 @@

Leadership Team

Abhaya's photo

Abhaya Tamrakar

-

BrickHack Director

+

BrickHack

May's photo

May Ren

-

Design Director

+

Design

Peter's photo

Peter Kos

-

Engineering Director

+

Engineering

Mark's photo

Mark Maluenda

Community Outreach

-

Director

Olivia's photo

Olivia Simmons

-

Logistics Co-Director

+

Logistics

Makenna's photo

Makenna M.

-

Logistics Co-Director

+

Logistics

Mira's photo

Mira Antolovich

-

Logistics Co-Director

+

Logistics

@@ -269,7 +268,6 @@

Leadership Team

Pardeep's photo

Pardeep Singh

Sponsorship

-

Director

diff --git a/sass/main.scss b/sass/main.scss index 5514d5ea7..14c827f7b 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -499,6 +499,10 @@ nav { width: 50%; background-color: rgba($red, 60%); } + + .nowrap { + white-space: nowrap; + } } } } From b56ae817ef8bbedad317ece5dc348a8996bda038 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Thu, 10 Dec 2020 20:27:16 -0500 Subject: [PATCH 4/4] Padding and container tweaks for leadership Signed-off-by: Peter Kos --- index.html | 124 +++++++++++++++++++++++++------------------------ sass/main.scss | 20 +++++++- 2 files changed, 81 insertions(+), 63 deletions(-) diff --git a/index.html b/index.html index 335c14bfb..b666e0aaf 100644 --- a/index.html +++ b/index.html @@ -207,67 +207,69 @@
SUNDAY
-

Leadership Team

-
-
-
- Michael's photo -

Michael Van Leeuwen

-

President

-
-
-
- Abhaya's photo -

Abhaya Tamrakar

-

BrickHack

-
-
-
- May's photo -

May Ren

-

Design

-
-
-
- Peter's photo -

Peter Kos

-

Engineering

-
-
-
- Mark's photo -

Mark Maluenda

-

Community Outreach

-
-
-
- Olivia's photo -

Olivia Simmons

-

Logistics

-
-
-
- Makenna's photo -

Makenna M.

-

Logistics

-
-
-
- Mira's photo -

Mira Antolovich

-

Logistics

-
-
-
- Kevin's photo -

Kevin Zhou

-

Treasurer

-
-
-
- Pardeep's photo -

Pardeep Singh

-

Sponsorship

+
+

Leadership Team

+
+
+
+ Michael's photo +

Michael Van Leeuwen

+

President

+
+
+
+ Abhaya's photo +

Abhaya Tamrakar

+

BrickHack

+
+
+
+ May's photo +

May Ren

+

Design

+
+
+
+ Peter's photo +

Peter Kos

+

Engineering

+
+
+
+ Mark's photo +

Mark Maluenda

+

Community Outreach

+
+
+
+ Olivia's photo +

Olivia Simmons

+

Logistics

+
+
+
+ Makenna's photo +

Makenna M.

+

Logistics

+
+
+
+ Mira's photo +

Mira Antolovich

+

Logistics

+
+
+
+ Kevin's photo +

Kevin Zhou

+

Treasurer

+
+
+
+ Pardeep's photo +

Pardeep Singh

+

Sponsorship

+
diff --git a/sass/main.scss b/sass/main.scss index 14c827f7b..f2b347f4a 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -464,13 +464,16 @@ nav { } #leadership { - padding: $section-padding; background-color: $light-blue; h1 { font-size: $title-size; } + #leadership-content { + padding: $section-padding; + } + #leaders { // Grid is easier than flex here display: grid; @@ -538,7 +541,11 @@ footer { } } -@media screen and (max-width: 1400px) { +@media screen and (max-width: 1500px) { + + section { + // padding: $section-padding / 2; + } // Scaling idea, key is clip #shelf { @@ -547,7 +554,9 @@ footer { } #leadership #leaders { + justify-content: space-between; grid-template-columns: repeat(5, $leadership-size-mobile); + width: 100%; gap: 30px; .leader { @@ -560,3 +569,10 @@ footer { } } } + +@media screen and (max-width: 1600px) { + + #leadership #leaders { + justify-content: space-between; + } +}