diff --git a/Makefile b/Makefile index baa7f50..dd4d579 100644 --- a/Makefile +++ b/Makefile @@ -14,11 +14,11 @@ public: mkdir public public/index.html: $(ALL_TEMPLATES) $(PY_SRC) - python3 src/latex_scanner.py --latex latex/cancionero.tex --audios audios/Canciones --other-latex latex/canciones/ + python3 src/latex_scanner.py --latex latex/cancionero.tex --audios audios --other-latex latex/canciones/ public/audios: audios public rm -f public/audios - ln -s ../audios/Canciones public/audios + #ln -s ../audios/Canciones public/audios public/main.css: res/less/main.less res/less/colors.less lessc $< $@ diff --git a/res/less/colors.less b/res/less/colors.less index 4e4d052..5495f9a 100644 --- a/res/less/colors.less +++ b/res/less/colors.less @@ -1,12 +1,19 @@ -@nochordscolor: #FBB; -@nochordscolor-hover: #FAA; +@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: 4px; +@border-radius: 10px; diff --git a/res/less/index.less b/res/less/index.less index b0ff5ac..b44d255 100644 --- a/res/less/index.less +++ b/res/less/index.less @@ -7,24 +7,22 @@ color: inherit; text-decoration: none; > li { - background-color: @secondary; + display: flex; + gap: 5px; margin: .5em; padding: .6em; + border: 1px solid @text; border-radius: @border-radius; - .number { - font-weight: bolder; - color: black; + @media (prefers-color-scheme: dark) { + border: 1px solid @text-dark; } + .number { font-weight: bolder; } + .name { flex-grow: 99; } &:hover { - color: @text-hover; - background-color: @secondary-hover; + background-color: @secondary; transition-duration: @transition; - } - &.noChords { - background-color: @nochordscolor; - &:hover { - color: @text-hover; - background-color: @nochordscolor-hover; + @media (prefers-color-scheme: dark) { + background-color: @secondary-dark; } } } @@ -38,9 +36,18 @@ ul.songs { margin: .2em; } } -span.noChords { - background-color: @nochordscolor; - padding: 0.3em 0.4em; - border-radius: @border-radius; - display: inline-block; +img.guitar-icon, img.music-icon { + width: 1em; + padding: 0 0.2em; } +img.guitar-icon { + /* Green color filter */ + filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(55deg) brightness(119%) contrast(119%); +} +img.music-icon { + /* Orange color filter */ + filter: invert(46%) sepia(100%) saturate(681%) hue-rotate(360deg) brightness(106%) contrast(105%); +} +p { img.guitar-icon, img.music-icon { + vertical-align: -0.25em; +}} diff --git a/res/less/main.less b/res/less/main.less index e1464dd..6de89de 100644 --- a/res/less/main.less +++ b/res/less/main.less @@ -6,8 +6,14 @@ h1 { width: max-content; max-width: 100%; text-align: center; + @media (prefers-color-scheme: dark) { + color: @title-dark; + } > a, > a:hover, > a:active, > a:visited { color: @title; + @media (prefers-color-scheme: dark) { + color: @title-dark; + } } } @@ -15,6 +21,9 @@ h2, h3 { color: @subtitle; font-weight: lighter; margin-bottom: 0; + @media (prefers-color-scheme: dark) { + color: @subtitle-dark; + } } footer { @@ -24,8 +33,13 @@ footer { body { font-family: Helvetica, Arial, sans-serif; color: @text; + background: @background; max-width: 75em; margin: 1em; + @media (prefers-color-scheme: dark) { + color: @text-dark; + background: @background-dark; + } @media (min-width: 75em + 1em) { margin: auto; } @@ -43,6 +57,9 @@ nav { } } +nav a > span { + border-width: 4px; +} a { text-decoration: none; > span { @@ -50,11 +67,20 @@ a { padding: 0.5em; margin: 0.2em; display: inline-block; - background: @secondary; - border-radius: @border-radius; + border-radius: @border-radius * 5; + border: 1px solid @text; + @media (prefers-color-scheme: dark) { + color: @text-dark; + border-color: @text-dark; + } &:hover { background: @secondary-hover; transition-duration: @transition; + @media (prefers-color-scheme: dark) { + background: @secondary-hover-dark; + } } + &#nav-web { border-color: #6ecf00; } + &#nav-audios { border-color: orange; } } } diff --git a/res/less/song.less b/res/less/song.less index d0f0425..f98d06d 100644 --- a/res/less/song.less +++ b/res/less/song.less @@ -5,10 +5,6 @@ table.chordedline { display: inline-block; } -.song div { - padding: 0.5em 0; -} - .chordedline td { padding: 0px; } @@ -16,11 +12,21 @@ table.chordedline { .chord { font-style: italic; color: @chord-color; + @media (prefers-color-scheme: dark) { + color: @chord-color-dark; + } } -div.chorus { +.song div { + margin: 0.5em 0; +} + +div.chorus, p.chorus { font-weight: bold; - border-left: black 2px solid; + border-left: @text 2px solid; + @media (prefers-color-scheme: dark) { + border-left: @text-dark 2px solid; + } padding-left: 0.5em; div { padding-left: 0.5em; @@ -37,6 +43,10 @@ div.chorus { display: inline-block; width: 1em; height: 2em; + @media (prefers-color-scheme: dark) { + /* Black to white filter for svgs */ + filter: invert(100%); + } } .lrep { @@ -63,10 +73,18 @@ button, select#transposeSelect { padding: .4em; border-style: none; border-radius: @border-radius; + color: @text; background-color: @secondary; + @media (prefers-color-scheme: dark) { + color: @text-dark; + background-color: @secondary-dark; + } &:hover { background-color: @secondary-hover; transition-duration: @transition; + @media (prefers-color-scheme: dark) { + background-color: @secondary-hover-dark; + } } } @@ -75,4 +93,7 @@ select#transposeSelect { -moz-appearance: none; font-weight: bold; color: black; + @media (prefers-color-scheme: dark) { + color: @text-dark; + } } diff --git a/res/static/file-audio.svg b/res/static/file-audio.svg new file mode 100644 index 0000000..1181490 --- /dev/null +++ b/res/static/file-audio.svg @@ -0,0 +1 @@ + diff --git a/res/static/gear.svg b/res/static/gear.svg new file mode 100644 index 0000000..6752e44 --- /dev/null +++ b/res/static/gear.svg @@ -0,0 +1 @@ + diff --git a/res/static/guitar.svg b/res/static/guitar.svg new file mode 100644 index 0000000..600f4eb --- /dev/null +++ b/res/static/guitar.svg @@ -0,0 +1 @@ + diff --git a/res/static/music.svg b/res/static/music.svg new file mode 100644 index 0000000..8e817f7 --- /dev/null +++ b/res/static/music.svg @@ -0,0 +1 @@ + diff --git a/res/templates/footer.html b/res/templates/footer.html index 3c5a1d8..6d21935 100644 --- a/res/templates/footer.html +++ b/res/templates/footer.html @@ -1,6 +1,6 @@ diff --git a/res/templates/header.html b/res/templates/header.html index 4be012e..41d48b1 100644 --- a/res/templates/header.html +++ b/res/templates/header.html @@ -2,9 +2,9 @@

Cancionero San Leandro

diff --git a/res/templates/index.html b/res/templates/index.html index 6614f38..f791c25 100644 --- a/res/templates/index.html +++ b/res/templates/index.html @@ -15,17 +15,25 @@ {% endfor %} - Las canciones sin acordes están marcadas en rojo. +

Leyenda: tiene música grabada; tiene acordes.

    {% for category, songs in sorted_categories.items %}

    {{ category|title }}

    {% for song in songs %} -
  1. +
  2. {{ song.number }}. - {{ song.name }} - {% if song.author %} por {{ song.author }} {% endif %} - {% if song.origin %} basada en {{ song.origin }} {% endif %} + + {{ song.name }} + {% if song.author %} por {{ song.author }} {% endif %} + {% if song.origin %} basada en {{ song.origin }} {% endif %} + + {% if song.has_audios %} + + {% endif %} + {% if song.chorded %} + + {% endif %}
    3. {% endfor %} @@ -34,4 +42,4 @@ {% include "footer.html" %} - \ No newline at end of file + diff --git a/res/templates/song.html b/res/templates/song.html index cbf0b00..8b79de9 100644 --- a/res/templates/song.html +++ b/res/templates/song.html @@ -16,8 +16,7 @@ {% if song.origin %} basada en: {{ song.origin }} {% endif %} -
    -

    Ajustes

     +

    Ajustes

    @@ -29,7 +28,7 @@
    - +