big changes to the UI

client/homebrew/pages/archivePage/archivePage.jsx

@@ -425,22 +425,12 @@ const ArchivePage = createClass({
                 {this.renderNavItems()}
 
                 <div className="content">
-                    <div className="welcome">
+                    <div className="form dataGroup">{this.renderForm()}</div>
-                        <h1>Welcome to the Archive</h1>
-                    </div>
-                    <div className="flexGroup">
-                        <div className="form dataGroup">
-                            {this.renderForm()}
-                        </div>
                     <div className="resultsContainer dataGroup">
-                            <div className="title">
-                                <h2>Your search returned these results</h2>
-                            </div>
                         {this.renderFoundBrews()}
                     </div>
                 </div>
             </div>
-            </div>
         );
     },
 });

client/homebrew/pages/archivePage/archivePage.less

@@ -8,6 +8,7 @@ body {
     small {
         font-size: 10pt;
         color: #555;
+
         a {
             color: #333;
         }
@@ -29,33 +30,15 @@ body {
     height: 100%;
     background-color: #2C3E50;
 
-    h1,h2,h3 {
+    h1,
+    h2,
+    h3 {
         font-family: 'Open Sans';
         color: white;
         font-weight: 900;
     }
 
     .content {
-        display: grid;
-        grid-template-rows: 20vh 1fr;
-
-        .welcome {
-            display: grid;
-            place-items: center;
-            background: url('https://i.imgur.com/MJ4YHu7.jpg');
-            background-size: 100%;
-            background-position: center;
-            height: 20vh;
-            border-bottom: 5px solid #333;
-
-            h1 {
-                font-size: 40px;
-                filter:drop-shadow(0 0 5px black);
-            }
-        }
-
-        .flexGroup {
-            height: 100%;
         display: grid;
         grid-template-columns: 500px 2fr;
         background: #2C3E50;
@@ -81,12 +64,15 @@ body {
                     display: flex;
                     flex-direction: column;
                 }
+
                 label {
                     margin: 10px 0;
                 }
+
                 input {
                     margin: 0 10px;
                 }
+
                 #searchButton {
                     position: absolute;
                     right: 10px;
@@ -106,22 +92,13 @@ body {
                 font-family: "BookInsanityRemake";
                 font-size: .34cm;
 
-                    .title {
-                        height: 10vh;
-                        background-color: #333;
-                        display: grid;
-                        place-items: center;
 
-                        h2 {
-                            font-size: 30px;
-                        }
-                    }
                 .foundBrews {
                     position: relative;
                     background-color: #2C3E50;
                     width: 100%;
                     max-height: 100%;
-                        height: 66.8vh;
+                    height: 100%;
                     padding: 50px;
                     overflow-y: scroll;
 
@@ -140,7 +117,10 @@ body {
                         place-items: center;
                         color: white;
 
-                            h3 { position: relative;}
+                        h3 {
+                            position: relative;
+                        }
+
                         h3.searchAnim::after {
                             content: "";
                             width: max-content;
@@ -165,6 +145,7 @@ body {
                         z-index: 1000;
                         font-family: 'Open Sans';
                     }
+
                     .brewItem {
                         background-image: url('/assets/parchmentBackground.jpg');
                         width: 48%;
@@ -174,6 +155,7 @@ body {
                         &:nth-child(even of .brewItem) {
                             margin-right: 0;
                         }
+
                         h2 {
                             font-size: 0.75cm;
                             line-height: 0.988em;
@@ -229,11 +211,13 @@ body {
                                 &.firstPage {
                                     margin-right: -5px;
                                 }
+
                                 &.lastPage {
                                     margin-left: -5px;
                                 }
                             }
                         }
+
                         button {
                             width: max-content;
                             border-radius: 5px;
@@ -257,19 +241,21 @@ body {
         }
     }
 }
-}
-
 
 @keyframes trailingDots {
-    0%,32% {
+
+    0%,
+    32% {
         content: '.';
     }
 
-    33%, 65% {
+    33%,
+    65% {
         content: '..';
     }
 
-    66%,100% {
+    66%,
+    100% {
         content: '...';
     }
 }