Merge pull request #14 from IMGIITRoorkee/update-theme

Update theme for 2024
IMGIITRoorkee · Dec 8, 2023 · 8a56b05 · 8a56b05
2 parents 010728d + eac7b27
commit 8a56b05
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 36 deletions.
diff --git a/assets/DMSans.ttf b/assets/DMSans.ttf
diff --git a/assets/Fredoka.ttf b/assets/Fredoka.ttf
diff --git a/css/about_us.css b/css/about_us.css
@@ -39,7 +39,7 @@
     font-weight: 900;
     font-size: 2em;
     line-height: 50px;
-    color: #CA2028;
+    color: #254F73;
 }
 
 .highlights-description {
@@ -66,7 +66,7 @@
     font-weight: 900;
     font-size: 1.5em;
     line-height: 1em;
-    color: #CA2028;
+    color: #254F73;
     margin-top: .75em;
     margin-right: .2em;
     margin-left: .2em;
@@ -88,7 +88,7 @@
     font-weight: 900;
     font-size: 1.5em;
     line-height: 1em;
-    color: #CA2028;
+    color: #254F73;
     margin-top: .75em;
     text-align: center;
     margin-bottom: .74em;

diff --git a/css/base.css b/css/base.css
@@ -98,7 +98,7 @@ nav {
 
 .navlink:hover {
   transition-duration: 0.3s;
-  color: #CA2028
+  color: #254F73
 }
 
 #overlay {
@@ -112,24 +112,25 @@ nav {
 }
 
 .site-cta-button {
-  font-family: Nunito Sans;
+  font-family: DMSans;
   font-weight: normal;
-  background: #222222;
-  color: #EDEEF5;
+  background: #EAE2D7;
+  color: #070707;
   border: none;
   padding: 0.5rem 2rem;
   cursor: pointer;
   font-size: 0.67rem;
+  font-weight: 500;
   user-select: none;
   border-radius: 2px;
 }
 
 .site-cta-button:hover {
   transition: 0.25s;
-  background: #151515;
+  background: #EAE2D7;
 box-shadow: 0px 0px 32px rgba(58, 38, 38, 0.2);
 border-radius: 2px;
-color: #F83048;
+color: #254F73;
 
 }
 
@@ -222,23 +223,23 @@ footer {
 .page-heading {
   position: relative;
   display: inline-block;
-  font-family: "marvelFont", sans-serif;
+  font-family: "fredoka", sans-serif;
   font-weight: bold;
-  font-weight: 400;
-  font-size: 48px;
-  line-height: 65px;
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 48px;
   letter-spacing: 0.04em;
   color: #EDEEF5;
   user-select: none;
 }
 
 .heading-background-box {
-  background: #CA2028;
+  background: #254F73;
   position: absolute;
   width: 110%;
-  height: 71%;
+  height: 110%;
   left: -5%;
-  bottom: 25%;
+  bottom: -5%;
   z-index: 1;
 }
 
@@ -250,11 +251,11 @@ footer {
 .page-title {
   position: relative;
   display: inline-block;
-  font-family: "marvelFont", sans-serif;
+  font-family: "fredoka", sans-serif;
   font-weight: bold;
-  font-weight: 400;
-  font-size: 48px;
-  line-height: 65px;
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 48px;
   letter-spacing: 0.04em;
   color: #EDEEF5;
   user-select: none;
@@ -412,7 +413,14 @@ footer {
 
 @font-face {
 
-  font-family: 'marvelFont' ;
-  src: url('../assets/Marvel-Regular.ttf') format('truetype');
+  font-family: 'fredoka' ;
+  src: url('../assets/Fredoka.ttf') format('truetype');
+
+}
 
-}
+@font-face {
+
+  font-family: 'DMSans' ;
+  src: url('../assets/DMSans.ttf') format('truetype');
+
+}
diff --git a/css/base_hamburger.css b/css/base_hamburger.css
@@ -129,7 +129,7 @@ input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
         display: grid;
     }
     .navlink[selected='True'] {
-        color: #CA2028;
+        color: #254F73;
     }
 }
 

diff --git a/css/index.css b/css/index.css
@@ -30,34 +30,46 @@
 .coloured-container {
   background-color: #EDEEF5;
 }
+
 .illustration-container {
-  max-width: 75%;
-  background: url("/assets/main_illustration.png");
+  max-width: 100%;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
+  background-color: #E2E6EF;
+  height: 95%;
+  margin-top: 8%;
+  padding: 0 15%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.illustration-container-image {
+  width: 120%;
+  height: auto;
 }
 
 .main-page-heading {
   position: relative;
   display: inline-block;
-  font-family: "marvelFont", sans-serif;
+  font-family: "fredoka", sans-serif;
   font-weight: bold;
-  font-weight: 400;
-  font-size: 48px;
-  line-height: 65px;
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 48px;
   letter-spacing: 0.04em;
   color: #EDEEF5;
   user-select: none;
 }
 
 .heading-background-box {
-  background: #CA2028;
+  background: #254F73;
   position: absolute;
   width: 110%;
-  height: 71%;
+  height: 110%;
   left: -5%;
-  bottom: 25%;
+  bottom: -5%;
   z-index: 1;
 }
 
@@ -212,8 +224,14 @@
 
 @font-face {
 
-  font-family: 'marvelFont' ;
-  src: url('../assets/Marvel-Regular.ttf') format('truetype');
+  font-family: 'fredoka' ;
+  src: url('../assets/Fredoka.ttf') format('truetype');
 
 }
 
+@font-face {
+
+  font-family: 'DMSans' ;
+  src: url('../assets/DMSans.ttf') format('truetype');
+
+}
diff --git a/index.html b/index.html
@@ -209,7 +209,12 @@
       <section class = "coloured-container">
         <div class="site-container">
           <div class="main-container">
-            <div class="illustration-container"></div>
+            <div class="illustration-container">
+              <img 
+              class="illustration-container-image"
+              src="/assets/main_illustration.png"
+              />
+            </div>
             <div class="design-information-container">
               <h1 class="main-page-heading">
                 <div class="heading-background-box"></div>