From d672a7885c1dce7159ec12a9e3edb321643050dc Mon Sep 17 00:00:00 2001 From: ginafish Date: Mon, 23 Apr 2018 14:13:44 -0700 Subject: [PATCH 1/4] Added link to hosted site and contributing info to README --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index cc68e02..41331ab 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,5 @@ # osusec.github.io -The official website for OSU Security Club +The official website for OSU Security Club. Hosted at [osusec.github.io](http://osusec.github.io/) . + +# Contributing +If you would like to contribute, please read CONTRIBUTING.md first. \ No newline at end of file From b2d36689f58a9c3616dc619467839cf8d808b112 Mon Sep 17 00:00:00 2001 From: ginafish Date: Mon, 23 Apr 2018 16:45:03 -0700 Subject: [PATCH 2/4] Flex-ified index columns --- assets/css/main.css | 19 ++++++++++++++++--- assets/css/main.scss | 6 +++++- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 2033ee9..d90dab7 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -68,14 +68,16 @@ li { margin: 0px; padding: 0px; background: #AE1215; + color: #fff; height: auto; - display: block; - color: #fff; } + display: flex; + flex-wrap: wrap; } .columns .column { width: 30%; padding: 20px; display: table-cell; - vertical-align: top; } + vertical-align: top; + flex-grow: 1; } .columns #one { height: 100%; border-right: 2px dotted #000; } @@ -152,6 +154,17 @@ li { color: #000; } @media (max-width: 550px) { + .columns .column { + width: 100%; } + .columns .column ul { + padding: 0; } + .columns #one { + border-right: none; + border-bottom: 2px dotted #000; } + .columns #three { + border-left: none; + border-top: 2px dotted #000; } + .officer { min-width: 300px; max-width: 100%; } diff --git a/assets/css/main.scss b/assets/css/main.scss index 4121aad..8e7a570 100755 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -95,7 +95,8 @@ li{ padding: 0px; background: $prim; height: auto; - display: block; + display: flex; + flex-wrap: wrap; color: $light; .column{ @@ -202,6 +203,9 @@ li{ } @media (max-width: 550px){ + .columns .column ul { + padding: 0; } + .officer{ min-width: 300px; max-width: 100%; From 6cdf1822c256f25e8c52eee36098817e00a5ba7a Mon Sep 17 00:00:00 2001 From: ginafish Date: Mon, 23 Apr 2018 17:14:40 -0700 Subject: [PATCH 3/4] Adjusted column resizing and border --- assets/css/main.css | 3 +-- assets/css/main.scss | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index d90dab7..0ad4541 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -73,16 +73,15 @@ li { display: flex; flex-wrap: wrap; } .columns .column { + height: inherit; width: 30%; padding: 20px; display: table-cell; vertical-align: top; flex-grow: 1; } .columns #one { - height: 100%; border-right: 2px dotted #000; } .columns #three { - height: 100%; border-left: 2px dotted #000; } .columns a { color: #ababab; } diff --git a/assets/css/main.scss b/assets/css/main.scss index 8e7a570..c6b74cd 100755 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -100,10 +100,12 @@ li{ color: $light; .column{ + height: inherit; width: 30%; padding: 20px; display: table-cell; vertical-align: top; + flex-grow: 1; } #one{ @@ -203,8 +205,16 @@ li{ } @media (max-width: 550px){ - .columns .column ul { - padding: 0; } + .columns .column { + width: 100%; } + .columns .column ul { + padding: 0; } + .columns #one { + border-right: none; + border-bottom: 2px dotted $dark; } + .columns #three { + border-left: none; + border-top: 2px dotted $dark; } .officer{ min-width: 300px; From 1f3323f6e78380e597998301663b61a09ff247d8 Mon Sep 17 00:00:00 2001 From: ginafish Date: Mon, 23 Apr 2018 17:36:00 -0700 Subject: [PATCH 4/4] Made navbar responsive --- assets/css/main.css | 23 ++++++++++---------- assets/css/main.scss | 52 ++++++++++++++++++++++++++------------------ 2 files changed, 42 insertions(+), 33 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 0ad4541..3da8a49 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -4,20 +4,22 @@ body { background: #FFF; } #navbar { - height: 50px; - background: rgba(249, 249, 249, 0.7); } + height: auto; + background: rgba(249, 249, 249, 0.7); + display: flex; } #navbar ul { - height: 50px; margin: 0px; padding: 0px; - display: inline-block; } + display: flex; + flex-wrap: wrap; + background: rgba(249, 249, 249, 0.7); } #navbar ul li { - display: inline-block; + height: 50px; + display: inline-flex; padding: 0px; margin: 0px; } #navbar ul li a { line-height: 50px; - display: block; padding: 0px 10px; color: #AE1215; font-size: 20px; } @@ -152,7 +154,7 @@ li { .footer h4 { color: #000; } -@media (max-width: 550px) { +@media (max-width: 600px) { .columns .column { width: 100%; } .columns .column ul { @@ -168,10 +170,7 @@ li { min-width: 300px; max-width: 100%; } - #navbar { - display: none; } - - #mobile-nav { - display: block; } } + #navbar ul { + justify-content: center; } } /*# sourceMappingURL=main.css.map */ diff --git a/assets/css/main.scss b/assets/css/main.scss index c6b74cd..05e6f29 100755 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,6 +1,7 @@ //@import 'normalize'; $bodybg: #FFF; +$nav-color: rgba(249, 249, 249, .7); $prim: #AE1215; $sec: #292929; $accent: #AE1215; @@ -18,23 +19,25 @@ body{ //Navigation #navbar{ - height: $navheight; - background: rgba(249, 249, 249, .7); + height: auto; + background: $nav-color; + display: flex; ul{ - height: $navheight; margin: 0px; padding: 0px; - display: inline-block; + display: flex; + flex-wrap: wrap; + background: $nav-color; li{ - display: inline-block; + height: $navheight; + display: inline-flex; padding: 0px; margin: 0px; a{ line-height: $navheight; - display: block; padding: 0px 10px; color: $accent; font-size: 20px; @@ -204,17 +207,25 @@ li{ } } -@media (max-width: 550px){ - .columns .column { - width: 100%; } - .columns .column ul { - padding: 0; } - .columns #one { - border-right: none; - border-bottom: 2px dotted $dark; } - .columns #three { - border-left: none; - border-top: 2px dotted $dark; } +@media (max-width: 600px){ + .columns{ + .column{ + width: 100%; + + ul{ + padding: 0; + } + } + + #one{ + border-right: none; + border-bottom: 2px dotted $dark; + } + #three{ + border-left: none; + border-top: 2px dotted $dark; + } + } .officer{ min-width: 300px; @@ -222,9 +233,8 @@ li{ } #navbar{ - display:none; - } - #mobile-nav{ - display: block; + ul{ + justify-content: center; + } } }