another futile attempt to make things more beautiful

resources/app/stylesheets/app.less

@@ -1,13 +1,14 @@
 @ci-color: #ccc;
+@ci-blue: Highlight;
 @error-color: #e00;
 @accent-color: #efefef;
+@background-color: Window;
 @border-stack: 1px solid @ci-color;
 @text-padding-v: .2rem;
 @text-padding-h: 1rem;
 @accent-border-width: .3rem;
 @accent-border: @accent-border-width solid @ci-color;
 @element-margin: .6rem;
-@element-background: #F0F0F0;
 
 body {
     font-family: sans-serif;
@@ -31,7 +32,7 @@ h1 {
 
 h2 {
     font-size: 1.3rem;
-    border-bottom: @border-stack;
+    border-bottom: 1px solid @ci-blue;
 }
 
 .thin-border {
@@ -40,29 +41,64 @@ h2 {
 
 .accent-border-element {
     border-left: @accent-border;
-    background-color: @element-background;
     margin: @element-margin;
     padding: 1rem;
 }
 
+.__icon {
+    color: @ci-blue;
+    font-weight: bold;
+}
+
 .grid {
     display: grid;
     grid-template-columns: 20% 70% 10%;
     grid-template-areas:
     "header header header"
-        "nav    main   sidebar"
+        // "nav    main   sidebar"
+        "nav main main"
         "footer footer footer";
     margin: auto;
     max-width: 1500px;
 
+    header {
+        grid-area: header;
+        display: grid;
+        grid-template-columns: 40% 60%;
+        align-items: center;
+        .accent-border-element;
+        background-color: @background-color;
+
+        .app-title {
+            grid-column: 1;
+            font-size: 1.5rem;
+        }
+
+        .app-title__hello {
+            font-size: 1rem;
+            margin-left: @text-padding-h;
+            font-weight: normal;
+            font-style: italic;
+        }
+
+        .header-content {
+            grid-column: 2;
+        }
+
+        .header-content__link {
+            display: inline-block;
+            margin-right: @accent-border-width;
+        }
+    }
+
     nav {
         grid-area: nav;
         .accent-border-element;
+        background-color: @background-color;
     }
 
     main {
         grid-area: main;
-        .accent-border-element;
 
         .schema-title__name {
             font-weight: normal;
@@ -86,49 +122,12 @@ h2 {
     footer {
         grid-area: footer;
         .accent-border-element;
+        background-color: @background-color;
     }
 
     header, footer, main, nav, aside {
         padding: @text-padding-v @text-padding-h;
     }
-
-    header {
-        grid-area: header;
-        display: grid;
-        grid-template-columns: 40% 60%;
-        align-items: center;
-        .accent-border-element;
-
-        .app-title {
-            grid-column: 1;
-            font-size: 1.5rem;
-        }
-
-        .app-title__hello {
-            font-size: 1rem;
-            margin-left: @text-padding-h;
-            font-weight: normal;
-            font-style: italic;
-        }
-
-        .header-content {
-            grid-column: 2;
-        }
-
-        .header-content__link {
-            display: inline-block;
-            padding: @text-padding-v * 2 @text-padding-h;
-            margin-right: @accent-border-width;
-            background-color: #E0E0E0;
-            border: 0;
-            border-bottom: .3rem solid @ci-color;
-            cursor: pointer;
-
-            &:hover {
-                background-color: darken(#E0E0E0, 3%);
-            }
-        }
-    }
 }
 
 form {

src/wanijo/framework/view.clj

@@ -44,7 +44,7 @@
         (when authed?
           [:section.header-content
            (btnlink (path :schema-overview)
-                    "▤ Schemas"
+                    "Schemas"
                     "header-content__link")
            (btnlink (path :auth-logout)
                     "Logout!"
@@ -52,16 +52,16 @@
        [:nav
         (when authed?
           [:section.schemas
-           [:h2 "▤ Created Schemas"]
+           [:h2 [:span.__icon "▤"] "Created Schemas"]
            [:ul
             (for [schema (:created-schemas session)]
               [:li (:name schema)])]
-           [:h2 "▤ Other Schemas"]
+           [:h2 [:span.__icon "▤"] "Other Schemas"]
            [:ul
             (for [schema (:other-schemas session)]
               [:li (:name schema)])]])]
        (into [:main] content)
-       [:aside (when authed? "aside")]
+;;       [:aside (when authed? "aside")]
        [:footer
         [:small "Ilo pali e ijo"]]]])))