adds dark mkode and pretties things up more
This commit is contained in:
Effie
parent
361e595ae1
commit
319ff01051
34
app.py
34
app.py
@ -37,7 +37,7 @@ def searchpage():
|
||||
if searchargs:
|
||||
searchresult = db.execute('''
|
||||
select
|
||||
'song', id, name, instr(lower(name),lower(?))
|
||||
'song', id, name, NULL, instr(lower(name),lower(?))
|
||||
from
|
||||
song
|
||||
where
|
||||
@ -46,7 +46,7 @@ def searchpage():
|
||||
'%' || ? || '%'
|
||||
union all
|
||||
select
|
||||
'album', id, name, instr(lower(name),lower(?))
|
||||
'album', id, name, code, instr(lower(name),lower(?))
|
||||
from
|
||||
album
|
||||
where
|
||||
@ -55,7 +55,7 @@ def searchpage():
|
||||
'%' || ? || '%'
|
||||
union all
|
||||
select
|
||||
'motif', id, name, instr(lower(name),lower(?))
|
||||
'motif', id, name, NULL, instr(lower(name),lower(?))
|
||||
from
|
||||
motif
|
||||
where
|
||||
@ -63,7 +63,7 @@ def searchpage():
|
||||
like
|
||||
'%' || ? || '%'
|
||||
order by
|
||||
4
|
||||
5
|
||||
limit
|
||||
10
|
||||
''',
|
||||
@ -233,7 +233,7 @@ def motifpage(id):
|
||||
|
||||
clip_info = db.execute('''
|
||||
select
|
||||
song_id, motif_id, song.name
|
||||
song_id, motif_id, song.name, feature
|
||||
from
|
||||
clip
|
||||
join
|
||||
@ -249,9 +249,31 @@ def motifpage(id):
|
||||
(id,)
|
||||
).fetchall()
|
||||
|
||||
album_info = db.execute('''
|
||||
select
|
||||
clip.song_id, album.code
|
||||
from
|
||||
clip
|
||||
join
|
||||
song_album
|
||||
on
|
||||
clip.song_id=song_album.song_id
|
||||
join
|
||||
album
|
||||
on
|
||||
song_album.album_id=album.id
|
||||
where
|
||||
clip.motif_id = ?
|
||||
order by
|
||||
song_album.album_id
|
||||
''',
|
||||
(id,)
|
||||
).fetchall()
|
||||
|
||||
return flask.render_template('motif.html',
|
||||
name=name,
|
||||
clip_info=clip_info
|
||||
clip_info=clip_info,
|
||||
album_info=album_info
|
||||
)
|
||||
|
||||
# SONG PAGES
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="3.5705387"
|
||||
inkscape:cx="11.062756"
|
||||
inkscape:cy="103.06568"
|
||||
inkscape:cx="22.965722"
|
||||
inkscape:cy="123.79084"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1377"
|
||||
inkscape:window-x="1912"
|
||||
@ -42,8 +42,11 @@
|
||||
transform="translate(17.134108,-0.05239776)">
|
||||
<path
|
||||
id="rect1491"
|
||||
style="fill:#009db1;stroke-width:0.264583"
|
||||
d="m -15.134108,0.05239776 h 7.2131476 c 1.108,0 2,0.892 2,2.00000004 V 4.18295 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 V 2.0523978 c 0,-1.10800004 0.892,-2.00000004 2,-2.00000004 z" />
|
||||
style="fill:#14b290;fill-opacity:1;stroke-width:0.264583"
|
||||
d="m -15.134108,0.05239776 h 7.2131476 c 1.108,0 2,0.892 2,2.00000004 V 4.18295 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 V 2.0523978 c 0,-1.10800004 0.892,-2.00000004 2,-2.00000004 z"
|
||||
inkscape:export-filename="album icons\rect1491.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
<path
|
||||
d="m -13.444384,1.0630206 v 4.0404049 h -0.868163 V 2.044183 q -0.07166,0.06339 -0.170877,0.1212673 -0.09646,0.055122 -0.206705,0.1019747 -0.110243,0.044097 -0.228754,0.07717 -0.118511,0.030317 -0.234267,0.044097 V 1.6555765 q 0.338998,-0.099219 0.63941,-0.2535588 0.300412,-0.1543401 0.542946,-0.3389971 z"
|
||||
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
|
||||
|
||||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.4 KiB |
@ -25,8 +25,8 @@
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="3.5705387"
|
||||
inkscape:cx="11.062756"
|
||||
inkscape:cy="103.06568"
|
||||
inkscape:cx="22.965722"
|
||||
inkscape:cy="123.79084"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1377"
|
||||
inkscape:window-x="1912"
|
||||
@ -42,8 +42,11 @@
|
||||
transform="translate(17.134108,-7.2047088)">
|
||||
<path
|
||||
id="rect1497"
|
||||
style="fill:#002bce;stroke-width:0.264583"
|
||||
d="m -15.134108,7.2047091 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.1305519 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 V 9.2047091 c 0,-1.108 0.892,-2 2,-2 z" />
|
||||
style="fill:#2f56e9;fill-opacity:1;stroke-width:0.264583"
|
||||
d="m -15.134108,7.2047091 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.1305519 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 V 9.2047091 c 0,-1.108 0.892,-2 2,-2 z"
|
||||
inkscape:export-filename="album icons\rect1497.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
<path
|
||||
d="m -14.377315,11.533645 h 1.675693 v 0.722091 h -2.629294 V 11.95808 q 0,-0.303168 0.101974,-0.542946 0.101975,-0.242535 0.256315,-0.432704 0.15434,-0.192925 0.336241,-0.338997 0.184657,-0.148828 0.350022,-0.267339 0.173632,-0.124024 0.303168,-0.237023 0.132291,-0.112999 0.220486,-0.2232417 0.09095,-0.1129991 0.135048,-0.2259981 0.0441,-0.1157551 0.0441,-0.2452906 0,-0.2535589 -0.143316,-0.3830944 -0.143316,-0.1295355 -0.438216,-0.1295355 -0.509874,0 -0.97565,0.405143 V 8.570865 q 0.515386,-0.333485 1.163063,-0.333485 0.300412,0 0.537435,0.079926 0.239778,0.07717 0.405142,0.223242 0.165365,0.1460719 0.250803,0.3555336 0.0882,0.2067055 0.0882,0.4630205 0,0.2728513 -0.08544,0.485069 -0.08268,0.2122179 -0.223242,0.3858509 -0.137803,0.173632 -0.319704,0.319704 -0.181901,0.143316 -0.377582,0.278364 -0.132292,0.09371 -0.256315,0.187413 -0.121268,0.09095 -0.214974,0.181901 -0.09371,0.08819 -0.148828,0.173632 -0.05512,0.08544 -0.05512,0.162609 z"
|
||||
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
|
||||
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 4.0 KiB |
@ -25,8 +25,8 @@
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="3.5705387"
|
||||
inkscape:cx="11.062756"
|
||||
inkscape:cy="103.06568"
|
||||
inkscape:cx="22.965722"
|
||||
inkscape:cy="101.38526"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1377"
|
||||
inkscape:window-x="1912"
|
||||
@ -42,8 +42,11 @@
|
||||
transform="translate(17.134108,-21.509332)">
|
||||
<path
|
||||
id="rect1509"
|
||||
style="fill:#be9e10;stroke-width:0.264583"
|
||||
d="m -15.134108,21.509331 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z" />
|
||||
style="fill:#8a800f;fill-opacity:1;stroke-width:0.264583"
|
||||
d="m -15.134108,21.509331 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z"
|
||||
inkscape:export-filename="album icons\rect1509.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
<path
|
||||
d="m -15.284064,26.430823 v -0.757921 q 0.396875,0.289388 0.926041,0.289388 0.333485,0 0.518142,-0.143316 0.187413,-0.143316 0.187413,-0.399631 0,-0.264583 -0.23151,-0.407899 -0.228754,-0.143316 -0.631141,-0.143316 h -0.366558 v -0.66697 h 0.338997 q 0.771701,0 0.771701,-0.512629 0,-0.482313 -0.592556,-0.482313 -0.396875,0 -0.771701,0.256315 v -0.711068 q 0.416167,-0.209461 0.970138,-0.209461 0.606337,0 0.942578,0.272851 0.338997,0.272851 0.338997,0.708311 0,0.774457 -0.785481,0.970138 v 0.01378 q 0.418923,0.05236 0.661457,0.305924 0.242535,0.250803 0.242535,0.617361 0,0.553971 -0.405143,0.876431 -0.405143,0.322461 -1.118966,0.322461 -0.611849,0 -0.994943,-0.198437 z"
|
||||
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
|
||||
|
||||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.7 KiB |
@ -25,8 +25,8 @@
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="3.5705387"
|
||||
inkscape:cx="11.062756"
|
||||
inkscape:cy="103.06568"
|
||||
inkscape:cx="22.965722"
|
||||
inkscape:cy="123.79084"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1377"
|
||||
inkscape:window-x="1912"
|
||||
@ -42,8 +42,11 @@
|
||||
transform="translate(17.134108,-43.778434)">
|
||||
<path
|
||||
id="rect1527"
|
||||
style="fill:#3f0097;stroke-width:0.264583"
|
||||
d="m -15.134108,43.778431 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z" />
|
||||
style="fill:#5900d6;fill-opacity:1;stroke-width:0.264583"
|
||||
d="m -15.134108,43.778431 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z"
|
||||
inkscape:export-filename="album icons\rect1527.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
<path
|
||||
d="m -15.249613,48.727482 v -0.74414 q 0.405143,0.248046 0.862652,0.248046 0.344509,0 0.537434,-0.162608 0.195681,-0.165365 0.195681,-0.446484 0,-0.587044 -0.829578,-0.587044 -0.305924,0 -0.705555,0.04685 l 0.148828,-2.204859 h 2.09186 v 0.711067 h -1.427646 l -0.05512,0.790993 q 0.212218,-0.01654 0.366558,-0.01654 0.609093,0 0.953602,0.319704 0.344509,0.319705 0.344509,0.859896 0,0.598068 -0.410655,0.978406 -0.410655,0.377582 -1.113454,0.377582 -0.570507,0 -0.959114,-0.170876 z"
|
||||
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.5 KiB |
@ -7,42 +7,16 @@
|
||||
viewBox="0 0 11.213148 6.1305542"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="album icons.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#505050"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="3.5705387"
|
||||
inkscape:cx="11.062756"
|
||||
inkscape:cy="103.06568"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1377"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(17.134108,-50.485358)">
|
||||
<path
|
||||
id="rect1533"
|
||||
style="fill:#3b5676;stroke-width:0.264583"
|
||||
style="fill:#46658b;fill-opacity:1;stroke-width:0.264583"
|
||||
d="m -15.134108,50.485359 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z" />
|
||||
<path
|
||||
d="m -15.157284,55.43441 v -0.74414 q 0.405142,0.248046 0.862651,0.248046 0.344509,0 0.537434,-0.162608 0.195682,-0.165364 0.195682,-0.446484 0,-0.587044 -0.829579,-0.587044 -0.305924,0 -0.705555,0.04685 l 0.148828,-2.204859 h 2.091861 v 0.711067 h -1.427647 l -0.05512,0.790994 q 0.212217,-0.01654 0.366557,-0.01654 0.609093,0 0.953602,0.319705 0.344509,0.319704 0.344509,0.859895 0,0.598068 -0.410655,0.978406 -0.410655,0.377582 -1.113454,0.377582 -0.570507,0 -0.959113,-0.170876 z"
|
||||
|
||||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 2.6 KiB |
@ -25,8 +25,8 @@
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="3.5705387"
|
||||
inkscape:cx="11.062756"
|
||||
inkscape:cy="103.06568"
|
||||
inkscape:cx="22.965722"
|
||||
inkscape:cy="123.79084"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1377"
|
||||
inkscape:window-x="1912"
|
||||
@ -42,8 +42,11 @@
|
||||
transform="translate(17.134108,-57.506678)">
|
||||
<path
|
||||
id="rect1539"
|
||||
style="fill:#5a5a5a;stroke-width:0.264583"
|
||||
d="m -15.134108,57.506676 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z" />
|
||||
style="fill:#808080;fill-opacity:1;stroke-width:0.264583"
|
||||
d="m -15.134108,57.506676 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z"
|
||||
inkscape:export-filename="album icons\rect1539.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
<path
|
||||
d="m -12.523855,61.243054 q 0,0.292144 -0.101975,0.545702 -0.101975,0.253559 -0.283876,0.440972 -0.1819,0.184657 -0.432703,0.292144 -0.250803,0.104731 -0.548459,0.104731 -0.333485,0 -0.598068,-0.124023 -0.261827,-0.124024 -0.443728,-0.35829 -0.181901,-0.237022 -0.278364,-0.578776 -0.09646,-0.341753 -0.09646,-0.774457 0,-0.509873 0.124023,-0.923284 0.12678,-0.416168 0.35829,-0.711068 0.234266,-0.2949 0.564995,-0.454752 0.330729,-0.162608 0.74414,-0.162608 0.457508,0 0.711067,0.107487 v 0.727603 q -0.300412,-0.170876 -0.655945,-0.170876 -0.220486,0 -0.399631,0.08544 -0.179145,0.08544 -0.30868,0.242535 -0.12678,0.157096 -0.201194,0.380338 -0.07166,0.220486 -0.07717,0.493337 h 0.01654 q 0.28112,-0.388606 0.829579,-0.388606 0.24529,0 0.443728,0.08819 0.198437,0.08819 0.338997,0.250803 0.14056,0.159852 0.21773,0.38585 0.07717,0.225998 0.07717,0.501606 z m -0.851627,0.05512 q 0,-0.636653 -0.520898,-0.636653 -0.118511,0 -0.214974,0.0441 -0.09646,0.0441 -0.165364,0.124024 -0.0689,0.07993 -0.107487,0.190169 -0.03583,0.107487 -0.03583,0.239778 0,0.146072 0.03858,0.272851 0.03858,0.12678 0.107487,0.223242 0.07166,0.09371 0.16812,0.148829 0.09646,0.05512 0.214974,0.05512 0.118511,0 0.212218,-0.04685 0.09646,-0.04961 0.162608,-0.135048 0.0689,-0.08819 0.104731,-0.209462 0.03583,-0.124023 0.03583,-0.270095 z"
|
||||
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
|
||||
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.3 KiB |
@ -1,7 +1,9 @@
|
||||
.top-buttons a:last-child{
|
||||
background-color: var(--light-border);
|
||||
.nav-button.motif{
|
||||
background-color: var(--pressed);
|
||||
border-style: inset;
|
||||
border-color: var(--light-border);
|
||||
border-radius: 1.2rem;
|
||||
border-width: 0.3rem;
|
||||
}
|
||||
|
||||
.nav-text.motif{
|
||||
color: var(--pressed-text);
|
||||
text-shadow: 1px 1px 2px black;
|
||||
}
|
||||
@ -3,18 +3,26 @@ function getAnchor() {
|
||||
}
|
||||
|
||||
window.addEventListener('load', (event) => {
|
||||
preclicked = getAnchor();
|
||||
console.log(preclicked);
|
||||
const preclicked = getAnchor();
|
||||
if (! preclicked) return;
|
||||
const radiobutton = document.getElementById(preclicked);
|
||||
console.log(radiobutton);
|
||||
if (radiobutton){
|
||||
radiobutton.checked = true;
|
||||
|
||||
const label = document.getElementById(`${preclicked}_label`);
|
||||
label.scrollIntoView();
|
||||
}
|
||||
label = document.getElementById(`${preclicked}_label`)
|
||||
label.scrollIntoView();
|
||||
});
|
||||
|
||||
function albumselect(code){
|
||||
const radiobutton = document.getElementById(code);
|
||||
if (radiobutton){
|
||||
radiobutton.checked = true;
|
||||
const label = document.getElementById(`${code}_label`);
|
||||
label.scrollIntoView();
|
||||
}
|
||||
document.getElementById('search-input').value = '';
|
||||
};
|
||||
|
||||
function collapse(clickevent){
|
||||
const radiobutton = document.getElementById(clickevent.target.htmlFor);
|
||||
if (radiobutton.checked){
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
.top-buttons a:first-child{
|
||||
background-color: var(--light-border);
|
||||
.nav-button.song{
|
||||
background-color: var(--pressed);
|
||||
border-style: inset;
|
||||
border-color: var(--light-border);
|
||||
border-radius: 1.2rem;
|
||||
border-width: 0.3rem;
|
||||
}
|
||||
|
||||
.nav-text.song{
|
||||
color: var(--pressed-text);
|
||||
text-shadow: 1px 1px 2px black;
|
||||
}
|
||||
652
static/style.css
652
static/style.css
@ -1,148 +1,233 @@
|
||||
:root{
|
||||
--light-block: lch(90% 25 85);
|
||||
--light-box: lch(100% 0 90);
|
||||
--light-back: linear-gradient(90deg, lch(95% 20 260), white 25%, white 75%, lch(95% 20 260));
|
||||
--light-border: lch(80% 45 85);
|
||||
--block: lch(90% 25 85);
|
||||
--box: lch(100% 0 90);
|
||||
--back: radial-gradient(white 50%, lch(95% 10 225) );
|
||||
--search-back: white;
|
||||
--thick-border: lch(80% 45 85);
|
||||
--thin-border: lch(40% 45 85);
|
||||
--pressed: lch(65% 40 75);
|
||||
--pressed-text: lch(100% 25 85);
|
||||
--text: black;
|
||||
--light-text: gray;
|
||||
--text-shadow: black;
|
||||
font-family: "Zen Maru Gothic", sans-serif;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root{
|
||||
--block: lch(20% 0 75);
|
||||
--box: lch(40% 2.5 75);
|
||||
--back: radial-gradient(lch(20% 0 75), black );
|
||||
--search-back: lch(35% 0 75);
|
||||
--thick-border: lch(60% 10 75);
|
||||
--thin-border: lch(60% 10 75);
|
||||
--pressed: lch(5% 0 75);
|
||||
--pressed-text: lch(95% 5 75);
|
||||
--text: lch(95% 5 75);
|
||||
--box-text: white;
|
||||
--light-text: lch(65% 5 75);
|
||||
--light-box-text: lch(85% 5 75);
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
font-family: "Shippori Mincho", serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
display: flex; flex-direction: column;
|
||||
margin: 0;
|
||||
background: var(--light-back);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
background: var(--back);
|
||||
background-attachment: fixed;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
header{
|
||||
background-color: var(--light-block);
|
||||
margin: 0;
|
||||
border-style: outset;
|
||||
border-top: 0; border-left: 0; border-right: 0;
|
||||
border-color: var(--light-border);
|
||||
a{
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
footer{
|
||||
background-color: var(--light-block);
|
||||
border-style: outset;
|
||||
border-bottom: 0; border-left: 0; border-right: 0;
|
||||
border-color: var(--light-border);
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-top: auto;
|
||||
span{
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
header{
|
||||
background: var(--block);
|
||||
margin: 0;
|
||||
border-style: outset; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thick-border);
|
||||
}
|
||||
|
||||
.top-buttons{
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 1.2rem;
|
||||
display: flex; flex: auto; justify-content: center;
|
||||
padding: .6rem;
|
||||
column-gap: .6rem;
|
||||
max-height: fit-content;
|
||||
|
||||
max-width: 64rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.top-buttons a{
|
||||
flex: auto;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.nav-button{
|
||||
display: flex; flex-direction: column; justify-content: center;
|
||||
background-color: var(--block);
|
||||
border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
|
||||
position: relative;
|
||||
border-style: outset;
|
||||
border-color: var(--light-border);
|
||||
border-radius: 1.2rem;
|
||||
border-width: 0.3rem;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.top-buttons a:nth-child(2){
|
||||
flex: none;
|
||||
|
||||
.nav-button a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-buttons a:nth-child(2):before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-style: outset;
|
||||
border-color: var(--light-border);
|
||||
border-radius: 1.2rem;
|
||||
border-width: 0.3rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.nav-button li{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* .top-buttons a::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-style: outset;
|
||||
border-color: var(--light-border);
|
||||
border-radius: 1.2rem;
|
||||
border-width: 0.3rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
} */
|
||||
|
||||
.top-buttons li{
|
||||
vertical-align: center;
|
||||
.nav-text{
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-buttons img{
|
||||
.nav-text::before{
|
||||
content: "-"
|
||||
}
|
||||
|
||||
.nav-text::after{
|
||||
content: "-"
|
||||
}
|
||||
|
||||
.nav-button img{
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
.nav-button.home{
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.nav-button.home::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* HOME BUTTON */
|
||||
|
||||
.home-main{
|
||||
margin-top: clamp(0rem, calc(8vw - 8rem), 2.4rem); margin-bottom: auto;
|
||||
background: var(--block);
|
||||
}
|
||||
|
||||
.home-title{
|
||||
padding: 4vh;
|
||||
text-align: center;
|
||||
border-style: outset; border-color: var(--thick-border);
|
||||
background: radial-gradient(lch(35% 90 50) 50%, lch(10% 90 50));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.home-title h1{
|
||||
text-shadow: 1px 1px 2px var(--text-shadow);
|
||||
color: lch(90% 25 85);
|
||||
}
|
||||
|
||||
.home-title h1::before{
|
||||
content: "-"
|
||||
}
|
||||
|
||||
.home-title h1::after{
|
||||
content: "-"
|
||||
}
|
||||
|
||||
.home-title h3{
|
||||
margin-top: 1.2rem;
|
||||
color: lch(90% 25 85);
|
||||
}
|
||||
|
||||
.home-title p{
|
||||
position: absolute;
|
||||
right: .3rem;
|
||||
bottom: .3rem;
|
||||
font-size: small;
|
||||
margin: 0;
|
||||
color: lch(80% 50 50);
|
||||
}
|
||||
|
||||
.home-body{
|
||||
|
||||
padding-top: 1.2rem;
|
||||
}
|
||||
|
||||
.home-body h2{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-body p{
|
||||
margin-left: 1.2rem; margin-right: 1.2rem; margin-top: .6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-nav{
|
||||
display: flex; gap: 1.2rem;
|
||||
border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0;
|
||||
margin: 1.2rem; margin-bottom: 0;
|
||||
padding-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.home-button{
|
||||
display: flex; flex-direction: column; list-style: none; justify-content: center; align-items: center;
|
||||
flex: auto;
|
||||
position: relative;
|
||||
border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem;
|
||||
text-decoration: none;
|
||||
background-color: var(--block);
|
||||
padding-top: 1.2rem; padding-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
|
||||
/* SEARCH BAR */
|
||||
|
||||
.search-bar{
|
||||
display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center;
|
||||
max-width: 64rem;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: var(--light-block);
|
||||
border-style: outset;
|
||||
border-top: 0;
|
||||
border-color: var(--light-border);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 3.6rem;
|
||||
margin-left: auto; margin-right: auto;
|
||||
background-color: var(--block);
|
||||
border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thin-border); border-width: 1px;
|
||||
}
|
||||
|
||||
.search-items{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 2.4rem;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.search-items input{
|
||||
all: unset;
|
||||
background-color: white;
|
||||
/* all:unset; */
|
||||
font: unset;
|
||||
color: unset;
|
||||
background-color: var(--search-back);
|
||||
width: 100%;
|
||||
height: 1.2rem;
|
||||
height: 2.4rem;
|
||||
border-style: solid; border-color: var(--thin-border); border-width: 1px;
|
||||
}
|
||||
|
||||
/* SEARCH RESULTS */
|
||||
|
||||
#search-results{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -151,86 +236,109 @@ footer{
|
||||
}
|
||||
|
||||
#search-results ul{
|
||||
background-color: white;
|
||||
background-color: var(--search-back);
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
list-style: none;
|
||||
z-index: 1;
|
||||
border-style: solid; border-color: var(--thin-border); border-width: 1px; border-top: 0; border-bottom: 0;
|
||||
}
|
||||
|
||||
main{
|
||||
background-color: var(--light-block);
|
||||
max-width: 64rem;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
#search-results li{
|
||||
display: flex; align-items: center;
|
||||
min-height: 2.4rem;
|
||||
border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0;
|
||||
}
|
||||
|
||||
main ul{
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
h1{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin: 0;
|
||||
font-
|
||||
}
|
||||
|
||||
h3{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
#search-results a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* HOME BUTTONS */
|
||||
.search-icon{
|
||||
min-width: 2.6rem;
|
||||
}
|
||||
|
||||
.home-title{
|
||||
padding: 4.8rem;
|
||||
.search-icon img{
|
||||
margin-left: auto;
|
||||
height: 1.8rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-icon.album img{
|
||||
display: block;
|
||||
height: 1.2rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.search-type{
|
||||
font-size: small;
|
||||
color: var(--light-box-text);
|
||||
margin-left: .3rem;
|
||||
min-width: 2.6rem;
|
||||
}
|
||||
|
||||
/* MAIN PAGE */
|
||||
|
||||
main{
|
||||
background-color: var(--block);
|
||||
max-width: 64rem;
|
||||
width: 100%;
|
||||
margin-left: auto; margin-right: auto;
|
||||
}
|
||||
|
||||
main ul{
|
||||
display: flex; flex-direction: column;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer{
|
||||
background: linear-gradient(90deg, lch(10% 90 50), lch(35% 90 50) 25%, lch(35% 90 50) 75%, lch(10% 90 50));
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.footer-content{
|
||||
display: flex; justify-content: center; flex-wrap: wrap; align-items: center;
|
||||
max-width: 64rem;
|
||||
margin-left: auto; margin-right: auto; margin-bottom: .3rem; margin-top: .3rem;
|
||||
}
|
||||
|
||||
.footer-content span{
|
||||
font-size: calc(.7rem + .3vw);
|
||||
margin-left: 1.2rem; margin-right: 1.2rem;
|
||||
text-align: center;
|
||||
border-style: solid;
|
||||
border-top: 0; border-left: 0; border-right: 0;
|
||||
color: lch(90% 25 85);
|
||||
}
|
||||
|
||||
.home-nav{
|
||||
display: flex;
|
||||
flex: auto;
|
||||
justify-content: space-around;
|
||||
.footer-content a{
|
||||
color: lch(90% 25 85);
|
||||
}
|
||||
|
||||
.home-button{
|
||||
border-style: outset;
|
||||
border-color: var(--light-border);
|
||||
border-radius: 1.2rem;
|
||||
flex: auto;
|
||||
.copyright{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
flex-wrap: wrap;
|
||||
column-gap: .3em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-left: 1.2rem; margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
|
||||
.copyright span{
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
/* INDEX LISTS */
|
||||
|
||||
.album-list{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
.category-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
flex-basis: 51%;
|
||||
display: flex; flex-wrap: wrap; align-content: flex-start; flex-basis: 51%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.album-icon{
|
||||
@ -238,87 +346,57 @@ a{
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* INDEX BLOCKS */
|
||||
|
||||
.sort-box{
|
||||
margin-top: 1.2rem; margin-left: 1.2rem; margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
.sort-box.album:not(:first-child){
|
||||
margin-top: 2.4rem;
|
||||
}
|
||||
|
||||
.sort-box:last-child{
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.sort-box.category{
|
||||
width: 29.6rem;
|
||||
background: var(--block);
|
||||
}
|
||||
|
||||
.sort-header{
|
||||
border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-width: 1px; border-color: var(--thin-border);
|
||||
}
|
||||
|
||||
.sort-header.album{
|
||||
display: flex; align-items: center;
|
||||
font-size: calc(.7rem + .4vw);
|
||||
background: var(--block);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
gap: .6rem;
|
||||
}
|
||||
|
||||
.date{
|
||||
margin-top: .3rem; margin-left: 2.4rem;
|
||||
margin-top: .6rem; margin-left: 2.4rem;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
/* INDEX ENTRIES */
|
||||
|
||||
.sort-box{
|
||||
border-style: solid;
|
||||
border-left: 0; border-right: 0; border-top: 0;
|
||||
border-color: black;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.sort-box h2{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sort-box.album{
|
||||
margin-bottom: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
border-top: 0; border-left: 0; border-right: 0;
|
||||
border-width: 1px;
|
||||
margin: 1.2rem; margin-bottom: 0;
|
||||
background: var(--light-block);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
gap: .6rem
|
||||
}
|
||||
|
||||
.date{
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.sort-box.category{
|
||||
gap: 1.2rem;
|
||||
margin-left: auto; margin-right: auto; margin-bottom: 1.2rem;
|
||||
width: 24rem;
|
||||
|
||||
}
|
||||
|
||||
.sort-box.category{
|
||||
margin: 1.2rem;
|
||||
margin-bottom: 0px;
|
||||
background: var(--light-block);
|
||||
}
|
||||
|
||||
.entry-box{
|
||||
display: flex; align-items: center;
|
||||
list-style: none;
|
||||
min-height: 1.8rem;
|
||||
display: flex;
|
||||
border-radius: 1.2rem 0% 0% 1.2rem;
|
||||
background: linear-gradient(90deg, var(--light-box) 90%, rgba(255, 255, 255, 0) 100%);
|
||||
background-color: var(--box);
|
||||
border-radius: 1.2rem;
|
||||
margin-top: .6rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry-box.song{
|
||||
margin-top: .6rem; margin-bottom: .6rem; margin-left: 1.2rem; margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
.entry-box.motif{
|
||||
margin: 1.2rem; margin-bottom: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.entry-box.song li{
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: left;
|
||||
/* align-content: bottom; */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 1.8rem;
|
||||
|
||||
}
|
||||
|
||||
.entry-box.song span{
|
||||
align-self: center;
|
||||
margin-bottom: .6rem;
|
||||
}
|
||||
|
||||
.entry-box.song.empty{
|
||||
@ -326,105 +404,113 @@ a{
|
||||
background: none;
|
||||
}
|
||||
|
||||
.entry-box.motif span{
|
||||
color: black;
|
||||
vertical-align: middle;
|
||||
.entry-box li{
|
||||
display: flex; flex: auto; flex-wrap: nowrap; align-items: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 1.8rem;
|
||||
}
|
||||
|
||||
.entry-box.motif li{
|
||||
justify-content: center;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.entry-box.song li{
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.entry-box.motif::before{
|
||||
content: "b";
|
||||
content: "";
|
||||
max-width: 3.6rem;
|
||||
flex-grow: 1;
|
||||
visibility: hidden;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.motif-name{
|
||||
text-align: center;
|
||||
color: black;
|
||||
color: var(--box-text);
|
||||
|
||||
}
|
||||
|
||||
.track-number{
|
||||
min-width: 2.4rem;
|
||||
margin-left: .6rem;
|
||||
color: black;
|
||||
color: var(--box-text);
|
||||
}
|
||||
|
||||
.track-name{
|
||||
color: black;
|
||||
color: var(--box-text);
|
||||
}
|
||||
|
||||
.track-name-jp{
|
||||
margin-left: 1.2rem;
|
||||
color: gray;
|
||||
margin-left: 2.4rem;
|
||||
color: var(--light-box-text);
|
||||
}
|
||||
|
||||
.empty{
|
||||
color: gray;
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.clip-count{
|
||||
color: black;
|
||||
flex-wrap: nowrap;
|
||||
color: var(--box-text);
|
||||
display: inline;
|
||||
text-align: right;
|
||||
min-width: 0;
|
||||
margin-right: 1.2rem;
|
||||
min-width: 1.6rem;
|
||||
text-align: left;
|
||||
min-width: 2.4rem;
|
||||
margin-left: .24rem;
|
||||
}
|
||||
|
||||
.count-icon{
|
||||
width: 1.2rem; height: 1.2rem;
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* SONG INDEX ALBUM DROPDOWNS */
|
||||
|
||||
.sort-box.album label{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapse{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sort-list{
|
||||
.sort-list.album{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sort-box.album > *{
|
||||
.sort-header.album > *{
|
||||
cursor: pointer;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sort-box.album::after{
|
||||
.sort-header.album::after{
|
||||
content: "▼";
|
||||
margin-left: auto;
|
||||
color: var(--thin-border);
|
||||
}
|
||||
|
||||
.collapse:checked ~ .sort-list{
|
||||
.collapse:checked ~ .sort-list.album{
|
||||
display:initial
|
||||
}
|
||||
|
||||
.collapse:checked ~ .sort-box.album::after{
|
||||
.collapse:checked ~ .sort-header.album::after{
|
||||
content: "▲";
|
||||
color: var(--thin-border);
|
||||
}
|
||||
|
||||
/* ENTRY PAGE TITLES */
|
||||
|
||||
.title-box{
|
||||
margin: 1.2rem; margin-bottom: 1.2rem;
|
||||
background: var(--light-box);
|
||||
background: var(--box);
|
||||
}
|
||||
|
||||
.eng-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* margin-bottom: .6rem; */
|
||||
display: flex; align-items: center;
|
||||
color: var(--box-text);
|
||||
}
|
||||
|
||||
.title-box img{
|
||||
align-self: center;
|
||||
margin-left: .6rem;
|
||||
}
|
||||
|
||||
@ -435,27 +521,27 @@ a{
|
||||
}
|
||||
|
||||
.title-jp{
|
||||
color: gray;
|
||||
color: var(--light-box-text);
|
||||
margin-right: 1.2rem; padding-bottom: .6rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.title-album{
|
||||
margin-left: auto; margin-right: .7rem; margin-top: .7rem;
|
||||
align-self: flex-start;
|
||||
display: flex; align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.title-album img{
|
||||
margin: 0;
|
||||
display: block;
|
||||
margin-right: .6rem;
|
||||
}
|
||||
|
||||
/* ENTRY PAGE DETAILS */
|
||||
|
||||
.track-info{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
gap: 1.2rem;
|
||||
display: flex; flex-wrap: wrap; justify-content: space-around;
|
||||
row-gap: 1.2rem;
|
||||
}
|
||||
|
||||
.track-info li{
|
||||
@ -463,9 +549,9 @@ a{
|
||||
}
|
||||
|
||||
.songpage-detail{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 16rem;
|
||||
display: flex; flex-direction: column;
|
||||
min-width: 18rem;
|
||||
margin-left: 1.2rem; margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
.songpage-detail ul{
|
||||
@ -477,9 +563,35 @@ a{
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.songpage-detail li{
|
||||
display: flex; align-items: baseline; gap: .6rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.songpage-credit{
|
||||
font-size: small;
|
||||
min-width: 4.2rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.songpage-img{
|
||||
display: inline-block;
|
||||
height: 1.2rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.song-location{
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.song-location h2{
|
||||
text-align: center;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.entrypage-connections{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -489,17 +601,29 @@ a{
|
||||
}
|
||||
|
||||
.entrypage-clip{
|
||||
display: flex; flex-wrap: wrap-reverse;
|
||||
margin-bottom: 1.2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
column-gap: 2rem;
|
||||
column-gap: 2.4rem; row-gap: .6rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.connection-icon{
|
||||
display: inline-block;
|
||||
width: 1.2rem; height: 1.2rem;
|
||||
}
|
||||
|
||||
.clip-pointer{
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
width: 18rem;
|
||||
/* white-space: nowrap; */
|
||||
gap: .3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.clip-album-icon{
|
||||
height: 1.2rem;
|
||||
}
|
||||
|
||||
.clip-pointer a{
|
||||
flex-shrink: 1;
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>{% block title required %}{% endblock %} - Eorzea Songbook</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
|
||||
<meta name="description" content="Listen to the motifs of Final Fantasy XIV's soundtrack." />
|
||||
<meta name="description" content="An unofficial library of the motifs in Final Fantasy XIV's soundtrack." />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Shippori+Mincho|Shippori+Mincho:bold|Zen+Maru+Gothic|Zen+Maru+Gothic:bold" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
|
||||
{%block sheet %}{% endblock %}
|
||||
@ -16,7 +16,10 @@
|
||||
<body>
|
||||
|
||||
{% block nav %}{% include 'nav.html' %}{% endblock %}
|
||||
<main>{% block content required %}{% endblock %}</main>
|
||||
{% block main %}<main>{% endblock %}
|
||||
{% block content required %}{% endblock %}
|
||||
{% block main2 %}</main>{% endblock %}
|
||||
|
||||
{% block footer %}{% include 'footer.html' %}{% endblock %}
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
<footer>
|
||||
|
||||
<p> The footer will be in here, when it's ready. </p>
|
||||
|
||||
<div class="footer-content">
|
||||
<span>
|
||||
Suggest a new connection
|
||||
</span>
|
||||
<span>
|
||||
<a href="#" class="top-of-page">↑Top of page↑</a>
|
||||
</span>
|
||||
<div class="copyright">
|
||||
<span>Audio is</span>
|
||||
<span>©2010-2023 SQUARE ENIX CO., LTD.</span>
|
||||
<span>All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@ -1,22 +1,84 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Home{% endblock %}
|
||||
{% block nav %}{% endblock %}
|
||||
{% block main %}{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
<h1 class="home-title">The Eorzea Songbook</h1>
|
||||
<main class="home-main">
|
||||
|
||||
<p> Explore the music of Final Fantasy XIV! Discover the recurring melodies in your favorite songs, or take a closer look at the motifs and their appearances. </p>
|
||||
<hgroup class="home-title">
|
||||
<h1>The Eorzea Songbook</h1>
|
||||
<h3>An unofficial library of motifs in the Final Fantasy XIV soundtrack.</h3>
|
||||
<p>Last updated: 26/06/2023</p>
|
||||
</hgroup>
|
||||
|
||||
<div class="home-nav">
|
||||
<a href="{{ url_for('songindex') }}" class="home-button">
|
||||
<img src="/static/songicon.png" alt="Song Index" />
|
||||
<h2>Songs</h2>
|
||||
</a>
|
||||
<div class="home-nav">
|
||||
<a href="{{ url_for('songindex') }}" class="home-button">
|
||||
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Index" />
|
||||
<h2 class="nav-text">Songs</h2>
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('motifindex') }}" class="home-button">
|
||||
<img src="/static/motificon.png" alt="Motif Index" />
|
||||
<h2>Motifs</h2>
|
||||
</a>
|
||||
</div>
|
||||
{% block footer %}{% endblock %}
|
||||
<a href="{{ url_for('motifindex') }}" class="home-button">
|
||||
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Index" />
|
||||
<h2 class="nav-text">Motifs</h2>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="home-body">
|
||||
<h2>What's a motif?</h2>
|
||||
<p>Have you ever been playing Final Fantasy XIV and thought you heard a song that sounds familiar?</p>
|
||||
<p>When a specific part of a song is used repeatedly to point out a character, location, or idea, it's called a motif (or leitmotif). Sometimes, a motif that was created in one song can be used in another, to draw a connection between two ideas in the story.</p>
|
||||
<p>For example, here's what you hear when you enter the city of Ishgard.</p>
|
||||
<div class="entrypage-clip">
|
||||
<audio
|
||||
controls
|
||||
src = "{{ url_for('static', filename='clip/') }}0288-024.flac" type="audio/flac">
|
||||
</audio>
|
||||
<span class="clip-pointer">
|
||||
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
|
||||
<a href = "{{ url_for('songpage', id=288) }}"> Solid </a>
|
||||
</span>
|
||||
</div>
|
||||
<p>And here's what you hear in Ishgard at night. The same notes are played, but this time it's slowed down, and played on just a piano. Sounds much easier to fall asleep to, doesn't it?</p>
|
||||
<div class="entrypage-clip">
|
||||
<audio
|
||||
controls
|
||||
src = "{{ url_for('static', filename='clip/') }}0317-024.flac" type="audio/flac">
|
||||
</audio>
|
||||
<span class="clip-pointer">
|
||||
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
|
||||
<a href = "{{ url_for('songpage', id=317) }}"> Night in the Brume </a>
|
||||
</span>
|
||||
</div>
|
||||
<p>Here's another song that plays in Ishgard at night - when you're in the Pillars, where the wealthy residents live. Notice how there are more instruments; a grand pipe organ and booming drums. A fancier tune for fancier people, but still using the same melody.</p>
|
||||
<div class="entrypage-clip">
|
||||
<audio
|
||||
controls
|
||||
src = "{{ url_for('static', filename='clip/') }}0294-024.flac" type="audio/flac">
|
||||
</audio>
|
||||
<span class="clip-pointer">
|
||||
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
|
||||
<a href = "{{ url_for('songpage', id=294) }}"> Nobility Sleeps </a>
|
||||
</span>
|
||||
</div>
|
||||
<p>Or this song, which plays during an important battle. Now our motif sounds like we're getting ready for a fight!</p>
|
||||
<div class="entrypage-clip">
|
||||
<audio
|
||||
controls
|
||||
src = "{{ url_for('static', filename='clip/') }}0337-024.flac" type="audio/flac">
|
||||
</audio>
|
||||
<span class="clip-pointer">
|
||||
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
|
||||
<a href = "{{ url_for('songpage', id=337) }}"> Heroes Never Die </a>
|
||||
</span>
|
||||
</div>
|
||||
<p>Once we know that this is melody represents Ishgard, the same tune can be used in all kinds of different songs to connect them back to that city. The composers of Final Fantasy XIV can tell us all kinds of things about Ishgard, just by changing up how they play the motif.</p>
|
||||
<p>Final Fantasy XIV's soundtrack is full of these! Not just for cities, but for dungeons, characters, expansions, and more. Discover the repeated melodies in your favorite songs, or check the motif pages to see where they show up.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
{% block main2 %}{% endblock %}
|
||||
{% endblock %}
|
||||
@ -6,21 +6,20 @@
|
||||
|
||||
{% block content %}
|
||||
<hgroup class="title-box eng-title">
|
||||
<img src="/static/motificon.png" alt="Motif Icon" class="title-icon"/><h1> {{ name }} </h1>
|
||||
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="title-icon"/><h1> {{ name }} </h1>
|
||||
</hgroup>
|
||||
<!-- Clips -->
|
||||
|
||||
<div class="entrypage-connections">
|
||||
<ul>
|
||||
{% for song_id, motif_id, song, feature in clip_info if feature%}
|
||||
{% include "motifpageclipget.html" %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h2>Featured In:</h2>
|
||||
<ul>
|
||||
{% for song_id, motif_id, song in clip_info %}
|
||||
<li class="entrypage-clip">
|
||||
<audio
|
||||
controls
|
||||
src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
|
||||
</audio>
|
||||
<span class="clip-pointer"><a href="/song/{{ song_id }}">{{ song }}</a></span>
|
||||
</li>
|
||||
{% for song_id, motif_id, song, feature in clip_info if not feature %}
|
||||
{% include "motifpageclipget.html" %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -6,16 +6,16 @@
|
||||
{% block content %}
|
||||
<section class="category-list">
|
||||
{% for category_id, name in category_info %}
|
||||
<div>
|
||||
<h2 class="sort-box category">{{ name }}</h2>
|
||||
<ul>
|
||||
<div class="sort-box category">
|
||||
<h2 class="sort-header category">{{ name }}</h2>
|
||||
<ul class="sort-list category">
|
||||
{% for motif_id, motif, category, count in motif_info if category == category_id %}
|
||||
<a href="{{ url_for('motifpage', id=motif_id) }}" class="entry-box motif">
|
||||
<li>
|
||||
<div class="motif-name">{{ motif }}</div>
|
||||
</li>
|
||||
<img src="/static/songicon.png" alt="Song Icon" class="count-icon"/>
|
||||
{% if count %}<div class="clip-count">⨯{{ count }}</div>{% endif %}
|
||||
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="count-icon"/>
|
||||
{% if count %}<div class="clip-count">⨯ {{ count }}</div>{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
13
templates/motifpageclipget.html
Normal file
13
templates/motifpageclipget.html
Normal file
@ -0,0 +1,13 @@
|
||||
<li class="entrypage-clip">
|
||||
<audio
|
||||
controls
|
||||
src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
|
||||
</audio>
|
||||
<span class="clip-pointer">
|
||||
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
|
||||
<a href="{{ url_for('songpage', id=song_id ) }}">{{ song }}</a>
|
||||
{% for album_song_id, album_code in album_info if album_song_id == song_id %}
|
||||
<img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" class="clip-album-icon"/>
|
||||
{% endfor %}
|
||||
</span>
|
||||
</li>
|
||||
@ -1,16 +1,31 @@
|
||||
<header>
|
||||
<nav>
|
||||
<ul class="top-buttons">
|
||||
<a href="{{ url_for('songindex') }}" class="song-button"><li><img src="/static/songicon.png" alt="Song Index" /></li></a>
|
||||
<a href="{{ url_for('homepage') }}" class="home-button"><li><img src="/static/songbook.png" alt="Home" /></li></a>
|
||||
<a href="{{ url_for('motifindex') }}" class="motif-button"><li><img src="/static/motificon.png" alt="Motif Index" /></li></a>
|
||||
<div class="nav-button song">
|
||||
<a href="{{ url_for('songindex') }}">
|
||||
<li><img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Index" class="nav-image"/>
|
||||
<h3 class="nav-text song">Songs</h3>
|
||||
</li></a>
|
||||
</div>
|
||||
<div class="nav-button home">
|
||||
<a href="{{ url_for('homepage') }}"><li>
|
||||
<img src="{{ url_for('static', filename='songbook.png') }}" alt="Home" class="nav-image" />
|
||||
</li></a>
|
||||
</div>
|
||||
<div class="nav-button motif">
|
||||
<a href="{{ url_for('motifindex') }}"><li>
|
||||
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Index" class="nav-image" />
|
||||
<h3 class="nav-text motif">Motifs</h3>
|
||||
</li></a>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="search-bar">
|
||||
<div class="search-items">
|
||||
<input
|
||||
id="search-input"
|
||||
type="search"
|
||||
name="q"
|
||||
autocomplete="off"
|
||||
|
||||
@ -1,12 +1,30 @@
|
||||
<h2>Search Results:</h2>
|
||||
<ul>
|
||||
{% for desc, id, name, _ in searchresult %}
|
||||
{% for desc, id, name, code, _ in searchresult %}
|
||||
{% if desc == 'song' %}
|
||||
<li><a href="{{ url_for('songpage', id=id) }}">Song: {{ name }} </a></li>
|
||||
<a href="{{ url_for('songpage', id=id) }}"><li>
|
||||
<span class="search-icon">
|
||||
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon"/>
|
||||
</span>
|
||||
<span class="search-type">Song:</span>
|
||||
{{ name }}
|
||||
</li></a>
|
||||
{% elif desc == 'album' %}
|
||||
<li><a href="{{ url_for('albumpage', id=id) }}">Album: {{ name }} </a></li>
|
||||
<a href="{{ url_for('songindex', _anchor='') }}{{ code }}" onclick="albumselect('{{ code }}')"><li>
|
||||
<span class="search-icon album">
|
||||
<img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}"/>
|
||||
</span>
|
||||
<span class="search-type">Album:</span>
|
||||
{{ name }}
|
||||
</li></a>
|
||||
{% elif desc == 'motif' %}
|
||||
<li><a href="{{ url_for('motifpage', id=id) }}">Motif: {{ name }} </a></li>
|
||||
<a href="{{ url_for('motifpage', id=id) }}"><li>
|
||||
<span class="search-icon">
|
||||
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon"/>
|
||||
</span>
|
||||
<span class="search-type">Motif:</span>
|
||||
{{ name }}
|
||||
</li></a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@ -3,12 +3,14 @@
|
||||
{% for name, _ in song_info %}{{ name }}{% endfor %}
|
||||
{% endblock %}
|
||||
|
||||
{% set clipmode = "motif" %}
|
||||
|
||||
{% block sheet %}<link rel="stylesheet" href="{{ url_for('static', filename='songbuttonpressed.css') }}" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<hgroup class="title-box">
|
||||
<div class="eng-title">
|
||||
<img src="/static/songicon.png" alt="Song Icon" />
|
||||
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" />
|
||||
{% for name, name_jp in song_info %}
|
||||
<h1>{{ name }}</h1>
|
||||
{% endfor %}
|
||||
@ -33,7 +35,11 @@
|
||||
<h2 >Artist: </h2>
|
||||
<ul>
|
||||
{% for name, name_rm, credit in artist_info %}
|
||||
<li>{{ credit }}: {% if name_rm %}{{ name_rm }} - {% endif %}{{ name }}</li>
|
||||
<li>
|
||||
<span class="songpage-credit">{{ credit }}:</span>
|
||||
<span>{{ name }}</span>
|
||||
<span>{% if name_rm %}{{ name_rm }} {% endif %}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@ -44,24 +50,39 @@
|
||||
<h2>Album: </h2>
|
||||
<ul>
|
||||
{% for album_id, track, album_name, album_code in album_info %}
|
||||
<li><a href="{{ url_for('songindex', _anchor='') }}{{ album_code }}">{{ album_name }}</a> - #{{ track }}</li>
|
||||
<li>
|
||||
<img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" class="songpage-img"/>
|
||||
<a href="{{ url_for('songindex', _anchor='') }}{{ album_code }}">{{ album_name }}</a> - Track #{{ track }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
|
||||
{% if description %}
|
||||
|
||||
<div class="song-location">
|
||||
<h2>Used In:</h2>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
<!-- Motifs -->
|
||||
|
||||
{% if clip_info %}
|
||||
<div class="entrypage-connections">
|
||||
<h2>Motifs Featured: </h2>
|
||||
<ul>
|
||||
{% for song_id, motif_id, motif in clip_info %}
|
||||
<li class="entrypage-clip">
|
||||
<audio
|
||||
controls
|
||||
src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
|
||||
</audio>
|
||||
<span class="clip-pointer"><a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a></span>
|
||||
</li>
|
||||
{% include "songpageclipget.html" %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="entrypage-connections">
|
||||
<h2>No connections yet. Suggest one?</h3>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -9,22 +9,23 @@
|
||||
{% block content %}
|
||||
<section class="album-list">
|
||||
{% for album_id, name, date, code in album_info %}
|
||||
<div class="sort-box album">
|
||||
<input type="radio" name="album" id="{{ code }}" class="collapse">
|
||||
<label for="{{ code }}" id="{{ code }}" class="sort-box album" onclick="collapse(event)">
|
||||
<label for="{{ code }}" id="{{ code }}_label" class="sort-header album" onclick="collapse(event)">
|
||||
<img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}" class="album-icon"/>
|
||||
<h2>{{ name }}</h2>
|
||||
</label>
|
||||
<ul class="sort-list">
|
||||
<ul class="sort-list album">
|
||||
<span class="date">Released: {{ date }}</span>
|
||||
{% for song_id, album, track, name, name_jp, count in song_info if album_id == album %}
|
||||
{% if count > 0 %}
|
||||
{% if count %}
|
||||
<a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song full">
|
||||
<li>
|
||||
<span class="track-number full">#{{ track }}: </span>
|
||||
<span class="track-name full">{{ name }}</span>
|
||||
{% if name_jp %}<span class="track-name-jp full">{{ name_jp }}</span>{% endif %}
|
||||
</li>
|
||||
<img src="/static/motificon.png" alt="Motif Icon" class="count-icon"/>
|
||||
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="count-icon"/>
|
||||
<span class="clip-count">⨯ {{ count }} </span>
|
||||
</a>
|
||||
{% else %}
|
||||
@ -38,6 +39,7 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
|
||||
10
templates/songpageclipget.html
Normal file
10
templates/songpageclipget.html
Normal file
@ -0,0 +1,10 @@
|
||||
<li class="entrypage-clip">
|
||||
<audio
|
||||
controls
|
||||
src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
|
||||
</audio>
|
||||
<span class="clip-pointer">
|
||||
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="connection-icon"/>
|
||||
<a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a>
|
||||
</span>
|
||||
</li>
|
||||
Loading…
Reference in New Issue
Block a user