diff --git a/css/index.css b/css/index.css index e363da3..558b40c 100644 --- a/css/index.css +++ b/css/index.css @@ -1,24 +1,152 @@ -@import 'https://fonts.googleapis.com/css?family=Bitter:300,400,500'; -body { - margin: 0px; - font-family: "Bitter", "Helvetica", "Arial", sans-serif; +@import 'https://fonts.googleapis.com/css?family=Montserrat:300,400,500'; +.valign { + display: flex; + flex-direction: row; + align-items: center; } -.background { +body { + font-family: "Montserrat", "Helvetica", "Arial", sans-serif; + margin: 0px; display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - width: 100vw; - height: 100vh; - position: relative; + flex-direction: column; + color: #444; } -.background img { + +.navigation { + width: 100vw; + height: 118px; + background-color: #FFF; +} +@media only screen and (max-width: 640px) { + .navigation { + height: 56px; + } +} +.navigation .logo { + height: 90px; + margin-right: 50px; + float: left; + text-align: left; +} +@media only screen and (max-width: 798px) { + .navigation .logo { + margin-right: 10px; + } +} +@media only screen and (max-width: 640px) { + .navigation .logo { + display: none; + } +} +.navigation .socials { + display: flex; + width: auto; + float: right; + text-align: right; +} +@media only screen and (max-width: 798px) { + .navigation .socials { + display: none; + } +} + +.seperate { + display: flex; + justify-content: space-between; +} +.seperate i { + margin-left: 10px; + font-size: 22px; + color: #AAA; +} +.seperate i:hover { + color: #444; +} + +nav { + display: flex; + float: left; + text-align: left; + font-size: 12px; + flex-wrap: wrap; + margin: 0px; +} +nav ul { + list-style-image: none; + list-style-type: none; + display: flex; + flex-direction: row; + margin: 0px; + padding: 0px; +} +nav ul li a { + padding: 6px; + text-decoration: none; + color: #444; + font-family: "Montserrat", "Helvetica", "Arial", sans-serif; + text-transform: uppercase; + letter-spacing: 1.2px; + line-height: 14.4px; + font-weight: 400; +} +@media only screen and (max-width: 798px) { + nav ul li a { + margin: 2px; + padding: 0px; + } +} +nav ul li a:hover { + color: #EBB85B; +} +@media only screen and (max-width: 640px) { + nav { + display: none; + } +} + +.hero-image { + height: 480px; + background-color: #AAA; + overflow: hidden; + display: flex; + align-items: flex-end; + justify-content: center; +} +@media only screen and (max-width: 640px) { + .hero-image { + height: 280px; + } +} +.hero-image img { flex-shrink: 0; min-width: 100%; min-height: 100%; + position: relative; } -.background .overlay { + +.content { + width: 100vw; + display: flex; + flex-wrap: wrap; + padding-top: 43px; + padding-bottom: 43px; +} + +.container { + width: 1200px; + margin-left: calc(50vw - 600px); + margin-right: calc(50vw - 600px); +} +@media only screen and (max-width: 1220px) { + .container { + width: 100%; + padding: 15px; + margin: 0px; + } +} + +.overlay { display: flex; justify-content: center; align-items: center; @@ -27,49 +155,96 @@ body { top: 0; left: 0; position: absolute; - min-width: 100%; - min-height: 100%; - background-color: rgba(77, 83, 137, 0.9); + min-width: 100vw; + min-height: 598px; } -.background .overlay .title { +@media only screen and (max-width: 640px) { + .overlay { + min-height: 336px; + } +} +.overlay .title { text-align: center; - opacity: 1; - color: white; - font-size: 2.7em; - margin: 0px; - margin-bottom: 5px; - margin-left: 15px; - margin-right: 15px; - word-spacing: 5px; - animation-name: fadeIn; - animation-duration: 3s; - animation-iteration-count: 1; + font-size: 60px; + color: #FFF; + margin-top: 198px; } -.background .overlay .underline { - height: 7px; - width: 35vw; - background-color: #ecb85b; - margin-bottom: 5px; - animation-name: underline, fadeIn; - animation-duration: 2s; - animation-iteration-count: 1; +@media only screen and (max-width: 640px) { + .overlay .title { + margin-top: 96px; + } } -@keyframes underline { - from { - transform: scaleX(0); - } - to { - transform: scaleX(1); +.row { + display: flex; + flex-direction: row; +} +@media only screen and (max-width: 640px) { + .row { + flex-direction: column; } } -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; + +.col { + display: flex; + flex: 1 1 0; + flex-direction: column; + justify-content: center; + text-align: center; +} +@media only screen and (max-width: 640px) { + .col { + flex: 1; } } +.segment { + padding-left: 17px; + padding-right: 17px; +} + +.segment-title { + color: #EBB85B; + font-size: 24px; + padding-bottom: 17px; + font-weight: 500; +} + +.segment-para { + color: #444; + text-align: left; + font-size: 22px; + line-height: 33px; + font-weight: 300; +} + +.segment-more-button { + width: 80px; + font-size: 11px; + margin: 0 auto; + padding-left: 23px; + padding-right: 23px; + padding-top: 13px; + padding-bottom: 13px; + border-radius: 3px; + border-width: 2px; + border-style: solid; + border-color: #EBB85B; + color: #EBB85B; + text-transform: uppercase; + letter-spacing: 1.2px; + line-height: 14.4px; + font-weight: 400; +} + +.segment-more-button:hover { + color: #FFF; + background-color: #EBB85B; + font-weight: 500; +} + +.segment-image { + max-width: 100%; +} + /*# sourceMappingURL=css/index.css.map */ diff --git a/css/index.css.map b/css/index.css.map index f5b92b1..31ae9d3 100644 --- a/css/index.css.map +++ b/css/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/index.scss"],"names":[],"mappings":"AAAQ;AAER;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKH;EACC;IACC;;EAGD;IACC;;;AAIF;EACC;IACC;;EAGD;IACC","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/index.sass"],"names":[],"mappings":"AAAQ;AAyBR;EACC;EACA;EACA;;;AAED;EACC,aA7BY;EA8BZ;EACA;EACA;EACA,OA/BO;;;AAiCR;EACC;EACA;EACA,kBArCkB;;AAWlB;EAuBD;IAKE;;;AACD;EACC;EACA;EACA;EACA;;AAjCD;EA6BA;IAME;;;AAnCF;EA6BA;IAQE;;;AACF;EACC;EACA;EACA;EACA;;AA1CD;EAsCA;IAME;;;;AAEH;EACC;EACA;;AACA;EACC;EACA;EACA,OA5DI;;AA6DL;EACC,OAhEM;;;AAiER;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;EACA;EACA,OAnFI;EAoFJ,aAtFS;EAuFT;EACA;EACA;EACA;;AA9EH;EAsEE;IAUE;IACA;;;AACF;EACC,OAzFc;;AAMjB;EAuDD;IA+BE;;;;AAEF;EACC;EACA;EACA;EACA;EACA;EACA;;AA9FA;EAwFD;IAQE;;;AACD;EACC;EACA;EACA;EACA;;;AAEF;EACC;EACA;EACA;EAtGA,aAuGkB;EAtGlB,gBAsGkB;;;AAEnB;EACC;EAtGA,aAuGmB;EAtGnB,cAsGmB;;AA/GnB;EA6GD;IAIE;IACA;IACA;;;;AAEF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA/HA;EAqHD;IAYE;;;AACD;EACC;EACA;EACA,OA9IM;EA+IN;;AAtID;EAkIA;IAME;;;;AAEH;EACC;EACA;;AA5IA;EA0ID;IAIE;;;;AACF;EACC;EACA;EACA;EACA;EACA;;AApJA;EA+ID;IAOE;;;;AAEF;EACC;EACA;;;AAED;EACC,OAnKiB;EAoKjB;EACA;EACA;;;AAED;EACC,OA7KO;EA8KP;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cA1LiB;EA2LjB,OA3LiB;EA4LjB;EACA;EACA;EACA;;;AAED;EACC,OArMO;EAsMP,kBAnMiB;EAoMjB;;;AAED;EACC","file":"index.css"} \ No newline at end of file diff --git a/resources/hero.png b/resources/hero.png new file mode 100644 index 0000000..acd2dce Binary files /dev/null and b/resources/hero.png differ diff --git a/resources/logo.png b/resources/logo.png new file mode 100644 index 0000000..a7c6835 Binary files /dev/null and b/resources/logo.png differ diff --git a/resources/segment-1.jpg b/resources/segment-1.jpg new file mode 100644 index 0000000..f258702 Binary files /dev/null and b/resources/segment-1.jpg differ diff --git a/resources/segment-2.jpg b/resources/segment-2.jpg new file mode 100644 index 0000000..1e90e77 Binary files /dev/null and b/resources/segment-2.jpg differ diff --git a/resources/segment-3.jpg b/resources/segment-3.jpg new file mode 100644 index 0000000..0d906f0 Binary files /dev/null and b/resources/segment-3.jpg differ diff --git a/scss/index.sass b/scss/index.sass new file mode 100644 index 0000000..e2e18a7 --- /dev/null +++ b/scss/index.sass @@ -0,0 +1,208 @@ +@import 'https://fonts.googleapis.com/css?family=Montserrat:300,400,500' + +$font-stack: "Montserrat", "Helvetica", "Arial", sans-serif +$background-color: #FFF +$color: #444 +$white: #FFF +$dim: #AAA +$primary-color: #4D5389 +$secondary-color: #EBB85B +$break-small: 640px +$break-awk: 798px +$break-large: 1220px + +=react($break) + @media only screen and (max-width: $break) + @content + +=vertical-padding($pad) + padding-top: $pad + padding-bottom: $pad + +=horizontal-margin($mar) + margin-left: $mar + margin-right: $mar + +.valign + display: flex + flex-direction: row + align-items: center + +body + font-family: $font-stack + margin: 0px + display: flex + flex-direction: column + color: $color + +.navigation + width: 100vw + height: 118px + background-color: $background-color + +react($break-small) + height: 56px + .logo + height: 90px + margin-right: 50px + float: left + text-align: left + +react($break-awk) + margin-right: 10px + +react($break-small) + display: none + .socials + display: flex + width: auto + float: right + text-align: right + +react($break-awk) + display: none + +.seperate + display: flex + justify-content: space-between + i + margin-left: 10px + font-size: 22px + color: $dim + i:hover + color: $color +nav + display: flex + float: left + text-align: left + font-size: 12px + flex-wrap: wrap + margin: 0px + ul + list-style-image: none + list-style-type: none + display: flex + flex-direction: row + margin: 0px + padding: 0px + li + a + padding: 6px + text-decoration: none + color: $color + font-family: $font-stack + text-transform: uppercase + letter-spacing: 1.2px + line-height: 14.4px + font-weight: 400 + +react($break-awk) + margin: 2px + padding: 0px + a:hover + color: $secondary-color + + +react($break-small) + display: none + +.hero-image + height: 480px + background-color: #AAA + overflow: hidden + display: flex + align-items: flex-end + justify-content: center + +react($break-small) + height: 280px + img + flex-shrink: 0 + min-width: 100% + min-height: 100% + position: relative + +.content + width: 100vw + display: flex + flex-wrap: wrap + +vertical-padding(43px) + +.container + width: 1200px + +horizontal-margin(calc(50vw - 600px)) + +react($break-large) + width: 100% + padding: 15px + margin: 0px + +.overlay + display: flex + justify-content: center + align-items: center + text-align: center + flex-direction: column + top: 0 + left: 0 + position: absolute + min-width: 100vw + min-height: 598px + +react($break-small) + min-height: 336px + .title + text-align: center + font-size: 60px + color: $white + margin-top: 198px + +react($break-small) + margin-top: 96px + +.row + display: flex + flex-direction: row + +react($break-small) + flex-direction: column +.col + display: flex + flex: 1 1 0 + flex-direction: column + justify-content: center + text-align: center + +react($break-small) + flex: 1 + +.segment + padding-left: 17px + padding-right: 17px + +.segment-title + color: $secondary-color + font-size: 24px + padding-bottom: 17px + font-weight: 500 + +.segment-para + color: $color + text-align: left + font-size: 22px + line-height: 33px + font-weight: 300 + +.segment-more-button + width: 80px + font-size: 11px + margin: 0 auto + padding-left: 23px + padding-right: 23px + padding-top: 13px + padding-bottom: 13px + border-radius: 3px + border-width: 2px + border-style: solid + border-color: $secondary-color + color: $secondary-color + text-transform: uppercase + letter-spacing: 1.2px + line-height: 14.4px + font-weight: 400 + +.segment-more-button:hover + color: $white + background-color: $secondary-color + font-weight: 500 + +.segment-image + max-width: 100% \ No newline at end of file diff --git a/scss/index.scss b/scss/index.scss deleted file mode 100644 index d171b39..0000000 --- a/scss/index.scss +++ /dev/null @@ -1,77 +0,0 @@ -@import 'https://fonts.googleapis.com/css?family=Bitter:300,400,500'; - -body { - margin: 0px; - font-family: "Bitter", "Helvetica", "Arial", sans-serif; -} - -.background { - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - width: 100vw; - height: 100vh; - position: relative; - img { - flex-shrink: 0; - min-width: 100%; - min-height: 100%; - } - .overlay { - display: flex; - justify-content: center; - align-items: center; - text-align: center; - flex-direction: column; - top: 0; - left: 0; - position: absolute; - min-width: 100%; - min-height: 100%; - background-color: rgba(77, 83, 137, 0.9); - .title { - text-align: center; - opacity: 1; - color: white; - font-size: 2.7em; - margin: 0px; - margin-bottom: 5px; - margin-left: 15px; - margin-right: 15px; - word-spacing: 5px; - animation-name: fadeIn; - animation-duration: 3s; - animation-iteration-count: 1; - } - .underline { - height: 7px; - width: 35vw; - background-color: rgb(236, 184, 91); - margin-bottom: 5px; - animation-name: underline, fadeIn; - animation-duration: 2s; - animation-iteration-count: 1; - } - } -} - -@keyframes underline { - from { - transform: scaleX(0); - } - - to { - transform: scaleX(1); - } -} - -@keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index aa926b3..2f485d1 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -2,20 +2,67 @@ - - - + + + + TJHSST SGA -
- -
-

This site is under construction

-
-

TJSSHT SGA 2018-19

+
+
+
+ + +
+
+
+ + + +
+
+
+ +
+

TJHSST SGA

+
+
+
+
+
+
+

News and Happenings

+ +

Read about SGA initiatives, goals, and progress from SGA officers, as well as from other student leaders, students, and student organizations.

+ More Info +
+
+

Who We Are

+ +

Learn about your representatives, and how they're working to advance the common agenda that SGA has set to improve your campus experience.

+ More Info +
+
+

Get Involved

+ +

Any questions or concerns? Have an idea for how SGA could be doing more to advocate for students? Want to get involved? Contact Us!

+ More Info +
+
+
+
+
\ No newline at end of file