code: added fluid design

1. added bootstrap fixed navbar which collapses menu for smaller screen resolutions 2. added container-fluid classes to scale with viewport and made some color and CSS changes 3. cleaned up code and alignment for HTML tags 4. added comments for HTML tags, replaced huge share URL links with Google shortened URLs for better readability Signed-off-by: nj2237 <[email protected]>
OpenGenus · Mar 19, 2018 · c11e12f · c11e12f
1 parent 04faf00
commit c11e12f
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 114 deletions.
diff --git a/code/css/popup.css b/code/css/popup.css
@@ -1,5 +1,4 @@
-html,body
-{
+html,body {
     width: 100%;
     height: 100%;
     margin: 0px;
@@ -8,10 +7,63 @@ html,body
     position:absolute;
 
 }
+
 body {
 
     font-family: 'Roboto Mono', monospace;
 }
+
+#theNavBar {
+    background-color: white;
+    border-bottom: 1px solid gray;
+}
+
+.navbar-brand>img {
+    height: 5%;
+    width: auto;
+}
+
+.navbar-expand-md .navbar-toggler {
+    background-color: #FEF200;
+    margin-right: 2%;
+}
+
+.nav-item {
+    text-align: center;
+}
+
+#topNavBar > li > a {
+    color: gray;
+    font-weight: bold;
+}
+
+#topNavBar > li > a:hover {
+    color: #333;
+    border: 0.75px solid #555;
+    border-radius: 3.7px;
+    background-color: #FEF200;
+}
+
+.dropdown_button {
+    background-color: transparent;
+    background-repeat:no-repeat;
+    border: none;
+    cursor:pointer;
+    overflow: hidden;
+    outline:none;
+    color: gray;
+}
+
+#pop-tags {
+    text-align: center;
+}
+
+#jumbo {
+    background-color: #ffffaa;
+    width: 95%;
+    margin: auto;
+}
+
 article {
     display: block;
     text-align: left;
@@ -37,13 +89,12 @@ footer {
     text-align: center;
 }
 
-.sortbythis:hover
-{
+.sortbythis:hover {
     cursor: pointer;
     background-color: #ffc10757;
 }
 
-#sortfavby{
+#sortfavby {
 background: none repeat scroll 0 0 #FFFFFF;
 border: 1px solid #E5E5E5;
 border-radius: 5px 5px 5px 5px;
@@ -54,21 +105,12 @@ padding: 10px;
 min-width: 120px;
 }
 
-#favSearchInputBox
-{
+#favSearchInputBox {
     text-align: center;
     float:center; 
 }
 
-.navbar-brand {
-    padding: 0px;
-}
-.navbar-brand>img {
-    height: 10%;
-    padding: 15px;
-    width: auto;
-}
-.btn-xs{
+.btn-xs {
     margin-top: 7px;
     height: 24px;
     font-size: 12px;
@@ -152,6 +194,10 @@ form {
     background-color:#fff
 }
 
+h1 {
+    text-align: center;
+}
+
 h2 {
     background-color:#fcee45;
     padding:20px 35px;
@@ -165,25 +211,14 @@ h4 {
 }
 
 hr {
-    margin:10px -50px;
-    border:0;
-    border-top:1px solid #ccc
+    margin: 10px -50px;
+    border: 0;
+    border-top: 1px solid #ccc
 }
 
-.dropdown_button
-{
-    background-color: Transparent;
-    background-repeat:no-repeat;
-    border: none;
-    cursor:pointer;
-    overflow: hidden;
-    outline:none;
-    color: #077bff;
-}
-
-ul.share-buttons{
+ul.share-buttons {
   list-style: none;
-  padding: 0;
+  padding-top: 5px;
 }
 
 ul.share-buttons li{
@@ -226,7 +261,7 @@ ul.share-buttons .sr-only{
   padding: 5px;
 }
 
-#share-footer{
+#share-footer {
     background-color:#FFFA79;
     margin:-2px -50px 0 -50px;
     text-align:center;