Merge pull request #133 from wlmac/develop

Homepage revamp
wlmac · Sep 14, 2023 · e1c93a2 · e1c93a2
2 parents e2941f1 + 8953e60
commit e1c93a2
Show file tree

Hide file tree

Showing 15 changed files with 574 additions and 348 deletions.
diff --git a/public/resources/static/css/announcement-container.css b/public/resources/static/css/announcement-container.css
@@ -0,0 +1,86 @@
+:root {
+  --rounding: 10px;
+}
+
+#AnnouncementContainer {
+  width: 100%;
+  border-radius: var(--rounding);
+  box-shadow: 0px 5px 4px 1px rgba(0, 0, 0, 0.2);
+  background-color: white;
+}
+
+.heading {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background-color: #073763;  /* dark blue metropolis colour, should probably get this colour from a variable instead of hardcoding */
+  padding: 2.5%;
+  border-radius: var(--rounding) var(--rounding) 0 0;
+  font-size: 1.2rem;
+}
+
+.head {
+  color: white;
+  padding-left: 5%;
+  margin-top: 0;
+  font-weight: bold;
+}
+
+.date {
+  text-align: right;
+  padding-right: 5%;
+  color: #99acbc;
+  font-weight: lighter;
+}
+
+.content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.left-side {
+  box-shadow: 3px 0px 4px 1px rgba(0, 0, 0, 0.2);
+  border-radius: var(--rounding);
+}
+
+.miniAnnouncement {
+  background-color: white;
+  padding: 3% 0% 4% 10%;
+  border-top: 1px solid #f5f5f5;
+  border-bottom-left-radius: var(--rounding);
+}
+
+.featuredAnnouncement {
+  padding: 3% 0% 4% 10%;
+  border-top: 1px solid #f5f5f5;
+  border-bottom-left-radius: var(--rounding);
+}
+
+.featured-title {
+  color: black;
+  font-size: 1.7rem;
+  font-weight: bold;
+}
+
+.featured-body-text {
+  padding-top: 3%;
+}
+
+.mini-title {
+  color: #5e8db9;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.club-info {
+  color: #4b749d;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+
+.club-name {
+  padding-top: 3px;
+  padding-left: 2%;
+}
+
+
diff --git a/public/resources/static/css/base.css b/public/resources/static/css/base.css
@@ -14,7 +14,7 @@
 
     font-family: 'Roboto', sans-serif;
     letter-spacing: 0.15px;
-    background-color: var(--bg-grey);
+    background-color: white;
 }
 
 /*@media (prefers-color-scheme: dark) {
@@ -154,9 +154,8 @@ select{
 }
 
 .dropdown-content > li > a, .sidenav > li > a{
-    color: var(--mid-colour);
+    color: white;
     font-weight: 500;
-    /*width: 100%;*/
 }
 
 .dropdown-content> li > a:hover, .sidenav > li > a:hover{
@@ -327,71 +326,50 @@ label {
 }
 
 .markdown-embed {
-    width:40rem;
-    height:25rem;
+    width: 40rem;
+    height: 25rem;
 }
 
 blockquote {
     border-color: var(--highlight-colour);
 }
 
 .footer {
-    /*height: 230px;*/
     width: 100%;
     background-color: var(--dark-colour);
     display: -webkit-box;
     display: -ms-flexbox;
-    display: flex;
     margin: auto;
-    flex-direction: column;
-    -webkit-box-orient: vertical;
-    -ms-flex-direction: column;
+    display: flex;
+    flex-direction: row;
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row;
+    justify-content: space-between;
 }
 
 .footer-title {
-    margin-top: 25px;
-    font-size: 16px;
-    color: var(--contrast-colour);
-    text-align: center;
-    padding: 0px 60px;
+    font-size: 13px;
+    line-height: 0.5rem;
+
+    color: #99acbc;
+    font-weight: lighter;
 }
 
 .footer-title a {
-    color: var(--link-colour);
+    color: #99acbc;
 }
 
 .footer-title-par {
-    margin: 0px auto;
-    padding: 40px 0px 10px;
-}
-
-.footer-bar {
-    background-color: var(--mid-colour);
-    height: 0;
-    padding-top: .2vh;
-    width: 10vw;
-    margin: 15px auto 0px;
-    border-top-width: 0px !important;
+    margin: 15px 25px;
+    padding: 0px;
 }
 
 .foooter-icon-par {
-    margin-top: 10px;
-    padding-bottom: 40px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    flex-direction: row;
-    -webkit-box-orient: horizontal;
-    -ms-flex-direction: row;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    margin: 25px;
+    right: auto;
 }
 
 .footer-icon {
-    height: 4vh;
-    width: 4vh;
-    margin: 2vh calc(0.25vh + 0.25vw);
     opacity: 0.68;
 }
 
@@ -405,15 +383,8 @@ blockquote {
     font-size: 15px;
     text-decoration: none;
     color: var(--contrast-colour);
-    margin: 0px 20px;
 }
 
-/* .footer-name:hover {
-    text-decoration: none;
-    color: var(--red0); */
-    /*opacity: 0.8;*/
-/* } */
-
 .footer-icon {
     width: 100% !important;
     height: 100% !important;

diff --git a/public/resources/static/css/index-banner.css b/public/resources/static/css/index-banner.css
@@ -1,5 +1,6 @@
 .banner{
     width: 100%;
+    height: 200px;
     background-color: white;
     position: relative;
     font-family: Poppins, serif;
@@ -11,10 +12,10 @@
 }
 
 .banner .background img{
-    height: 100%;
     -o-object-fit: cover;
        object-fit: cover;
     width: 100%;
+    height: 100%;
 }
 
 .overlay-container{
@@ -33,42 +34,48 @@
 
 .banner .next-class{
     text-align: center;
-    margin-top: auto;
-    margin-bottom: auto;
+    margin: auto;
     width: 100%;
 }
 
 .next-class .schedule-course{
-    font-size: 5em;
+    font-size: 4em;
+    line-height: 2rem;
     font-weight: bold;
     color: var(--banner-text);
-    margin-bottom: 0;
 }
 
 .next-class .schedule-description{
     font-size: 1.5em;
-    color: var(--banner-darker);
+    line-height: 2rem;
+    color: var(--banner-text);
 }
 
-.schedule-today-overlay{
-    position: absolute;
-    left: 0;
-    bottom: 10px;
-    padding-left: 50px;
-    padding-bottom: 10px;
+.overlay-container .schedule-today h4{
+    text-align: left;
+    margin: auto;
+    margin-left: 25px;
+    width: 100%;
+    font-size: 80px;
+    font-weight: 900;
+    color: #69945B;
 }
 
-.schedule-today-overlay .schedule-cycle{
-    color: var(--banner-darker);
-    font-weight: bolder;
-    margin-bottom: 0;
+.schedule-today-overlay{
+    text-align: left;
+    margin: auto;
+    width: fit-content;
 }
 
 .schedule-today-courses{
-    color: var(--banner-text);
-    padding-left: 10px;
-    border-left: solid var(--banner-darker) 3px;
+    text-align: left;
+    width: fit-content;
+    margin-left: auto;
+    margin-right: 40px;
+    font-size: 1.05em;
     font-weight: normal;
+    font-family: sans-serif; /* Changed the font from "poppins", sans-serif to get monospace text alignement*/
+    color: var(--banner-text);
 }
 
 .schedule-today-courses [data-active]{
@@ -80,26 +87,4 @@
     .next-class .schedule-course{
         font-size: 4em;
     }
-    .schedule-today-overlay .schedule-cycle{
-        font-size: 1.8em;
-    }
-    .schedule-today-overlay{
-        left: 0;
-        right: 0;
-    }
-    .schedule-today-overlay-container{
-        padding-left: 0;
-        padding-right: 0;
-        margin-left: auto;
-        margin-right: auto;
-        width: fit-content;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-    }
-    .schedule-today-overlay .schedule-cycle{
-        margin-right: 15px;
-        margin-top: auto;
-        margin-bottom: auto;
-    }
 }