diff --git a/resources/app/stylesheets/app.less b/resources/app/stylesheets/app.less index 05821b6..cd517a5 100644 --- a/resources/app/stylesheets/app.less +++ b/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 { @@ -152,7 +151,7 @@ form { .flash--error { .flash; border-color: @error-color; - + .flash__heading--error { margin: 0; background-color: @error-color; @@ -162,7 +161,7 @@ form { margin-right: -.7rem; } } - + .flash { grid-column: 1 e("/") 3; .thin-border; diff --git a/src/wanijo/framework/view.clj b/src/wanijo/framework/view.clj index 53068ce..abd1694 100644 --- a/src/wanijo/framework/view.clj +++ b/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"]]]])))