Add favicon. Significantly modify layout and presentation of site by including flexbox for main content. Remove logo from index. Code whitespace updates on Sharing-SQLite

views/cassius/style.cassius

@@ -9,24 +9,40 @@ html
   color: 						#{colorOne}
 
 body
-  font-size:        20px
-  text-align: 			left
+  margin:     3% 10% 0 10% 
+  font-size:  20px
+  text-align: left
 
 h2
   font-family:    monaco, Consolas, monospace
   text-transform: uppercase
 
+h3
+  margin: 0.25em 0 0.25em 0
+
 p
   margin: 0.4em 0 0.4em 0
 
 a
   color: #{colorThree}
 
+.title
+  margin:    0 auto 0 auto
+  font-size: 2em
+  color:     #{colorThree}
+
+.titleLink
+  all:    unset 
+  cursor: pointer
+
+.title h1
+  margin: 0.1em 0 0.1em 0
+
 .htmx-indicator
   display: none
 
 ::placeholder
-  color: #{colorOne}
+  color:   #{colorOne}
   opacity: 1
 
 .logo
@@ -36,7 +52,10 @@ a
   text-align: center
 
 .content 
-  margin: 0 15% 0 15% 
+  display: flex
+
+.column
+  flex: 50%
 
 .emptyReq
   height: 1%
@@ -49,10 +68,19 @@ a
   border-style:     none
   text-decoration:  none
 
+.genButton
+  width:            40%
+  margin:           0 0 0.25em 0
+  padding: 					0.75em 1.75em
+  background-color: #{colorThree}
+  color: 					  #{colorTwo}
+  border-style:     none
+  text-decoration:  none
+
 .mainInput
   font-weight:				400
   font-size: 					1em
-  width:              50%
+  max-width:          50%
   outline: 						none
   color: 							#{colorOne}
   background: 				#{colorTwo}
@@ -102,49 +130,60 @@ a
   color:   #{colorThree}
   opacity: 0.5
 
-.pwResult
-  font-size: 1.5em
+.genResult
   color: #{colorFour}
 
-.pwUtils
-  width:  75%
-
-.generators
-  margin: 5% 0 0 0
+.pwResult
+  margin:    0 0 1em 0
+  font-size: 1.5em
+  color:     #{colorFour}
 
 .shareNew
   margin-bottom: 2em
 
-.title
-  font-size: 2em
-  color:     #{colorOne}
-  text-decoration: none
+.requestNew
+  margin-top: 1em
 
-.titleLink
-  all:             unset 
-  cursor:          pointer
+.requestedPw
+  max-width: 85%
 
-.title h1
-  margin: 0.1em 0 0.3em 0
+.resLink
+  font-size: 0.75em
+
+.validForm
+  margin: 0.5em 0 0 0
 
 @media only screen and (max-width : 768px)
   body
     text-align: center
-    font-size: 16px
+    font-size:  16px
+
+  .content
+    display: block
+
+  .mainButton
+    width: 80%
+
+  .genButton
+    width: 80%
 
   .mainInput
-    width: 95% 
+    width:      95% 
+    max-width:  100%
     text-align: center
 
   .numberInput
     width: 25%
 
   .title
-    margin: 8% auto 2% auto
+    margin:    8% auto 2% auto
     font-size: 3em
   
   .title h1
     margin-bottom: 0
+  
+  .requestedPw
+    max-width: 100%
 
-  .pwUtils 
+  .shareUtils 
     width: 100%