Added overflow scroll

4 files changed, 198 insertions, 1 deletions

diff --git a/CSS/.DS_Store b/CSS/.DS_Store
new file mode 100644
index 0000000..0bb201a
--- /dev/null
+++ b/CSS/.DS_Store
diff --git a/CSS/main.css b/CSS/main.css
index 3e32aa8..0fbc714 100644
--- a/CSS/main.css
+++ b/CSS/main.css
@@ -63,6 +63,7 @@
 		background-color: #d4d9d9;
 		border: 1px solid #999;
 		display: block;
+		overflow:scroll;
 		padding: 20px;
 	}
 	.icon{
@@ -159,6 +160,7 @@
 		background-color: #081417;
 		border: 1px solid #999;
 		display: block;
+		overflow:scroll;
 		padding: 20px;
 	}
 	.icon{
@@ -188,4 +190,4 @@
 			display:none;
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/CSS/secondary.css b/CSS/secondary.css
new file mode 100644
index 0000000..8ad282c
--- /dev/null
+++ b/CSS/secondary.css
@@ -0,0 +1,193 @@
+@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
diff --git a/testPage.html b/testPage.html
index ba2f6c9..808d6d7 100755
--- a/testPage.html
+++ b/testPage.html
@@ -65,6 +65,8 @@ g/expression/: finds and prints the expression.
 %s/expression/newExpression/: replaces an expression
 with new user input through the whole file.
 
+zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
+
 <integer, integer>: prefix works with d
 and s/ex/nex/ for a range of line.