diff --git a/base/static/css/main.css b/base/static/css/main.css index 80a38b2..74e4488 100644 --- a/base/static/css/main.css +++ b/base/static/css/main.css @@ -17,7 +17,7 @@ form a[role="button"] { width: 100%; } -i.owner { +i.owner, .gold { color: var(--pico-color-amber-200); } @@ -25,7 +25,7 @@ i.owner { display: none; } -a.group { +a.group, a.running { text-decoration: none; } @@ -77,11 +77,6 @@ article.message { } #hero { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; background: radial-gradient( circle 50vh at calc(100vw - 4rem) 50%, var(--pico-primary-background), @@ -90,19 +85,41 @@ article.message { color-mix(in hsl, var(--pico-primary-background) 30%, var(--pico-background-color)) 60%, color-mix(in hsl, var(--pico-primary-background) 10%, var(--pico-background-color)) 80%, var(--pico-background-color)); - display: grid; - grid-template-rows: 1fr min-content; - align-items: center; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; + overflow-y: auto; padding: 4rem; - .big-logo { - font-size: 8rem; + main { + display: contents; } - - h1 { - font-size: 4rem; + section { + max-width: 20rem; } } +.full-page { + height: 100%; + display: grid; + grid-template-rows: 1fr; + align-items: center; + margin-bottom: 4rem; + + &.r { + -ms-grid-column-align: end; + } + .big-logo { + font-size: 8rem; + } + + h1 { + font-size: 4rem; + } +} + h1, h2, @@ -117,7 +134,7 @@ h6, i.i { margin-right: .5em; } -i.hl { +i.hl, .me { color: var(--pico-primary); } @@ -160,10 +177,48 @@ table select { color: var(--pico-color-sand-300); } } - .score { - font-weight: 900; - color: var(--pico-color-zinc-500); margin-left: .5em; } } + + +.score { + font-weight: 900; + color: var(--pico-color-zinc-500); +} +.correct { + .score, i { + color: var(--pico-color-lime-200);} +} +.wrong { + .score, i { + color: var(--pico-color-red-500);} +} + +table.results, table.musics { + white-space: nowrap; +} +.sc i { + margin-right: .5em; +} + +@media (width < 576px) { + [role="group"] { + display: grid; + & > :first-child { + border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0 !important; + } + & > :not(:first-child) { + margin-left: 0 !important; + margin-top: calc(var(--pico-border-width) * -1); + } + & > :last-child { + border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius) !important; + } + } +} + +.brand-name { + color: var(--pico-primary); +} diff --git a/base/static/favicon/apple-touch-icon.png b/base/static/favicon/apple-touch-icon.png new file mode 100644 index 0000000..abb8a48 Binary files /dev/null and b/base/static/favicon/apple-touch-icon.png differ diff --git a/base/static/favicon/favicon-96x96.png b/base/static/favicon/favicon-96x96.png new file mode 100644 index 0000000..beab288 Binary files /dev/null and b/base/static/favicon/favicon-96x96.png differ diff --git a/base/static/favicon/favicon.ico b/base/static/favicon/favicon.ico new file mode 100644 index 0000000..178d60c Binary files /dev/null and b/base/static/favicon/favicon.ico differ diff --git a/base/static/favicon/favicon.svg b/base/static/favicon/favicon.svg new file mode 100644 index 0000000..63c10e0 --- /dev/null +++ b/base/static/favicon/favicon.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + diff --git a/base/static/favicon/site.webmanifest b/base/static/favicon/site.webmanifest new file mode 100644 index 0000000..af6d059 --- /dev/null +++ b/base/static/favicon/site.webmanifest @@ -0,0 +1,21 @@ +{ + "name": "MyWebSite", + "short_name": "MySite", + "icons": [ + { + "src": "/web-app-manifest-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "/web-app-manifest-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" + } + ], + "theme_color": "#aa40bf", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/base/static/favicon/web-app-manifest-192x192.png b/base/static/favicon/web-app-manifest-192x192.png new file mode 100644 index 0000000..f7f97da Binary files /dev/null and b/base/static/favicon/web-app-manifest-192x192.png differ diff --git a/base/static/favicon/web-app-manifest-512x512.png b/base/static/favicon/web-app-manifest-512x512.png new file mode 100644 index 0000000..9e4e381 Binary files /dev/null and b/base/static/favicon/web-app-manifest-512x512.png differ diff --git a/base/templates/auth/user_form.html b/base/templates/auth/user_form.html index 20c40a8..c895f16 100644 --- a/base/templates/auth/user_form.html +++ b/base/templates/auth/user_form.html @@ -1,6 +1,24 @@ {% extends "base.html" %} {% load form %} {% block content %} -

Créer un compte

- {% form form submit="Créer mon compte" %} - {% endblock content %} +

Créer mon compte

+ {% for error in form.non_field_errors %}
{{ error }}
{% endfor %} +
+ {% csrf_token %} +
+ {% for field in form %} + + {% endfor %} +
+ +
+ J'ai déjà un compte +
+
+{% endblock content %} diff --git a/base/templates/base.html b/base/templates/base.html index 16be674..504228f 100644 --- a/base/templates/base.html +++ b/base/templates/base.html @@ -11,7 +11,7 @@ Musik {% endblock title %} - + {% include "favicon.html" %} + + + + + + diff --git a/base/templates/footer.html b/base/templates/footer.html index 52895f6..6c57641 100644 --- a/base/templates/footer.html +++ b/base/templates/footer.html @@ -1 +1 @@ -Musik {{ VERSION }} – © Edgar P. Burkhart – Mentions légales +Musik {{ VERSION }} – © Edgar P. Burkhart – Mentions légales et confidentialité diff --git a/base/templates/hero.html b/base/templates/hero.html index 04c2aee..813c011 100644 --- a/base/templates/hero.html +++ b/base/templates/hero.html @@ -1,11 +1,25 @@ {% load static %}
- -

Musik

-

- Jouer -

+
+
+ +

Musik

+

+ Jouer +

+
+
+
+
+

+ Musik Le jeu où ta playlist devient ton arme secrète ! +

+

+ Invite ta bande, ajoute tes sons fétiches, et c’est parti ! Une playlist Youtube apparaît, mélangeant les coups de cœur de tout le monde. Le jeu ? Écoute, devine qui a choisi quoi, et découvre les secrets musicaux de tes potes. Entre pièges, révélations et fous rires, Musik c’est le jeu parfait pour tester vos oreilles… et vos amitiés. Prêt à jouer le DJ incognito ? +

+
+