Merge pull request #51 from oss-slu/rerum-css-consolidation

Issue #27 - Rerum CSS Consolidation
oss-slu · Dec 2, 2024 · 305c690 · 305c690
2 parents 934d422 + 8975d76
commit 305c690
Show file tree

Hide file tree

Showing 9 changed files with 220 additions and 286 deletions.
diff --git a/web/about.html b/web/about.html
@@ -6,46 +6,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script src="./js/playground.js" type="module"></script>
         <script src="./js/about.js"></script>
-        <link rel="stylesheet" href="styles.css">
+        <link rel="stylesheet" href="./css/playground.css">
+        <link rel="stylesheet" href="./css/about.css">
         <link rel="stylesheet" href="https://unpkg.com/chota@latest">
         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-        <style>
-            .button{
-                display: inline-block;
-                height: 38px;
-                padding: 0 30px;
-                color: #555;
-                text-align: center;
-                font-size: 11px;
-                font-weight: 600;
-                line-height: 38px;
-                letter-spacing: .1rem;
-                text-transform: uppercase;
-                text-decoration: none;
-                white-space: nowrap;
-                background-color: transparent;
-                border-radius: 4px;
-                border: 1px solid #bbb;
-                cursor: pointer;
-                box-sizing: border-box;
-            }
-
-            .fa-home:before {
-                content: "\f015";
-            }
-            .fa-comment-o:before {
-                content: "\f0e5";
-            }
-            .fa-map-marker:before {
-                content: "\f041";
-            }
-            .fa-wrench:before {
-                content: "\f0ad";
-            }
-            .fa-cubes:before {
-                content: "\f1b3";
-            }
-        </style>
     </head>
 
     <body>
@@ -54,8 +18,7 @@
         <header>
             <div class="header">
                 <div class="row">
-                    <button 
-                        style="font-size:40px;cursor:pointer;padding:8px 0px 0px 25px;background:none;border:none;" 
+                    <button
                         onclick="openCloseMenu()" 
                         aria-label="Toggle Menu"
                     >

diff --git a/web/css/about.css b/web/css/about.css
@@ -0,0 +1,6 @@
+/*This file contains styling rules for use within the About page.*/
+
+.json p{
+    text-align: left;
+    margin: 0px;
+}
diff --git a/web/css/footer.css b/web/css/footer.css
@@ -0,0 +1,72 @@
+/*This file contains styling rules to be applied when the page footer is loaded.*/
+
+/*Footer and button styling from RERUM homepage.*/
+footer {
+    z-index: 3;
+    position:fixed;
+    bottom:0;
+    width:100vw;
+    overflow: hidden;
+    padding: 1rem 0;
+    background-color: #dfdfdf;
+    font-family:Arial, Helvetica, sans-serif;
+}
+
+footer .button {
+    border-color: transparent;
+    margin:0;
+    width: 23%;
+    float: left;
+    box-sizing: border-box;
+}
+
+footer .button:hover{
+    background-color: #a3d1ff;
+}
+
+footer::before{
+    content: "";
+    position: absolute;
+    box-shadow: 0 0 3rem #001e3c;
+    height: 2rem;
+    top: -2.5rem;
+    width: 120%;
+    left: -10%;
+}
+
+/*RERUM homepage footer icons.*/
+.fa-home:before {
+    content: "\f015";
+}
+.fa-comment-o:before {
+    content: "\f0e5";
+}
+.fa-map-marker:before {
+    content: "\f041";
+}
+.fa-wrench:before {
+    content: "\f0ad";
+}
+.fa-cubes:before {
+    content: "\f1b3";
+}
+
+.button{
+    display: inline-block;
+    height: 38px;
+    padding: 0 30px;
+    color: #555;
+    text-align: center;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 38px;
+    letter-spacing: .1rem;
+    text-transform: uppercase;
+    text-decoration: none;
+    white-space: nowrap;
+    background-color: transparent;
+    border-radius: 4px;
+    border: 1px solid #bbb;
+    cursor: pointer;
+    box-sizing: border-box;
+}
diff --git a/web/css/index.css b/web/css/index.css
@@ -0,0 +1,7 @@
+/*This file contains styling rules for use within the Home page.*/
+
+p{
+    max-width: 800px;
+    margin: auto;
+    text-align: center;
+}
diff --git a/web/styles.css → web/css/playground.css b/web/styles.css → web/css/playground.css
@@ -1,3 +1,5 @@
+/*This file contains styling rules for use across multiple pages in the Playground.*/
+
 body{
     margin: 0;
     padding: 0;
@@ -98,66 +100,12 @@ body{
     margin: 0 auto;
 }
 
-.catalogEntry {
-    padding: 10px;
-    border: 2px solid black;
-    margin: 10px;
-    text-align: center;
-    display: inline-block;
-    vertical-align: top;
-    width: 30%;
-    position: relative;
-}
-
 h4 { 
     text-align: center;
     font-size: 24px;
     margin-top: 20px;
 }
 
-.input-group {
-    display: flex;
-    margin-bottom: 10px;
-}
-
-.input-group input {
-    flex-grow: 1;
-    margin-right: 10px;
-    padding: 6px 10px;
-    font-size: 16px;
-    line-height: 1.5;
-}
-
-#manifestMessage {
-    margin-top: 10px;
-    font-weight: bold;
-}
-
-.manifestInfo {
-    text-align: center;
-    background: #a3d1ff;
-}
-
-.manifestInfo p{
-    margin-bottom: 0px;
-}
-
-#loadManifest {
-    background-color: #7397f9;
-    color: white;
-    border: none;
-    padding: 6px 20px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin: 0;
-    cursor: pointer;
-    line-height: 1.5;
-    text-transform: none;
-    vertical-align: middle;
-}
-
 body {
     font-family: Arial, Helvetica, sans-serif;
 }
@@ -181,61 +129,10 @@ p{
     margin-bottom: 10px;
 }
 
-.json p{
-    text-align: left;
-    margin: 0px;
-}
-
 .spacer{
     margin-top: 100px;
 }
 
-.recent-badge{
-    display: inline-block;
-    padding: 4px 8px;
-    background-color: #f00;
-    color: white;
-    font-size: 10px;
-    border-radius: 4px;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
-
-/*Footer and button styling from RERUM homepage.*/
-footer {
-    z-index: 3;
-    position:fixed;
-    bottom:0;
-    width:100vw;
-    overflow: hidden;
-    padding: 1rem 0;
-    background-color: #dfdfdf;
-    font-family:Arial, Helvetica, sans-serif;
-}
-
-footer .button {
-    border-color: transparent;
-    margin:0;
-    width: 23%;
-    float: left;
-    box-sizing: border-box;
-}
-
-footer .button:hover{
-    background-color: #a3d1ff;
-}
-
-footer::before{
-    content: "";
-    position: absolute;
-    box-shadow: 0 0 3rem #001e3c;
-    height: 2rem;
-    top: -2.5rem;
-    width: 120%;
-    left: -10%;
-}
-
 .button:focus{
     color: #333;
     border-color: #888;
@@ -263,46 +160,10 @@ footer::before{
     margin-top: 5px;
 }
 
-.spinner {
-    width: 40px;
-    height: 40px;
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #3498db;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-.manifest-loader {
-    max-width: 600px;
-    margin: 20px auto;
-    text-align: left;
-    position: relative;
-    min-height: 100px;
-}
-
-.loading-overlay {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.9);
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    z-index: 1000;
-    padding: 20px;
-}
-
-.loading-text {
-    margin-top: 10px;
-    font-weight: bold;
-    color: #3498db;
-    font-size: 16px;
+.header button{
+    font-size: 40px;
+    cursor: pointer;
+    padding: 8px 0px 0px 25px;
+    background: none;
+    border: none;
 }