remove less, transform to modern css

master
Josha von Gizycki 1 day ago
parent 7d7218a93f
commit b3ec1b77c1

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

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

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

Loading…
Cancel
Save