josha
/
wanijo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

remove less, transform to modern css

Browse Source
master
Josha von Gizycki 1 day ago
parent 7d7218a93f
commit b3ec1b77c1
3 changed files with 71 additions and 67 deletions
Show Stats Download Patch File Download Diff File

6
project.clj
Unescape Escape View File

@ -56,7 +56,7 @@
[dorothy "0.0.7"]] [dorothy "0.0.7"]]
:profiles {:dev {:plugins [;; web stuff :profiles {:dev {:plugins [;; web stuff
[lein-less "1.7.5"] #_[lein-less "1.7.5"]
[joshavg/lein-neo4j "0.5.0"] [joshavg/lein-neo4j "0.5.0"]
@ -73,8 +73,6 @@
:neo4j {:path "neo4j"} :neo4j {:path "neo4j"}
:repl-options {:init-ns wanijo.infra.repl} :repl-options {:init-ns wanijo.infra.repl}
:less {:source-paths ["resources/app/stylesheets"] :aliases {"uberjar" ["do" #_["less" "once"] "uberjar"]}
:target-path "resources/public/css"}
:aliases {"uberjar" ["do" ["less" "once"] "uberjar"]}
:hiera {:cluster-depth 2} :hiera {:cluster-depth 2}
:eastwood {:namespaces [:source-paths]}) :eastwood {:namespaces [:source-paths]})

98
resources/app/stylesheets/app.less → resources/public/css/style.css
Unescape Escape View File

@ -1,22 +1,24 @@
@ci-highlight: Highlight; :root {
@error-color: #e00; --cli-highlight: Highlight;
@warn-color: #eebc00; --error-color: #e00;
@accent-color: #efefef; --warn-color: #eebc00;
@body-background-color: #fcfcfc; --accent-color: #efefef;
@background-color: #eee; --body-background-color: #fcfcfc;
@ci-color: #aaa; --background-color: #eee;
@border-stack: 1px solid @ci-color; --ci-color: #aaa;
@text-padding-v: .2rem; --border-stack: 1px solid @ci-color;
@text-padding-h: 1rem; --text-padding-v: .2rem;
@accent-border-width: .3rem; --text-padding-h: 1rem;
@accent-border: @accent-border-width solid @ci-color; --accent-border-width: .3rem;
@element-margin: .6rem; --accent-border: var(--accent-border-width) solid var(--ci-color);
--element-margin: .6rem;
}
body { body {
font-family: sans-serif; font-family: sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: @body-background-color; background-color: var(--body-background-color);
} }
a:link, a:link,
@ -40,11 +42,11 @@ img, svg {
} }
.thin-border { .thin-border {
border: @border-stack; border: var(--border-stack);
} }
.__icon { .__icon {
color: @ci-highlight; color: var(--ci-highlight);
font-weight: bold; font-weight: bold;
} }
@ -65,11 +67,11 @@ img, svg {
h2 { h2 {
font-size: 1.3rem; font-size: 1.3rem;
border-bottom: 1px solid @ci-highlight; border-bottom: 1px solid var(--ci-highlight);
} }
.attr-type-markdown { .attr-type-markdown {
border: 1px solid @ci-color; border: 1px solid var(--ci-color);
border-radius: .5rem; border-radius: .5rem;
padding: 1rem; padding: 1rem;
@ -98,7 +100,7 @@ img, svg {
} }
header, footer, main, nav, aside { header, footer, main, nav, aside {
padding: @text-padding-v @text-padding-h; padding: var(--text-padding-v) var(--text-padding-h);
} }
header { header {
@ -106,14 +108,13 @@ img, svg {
display: grid; display: grid;
grid-template-columns: 40% 60%; grid-template-columns: 40% 60%;
align-items: center; align-items: center;
margin: 0 @element-margin; margin: 0 var(--element-margin);
//noinspection CssUnknownTarget
background-image: url("/img/logo-full-flipped.svg"); background-image: url("/img/logo-full-flipped.svg");
background-size: contain; background-size: contain;
background-position: right; background-position: right;
background-origin: content-box; background-origin: content-box;
background-repeat: no-repeat; background-repeat: no-repeat;
border-bottom: 1px solid @ci-color; border-bottom: 1px solid var(--ci-color);
.app-title { .app-title {
grid-column: 1; grid-column: 1;
@ -121,7 +122,7 @@ img, svg {
.app-title__hello { .app-title__hello {
font-size: 1rem; font-size: 1rem;
margin-left: @text-padding-h; margin-left: var(--text-padding-h);
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@ -133,21 +134,21 @@ img, svg {
.header-content__link { .header-content__link {
display: inline-block; display: inline-block;
margin-right: @accent-border-width; margin-right: var(--accent-border-width);
} }
} }
} }
nav { nav {
grid-area: nav; grid-area: nav;
padding-right: @element-margin; padding-right: var(--element-margin);
border-right: 1px solid @ci-color; border-right: 1px solid var(--ci-color);
margin-top: @element-margin; margin-top: var(--element-margin);
margin-left: @element-margin; margin-left: var(--element-margin);
h2::before { h2::before {
content: "▤ "; content: "▤ ";
color: @ci-highlight; color: var(--ci-highlight);
} }
h2 { h2 {
@ -211,12 +212,12 @@ form, .sub-form {
grid-column: 1 e("/") 3; grid-column: 1 e("/") 3;
grid-template-columns: 30% 70%; grid-template-columns: 30% 70%;
grid-auto-flow: row; grid-auto-flow: row;
margin-bottom: @text-padding-h; margin-bottom: var(--text-padding-h);
} }
label, input, select, textarea, .flash { label, input, select, textarea, .flash {
margin-bottom: .7rem; margin-bottom: .7rem;
padding: @text-padding-v @text-padding-h / 2; padding: var(--text-padding-v) calc(var(--text-padding-h) / 2);
} }
textarea { textarea {
@ -243,7 +244,7 @@ form, .sub-form {
.flash { .flash {
grid-column: 1 e("/") 3; grid-column: 1 e("/") 3;
.thin-border; .thin-border;
border-left-width: @accent-border-width; border-left-width: var(--accent-border-width);
padding: .7rem; padding: .7rem;
.flash__field { .flash__field {
@ -257,10 +258,10 @@ form, .sub-form {
.flash--error { .flash--error {
.flash; .flash;
border-color: @error-color; border-color: var(--error-color);
.flash__heading--error { .flash__heading--error {
background-color: @error-color; background-color: var(--error-color);
color: white; color: white;
margin: -.7rem -.7rem 0; margin: -.7rem -.7rem 0;
} }
@ -268,10 +269,10 @@ form, .sub-form {
.flash--warn { .flash--warn {
.flash; .flash;
border-color: @warn-color; border-color: var(--warn-color);
.flash__heading--error { .flash__heading--error {
background-color: @warn-color; background-color: var(--warn-color);
color: white; color: white;
margin: -.7rem -.7rem 0; margin: -.7rem -.7rem 0;
} }
@ -303,11 +304,14 @@ table {
thead { thead {
position: sticky; position: sticky;
top: 0; top: 0;
background-color: @body-background-color; background-color: var(--body-background-color);
th { th {
padding: @text-padding-v @text-padding-h padding:
@text-padding-v + .3rem @text-padding-v; var(--text-padding-v)
var(--text-padding-h)
calc(var(--text-padding-v) + .3rem)
var(--text-padding-v);
} }
th[data-sort=desc]::after { th[data-sort=desc]::after {
@ -323,8 +327,10 @@ table {
tbody { tbody {
td { td {
border-bottom: @border-stack; border-bottom: var(--border-stack);
padding: @text-padding-v * 2 @text-padding-h / 2h; padding:
calc(var(--text-padding-v) * 2)
calc(var(--text-padding-h) / 2h);
} }
input[type=submit] { input[type=submit] {
@ -332,7 +338,7 @@ table {
} }
tr:hover { tr:hover {
background-color: @accent-color; background-color: var(--accent-color);
} }
} }
} }
@ -362,7 +368,7 @@ table {
} }
button, input { button, input {
margin-right: @element-margin; margin-right: var(--element-margin);
margin-bottom: 0; margin-bottom: 0;
} }
} }
@ -379,14 +385,14 @@ table {
} }
.single-tag { .single-tag {
border: 1px solid @ci-color; border: 1px solid var(--ci-color);
border-left: .5rem solid @ci-highlight; border-left: .5rem solid var(--ci-highlight);
border-radius: .5rem; border-radius: .5rem;
padding: .1rem .4rem; padding: .1rem .4rem;
} }
.vis-canvas { .vis-canvas {
border: 1px solid @ci-highlight; border: 1px solid var(--ci-highlight);
height: 45rem; height: 45rem;
} }

2
src/wanijo/infra/view.clj
Unescape Escape View File

@ -42,7 +42,7 @@
[:meta {:name "viewport" [:meta {:name "viewport"
:content "width=device-width,initial-scale=1,shrink-to-fit=no"}] :content "width=device-width,initial-scale=1,shrink-to-fit=no"}]
[:title (h (str (when title (str title " - ")) "wanijo"))] [:title (h (str (when title (str title " - ")) "wanijo"))]
(include-css "/css/app.css") (include-css "/css/style.css")
(include-js "/js/scripts.js") (include-js "/js/scripts.js")
head] head]
[:body [:body

Write Preview
Loading…
Cancel
Save