From 1b9529455ddb7590723c57d437e579dc32938a15 Mon Sep 17 00:00:00 2001 From: Carlos Galindo Date: Sat, 24 Jan 2026 00:48:48 +0100 Subject: [PATCH] convert .less files to .css and remove dependency --- Makefile | 12 +------ Makefile_generador | 5 +-- res/less/colors.less | 19 ----------- res/static/colors.css | 22 ++++++++++++ res/{less/index.less => static/index.css} | 14 ++++---- res/{less/main.less => static/main.css} | 38 ++++++++++----------- res/{less/song.less => static/song.css} | 34 +++++++++--------- res_gen/less/colors.less | 1 - res_gen/static/colors.css | 22 ++++++++++++ res_gen/{less/main.less => static/main.css} | 38 ++++++++++----------- res_gen/{less/song.less => static/song.css} | 22 ++++++------ 11 files changed, 119 insertions(+), 108 deletions(-) delete mode 100644 res/less/colors.less create mode 100644 res/static/colors.css rename res/{less/index.less => static/index.css} (74%) rename res/{less/main.less => static/main.css} (60%) rename res/{less/song.less => static/song.css} (71%) delete mode 120000 res_gen/less/colors.less create mode 100644 res_gen/static/colors.css rename res_gen/{less/main.less => static/main.css} (52%) rename res_gen/{less/song.less => static/song.css} (57%) diff --git a/Makefile b/Makefile index b113299..2cfec93 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,6 @@ .PHONY=static all clean ALL_STATIC := $(patsubst res/static/%,public/%,$(wildcard res/static/*)) -ALL_LESS := public/main.css public/index.css public/song.css ALL_TEMPLATES := $(wildcard res/templates/*.html) PY_SRC := $(wildcard src/**.py) @@ -12,7 +11,7 @@ SLO_LINKS ?= false all: public public/audios public/index.html static -static: $(ALL_LESS) $(ALL_STATIC) +static: $(ALL_STATIC) public: mkdir public @@ -31,15 +30,6 @@ public/audios: audios public rm -f public/audios #ln -s ../audios/Canciones public/audios -public/main.css: res/less/main.less res/less/colors.less - lessc $< $@ - -public/index.css: res/less/index.less res/less/colors.less - lessc $< $@ - -public/song.css: res/less/song.less res/less/colors.less - lessc $< $@ - public/%: res/static/% cp -ra $< $@ diff --git a/Makefile_generador b/Makefile_generador index 7592046..54d7f02 100644 --- a/Makefile_generador +++ b/Makefile_generador @@ -6,7 +6,7 @@ PY_SRC := $(wildcard src/**.py) all: generador_public generador_public/index.html static generador_public/res/canciones -static: $(ALL_STATIC) generador_public/main.css generador_public/song.css +static: $(ALL_STATIC) generador_public: mkdir generador_public @@ -20,9 +20,6 @@ generador_public/index.html: $(ALL_TEMPLATES) $(PY_SRC) --other-latex latex/canciones/ \ --author NONE --title NONE -generador_public/%.css: res_gen/less/%.less res/less/colors.less - lessc $< $@ - generador_public/%: res_gen/static/% cp -ra $< $@ diff --git a/res/less/colors.less b/res/less/colors.less deleted file mode 100644 index 5495f9a..0000000 --- a/res/less/colors.less +++ /dev/null @@ -1,19 +0,0 @@ -@background: #FFF; -@background-dark: darken(@background, 100%); -@title: #369; -@title-dark: lighten(@title, 50%); -@subtitle: #444; -@subtitle-dark: lighten(@subtitle, 100%); -@text: #333; -@text-dark: lighten(@text, 100%); -@text-hover: #607D8B; -@text-hover-dark: @text-hover; -@secondary: #EEE; -@secondary-dark: #333; -@secondary-hover: #CCC; -@secondary-hover-dark: #444; -@chord-color: darkgreen; -@chord-color-dark: lightgreen; - -@transition: .5s; -@border-radius: 10px; diff --git a/res/static/colors.css b/res/static/colors.css new file mode 100644 index 0000000..dce9588 --- /dev/null +++ b/res/static/colors.css @@ -0,0 +1,22 @@ +:root { + --bg-color: #FFF; + --title-color: #369; + --subtitle-color: #444; + --text-color: #333; + --text-hover-color: #607D8B; + --secondary-color: #EEE; + --secondary-hover-color: #CCC; + --chord-color: darkgreen; + + --bg-color-dark: darken(var(--bg-color), 100%); + --title-color-dark: lighten(var(--title-color), 50%); + --subtitle-color-dark: lighten(var(--subtitle-color), 100%); + --text-color-dark: ligthen(var(--text-color), 100%); + --text-hover-color-dark: var(--text-hover-color); + --secondary-color-dark: #333; + --secondary-hover-color-dark: #444; + --chord-color-dark: lightgren; + + --transition-time: 5s; + --border-radius: 10px; +} diff --git a/res/less/index.less b/res/static/index.css similarity index 74% rename from res/less/index.less rename to res/static/index.css index b44d255..af8245b 100644 --- a/res/less/index.less +++ b/res/static/index.css @@ -1,4 +1,4 @@ -@import "colors"; +@import "colors.css"; .songs { list-style: none; @@ -11,18 +11,18 @@ gap: 5px; margin: .5em; padding: .6em; - border: 1px solid @text; - border-radius: @border-radius; + border: 1px solid var(--text-color); + border-radius: var(--border-radius); @media (prefers-color-scheme: dark) { - border: 1px solid @text-dark; + border: 1px solid var(--text-color-dark); } .number { font-weight: bolder; } .name { flex-grow: 99; } &:hover { - background-color: @secondary; - transition-duration: @transition; + background-color: var(--secondary-color); + transition-duration: var(--transition-duration); @media (prefers-color-scheme: dark) { - background-color: @secondary-dark; + background-color: var(--secondary-color-dark); } } } diff --git a/res/less/main.less b/res/static/main.css similarity index 60% rename from res/less/main.less rename to res/static/main.css index 6de89de..5501864 100644 --- a/res/less/main.less +++ b/res/static/main.css @@ -1,28 +1,28 @@ -@import "colors"; +@import "colors.css"; h1 { - color: @title; + color: var(--title-color); margin-inline: auto; width: max-content; max-width: 100%; text-align: center; @media (prefers-color-scheme: dark) { - color: @title-dark; + color: var(--title-color-dark); } > a, > a:hover, > a:active, > a:visited { - color: @title; + color: var(--title-color); @media (prefers-color-scheme: dark) { - color: @title-dark; + color: var(--title-color-dark); } } } h2, h3 { - color: @subtitle; + color: var(--subtitle-color); font-weight: lighter; margin-bottom: 0; @media (prefers-color-scheme: dark) { - color: @subtitle-dark; + color: var(--subtitle-color-dark); } } @@ -32,13 +32,13 @@ footer { body { font-family: Helvetica, Arial, sans-serif; - color: @text; - background: @background; + color: var(--text-color); + background: var(--background-color); max-width: 75em; margin: 1em; @media (prefers-color-scheme: dark) { - color: @text-dark; - background: @background-dark; + color: var(--text-color-dark); + background: var(--background-color-dark); } @media (min-width: 75em + 1em) { margin: auto; @@ -63,21 +63,21 @@ nav a > span { a { text-decoration: none; > span { - color: @text; + color: var(--text-color); padding: 0.5em; margin: 0.2em; display: inline-block; - border-radius: @border-radius * 5; - border: 1px solid @text; + border-radius: var(--border-radius) * 5; + border: 1px solid var(--text-color); @media (prefers-color-scheme: dark) { - color: @text-dark; - border-color: @text-dark; + color: var(--text-color-dark); + border-color: var(--text-color-dark); } &:hover { - background: @secondary-hover; - transition-duration: @transition; + background: var(--secondary-hover-color); + transition-duration: var(--transition-color); @media (prefers-color-scheme: dark) { - background: @secondary-hover-dark; + background: var(--secondary-hover-color-dark); } } &#nav-web { border-color: #6ecf00; } diff --git a/res/less/song.less b/res/static/song.css similarity index 71% rename from res/less/song.less rename to res/static/song.css index 9d87fbc..8f9310c 100644 --- a/res/less/song.less +++ b/res/static/song.css @@ -1,4 +1,4 @@ -@import "colors.less"; +@import "colors.css"; table.chordedline { border-spacing: 0px; @@ -11,9 +11,9 @@ table.chordedline { .chord { font-style: italic; - color: @chord-color; + color: var(--chord-color); @media (prefers-color-scheme: dark) { - color: @chord-color-dark; + color: var(--chord-color-dark); } } @@ -23,9 +23,9 @@ table.chordedline { div.chorus, p.chorus { font-weight: bold; - border-left: @text 2px solid; + border-left: var(--text-color) 2px solid; @media (prefers-color-scheme: dark) { - border-left: @text-dark 2px solid; + border-left: var(--text-color-dark) 2px solid; } padding-left: 0.5em; div { @@ -74,19 +74,19 @@ input[type="button"] { min-height: 2em; padding: .4em; border-style: none; - border-radius: @border-radius; - color: @text; - background-color: @secondary; + border-radius: var(--border-radius); + color: var(--text-color); + background-color: var(--secondary-color); @media (prefers-color-scheme: dark) { - color: @text-dark; - background-color: @secondary-dark; + color: var(--text-color-dark); + background-color: var(--secondary-color-dark); } &:hover, &.pair-sub:hover ~ &.pair-sup { - background-color: @secondary-hover; - transition-duration: @transition; + background-color: var(--secondary-hover-color); + transition-duration: var(--transition-duration); @media (prefers-color-scheme: dark) { - background-color: @secondary-hover-dark; + background-color: var(--secondary-hover-color-dark); } } } @@ -97,7 +97,7 @@ select.transposeSelect { font-weight: bold; color: black; @media (prefers-color-scheme: dark) { - color: @text-dark; + color: var(--text-color-dark); } } @@ -108,9 +108,9 @@ select.transposeSelect { .buttonpair.flex-reverse button.right, .buttonpair.flex-reverse button.left { - border: 1px solid @secondary-hover; + border: 1px solid var(--secondary-hover-color); @media (prefers-color-scheme: dark) { - border-color: @secondary-hover-dark; + border-color: var(--secondary-hover-color-dark); } } @@ -122,4 +122,4 @@ select.transposeSelect { .buttonpair.flex-reverse button.left { border-radius: 10px 0px 0px 10px; border-width: 0 2px 0 0; -} \ No newline at end of file +} diff --git a/res_gen/less/colors.less b/res_gen/less/colors.less deleted file mode 120000 index 4b3306b..0000000 --- a/res_gen/less/colors.less +++ /dev/null @@ -1 +0,0 @@ -../../res/less/colors.less \ No newline at end of file diff --git a/res_gen/static/colors.css b/res_gen/static/colors.css new file mode 100644 index 0000000..dce9588 --- /dev/null +++ b/res_gen/static/colors.css @@ -0,0 +1,22 @@ +:root { + --bg-color: #FFF; + --title-color: #369; + --subtitle-color: #444; + --text-color: #333; + --text-hover-color: #607D8B; + --secondary-color: #EEE; + --secondary-hover-color: #CCC; + --chord-color: darkgreen; + + --bg-color-dark: darken(var(--bg-color), 100%); + --title-color-dark: lighten(var(--title-color), 50%); + --subtitle-color-dark: lighten(var(--subtitle-color), 100%); + --text-color-dark: ligthen(var(--text-color), 100%); + --text-hover-color-dark: var(--text-hover-color); + --secondary-color-dark: #333; + --secondary-hover-color-dark: #444; + --chord-color-dark: lightgren; + + --transition-time: 5s; + --border-radius: 10px; +} diff --git a/res_gen/less/main.less b/res_gen/static/main.css similarity index 52% rename from res_gen/less/main.less rename to res_gen/static/main.css index 0ca17b7..ea9e493 100644 --- a/res_gen/less/main.less +++ b/res_gen/static/main.css @@ -1,28 +1,28 @@ -@import "colors"; +@import "colors.css"; h1 { - color: @title; + color: var(--title-color); margin-inline: auto; width: max-content; max-width: 100%; text-align: center; @media (prefers-color-scheme: dark) { - color: @title-dark; + color: var(--title-color-dark); } > a, > a:hover, > a:active, > a:visited { - color: @title; + color: var(--title-color); @media (prefers-color-scheme: dark) { - color: @title-dark; + color: var(--title-color-dark); } } } h2, h3 { - color: @subtitle; + color: var(--subtitle-color); font-weight: lighter; margin-bottom: 0; @media (prefers-color-scheme: dark) { - color: @subtitle-dark; + color: var(--subtitle-color-dark); } } @@ -32,13 +32,13 @@ footer { body { font-family: Helvetica, Arial, sans-serif; - color: @text; - background: @background; + color: var(--text-color); + background: var(--background-color); max-width: 75em; margin: 1em; @media (prefers-color-scheme: dark) { - color: @text-dark; - background: @background-dark; + color: var(--text-color-dark); + background: var(--background-color-dark); } @media (min-width: 75em + 1em) { margin: auto; @@ -48,21 +48,21 @@ body { a { text-decoration: none; > span { - color: @text; + color: var(--text-color); padding: 0.5em; margin: 0.2em; display: inline-block; - border-radius: @border-radius * 5; - border: 1px solid @text; + border-radius: var(--border-radius) * 5; + border: 1px solid var(--text-color); @media (prefers-color-scheme: dark) { - color: @text-dark; - border-color: @text-dark; + color: var(--text-color-dark); + border-color: var(--text-color-dark); } &:hover { - background: @secondary-hover; - transition-duration: @transition; + background: var(--secondary-hover-color); + transition-duration: var(--transition-duration); @media (prefers-color-scheme: dark) { - background: @secondary-hover-dark; + background: var(--secondary-hover-color-dark); } } } diff --git a/res_gen/less/song.less b/res_gen/static/song.css similarity index 57% rename from res_gen/less/song.less rename to res_gen/static/song.css index b4c2b34..40dcb21 100644 --- a/res_gen/less/song.less +++ b/res_gen/static/song.css @@ -1,4 +1,4 @@ -@import "colors.less"; +@import "colors.css"; button, select, @@ -7,19 +7,19 @@ input[type="button"] { min-height: 2em; padding: .4em; border-style: none; - border-radius: @border-radius; - color: @text; - background-color: @secondary; + border-radius: var(--border-radius); + color: var(--text-color); + background-color: var(--secondary-color); @media (prefers-color-scheme: dark) { - color: @text-dark; - background-color: @secondary-dark; + color: var(--text-color-dark); + background-color: var(--secondary-color-dark); } &:hover, &.pair-sub:hover ~ &.pair-sup { - background-color: @secondary-hover; - transition-duration: @transition; + background-color: var(--secondary-hover-color); + transition-duration: var(--transition-duration); @media (prefers-color-scheme: dark) { - background-color: @secondary-hover-dark; + background-color: var(--secondary-hover-color-dark); } } } @@ -31,9 +31,9 @@ input[type="button"] { .buttonpair.flex-reverse button.right, .buttonpair.flex-reverse button.left { - border: 1px solid @secondary-hover; + border: 1px solid var(--secondary-hover-color); @media (prefers-color-scheme: dark) { - border-color: @secondary-hover-dark; + border-color: var(--secondary-hover-color-dark); } }