Improved the colour uniformity and site layout-

immerse-ntnu · Jan 31, 2022 · a4d7a75 · a4d7a75
1 parent 2a3a02f
commit a4d7a75
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 47 deletions.
diff --git a/style/indexStyle.css b/style/indexStyle.css
@@ -8,7 +8,7 @@ button {
 	padding: 15px 32px;
 	margin-right: 30px;
 
-	box-shadow: 3px 3px var(--gray-dark);
+	box-shadow: 3px 3px var(--shadow-color);
 }
 
 button:hover {
@@ -76,53 +76,43 @@ button:hover {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	box-shadow: 10px 10px var(--gray-dark);
+	box-shadow: 10px 10px var(--shadow-color);
 }
 #applyNow h4 {
 	font-size: 220%;
 	padding-top: 10px;
 	margin-left: 15px;
 	/*font-family: Helvetica, serif ;*/
 	font-weight: lighter;
+	color: white;
+}
+#eventAndNews{
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	gap: 20px;
+	width: 60%;
+	margin: auto;
 }
 
 /* Style rules for PC and tablets */
-@media only screen and (min-width: 800px){
-	#eventAndNews{
-		position: relative;
-		display: flex;
-		flex-direction: row;
-		gap: 20px;
-		width: 80%;
-		margin: auto;
-	}
-	.event {
-		width: 40%;
-		margin-top: 0;
-	}
-	.event p {
-		white-space: pre-wrap;
-		overflow: hidden;
-	}
-	.event:before {
-		content:'';
-		width:100%;
-		height:50%;    
-		position:absolute;
-  		left:0;
-  		top:50%;
-  		background:linear-gradient(0deg, #0B0C10, transparent 50%);
-	}
+
+.event {
+	width: 40%;
+	margin-top: 0;
 }
+.event p {
+	white-space: pre-wrap;
+	overflow: hidden;
+	z-index: -1;
+}
+.event:before {
+	content:'';
+	width:100%;
+	height:50%;
+	position:absolute;
+	left:0;
+	top:50%;
 
-/* Style rules for small PC/Tablet window */
-@media only screen and (min-width: 1200px) {
-	#eventAndNews{
-		position: relative;
-		display: flex;
-		flex-direction: row;
-		gap: 20px;
-		width: 70%;
-		margin: auto;
-	}
-  }
+}
diff --git a/style/style.css b/style/style.css
@@ -27,6 +27,7 @@ Zebbben colours:
   --gray-light: #444;
   --gray: #323232;
   --gray-dark: #1f1f1f;
+  --shadow-color: rgba(0,0, 0, 0.5);
 }
 body {
   /* Background  */
@@ -52,7 +53,7 @@ article section {
   background-color: var(--gray);
   position: relative;
   padding: 0 12px 12px 12px;
-  box-shadow: 10px 10px var(--gray-dark);
+  box-shadow: 10px 10px var(--shadow-color);
 }
 
 /* Headers */
@@ -67,14 +68,14 @@ h1 {
 }
 article h2 {
   /* Font */
-  font-weight: 550;
-  color: var(--main-color);
+  font-weight: normal;
+  color: white;
 
   /* Box styling */
-  background-color: #C5C6C7;
+  background-color: var(--main-color);
   padding: 0 7px;
   border: 10px;
-  box-shadow: 0 0 5px 1px rgb(34, 34, 34);
+  box-shadow: 3px 3px var(--shadow-color);
 
   /* Positioning */
   position: absolute;
@@ -134,15 +135,17 @@ footer {
 	bottom: 0;
 	position: absolute;
 	text-align: center;
-	background-color: rgba(0, 0, 0, 0.212);
+	background-color: var(--gray-dark);
 	backdrop-filter: blur(8px);
 
 	color: rgb(240, 240, 240);
 }
 article:last-of-type {
 	padding-bottom: 8rem;
 }
-
+.link_arrow img {
+ filter: brightness(0%) opacity(35%);
+}
 
 /* --- Topbar --- */
 #topbar{
@@ -158,7 +161,7 @@ article:last-of-type {
 }
 #topbar a {
   color: #f2f2f2;
-  padding: 14px 16px;
+  padding: 14px 20px;
   text-decoration: none;
   font-size: 17px;
   top: 10px;