more layout improvements

Bolt-Scripts · Sep 2, 2019 · d245e24 · d245e24
1 parent 978bbda
commit d245e24
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/css/main.css b/css/main.css
@@ -98,6 +98,16 @@ footer .right {
   width: 100%;
 }
 
+.main-stuff > p {
+  margin: 0;
+}
+
+.main-stuff .subtitle {
+  font-size: x-small;
+  margin-top: 3px;
+  margin-bottom: 6px;
+}
+
 .results {
   overflow-y: scroll;
 }
@@ -106,9 +116,15 @@ footer .right {
   margin-bottom: 15px;
 }
 
-.code-item {
-  -webkit-box-shadow: 0px 2px 4px 0px black;
-          box-shadow: 0px 2px 4px 0px black;
+.searchbar {
+  font-size: larger;
+}
+
+@media only screen and (min-aspect-ratio: 3 / 2) {
+  .code-item {
+    -webkit-box-shadow: 0px 2px 4px 0px black;
+            box-shadow: 0px 2px 4px 0px black;
+  }
 }
 
 .code-item > pre {

diff --git a/css/main.scss b/css/main.scss
@@ -78,6 +78,17 @@ footer{
     position: fixed;
     height: 100%;
     width: 100%;
+
+    >p{
+        margin: 0;
+    }
+
+    .subtitle{
+        font-size: x-small;
+
+        margin-top: 3px;
+        margin-bottom: 6px;
+    }
 }
 
 .results{
@@ -88,8 +99,16 @@ footer{
     }
 }
 
+.searchbar{
+    font-size: larger;
+}
+
 .code-item{
-    box-shadow: 0px 2px 4px 0px black;
+
+    @media only screen and (min-aspect-ratio: $aspect) {
+        box-shadow: 0px 2px 4px 0px black;
+    }
+
 
     >pre{
         border-bottom: double black 3px;

diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
-    
+
     <script src="/UnityShaderCompendium/js/utility/InitFB.js"></script>
     <script src="/UnityShaderCompendium/js/utility/FbHitCounter.js"></script>
     <script src="/UnityShaderCompendium/js/json/Output.json"></script>
@@ -24,7 +24,8 @@
             <div class="main-stuff">
                 <div>
                     <p>Search the Compendium</p>
-                    <input data-bind="textInput: searchPhrase, event:{keyup: CheckFilter}">
+                    <p class="subtitle">Search the Compendium</p>
+                    <input class="searchbar" data-bind="textInput: searchPhrase, event:{keyup: CheckFilter}">
                 </div>
 
                 <div class="results" data-bind="foreach: searchResults">