Refactor css into common layout.css file

neilbalch · Jun 15, 2018 · f0a4ea8 · f0a4ea8
1 parent c8bb42e
commit f0a4ea8
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 186 deletions.
diff --git a/public/stylesheets/error.css b/public/stylesheets/error.css
@@ -1,39 +1,3 @@
-body {
-  background: orange url(../images/background.jpg) no-repeat fixed center center;
-  background-size: cover; 
-  margin: 0px;
-}
 form { margin: auto; width: 50px; }
-button:hover { color: black; background: lawngreen; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }
-button {
-  background-color: green;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  padding: 3px 5px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font: 16px 'Ubuntu', sans-serif;
-  -webkit-transition-duration: 0.33s; /* Safari */
-  transition-duration: 0.25s;
-}
-p { margin: 0px 0px 0px 0px; font: 14px 'Ubuntu', sans-serif; display: inline-block; }
-pre { margin: 5px 0px 0px 0px; font: 14px 'Ubuntu', sans-serif; }
-h1 { margin: 10px 0px 10px 0px; font: bold 40px 'Ubuntu', sans-serif; text-align: center; }
-h2 { margin: 10px 0px 0px 0px; font: 26px 'Ubuntu', sans-serif; display: inline-block; padding: 0px 5px 0px 0px; }
-#content-wrapper { width: 1000px; margin: auto; padding: 1em 5px; background: #37cac5; border-radius: 25px; }
-
-#footer { 
-  background: linear-gradient(rgba(255,0,0,0), rgba(244,192,34,1) 30%);
-  width: 100%; 
-  height: 1.5em; 
-  padding: 5px 10px;
-  position: fixed;
-  bottom: 0px;
-}
-#footer p, #footer a {
-  float: left;
-  padding-top: 5px;
-  padding-right: 10px;
-}
+p { display: inline-block; }
+#content-wrapper { width: 1000px; }
diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css
@@ -1,32 +1,4 @@
-body {
-  margin: 0px;
-  background: orange url(../images/background.jpg) no-repeat fixed center center; 
-  background-size: cover;
-}
-input {
-  width: 225px;
-  border: 2px dashed #D1C7AC;
-  border-left: 4px solid #3366FF;
-  font: 16px 'Ubuntu', sans-serif;
-}
-button:hover { color: black; background: lawngreen; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }
-button {
-  background-color: green;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  padding: 3px 5px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font: 16px 'Ubuntu', sans-serif;
-  -webkit-transition-duration: 0.33s; /* Safari */
-  transition-duration: 0.25s;
-}
-b { font: bold 24px 'Ubuntu', sans-serif; }
-a { color: blue; }
-p, a { margin: 0px 0px 0px 0px; font: 16px 'Ubuntu', sans-serif; }
-#content-wrapper { width: 950px; margin: auto; padding-bottom: 1em; background: #37cac5; border-radius: 25px; }
+#content-wrapper { width: 950px; }
 #indexHeader { text-align: center; margin: 0px 0px 0.25em 0px; font: 60px 'Happy Monkey', cursive; }
 #indexHeader i { font: italic 24px 'Ubuntu', sans-serif; }
 #actionBtns { margin: auto; margin-bottom: 1.5em; width: 500px; }
@@ -50,17 +22,3 @@ p, a { margin: 0px 0px 0px 0px; font: 16px 'Ubuntu', sans-serif; }
 #options { width: 320px; margin: auto; margin-top: 1.5em; padding: 5px; }
 #hash { width: 320px; margin: auto; margin-top: 0.5em; padding: 5px; }
 #options input, #hash input { float: right; }
-
-#footer { 
-  background: linear-gradient(rgba(255,0,0,0), rgba(244,192,34,1) 30%);
-  width: 100%; 
-  height: 1.5em; 
-  padding: 5px 10px;
-  position: fixed;
-  bottom: 0px;
-}
-#footer p, #footer a {
-  float: left;
-  padding-top: 5px;
-  padding-right: 10px;
-}
diff --git a/public/stylesheets/layout.css b/public/stylesheets/layout.css
@@ -0,0 +1,47 @@
+body {
+  margin: 0px;
+  background: orange url(../images/background.jpg) no-repeat fixed center center; 
+  background-size: cover;
+}
+input {
+  width: 225px;
+  border: 2px dashed #D1C7AC;
+  border-left: 4px solid #3366FF;
+  font: 16px 'Ubuntu', sans-serif;
+}
+button:hover { color: black; background: lawngreen; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }
+button {
+  background-color: green;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  padding: 3px 5px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font: 16px 'Ubuntu', sans-serif;
+  -webkit-transition-duration: 0.33s; /* Safari */
+  transition-duration: 0.25s;
+}
+b { font: bold 24px 'Ubuntu', sans-serif; }
+a { color: blue; }
+p, a { margin: 0px 0px 0px 0px; font: 16px 'Ubuntu', sans-serif; }
+pre { margin: 5px 0px 0px 0px; font: 14px 'Ubuntu', sans-serif; }
+h1 { margin: 10px 0px 10px 0px; font: bold 40px 'Ubuntu', sans-serif; text-align: center; }
+h2 { margin: 10px 0px 0px 0px; font: 26px 'Ubuntu', sans-serif; display: inline-block; padding: 0px 5px 0px 0px; }
+
+#content-wrapper { margin: auto; padding: 1em 5px; background: #37cac5; border-radius: 25px; }
+
+#footer { 
+  background: linear-gradient(rgba(255,0,0,0), rgba(244,192,34,1) 30%);
+  width: 100%; 
+  height: 1.5em; 
+  padding: 5px 10px;
+  position: fixed;
+  bottom: 0px;
+}
+#footer p, #footer a {
+  float: left;
+  padding-top: 5px;
+  padding-right: 10px;
+}
diff --git a/public/stylesheets/login.css b/public/stylesheets/login.css
@@ -1,32 +1,9 @@
-body { padding: 10px 10px; background: orange url(../images/background.jpg) no-repeat fixed center center; background-size: cover; }
-input {
-  width: 275px;
-  border: 2px dashed #D1C7AC;
-  border-left: 4px solid #3366FF;
-  font: 20px 'Ubuntu', sans-serif;
-}
-button:hover { color: black; background: lawngreen; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }
-button {
-  background-color: green;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  padding: 3px 5px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font: 16px 'Ubuntu', sans-serif;
-  -webkit-transition-duration: 0.33s; /* Safari */
-  transition-duration: 0.25s;
-}
-b { font: bold 24px 'Ubuntu', sans-serif; }
-a { color: #00B7FF; }
-p { margin: 0px 0px 0px 0px; font: 16px 'Ubuntu', sans-serif; }
+input { width: 275px; }
 form {
   margin: auto;
   width: 310px;
 }
-#content-wrapper { width: 600px; margin: auto; margin-top: 1em; padding: 10px 0px; background: #37cac5; border-radius: 25px; }
+#content-wrapper { width: 600px; }
 #form-wrapper {
   position: relative;
 }

diff --git a/public/stylesheets/programError.css b/public/stylesheets/programError.css
@@ -1,39 +1,6 @@
-body {
-  background: orange url(../images/background.jpg) no-repeat fixed center center;
-  background-size: cover; 
-  margin: 0px;
-}
 form { margin: auto; width: 50px; }
-button:hover { color: black; background: lawngreen; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }
-button {
-  background-color: green;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  padding: 3px 5px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font: 16px 'Ubuntu', sans-serif;
-  -webkit-transition-duration: 0.33s; /* Safari */
-  transition-duration: 0.25s;
-}
-p { margin: 0px 0px 0px 0px; font: 14px 'Ubuntu', sans-serif; display: inline-block; }
-h1 { margin: 0px 0px 0px 0px; font: bold 32px 'Ubuntu', sans-serif; text-align: center; }
-h2 { margin: 10px 0px 0px 0px; font: 20px 'Ubuntu', sans-serif; display: inline-block; padding: 0px 5px 0px 0px; }
-#content-wrapper { width: 600px; margin: auto; margin-top: 1em; padding: 10px; background: #37cac5; border-radius: 25px; }
-#message { text-align: center; }
+h1 { font-size: 36px; }
+p { display: inline-block; }
 
-#footer { 
-  background: linear-gradient(rgba(255,0,0,0), rgba(244,192,34,1) 30%);
-  width: 100%; 
-  height: 1.5em; 
-  padding: 5px 10px;
-  position: fixed;
-  bottom: 0px;
-}
-#footer p, #footer a {
-  float: left;
-  padding-top: 5px;
-  padding-right: 10px;
-}
+#content-wrapper { width: 600px; }
+#message { text-align: center; }
diff --git a/public/stylesheets/programOutput.css b/public/stylesheets/programOutput.css
@@ -1,32 +1,4 @@
-body {
-  background: orange url(../images/background.jpg) no-repeat fixed center center;
-  background-size: cover; 
-  margin: 0px;
-}
-input {
-  width: 250px;
-  border: 2px dashed #D1C7AC;
-  border-left: 4px solid #3366FF;
-  font: 20px 'Ubuntu', sans-serif;
-}
-button:hover { color: black; background: lawngreen; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }
-button {
-  background-color: green;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  padding: 3px 5px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font: 16px 'Ubuntu', sans-serif;
-  -webkit-transition-duration: 0.33s; /* Safari */
-  transition-duration: 0.25s;
-}
-b { padding-top: 1em; font: bold 30px 'Ubuntu', sans-serif; }
-a { color: #00B7FF; }
-p { margin: 0px 0px 0px 0px; font: 16px 'Ubuntu', sans-serif; }
-#content-wrapper { width: 610px; margin: auto; margin-top: 1em; padding: 10px; background: #37cac5; border-radius: 25px; }
+#content-wrapper { width: 610px; }
 #message {
   text-align: center;
   margin: auto;
@@ -35,17 +7,3 @@ p { margin: 0px 0px 0px 0px; font: 16px 'Ubuntu', sans-serif; }
 #copyButton, form { display: inline-block; }
 #copyButton { margin-left: 20px; }
 #copyTarget { font-size: 18px; }
-
-#footer {
-  background: linear-gradient(rgba(255,0,0,0), rgba(244,192,34,1) 30%);
-  width: 100%;
-  height: 1.5em;
-  padding: 5px 10px;
-  position: fixed;
-  bottom: 0px;
-}
-#footer p, #footer a {
-  float: left;
-  padding-top: 5px;
-  padding-right: 10px;
-}
diff --git a/views/layout.pug b/views/layout.pug
@@ -4,5 +4,6 @@ html
     title CMS
     //- Jquery 3.3.1
     script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js")
+    link(rel='stylesheet', href='/stylesheets/layout.css')
   body
     block content
diff --git a/views/programOutput.pug b/views/programOutput.pug
@@ -1,6 +1,7 @@
 html
   head
     title CMS: Program Output
+    link(rel='stylesheet', href='/stylesheets/layout.css')
     link(rel='stylesheet', href='/stylesheets/programOutput.css')
   body
     div(id="content-wrapper")