From e7d55d98a11c5bd9b7948c42575459269d41405d Mon Sep 17 00:00:00 2001
From: Kyle <76597257+Gitleptune@users.noreply.github.com>
Date: Fri, 13 Aug 2021 15:05:41 +0300
Subject: [PATCH 1/3] refactor(stylesheet): make everything more consistent

---
 src/style.css | 226 ++++++++++++++++++++------------------------------
 1 file changed, 91 insertions(+), 135 deletions(-)

diff --git a/src/style.css b/src/style.css
index e9fb7e7..da7a645 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,89 +2,79 @@ div {
   margin: 0px;
   padding: 0px;
 }
-
 /* Theme */
-
 :root {
-  --bg-color: white;
-  --fg-color: black;
+  --bg-color: #fff;
+  --fg-color: #000;
   --begin-button-hover: #3cb0ff;
   --code-area-bg-color: #AAA;
   --select-bg-color: #EEE;
-  --transition-time: 0s; /* Modified via js */
+  --transition-time: 0s; /* Modified via JS */
   --displaylatex: none;
   --displayhtml: none;
 }
 
 [data-theme="dark"] {
-  --bg-color: black;
-  --fg-color: white;
+  --bg-color: #000;
+  --fg-color: #fff;
   --begin-button-hover: green;
   --code-area-bg-color: #222;
   --select-bg-color: #111;
 }
-
 [data-display-latex="true"] {
   --displaylatex: block;
 }
-
 [data-display-html="true"] {
   --displayhtml: block;
 }
 
 /* Global */
-
 html {
   transition: color var(--transition-time);
   transition: background-color var(--transition-time);
   color: var(--fg-color);
   background-color: var(--bg-color);
-  font-family: Arial;
+  font-family: 'Arial';
   scroll-behavior: smooth;
 }
-
 html, body {
-  margin:0;
-  padding:0;
+  margin: 0;
+  padding: 0;
 }
 
 /* Layout */
-
 .displaylatex {
   display: var(--displaylatex) !important;
   overflow: auto;
   min-height: 0
 }
-
 .displayhtml {
   display: var(--displayhtml) !important;
   overflow: auto;
   min-height: 0;
-  background-color: white;
+  background-color: #fff;
 }
-
 .gutter {
-  min-width:12px;
-  min-height:4px;
+  min-width: 12px;
+  min-height: 4px;
 }
-
+/* Containers */
 .container {
-  /*overflow: hidden;*/
+  /* overflow: hidden; */
   min-height: 0
 }
-
 .container.vertical {
   display: flex;
   flex-direction: column;
   margin: 0;
   padding: 0;
 }
-
 .container.horizontal {
   display: flex;
   flex-direction: row;
 }
 
+/* Media queries */
 @media all and (orientation:portrait) {
   .container.device-orientation {
     display: flex;
@@ -97,148 +87,128 @@ html, body {
     flex-direction: row;
   }
 }
-
 .flex {
-  flex-grow:1;
+  flex-grow: 1;
   flex-shrink: 1;
 }
-
-.nonflex{
+.nonflex {
   flex-grow: 0;
   flex-shrink: 0;
 }
-
 .y-scrollable {
   overflow-x: auto;
 }
-
 .fullscreen {
-  width:100%;
-  height:100vh;
-  margin:0;
-  padding:0;
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
 }
-
 .fill_space {
-  width:100%;
-  height:100%;
+  width: 100%;
+  height: 100%;
   overflow: auto;
   min-height: 0
 }
 
-/* landing page */
-
+/* Landing page */
 #landing_page {
-  position:relative
+  position: relative
 }
-
 #landing_page_content {
-  position:absolute;
-  top:50%;
-  left:50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
   transform: translate(-50%, -50%);
 }
-
 #landing_page_content h1 {
-  font-size:20vmin;
-  margin:0;
-  padding:0;
+  font-size: 20vmin;
+  margin: 0;
+  padding: 0;
   transition: text-shadow 1s ease-in-out 1s;
 }
-
 #landing_page_content h1:hover {
   text-shadow:
-            +0px   0px   15px   var(--bg-color),
-            +0px   -15px   20px   rgba(255,0,0,0.5),
-           -15px   +10px   20px   rgba(0,255,0,0.5),
-           +10px   +15px   20px   rgba(0,0,255,0.5);
+							 +0px     0px   15px   var(--bg-color),
+						   +0px   -15px   20px   rgba(255,0,0,0.5),
+							-15px   +10px   20px   rgba(0,255,0,0.5),
+							+10px   +15px   20px   rgba(0,0,255,0.5);
 }
 
 #landing_page_content h2 {
-  font-weight:normal;
-  font-size:4vmin;
-  margin:0;
-  padding:0;
-  margin-top:-4vmin;
-  margin-left:1vmin;
+  font-weight: normal;
+  font-size: 4vmin;
+  margin: 0;
+  padding: 0;
+  margin-top: -4vmin;
+  margin-left: 1vmin;
 }
-
 #landing_page_content p {
-  font-size:5vmin;
+  font-size: 5vmin;
   white-space: nowrap;
 }
-
 #landing_page_content a {
-  font-size:10vmin;
+  font-size: 10vmin;
 }
-
 #version {
-  font-size:4vmin;
-  margin:1vmin;
+  font-size: 4vmin;
+  margin: 1vmin;
 }
 
-/* begin button */ 
-
+/* Begin button */ 
 #begin_button {
   border-radius: 2vmin;;
-  font-family: Arial;
+  font-family: 'Arial';
   font-size: 10vmin;
   padding: 1.5vmin;
   text-decoration: none;
 }
-
 #begin_button:hover {
   text-decoration: none;
 }
 
 /* Style button */
-
 #style_button {
   position: absolute;
   right: 0;
   top: 0;
-  font-size:4vmin;
-  font-weight:lighter;
-  margin:1vmin;
-  padding:1vmin;
+  font-size: 4vmin;
+  font-weight: lighter;
+  margin: 1vmin;
+  padding: 1vmin;
   border-radius: 0.5vmin;
-  opacity:0.8;
+  opacity: 0.8;
 }
-
 #style_button:hover {
   opacity: 1;
-  cursor:pointer;
+  cursor: pointer;
 }
-
 #style_button, #links a {
-  background-color:var(--fg-color);
-  color:var(--bg-color);
+  background-color: var(--fg-color);
+  color: var(--bg-color);
 }
 
 /* Links */
-
 #links {
   position: absolute;
   left: 0;
   top: 0;
 }
-
 #links a {
-  display:block;
-  margin:1vmin;
-  padding:1vmin;
-  font-size:3vmin;
-  text-decoration:none;
+  display: block;
+  margin: 1vmin;
+  padding: 1vmin;
+  font-size: 3vmin;
+  text-decoration: none;
 
-  margin-left:0;
-  background-color:var(--fg-color);
-  color:var(--bg-color);
+  margin-left: 0;
+  background-color: var(--fg-color);
+  color: var(--bg-color);
   border-radius: 0 0.5vmin 0.5vmin 0;
-  opacity:0.8;
+  opacity: 0.8;
 }
-
 #links a:hover {
-  opacity:1.0;
+  opacity: 1.0;
 }
 
 /* Application area */
@@ -254,49 +224,41 @@ textarea {
   overflow: auto;
 }
 
-/* menu bar */
-
+/* Menu bar */
 #menu_bar {
   display: flex;
 }
-
 .menu_bar_submenu {
   margin: 0px;
-  padding:12px;
-  display:inline-block;
-  border-right: 1px solid black;
+  padding: 12px;
+  display: inline-block;
+  border-right: 1px solid #000;
   vertical-align: center;
   white-space: nowrap;
 }
-
 select {
-  font:inherit;
-  size:50px;
+  font: inherit;
+  size: 50px;
 }
-
 .option {
-  margin:auto;
-  padding:auto;
-  padding-right:3px;
-  padding-left:3px;
+  margin: auto;
+  padding: auto;
+  padding-right: 3px;
+  padding-left: 3px;
 }
-
 select {
   border: 0;
   padding: 7px;
 }
-
 option {
   border: 0;
   padding: 7px;
   margin: 7px;
 }
-
 #input, #output, #latex, #html{
   padding: 1vh;
   margin: 1vh;
 }
-
 #input, #output, #errors, #menu_bar, #latex {
   color:var(--fg-color);
   background-color:var(--bg-color);
@@ -307,56 +269,50 @@ option {
   white-space: pre;
   overflow: auto;
 }
-
+/* Begin Button */
 #begin_button {
-  border:1vmin var(--fg-color) solid;
+  border: 1vmin var(--fg-color) solid;
   color: var(--fg-color);
   padding: 10px;
 }
-
 #begin_button:hover {
   background-color: var(--begin-button-hover);
 }
 
 #code_area {
   background-color: var(--code-area-bg-color);
-  tab-size:2;
+  tab-size: 2;
 }
-
 #menu_bar {
   margin-bottom: 1vmin;
 }
-
 select, option {
   color: var(--fg-color);
-  background-color:var(--select-bg-color);
+  background-color: var(--select-bg-color);
 }
-
+/* Copy */
 .copy-wrapper {
-  position:relative;
+  position: relative;
 }
-
 .copy {
-  display:block;
-  position:absolute;
-  color:white;
-  background-color:black;
-  color:white;
+  display: block;
+  position: absolute;
+  color: #fff;
+  background-color: #000;
+  color: #fff;
   opacity: 0.7;
-  right:0;
-  top :0;
-  z-index:2;
+  right: 0;
+  top: 0;
+  z-index: 2;
   margin: 1vh;
   padding: 1vh;
   transition: opacity 0.3s, background-color 0.3s;
   box-shadow: x 0.5vmin 0.5vmin 0 inset rgba(0,0,0,0.4);
 }
-
 .copy:hover, .copy[data-active=true] {
-  opacity:1.0;
-  cursor:pointer;
+  opacity: 1.0;
+  cursor: pointer;
 }
-
 .copy[data-active=true] {
-  background-color:green;
+  background-color: green;
 }

From 805c79583cc3fafb874baf74077687d41f9e73f5 Mon Sep 17 00:00:00 2001
From: Kyle <76597257+Gitleptune@users.noreply.github.com>
Date: Fri, 13 Aug 2021 17:14:58 +0300
Subject: [PATCH 2/3] add(stylesheet): empty lines

---
 src/style.css | 59 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/style.css b/src/style.css
index da7a645..018cd53 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,10 +2,11 @@ div {
   margin: 0px;
   padding: 0px;
 }
+
 /* Theme */
 :root {
-  --bg-color: #fff;
-  --fg-color: #000;
+  --bg-color: white;
+  --fg-color: black;
   --begin-button-hover: #3cb0ff;
   --code-area-bg-color: #AAA;
   --select-bg-color: #EEE;
@@ -15,15 +16,17 @@ div {
 }
 
 [data-theme="dark"] {
-  --bg-color: #000;
-  --fg-color: #fff;
+  --bg-color: black;
+  --fg-color: white;
   --begin-button-hover: green;
   --code-area-bg-color: #222;
   --select-bg-color: #111;
 }
+
 [data-display-latex="true"] {
   --displaylatex: block;
 }
+
 [data-display-html="true"] {
   --displayhtml: block;
 }
@@ -37,6 +40,7 @@ html {
   font-family: 'Arial';
   scroll-behavior: smooth;
 }
+
 html, body {
   margin: 0;
   padding: 0;
@@ -48,27 +52,32 @@ html, body {
   overflow: auto;
   min-height: 0
 }
+
 .displayhtml {
   display: var(--displayhtml) !important;
   overflow: auto;
   min-height: 0;
-  background-color: #fff;
+  background-color: white;
 }
+
 .gutter {
   min-width: 12px;
   min-height: 4px;
 }
+
 /* Containers */
 .container {
   /* overflow: hidden; */
   min-height: 0
 }
+
 .container.vertical {
   display: flex;
   flex-direction: column;
   margin: 0;
   padding: 0;
 }
+
 .container.horizontal {
   display: flex;
   flex-direction: row;
@@ -81,29 +90,35 @@ html, body {
     flex-direction: column;
   }
 }
+
 @media all and (orientation:landscape) {
   .container.device-orientation {
     display: flex;
     flex-direction: row;
   }
 }
+
 .flex {
   flex-grow: 1;
   flex-shrink: 1;
 }
+
 .nonflex {
   flex-grow: 0;
   flex-shrink: 0;
 }
+
 .y-scrollable {
   overflow-x: auto;
 }
+
 .fullscreen {
   width: 100%;
   height: 100vh;
   margin: 0;
   padding: 0;
 }
+
 .fill_space {
   width: 100%;
   height: 100%;
@@ -115,18 +130,21 @@ html, body {
 #landing_page {
   position: relative
 }
+
 #landing_page_content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 #landing_page_content h1 {
   font-size: 20vmin;
   margin: 0;
   padding: 0;
   transition: text-shadow 1s ease-in-out 1s;
 }
+
 #landing_page_content h1:hover {
   text-shadow:
 							 +0px     0px   15px   var(--bg-color),
@@ -143,13 +161,16 @@ html, body {
   margin-top: -4vmin;
   margin-left: 1vmin;
 }
+
 #landing_page_content p {
   font-size: 5vmin;
   white-space: nowrap;
 }
+
 #landing_page_content a {
   font-size: 10vmin;
 }
+
 #version {
   font-size: 4vmin;
   margin: 1vmin;
@@ -163,6 +184,7 @@ html, body {
   padding: 1.5vmin;
   text-decoration: none;
 }
+
 #begin_button:hover {
   text-decoration: none;
 }
@@ -179,10 +201,12 @@ html, body {
   border-radius: 0.5vmin;
   opacity: 0.8;
 }
+
 #style_button:hover {
   opacity: 1;
   cursor: pointer;
 }
+
 #style_button, #links a {
   background-color: var(--fg-color);
   color: var(--bg-color);
@@ -194,6 +218,7 @@ html, body {
   left: 0;
   top: 0;
 }
+
 #links a {
   display: block;
   margin: 1vmin;
@@ -207,6 +232,7 @@ html, body {
   border-radius: 0 0.5vmin 0.5vmin 0;
   opacity: 0.8;
 }
+
 #links a:hover {
   opacity: 1.0;
 }
@@ -228,37 +254,44 @@ textarea {
 #menu_bar {
   display: flex;
 }
+
 .menu_bar_submenu {
   margin: 0px;
   padding: 12px;
   display: inline-block;
-  border-right: 1px solid #000;
+  border-right: 1px solid black;
   vertical-align: center;
   white-space: nowrap;
 }
+
 select {
   font: inherit;
   size: 50px;
 }
+
 .option {
   margin: auto;
   padding: auto;
   padding-right: 3px;
   padding-left: 3px;
 }
+
 select {
   border: 0;
   padding: 7px;
 }
+
 option {
   border: 0;
   padding: 7px;
   margin: 7px;
 }
+
 #input, #output, #latex, #html{
   padding: 1vh;
   margin: 1vh;
 }
+
 #input, #output, #errors, #menu_bar, #latex {
   color:var(--fg-color);
   background-color:var(--bg-color);
@@ -269,12 +302,14 @@ option {
   white-space: pre;
   overflow: auto;
 }
+
 /* Begin Button */
 #begin_button {
   border: 1vmin var(--fg-color) solid;
   color: var(--fg-color);
   padding: 10px;
 }
+
 #begin_button:hover {
   background-color: var(--begin-button-hover);
 }
@@ -283,23 +318,27 @@ option {
   background-color: var(--code-area-bg-color);
   tab-size: 2;
 }
+
 #menu_bar {
   margin-bottom: 1vmin;
 }
+
 select, option {
   color: var(--fg-color);
   background-color: var(--select-bg-color);
 }
+
 /* Copy */
 .copy-wrapper {
   position: relative;
 }
+
 .copy {
   display: block;
   position: absolute;
-  color: #fff;
-  background-color: #000;
-  color: #fff;
+  color: white;
+  background-color: black;
+  color: white;
   opacity: 0.7;
   right: 0;
   top: 0;
@@ -309,10 +348,12 @@ select, option {
   transition: opacity 0.3s, background-color 0.3s;
   box-shadow: x 0.5vmin 0.5vmin 0 inset rgba(0,0,0,0.4);
 }
+
 .copy:hover, .copy[data-active=true] {
   opacity: 1.0;
   cursor: pointer;
 }
+
 .copy[data-active=true] {
   background-color: green;
 }

From 3c89017eacf2240e4b53638c4fd0b59ba7a0c750 Mon Sep 17 00:00:00 2001
From: Kyle <76597257+Gitleptune@users.noreply.github.com>
Date: Fri, 13 Aug 2021 17:29:31 +0300
Subject: [PATCH 3/3] fix(stylesheet): indentation on text shadow

---
 src/style.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/style.css b/src/style.css
index 018cd53..5c7efdb 100644
--- a/src/style.css
+++ b/src/style.css
@@ -147,10 +147,10 @@ html, body {
 
 #landing_page_content h1:hover {
   text-shadow:
-							 +0px     0px   15px   var(--bg-color),
-						   +0px   -15px   20px   rgba(255,0,0,0.5),
-							-15px   +10px   20px   rgba(0,255,0,0.5),
-							+10px   +15px   20px   rgba(0,0,255,0.5);
+            +0px   0px   15px   var(--bg-color),
+            +0px   -15px   20px   rgba(255,0,0,0.5),
+           -15px   +10px   20px   rgba(0,255,0,0.5),
+           +10px   +15px   20px   rgba(0,0,255,0.5);
 }
 
 #landing_page_content h2 {