Unified the widths, centered the headlines and redid the styling on t…

…he showcase page.
immerse-ntnu · Feb 1, 2022 · d05fbed · d05fbed
1 parent a4d7a75
commit d05fbed
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 77 deletions.
diff --git a/html/events.html b/html/events.html
@@ -13,7 +13,7 @@
 </head>
 
 <body>
-    <h1>Events</h1>
+<h1>Events</h1>
     <!--The javascript fills the div-->
     <div id="container"></div>
     <script src="../scripts/events.js"></script>

diff --git a/html/showcase.html b/html/showcase.html
@@ -18,12 +18,14 @@ <h2>Immerse's projects</h2>
                 please apply <a href="apply.html">here</a>
             </p>
         </section>
-        <video autoplay muted loop>
-            <source src="../img/ball_maze.mp4" type="video/mp4">
-        </video>
-        <video autoplay muted loop>
-            <source src="../img/rolly_bally.mp4" type="video/mp4">
-        </video>
+        <div id="videos">
+            <video autoplay muted loop>
+                <source src="../img/ball_maze.mp4" type="video/mp4">
+            </video>
+            <video autoplay muted loop>
+                <source src="../img/rolly_bally.mp4" type="video/mp4">
+            </video>
+        </div>
         <div id="external_link_container">
             <section id="itch_section">
                 <h2>Itch.io</h2>

diff --git a/style/indexStyle.css b/style/indexStyle.css
@@ -5,14 +5,21 @@ button {
 	color: white;
 	backdrop-filter: blur(2px);
 	border: none;
-	padding: 15px 32px;
+	height: 50px;
+	width: 100px;
 	margin-right: 30px;
+	margin-top: 25px;
 
 	box-shadow: 3px 3px var(--shadow-color);
 }
-
+form {
+	height: 100px;
+}
 button:hover {
-	background: var(--main-color-light);
+	background: var(--main-color-dark);
+	margin-top: 27px;
+	margin-right: 28px;
+	box-shadow: 1px 1px var(--shadow-color);
 }
 
 .video-box {
@@ -67,12 +74,10 @@ button:hover {
 }
 
 #applyNow {
-	width: 60%;
 	height: 100px;
 	background-color: var(--gray);
 	margin-left: auto;
 	margin-right: auto;
-	margin-bottom: 50px;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -92,15 +97,14 @@ button:hover {
 	flex-direction: row;
 	justify-content: space-between;
 	gap: 20px;
-	width: 60%;
 	margin: auto;
 }
 
 /* Style rules for PC and tablets */
 
 .event {
-	width: 40%;
-	margin-top: 0;
+	width: 42.5%;
+	margin: 75px 0;
 }
 .event p {
 	white-space: pre-wrap;

diff --git a/style/showcase.css b/style/showcase.css
@@ -1,32 +1,16 @@
+#videos {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
 video {
-    width: 85%;
+    width: 45%;
     display: block;
-    margin: auto;
     opacity: 80%;
-    border-radius: 10px; 
-    margin-bottom: 20px;
-}
-
-article section {
-    margin-bottom: 40px;
+    box-shadow: 10px 10px var(--shadow-color);
 }
-
 a {
     color: var(--main-color-light);
-}
-
-/* Styling for PC and tablets */
-@media only screen and (min-width: 800px){
-    video {
-        width: 55%;
-    }
-    #external_link_container {
-        width: 60%;
-        display: flex;
-        gap: 30px;
-        margin: auto;
-    }
-    #external_link_container section {
-        width: 45%;
-    }
 }
diff --git a/style/style.css b/style/style.css
@@ -23,6 +23,7 @@ Zebbben colours:
 
 :root {
   --main-color: #6800FF;
+  --main-color-dark: #4900b6;
   --main-color-light: #9B00FF;
   --gray-light: #444;
   --gray: #323232;
@@ -49,6 +50,10 @@ body {
     font-family: "Oswald", "Avenir Next Condensed", "Arial Narrow",
                  "MS UI Gothic", sans-serif;
 }
+article {
+  width: 60%;
+  margin: auto;
+}
 article section {
   background-color: var(--gray);
   position: relative;
@@ -63,8 +68,8 @@ h1 {
   font-weight: 600;
   /*transform: scale(1, 1.3);*/
   color: var(--main-color-light);
-  margin-left: 5.5%;
   margin-top: 60px;
+  text-align: center;
 }
 article h2 {
   /* Font */
@@ -106,6 +111,11 @@ article h4 {
 }
 
 /* Contents */
+article section {
+  justify-content: center;
+  align-items: center;
+  margin: 75px auto;
+}
 article section p {
   font-weight: 250;
   font-size: 2.2ch;
@@ -144,7 +154,7 @@ article:last-of-type {
 	padding-bottom: 8rem;
 }
 .link_arrow img {
- filter: brightness(0%) opacity(35%);
+ filter: brightness(0%) opacity(33%);
 }
 
 /* --- Topbar --- */
@@ -176,38 +186,3 @@ article:last-of-type {
   width: 50%;
   margin: auto;
 }
-
-/* --- Mobile styling rules --- */
-article section {
-	margin: auto;
-	width: 80%;
-	justify-content: center;
-	align-items: center;
-	margin-bottom: 60px;
-}
-
-/* Tablet and PC styling rules */
-@media only screen and (min-width: 800px) {
-  article section {
-		width: 70%;
-  }
-  h1 {
-    margin-left: 12%;
-  }
-  #topbar a:not(:first-child) {
-    top: -10px;
-  }
-}
-
-/* Small PC/Tablet window styling rules */
-@media only screen and (min-width: 1200px) {
-  article section {
-		width: 60%;
-	}
-  h1 {
-    margin-left: 18%;
-  }
-  #topbar a {
-    font-size: 22px;
-  }
-}