Added Varibles to the css for colors

2 files changed, 98 insertions, 323 deletions

diff --git a/CSS/main.css b/CSS/main.css
index 0ba775a..f49e8bd 100644
--- a/CSS/main.css
+++ b/CSS/main.css
@@ -6,86 +6,35 @@
 	 * Main color: #00558e
 	 * Secondary color: #0b3075
 	 */
-	@font-face{
-		font-family:IBM Plex Mono;
-		src: url(../fonts/IBMPlexMono-Regular.ttf);
-	}
-	body, html{
-		height: calc(100% - 2em);
-	}
+	:root {
+		--main-bg-color: #eaefef;
+		--code-bg-color: #d4d9d9;
+		--main-color: #00558e;
+		--second-color: #0b3075;
+	  }
 	body{
-		background-color:#eaefef;
-		color:#00558e;
-		font-family:IBM Plex Mono;
+		background-color:var(--main-bg-color);
+		color:var(--main-color);
 	}
 	a{
-		color: #00558e;
+		color: var(--main-color);
 	}
 	ul.topBar{
-		text-transform:uppercase;
-		margin:0;
-		padding:0;
-		overflow:hidden;
-		background-color:#00558e;
-		list-style-type:none;
-	}
-	li.topLink{
-		float:left;
+		background-color:var(--main-color);
 	}
 	li.topLink a{
-		display:block;
-		color:#eaefef;
-		text-align:center;
-		padding:14px 16px;
-		text-decoration:none;
+		color:var(--main-bg-color);
 	}
 	li.topLink a:hover{
-		background-color:#0b3075;
-	}
-	.main{
-		margin:auto;
-		width: 60%;
+		background-color:var(--second-color);
 	}
 	.search{
-		padding:12px 20px 12px;
-		width:90%;
-		border-radius:5px;
-		margin-left:auto;
-		margin-right:auto;
-		margin-bottom:15em;
-		color:#00558e;
-		background-color:#eaefef;
-		font-family:IBM Plex Mono;
-		border-color:#00558e;
-
+		color:var(--main-color);
+		background-color:var(--main-bg-color);
+		border-color:var(--main-color);
 	}
 	pre code {
-		background-color: #d4d9d9;
-		border: 1px solid #999;
-		display: block;
-		overflow:scroll;
-		padding: 20px;
-	}
-	.icon{
-		font-size:200px;
-		margin-top:10px;
-		margin-bottom:10px;
-	}
-	@media only screen and (orientation: portrait){
-		.main{
-			margin:auto;
-			width:90%;
-			font-size:36px;
-		}
-		li.topLink a{
-			font-size:36px;
-		}
-		.search{
-			font-size:36px;
-		}
-		.icon{
-			font-size:256px;
-		}
+		background-color: var(--code-bg-color);
 	}
 }
 
@@ -97,85 +46,104 @@
 	 * Main color: #00558e
 	 * Secondary color: #0b3075
 	 */
-	@font-face{
-		font-family:IBM Plex Mono;
-		src: url(../fonts/IBMPlexMono-Regular.ttf);
-	}
-	body, html{
-		height: calc(100% - 2em);
+	:root {
+		--main-bg-color: #0D1F22;
+		--code-bg-color: #081417;
+		--main-color: #00558e;
+		--second-color: #0b3075;
+		--text-color: #eaefef;
 	}
 	body{
-		background-color:#0D1F22;
-		color:#eaefef;
-		font-family:IBM Plex Mono;
+		background-color:var(--main-bg-color);
+		color:var(--text-color);
 	}
 	a{
-		color: #eaefef;
+		color: var(--text-color);
 	}
 	ul.topBar{
-		text-transform:uppercase;
-		margin:0;
-		padding:0;
-		overflow:hidden;
-		background-color:#00558e;
-		list-style-type:none;
-	}
-	li.topLink{
-		float:left;
+		background-color:var(--main-color);
 	}
 	li.topLink a{
-		display:block;
-		color:#eaefef;
-		text-align:center;
-		padding:14px 16px;
-		text-decoration:none;
+		color:var(--text-color);
 	}
 	li.topLink a:hover{
-		background-color:#0b3075;
+		background-color:var(--second-color);
+	}
+	.search{
+		color:var(--main-color);
+		background-color:var(--text-color);
+		border-color:var(--main-color);
 	}
+	pre code {
+		background-color: var(--code-bg-color);
+	}
+}
+/* Common CSS styling */
+
+@font-face{
+	font-family:IBM Plex Mono;
+	src: url(../fonts/IBMPlexMono-Regular.ttf);
+}
+body, html{
+	height: calc(100% - 2em);
+}
+body{
+	font-family:IBM Plex Mono;
+}
+ul.topBar{
+	text-transform:uppercase;
+	margin:0;
+	padding:0;
+	overflow:hidden;
+	list-style-type:none;
+}
+li.topLink{
+	float:left;
+}
+li.topLink a{
+	display:block;
+	text-align:center;
+	padding:14px 16px;
+	text-decoration:none;
+}
+.main{
+	margin:auto;
+	width:60%;
+}
+.search{
+	padding:12px 20px 12px;
+	width:90%;
+	border-radius:5px;
+	margin-left:auto;
+	margin-right:auto;
+	margin-bottom:15em;
+	font-family:IBM Plex Mono;
+}
+pre code {
+	border: 1px solid #999;
+	display: block;
+	overflow:scroll;
+	padding: 20px;
+}
+.icon{
+	font-size:200px;
+	margin-top:10px;
+	margin-bottom:10px;
+}
+
+@media only screen and (orientation: portrait){
 	.main{
 		margin:auto;
-		width:60%;
-	}
-	.search{
-		padding:12px 20px 12px;
 		width:90%;
-		border-radius:5px;
-		margin-left:auto;
-		margin-right:auto;
-		margin-bottom:15em;
-		color:#00558e;
-		background-color:#eaefef;
-		font-family:IBM Plex Mono;
-		border-color:#00558e;
-
+		font-size:36px;
 	}
-	pre code {
-		background-color: #081417;
-		border: 1px solid #999;
-		display: block;
-		overflow:scroll;
-		padding: 20px;
+	li.topLink a{
+		font-size:36px;
+	}
+	.search{
+		font-size:36px;
 	}
 	.icon{
-		font-size:200px;
-		margin-top:10px;
-		margin-bottom:10px;
-	}
-	@media only screen and (orientation: portrait){
-		.main{
-			margin:auto;
-			width:90%;
-			font-size:36px;
-		}
-		li.topLink a{
-			font-size:36px;
-		}
-		.search{
-			font-size:36px;
-		}
-		.icon{
-			font-size:256px;
-		}
+		font-size:256px;
 	}
 }
\ No newline at end of file
diff --git a/CSS/secondary.css b/CSS/secondary.css
deleted file mode 100644
index 8ad282c..0000000
--- a/CSS/secondary.css
+++ /dev/null
@@ -1,193 +0,0 @@
-@media (prefers-color-scheme: light) {
-	/*
-	 * Color scheme
-	 * Background color: #eaefef
-	 * Code background: #d4d9d9
-	 * Main color: #00558e
-	 * Secondary color: #0b3075
-	 */
-	@font-face{
-		font-family:IBM Plex Mono;
-		src: url(../fonts/IBMPlexMono-Regular.ttf);
-	}
-	body, html{
-		height: calc(100% - 2em);
-	}
-	body{
-		background-color:#eaefef;
-		color:#00558e;
-		font-family:IBM Plex Mono;
-	}
-	a{
-		color: #00558e;
-	}
-	ul.topBar{
-		text-transform:uppercase;
-		margin:0;
-		padding:0;
-		overflow:hidden;
-		background-color:#00558e;
-		list-style-type:none;
-	}
-	li.topLink{
-		float:left;
-	}
-	li.topLink a{
-		display:block;
-		color:#eaefef;
-		text-align:center;
-		padding:14px 16px;
-		text-decoration:none;
-	}
-	li.topLink a:hover{
-		background-color:#0b3075;
-	}
-	.main{
-		margin:auto;
-		width: 60%;
-	}
-	.search{
-		padding:12px 20px 12px;
-		width:90%;
-		border-radius:5px;
-		margin-left:auto;
-		margin-right:auto;
-		margin-bottom:15em;
-		color:#00558e;
-		background-color:#eaefef;
-		font-family:IBM Plex Mono;
-		border-color:#00558e;
-
-	}
-	pre code {
-		background-color: #d4d9d9;
-		border: 1px solid #999;
-		overflow:scroll;
-		display: block;
-		padding: 20px;
-	}
-	.icon{
-		font-size:200px;
-		margin-top:10px;
-		margin-bottom:10px;
-	}
-	@media only screen and (max-width: 838px){
-		.main{
-			margin:auto;
-			width:90%;
-		}
-	}
-	@media only screen and (min-height: 1440px){
-		li a{
-			font-size:36px;
-		}
-		.search{
-			font-size:36px;
-		}
-		.icon{
-			font-size:256px;
-		}
-	}
-	@media only screen and (max-width: 1365px){
-		.desktop{
-			display:none;
-		}
-	}
-}
-
-@media (prefers-color-scheme: dark) {
-	/*
-	 * Color scheme
-	 * Background color: #000000
-	 * Code background: #363636
-	 * Main color: #ffffff
-	 * Secondary color: #f5f5f5
-	 */
-	@font-face{
-		font-family:IBM Plex Mono;
-		src: url(../fonts/IBMPlexMono-Regular.ttf);
-	}
-	body, html{
-		height: calc(100% - 2em);
-	}
-	body{
-		background-color:#000000;
-		color:#ffffff;
-		font-family:IBM Plex Mono;
-	}
-	a{
-		color: #ffffff;
-	}
-	ul.topBar{
-		text-transform:uppercase;
-		margin:auto;
-		overflow:hidden;
-		background-color:#000;
-		list-style-type:none;
-	}
-	li.topLink{
-		float:left;
-	}
-	li.topLink a{
-		display:block;
-		color:#fff;
-		text-align:center;
-		padding:14px 16px;
-		padding-right:16px;;
-		text-decoration:none;
-	}
-	li.topLink a:hover{
-		background-color:#363636;
-	}
-	.main{
-		margin:auto;
-		width: 60%;
-	}
-	.search{
-		padding:12px 20px 12px;
-		width:90%;
-		border-radius:5px;
-		margin-left:auto;
-		margin-right:auto;
-		margin-bottom:15em;
-		color:#ffffff;
-		background-color:#000000;
-		font-family:IBM Plex Mono;
-		border-color:#ffffff;
-
-	}
-	pre code {
-		background-color: #363636;
-		border: 1px solid #999;
-		display: block;
-		overflow:scroll;
-		padding: 20px;
-	}
-	.icon{
-		font-size:200px;
-		margin-top:10px;
-		margin-bottom:10px;
-	}
-	@media only screen and (max-width: 838px){
-		.main{
-			margin:auto;
-			width:90%;
-		}
-	}
-	@media only screen and (min-height: 1440px){
-		li a{
-			font-size:36px;
-		}
-		.search{
-			font-size:36px;
-		}
-		.icon{
-			font-size:256px;
-		}
-	}
-	@media only screen and (max-width: 1365px){
-		.desktop{
-			display:none;
-		}
-	}
-}
\ No newline at end of file