Improve main container CSS

matze · Aug 11, 2024 · b30aeaa · b30aeaa
1 parent 009e5f3
commit b30aeaa
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 50 deletions.
diff --git a/src/themes/style.css b/src/themes/style.css
@@ -38,7 +38,13 @@ body {
   font-family: "JetBrains Mono", monospace;
   padding: 0;
   margin: 0;
-  height: 90dvh;
+  height: 100vh;
+}
+
+#main-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 header {
@@ -48,6 +54,11 @@ header {
   padding: 0 1em 0 1em;
 }
 
+content {
+  flex-grow: 1;
+  padding: 1em 2em 1em 2em;
+}
+
 #nav-title {
   margin-right: auto;
 }
@@ -138,21 +149,21 @@ a, a:visited, a:hover {
 .container {
   display: grid;
   grid-template-columns: 4fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr 1fr 20fr;
+  grid-template-rows: 1fr;
   grid-gap: 2em;
   height: 100%;
   align-items: stretch;
   justify-items: stretch;
-  margin: 1em 2em 0em 2em;
 }
 
 .content {
   grid-area: content;
   grid-column: 1/2;
-  grid-row: 1/7;
+  grid-row: 1/2;
 }
 
 .content > textarea {
+  display: block;
   width: 100%;
   height: 100%;
   border: none;
@@ -167,24 +178,12 @@ a, a:visited, a:hover {
   outline: none !important;
 }
 
-.extensions-list {
+.controls {
   grid-row: 1/2;
 }
 
-.extension-filter {
-  grid-row: 2/3;
-}
-
-.expiration-list {
-  grid-row: 3/4;
-}
-
-.password {
-  grid-row: 4/5;
-}
-
-.paste-button {
-  grid-row: 5/6;
+.expiration-list, .password, .paste-button {
+  margin-top: 2em;
 }
 
 .extension-filter > input {

diff --git a/templates/base.html b/templates/base.html
@@ -10,14 +10,18 @@
     {% block head %}{% endblock %}
   </head>
   <body>
-    <header>
-      <span id="nav-title"><a href="{{ base_path.path() }}"><button>home</button></a></span>
-      <nav>
-        <ul>
-          {% block nav %}{% endblock %}
-        </ul>
-      </nav>
-    </header>
-    {% block content %}{% endblock %}
+    <div id="main-container">
+      <header>
+        <span id="nav-title"><a href="{{ base_path.path() }}"><button>home</button></a></span>
+        <nav>
+          <ul>
+            {% block nav %}{% endblock %}
+          </ul>
+        </nav>
+      </header>
+      <content>
+        {% block content %}{% endblock %}
+      </content>
+    </div>
   </body>
 </html>
diff --git a/templates/index.html b/templates/index.html
@@ -63,28 +63,30 @@
         <div class="content">
           <textarea id="text" name="text" autocorrect="off" autocomplete="off" spellcheck="false" placeholder="<paste text or drop file here>" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" autofocus></textarea>
         </div>
-        <div class="extensions-list">
-          <select name="extension" id="langs" size="17">
-          {%- for syntax in meta.highlight.syntaxes -%}
-            {%- if syntax.file_extensions.len() > 0 %}
-            <option value="{{ syntax.file_extensions.first().unwrap() }}">{{ syntax.name }}</option>
-            {%- endif -%}
-          {%- endfor %}
-          </select>
-        </div>
-        <div class="extension-filter">
-          <input type="search" id="filter" placeholder="Filter ..." onchange="filterLangs(event);" onkeyup="filterLangs(event)"></input>
-        </div>
-        <div class="expiration-list">
-          <select name="expires" size="8">
-            {{- Self::expiry_options(self)|safe }}
-          </select>
-        </div>
-        <div class="password">
-          <input type="password" name="password" id="password" placeholder="Password ..."></input>
-        </div>
-        <div class="paste-button">
-          <button type="submit" title="Paste" class="button">Paste</button>
+        <div class="controls">
+          <div class="extensions-list">
+            <select name="extension" id="langs" size="17">
+            {%- for syntax in meta.highlight.syntaxes -%}
+              {%- if syntax.file_extensions.len() > 0 %}
+              <option value="{{ syntax.file_extensions.first().unwrap() }}">{{ syntax.name }}</option>
+              {%- endif -%}
+            {%- endfor %}
+            </select>
+          </div>
+          <div class="extension-filter">
+            <input type="search" id="filter" placeholder="Filter ..." onchange="filterLangs(event);" onkeyup="filterLangs(event)"></input>
+          </div>
+          <div class="expiration-list">
+            <select name="expires" size="8">
+              {{- Self::expiry_options(self)|safe }}
+            </select>
+          </div>
+          <div class="password">
+            <input type="password" name="password" id="password" placeholder="Password ..."></input>
+          </div>
+          <div class="paste-button">
+            <button type="submit" title="Paste" class="button">Paste</button>
+          </div>
         </div>
       </div>
     </form>