feat: update styling

This commit is contained in:
Julian Lobbes 2023-08-01 06:52:18 +02:00
parent ed8d8ad8ee
commit 33d01edf27
23 changed files with 542 additions and 242 deletions

View File

@ -41,10 +41,6 @@ as well as an [API reference guide](https://developer.withings.com/api-reference
## TODOs
- [ ] implement regular notifications
- [ ] fix colourtheme
- [ ] fix favicons
- [ ] add text content
- [ ] fix overflow on `mews-continue`
- [ ] add `register-final` view

View File

@ -25,7 +25,7 @@
<div class="flex flex-col">
{% render_field form.username|add_error_class:"error" %}
<label class="text-sm text-accent-800 font-semibold" for="{{ form.username.id_for_label }}">
<label for="{{ form.username.id_for_label }}">
{% render_field form.username.label %}
</label>
{% if form.username.errors %}
@ -39,7 +39,7 @@
<div class="flex flex-col">
{% render_field form.password|add_error_class:"error" %}
<label class="text-sm text-accent-800 font-semibold" for="{{ form.password.id_for_label }}">
<label for="{{ form.password.id_for_label }}">
{% render_field form.password.label %}
</label>
{% if form.password.errors %}

View File

@ -25,7 +25,7 @@
<div class="flex flex-col">
{% render_field user_form.first_name|add_error_class:"error" %}
<label class="text-sm text-accent-800 font-semibold" for="{{ user_form.first_name.id_for_label }}">
<label for="{{ user_form.first_name.id_for_label }}">
{% render_field user_form.first_name.label %}
</label>
{% if user_form.first_name.errors %}
@ -39,7 +39,7 @@
<div class="flex flex-col">
{% render_field user_form.last_name|add_error_class:"error" %}
<label class="text-sm text-accent-800 font-semibold" for="{{ user_form.last_name.id_for_label }}">
<label for="{{ user_form.last_name.id_for_label }}">
{% render_field user_form.last_name.label %}
</label>
{% if user_form.last_name.errors %}
@ -53,7 +53,7 @@
<div class="flex flex-col">
{% render_field profile_form.date_of_birth|add_error_class:"error" %}
<label class="text-sm text-accent-800 font-semibold" for="{{ profile_form.date_of_birth.id_for_label }}">
<label for="{{ profile_form.date_of_birth.id_for_label }}">
{% render_field profile_form.date_of_birth.label %}
</label>
{% if profile_form.date_of_birth.errors %}
@ -67,7 +67,7 @@
<div class="flex flex-col">
{% render_field profile_form.sex|add_error_class:"error" %}
<label class="text-sm text-accent-800 font-semibold" for="{{ profile_form.sex.id_for_label }}">
<label for="{{ profile_form.sex.id_for_label }}">
{% render_field profile_form.sex.label %}
</label>
{% if profile_form.sex.errors %}
@ -81,7 +81,7 @@
<div class="flex flex-col">
{% render_field user_form.email|add_error_class:"error" %}
<label class="text-sm text-accent-800 font-semibold" for="{{ user_form.email.id_for_label }}">
<label for="{{ user_form.email.id_for_label }}">
{% render_field user_form.email.label %}
</label>
{% if user_form.email.errors %}
@ -95,7 +95,7 @@
<div class="flex flex-col">
{% render_field user_form.username|add_error_class:"error" %}
<label class="text-sm text-accent-800 font-semibold" for="{{ user_form.username.id_for_label }}">
<label for="{{ user_form.username.id_for_label }}">
{% render_field user_form.username.label %}
</label>
{% if user_form.username.errors %}
@ -109,7 +109,7 @@
<div class="flex flex-col">
{% render_field user_form.password1|add_error_class:"error" %}
<label class="text-sm text-accent-800 font-semibold" for="{{ user_form.password1.id_for_label }}">
<label for="{{ user_form.password1.id_for_label }}">
{% render_field user_form.password1.label %}
</label>
{% if user_form.password1.errors %}
@ -123,7 +123,7 @@
<div class="flex flex-col">
{% render_field user_form.password2|add_error_class:"error" %}
<label class="text-sm text-accent-800 font-semibold" for="{{ user_form.password2.id_for_label }}">
<label for="{{ user_form.password2.id_for_label }}">
{% render_field user_form.password2.label %}
</label>
{% if user_form.password2.errors %}

View File

@ -10,6 +10,7 @@
<meta name="author" content="{% block author %}Julian Lobbes{% endblock author %}">
<link rel="stylesheet" href="{% static 'dist/main.css' %}">
<link rel="icon" type="image/png" href="{% static 'medwings/images/logo/medwings-logo.png' %}">
</head>
<body class="global">
<header class="global">

View File

@ -1,3 +1,3 @@
<div class="flex gap-4 justify-center items-center p-2 bg-background-700 text-sm">
<div class="flex gap-4 justify-center items-center p-2 bg-primary-100 text-sm text-background">
<p>&copy; 2023 Julian Lobbes</p>
</div>

File diff suppressed because one or more lines are too long

View File

@ -8,9 +8,10 @@
<div class="flex flex-col justify-center items-center gap-8 py-4 px-8 w-full h-full">
<h1 class="w-full text-center">Dashboard</h1>
<p class="text-secondary font-semibold">This page shows all of your recorded health data.</p>
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
<h2 class="w-full text-center">MEWS Measurements</h2>
<h2 class="w-full text-secondary-400 text-center">MEWS</h2>
{% if mews_data %}
<canvas id="mewsChart"></canvas>
{% else %}
@ -21,7 +22,7 @@
</div>
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
<h2 class="w-full text-center">Blood Pressure Measurements</h2>
<h2 class="w-full text-secondary-400 text-center">Blood Pressure</h2>
{% if blood_pressure_data %}
<canvas id="bloodPressureChart"></canvas>
{% else %}
@ -32,7 +33,7 @@
</div>
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
<h2 class="w-full text-center">Body Temperature Measurements</h2>
<h2 class="w-full text-secondary-400 text-center">Body Temperature</h2>
{% if body_temp_data %}
<canvas id="bodyTempChart"></canvas>
{% else %}
@ -43,7 +44,7 @@
</div>
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
<h2 class="w-full text-center">Heart Rate Measurements</h2>
<h2 class="w-full text-secondary-400 text-center">Heart Rate</h2>
{% if heart_rate_data %}
<canvas id="heartRateChart"></canvas>
{% else %}
@ -54,7 +55,7 @@
</div>
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
<h2 class="w-full text-center">Blood Oxygenation Measurements</h2>
<h2 class="w-full text-secondary-400 text-center">Blood Oxygenation</h2>
{% if spo2_level_data %}
<canvas id="spo2LevelChart"></canvas>
{% else %}
@ -65,7 +66,7 @@
</div>
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
<h2 class="w-full text-center">Respiration Score Measurements</h2>
<h2 class="w-full text-secondary-400 text-center">Respiration Score</h2>
{% if respiration_score_data %}
<canvas id="respirationScoreChart"></canvas>
{% else %}

File diff suppressed because one or more lines are too long

View File

@ -8,12 +8,16 @@
{% block content %}
<div class="flex flex-col justify-center items-center gap-2 py-4 mx-4 max-w-4xl">
<h1>Record your health status</h1>
<div id="pageContainer" class="grid grid-cols-3 gap-6 text-xl justify-center items-center w-full p-4 border rounded-md overflow-hidden">
<div class="flex flex-col gap-2 items-center call-to-action-box w-full text-center sm:text-start">
<p class="font-semibold">Please start measuring your vitals using your devices now.</p>
<p>Your measurement results will be synchronized automatically.</p>
</div>
<div id="pageContainer" class="grid grid-cols-3 gap-6 text-xl justify-center items-center w-full p-4 border border-secondary rounded-md overflow-hidden">
<div class="font-semibold text-center sm:text-start col-span-2">
<p>Blood Pressure (systolic)</p>
</div>
<div id="bloodPressureLoader" class="loader h-1 bg-accent loader--loading"></div>
<div id="bloodPressureValue" class="loader font-bold text-end hidden">
<div id="bloodPressureLoader" class="loader loader-bar loader--loading"></div>
<div id="bloodPressureValue" class="loader loader-value hidden">
<p><span id="bloodPressureValueNumber"></span> mmHG</p>
</div>
@ -21,8 +25,8 @@
<div class="font-semibold text-center sm:text-start col-span-2">
<p>Body Temperature</p>
</div>
<div id="bodyTempLoader" class="loader h-1 bg-accent loader--loading"></div>
<div id="bodyTempValue" class="loader font-bold text-end hidden">
<div id="bodyTempLoader" class="loader loader-bar loader--loading"></div>
<div id="bodyTempValue" class="loader loader-value hidden">
<p><span id="bodyTempValueNumber"></span> °C</p>
</div>
@ -30,8 +34,8 @@
<div class="font-semibold text-center sm:text-start col-span-2">
<p>Heart Rate</p>
</div>
<div id="heartRateLoader" class="loader h-1 bg-accent loader--loading"></div>
<div id="heartRateValue" class="loader font-bold text-end hidden">
<div id="heartRateLoader" class="loader loader-bar loader--loading"></div>
<div id="heartRateValue" class="loader loader-value hidden">
<p><span id="heartRateValueNumber"></span> bpm</p>
</div>
@ -39,8 +43,8 @@
<div class="font-semibold text-center sm:text-start col-span-2">
<p>Blood Oxygenation</p>
</div>
<div id="spo2Loader" class="loader h-1 bg-accent loader--loading"></div>
<div id="spo2Value" class="loader font-bold text-end hidden">
<div id="spo2Loader" class="loader loader-bar loader--loading"></div>
<div id="spo2Value" class="loader loader-value hidden">
<p><span id="spo2ValueNumber"></span> %</p>
</div>
@ -48,8 +52,8 @@
<div class="font-semibold text-center sm:text-start col-span-2">
<p>Respiration Score</p>
</div>
<div id="respirationScoreLoader" class="loader h-1 bg-accent loader--loading"></div>
<div id="respirationScoreValue" class="loader font-bold text-end hidden">
<div id="respirationScoreLoader" class="loader loader-bar loader--loading"></div>
<div id="respirationScoreValue" class="loader loader-value hidden">
<p><span id="respirationScoreValueNumber"></span></p>
</div>
@ -57,8 +61,8 @@
<div class="font-semibold text-center sm:text-start col-span-2">
<p>MEWS</p>
</div>
<div id="mewsLoader" class="loader h-1 bg-accent loader--loading"></div>
<div id="mewsValue" class="loader font-bold text-end hidden">
<div id="mewsLoader" class="loader loader-bar loader--loading"></div>
<div id="mewsValue" class="loader loader-value hidden">
<p><span id="mewsValueNumber"></span></p>
</div>
</div>

View File

@ -6,9 +6,9 @@
{% endblock title %}
{% block content %}
<div class="flex flex-col justify-center items-center gap-2 py-4 mx-4 max-w-4xl">
<div class="flex flex-col justify-center items-center gap-6 sm:gap-12 py-4 mx-4 max-w-xl">
<h1>Record your health status</h1>
<div class="flex flex-col justify-center items-center gap-2">
<div class="flex flex-col justify-center items-center gap-2 call-to-action-box">
<div class="flex justify-center items-center gap-4">
<img class="max-h-24 max-w-24 drop-shadow-lg saturate-50" src="{% static 'medwings/images/devices/withings-bpm-core.webp' %}" alt="A Withings BPM core.">
<img class="max-h-24 max-w-24 drop-shadow-lg saturate-50" src="{% static 'medwings/images/devices/withings-thermo.webp' %}" alt="A Withings Thermo.">

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -1,66 +1,87 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg
fill="#000000"
version="1.1"
id="Capa_1"
width="800.00897"
height="800.00897"
viewBox="0 0 45.968516 45.968516"
id="Layer_1"
viewBox="0 0 501.31603 501.31603"
xml:space="preserve"
sodipodi:docname="medwings-logo.svg"
width="501.31601"
height="501.31601"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
inkscape:export-filename="medwings-logo.png"
inkscape:export-xdpi="30.719656"
inkscape:export-ydpi="30.719656"
inkscape:export-xdpi="49.022972"
inkscape:export-ydpi="49.022972"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs4"><linearGradient
id="linearGradient7"
inkscape:collect="always"><stop
style="stop-color:#ec3636;stop-opacity:1;"
offset="0"
id="stop7" /><stop
style="stop-color:#e2df46;stop-opacity:1;"
offset="1"
id="stop8" /></linearGradient>&#10; &#10;<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient7"
id="linearGradient8"
x1="-0.88695079"
y1="35.375"
x2="46.902077"
y2="9.6768303"
gradientUnits="userSpaceOnUse" /><linearGradient
inkscape:collect="always"
xlink:href="#linearGradient7"
id="linearGradient9"
gradientUnits="userSpaceOnUse"
x1="-0.88695079"
y1="35.375"
x2="46.902077"
y2="9.6768303" /><linearGradient
inkscape:collect="always"
xlink:href="#linearGradient7"
id="linearGradient10"
gradientUnits="userSpaceOnUse"
x1="-0.88695079"
y1="35.375"
x2="46.902077"
y2="9.6768303" /><linearGradient
inkscape:collect="always"
xlink:href="#linearGradient7"
id="linearGradient11"
gradientUnits="userSpaceOnUse"
x1="-0.88695079"
y1="35.375"
x2="46.902077"
y2="9.6768303" /></defs><sodipodi:namedview
id="namedview4"
id="defs9"><linearGradient
id="linearGradient12"
inkscape:collect="always"><stop
style="stop-color:#b90000;stop-opacity:1;"
offset="0"
id="stop12" /><stop
style="stop-color:#ee6464;stop-opacity:1;"
offset="1"
id="stop13" /></linearGradient><inkscape:path-effect
effect="fillet_chamfer"
id="path-effect12"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1"
radius="8"
unit="px"
method="auto"
mode="F"
chamfer_steps="1"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" /><inkscape:path-effect
effect="fillet_chamfer"
id="path-effect11"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1"
radius="8"
unit="px"
method="auto"
mode="F"
chamfer_steps="1"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" /><inkscape:path-effect
effect="fillet_chamfer"
id="path-effect10"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1 @ F,0,0,1,0,8,0,1"
radius="8"
unit="px"
method="auto"
mode="F"
chamfer_steps="1"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" /><linearGradient
inkscape:collect="always"
xlink:href="#linearGradient12"
id="linearGradient13"
x1="114.10844"
y1="427.41153"
x2="402.21704"
y2="163.0332"
gradientUnits="userSpaceOnUse" /></defs><sodipodi:namedview
id="namedview9"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
@ -69,24 +90,65 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="1.0275"
inkscape:cx="400"
inkscape:cy="371.77616"
inkscape:zoom="1.1352357"
inkscape:cx="264.26231"
inkscape:cy="205.24373"
inkscape:window-width="1900"
inkscape:window-height="1004"
inkscape:window-x="10"
inkscape:window-y="38"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />&#10;<g
id="g3"
style="fill:url(#linearGradient8);fill-opacity:1"
transform="translate(1.3144378e-4,-3.0572798e-4)">&#10; <path
d="m 44.887,10.992 c -1.108,-0.732 -2.603,-0.425 -3.33,0.683 -1.736,2.631 -4.229,3.869 -6.704,4.869 h -0.002 c 2.439,3 2.14,8.199 -0.928,11.267 -0.052,0.051 -1.104,1.101 -2.487,2.477 1.027,-0.073 2.096,-0.217 3.179,-0.461 3.148,-0.713 6.408,-2.269 9.085,-5.335 0.872,-1 0.77,-2.521 -0.231,-3.394 -0.013,-0.009 -0.023,-0.015 -0.036,-0.024 0.561,-0.555 1.097,-1.166 1.603,-1.842 0.796,-1.063 0.58,-2.57 -0.482,-3.366 -0.027,-0.021 -0.06,-0.033 -0.087,-0.052 0.386,-0.464 0.756,-0.958 1.105,-1.489 0.73,-1.11 0.423,-2.602 -0.685,-3.333 z"
id="path1"
style="fill:url(#linearGradient9);fill-opacity:1;stroke:none" />&#10; <path
d="m 9.478,21.624 c 0,-1.85 0.578,-3.606 1.636,-5.079 C 8.638,15.759 6.146,14.307 4.411,11.676 3.682,10.568 2.189,10.26 1.081,10.992 c -1.108,0.731 -1.415,2.223 -0.684,3.332 0.351,0.531 0.721,1.025 1.105,1.489 -0.027,0.019 -0.059,0.031 -0.086,0.052 -1.063,0.796 -1.279,2.303 -0.483,3.366 0.506,0.676 1.042,1.287 1.603,1.842 C 2.523,21.082 2.512,21.088 2.5,21.097 1.499,21.97 1.396,23.49 2.268,24.49 c 2.677,3.067 5.937,4.623 9.085,5.336 1.083,0.244 2.151,0.388 3.18,0.461 -1.386,-1.38 -2.442,-2.432 -2.493,-2.482 -1.653,-1.651 -2.562,-3.846 -2.562,-6.181 z"
id="path2"
style="fill:url(#linearGradient10);fill-opacity:1;stroke:none" />&#10; <path
d="m 32.483,16.857 c -1.316,-1.316 -3.042,-1.974 -4.769,-1.974 -1.717,0 -3.435,0.652 -4.748,1.956 -1.314,-1.304 -3.031,-1.956 -4.749,-1.956 -1.726,0 -3.45,0.658 -4.767,1.974 -2.633,2.632 -2.633,6.902 0,9.535 0.128,0.128 6.376,6.346 8.677,8.636 0.231,0.231 0.535,0.347 0.839,0.347 0.304,0 0.607,-0.115 0.839,-0.347 2.301,-2.29 8.549,-8.507 8.677,-8.636 2.633,-2.634 2.633,-6.903 10e-4,-9.535 z"
id="path3"
style="fill:url(#linearGradient11);fill-opacity:1;stroke:none" />&#10; </g>&#10;</svg>
inkscape:current-layer="Layer_1" />&#10; &#10; &#10; &#10; &#10; <g
id="all"
inkscape:label="all"
transform="translate(-5.3419952,-4.8412612)"><g
id="wings"
inkscape:label="wings"
style="fill:#6aa4bf;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-dasharray:none;stroke-opacity:1"
transform="translate(0,48)">&#10; <path
style="fill:#6aa4bf;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-dasharray:none;stroke-opacity:1"
d="m 398.266,86.092 c -25.518,0 -46.104,19.473 -46.104,44.992 v 41.853 l 39.925,33.359 h 16.01 c 13.263,0 23.503,-12.09 23.503,-25.355 v -14.365 h 8.517 c 13.263,0 23.886,-12.398 23.886,-25.661 v -16.01 c 21.95,0 40.155,-14.773 40.155,-38.813 z"
id="path1" />&#10; <path
style="fill:#6aa4bf;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-dasharray:none;stroke-opacity:1"
d="m 113.734,86.092 c 25.518,0 46.104,19.473 46.104,44.992 v 41.853 l -39.925,33.359 h -16.01 C 90.64,206.296 80.4,194.206 80.4,180.941 v -14.365 h -8.517 c -13.263,0 -23.886,-12.398 -23.886,-25.661 v -16.01 c -24.041,0 -40.155,-14.773 -40.155,-38.813 z"
id="path2" />&#10; </g><g
id="heart"
inkscape:label="heart"><path
style="fill:url(#linearGradient13);fill-opacity:1;stroke:#000000;stroke-width:5;stroke-dasharray:none;stroke-opacity:1"
d="m 376.286,188.964 c -31.262,-31.262 -81.949,-31.262 -113.21,0 -0.296,0.296 -3.427,3.427 -8.491,8.491 -3.383,-3.383 -5.422,-5.422 -5.66,-5.66 -31.262,-31.262 -81.948,-31.262 -113.21,0 -31.262,31.262 -31.262,81.949 0,113.21 0.239,0.239 118.871,118.871 118.871,118.871 0,0 121.406,-121.406 121.702,-121.702 31.26,-31.262 31.26,-81.948 -0.002,-113.21 z"
id="path3" /><path
style="fill:#ffffff"
d="m 367.906,244.969 h -15.679 c 0,-17.769 -14.698,-32.174 -32.468,-32.174 v -15.679 c 27.177,10e-4 48.147,21.722 48.147,47.853 z"
id="path7" /></g><g
id="blips"
inkscape:label="blips"
style="stroke:#000000;stroke-width:5;stroke-dasharray:none;stroke-opacity:1">&#10; <path
x="247.64101"
y="86.086998"
style="fill:#36c9a3;stroke:#000000;stroke-width:5;stroke-dasharray:none;stroke-opacity:1"
width="15.679"
height="48.081001"
id="rect7"
inkscape:path-effect="#path-effect12"
sodipodi:type="rect"
d="m 255.64101,86.086998 a 7.8411428,7.8411428 46.172867 0 1 7.679,8 V 126.168 a 8,8 135 0 1 -8,8 7.8411428,7.8411428 46.172867 0 1 -7.679,-8 V 94.086998 a 8,8 135 0 1 8,-8 z" />&#10; <path
x="284.17801"
y="111.923"
transform="matrix(-0.7071,-0.7071,0.7071,-0.7071,407.3551,426.5414)"
style="fill:#36c9a3;stroke:#000000;stroke-width:5.00005;stroke-dasharray:none;stroke-opacity:1"
width="15.679"
height="33.963001"
id="rect8"
inkscape:path-effect="#path-effect11"
sodipodi:type="rect"
d="m 292.17801,111.923 a 7.8411428,7.8411428 46.172867 0 1 7.679,8 v 17.963 a 8,8 135 0 1 -8,8 7.8411428,7.8411428 46.172867 0 1 -7.679,-8 v -17.963 a 8,8 135 0 1 8,-8 z" />&#10; <path
x="202.99899"
y="121.072"
transform="matrix(-0.7071,-0.7071,0.7071,-0.7071,284.3756,375.6156)"
style="fill:#36c9a3;stroke:#000000;stroke-width:5.00005;stroke-dasharray:none;stroke-opacity:1"
width="33.963001"
height="15.679"
id="rect9"
inkscape:path-effect="#path-effect10"
sodipodi:type="rect"
d="m 210.99899,121.072 h 17.963 a 8,8 45 0 1 8,8 7.8411428,7.8411428 136.17287 0 1 -8,7.679 h -17.963 a 8,8 45 0 1 -8,-8 7.8411428,7.8411428 136.17287 0 1 8,-7.679 z" />&#10; </g></g>&#10;</svg>

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

View File

@ -0,0 +1,31 @@
<svg width="512mm" height="512mm" viewBox="0 0 512 512" id="hamburger">
<g id="hamburger-all" transform="translate(0,-18.119038)">
<path
style="fill:#010202;fill-opacity:1;stroke:#000000;stroke-width:2.2225;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:15.6;stroke-dasharray:none;stroke-opacity:1"
id="hamburger-top"
width="427.90082"
height="45.731606"
x="46.167351"
y="69.705063"
d="M 69.450684,69.705063 H 450.78484 a 23.283333,23.283333 45 0 1 23.28333,23.283333 22.869615,22.869615 136.04611 0 1 -23.28333,22.448274 H 69.450684 A 23.283333,23.283333 45 0 1 46.167351,92.153335 22.869615,22.869615 136.04611 0 1 69.450684,69.705063 Z"
transform="translate(-4.1177597,40.551704)" />
<path
style="fill:#010202;fill-opacity:1;stroke:#000000;stroke-width:2.2225;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:15.6;stroke-dasharray:none;stroke-opacity:1"
id="hamburger-middle"
width="427.90082"
height="45.731606"
x="46.167351"
y="69.705063"
d="M 69.450684,69.705063 H 450.78484 a 23.283333,23.283333 45 0 1 23.28333,23.283333 22.869615,22.869615 136.04611 0 1 -23.28333,22.448274 H 69.450684 A 23.283333,23.283333 45 0 1 46.167351,92.153335 22.869615,22.869615 136.04611 0 1 69.450684,69.705063 Z"
transform="translate(-4.1177597,181.54817)" />
<path
style="fill:#010202;fill-opacity:1;stroke:#000000;stroke-width:2.2225;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:15.6;stroke-dasharray:none;stroke-opacity:1"
id="hamburger-bottom"
width="427.90082"
height="45.731606"
x="46.167351"
y="69.705063"
d="M 69.450684,69.705063 H 450.78484 a 23.283333,23.283333 45 0 1 23.28333,23.283333 22.869615,22.869615 136.04611 0 1 -23.28333,22.448274 H 69.450684 A 23.283333,23.283333 45 0 1 46.167351,92.153335 22.869615,22.869615 136.04611 0 1 69.450684,69.705063 Z"
transform="translate(-4.1177597,322.54464)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -370,10 +370,40 @@
}
/* NotoColorEmoji */
/* PlayfairDisplaySC */
@font-face {
font-family: 'NotoColorEmoji';
src: url('/assets/fonts/notocoloremoji/notocoloremoji-regular.ttf') format('truetype');
font-family: 'PlayfairDisplaySC';
src: url('/assets/fonts/playfairdisplaysc/playfairdisplaysc-regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'PlayfairDisplaySC';
src: url('/assets/fonts/playfairdisplaysc/playfairdisplaysc-regular-italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'PlayfairDisplaySC';
src: url('/assets/fonts/playfairdisplaysc/playfairdisplaysc-bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'PlayfairDisplaySC';
src: url('/assets/fonts/playfairdisplaysc/playfairdisplaysc-bold-italic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'PlayfairDisplaySC';
src: url('/assets/fonts/playfairdisplaysc/playfairdisplaysc-black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'PlayfairDisplaySC';
src: url('/assets/fonts/playfairdisplaysc/playfairdisplaysc-black-italic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}

View File

@ -8,10 +8,17 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 600;
font-style: normal;
text-align: center;
line-height: 1;
}
h1 {
font-size: 3rem;
font-size: 3rem;
@apply text-primary-200;
}
h1.title {
@apply font-title font-bold;
@apply underline text-secondary-500/90;
}
h2 {
@ -34,59 +41,68 @@ h6 {
font-size: 1rem;
}
p {
@apply text-center sm:text-start;
}
input {
@apply rounded rounded-md drop-shadow-sm px-2 py-1;
@apply bg-accent-100;
@apply bg-secondary/25;
@apply w-full;
}
input[type="submit"] {
@apply rounded rounded-lg drop-shadow-md px-4 py-2;
@apply bg-accent-600;
@apply bg-secondary hover:bg-secondary-600;
@apply cursor-pointer;
@apply font-semibold;
@apply hover:drop-shadow-xl;
}
select {
@apply rounded rounded-md drop-shadow-sm px-2 py-1;
@apply bg-accent-100;
@apply bg-secondary/25;
@apply w-full;
}
select.error {
@apply border border-failure;
@apply border-2 border-failure/50;
}
input.error {
@apply border border-failure;
@apply border-2 border-failure/50;
}
fieldset {
@apply border border-accent p-4;
@apply border border-secondary p-4;
}
legend {
@apply text-sm text-accent-600 px-2;
@apply text-sm text-secondary px-2;
}
label {
@apply text-sm text-secondary/75 font-semibold;
}
a {
@apply underline text-primary-300;
a:not(.btn, .btn-outline) {
@apply underline text-secondary;
}
.btn {
text-align: center;
@apply rounded rounded-lg drop-shadow-md px-4 py-2;
@apply bg-accent-600;
@apply font-semibold;
@apply rounded rounded-lg drop-shadow-md px-2 py-1;
@apply bg-accent hover:bg-accent-600;
@apply font-semibold text-primary-100 hover:text-primary-200;
@apply hover:drop-shadow-xl;
@apply border-2 border-accent hover:border-accent-700;
}
.btn-outline {
text-align: center;
@apply rounded rounded-lg drop-shadow-md px-4 py-2;
@apply text-accent-600 bg-accent-600/10;
@apply border-2 border-accent-600;
@apply font-semibold;
@apply rounded rounded-lg drop-shadow-md px-2 py-1;
@apply bg-transparent hover:bg-accent-600;
@apply font-semibold text-accent hover:text-primary-100;
@apply hover:drop-shadow-xl;
@apply border-2 border-accent hover:border-accent-700;
}
body.global {
@ -94,6 +110,7 @@ body.global {
width: 100%;
display: flex;
flex-direction: column;
@apply bg-gradient-to-b from-primary-900/75 via-background to-primary-900/75;
}
header.global, main.global, footer.global {
@ -118,17 +135,24 @@ div.status-message {
}
div.status-message.error {
@apply font-semibold bg-failure/50 border border-failure;
@apply italic text-failure-300 bg-failure/50 border border-failure;
}
div.call-to-action-box {
@apply bg-gradient-to-r from-secondary-300/75 to-secondary-500/75;
@apply rounded-md py-4 px-6;
@apply text-center sm:text-start;
}
.loader {
overflow: hidden;
}
.loader.loader-bar {
@apply h-1 bg-accent rounded rounded-full;
}
.loader.loader-value {
@apply font-bold text-end;
}
.loader--loading {
animation: loading 2s infinite linear;
@ -187,3 +211,104 @@ div.call-to-action-box {
opacity: 1;
}
}
#logo-wings {
animation: logowings 2s ease-in-out infinite alternate;
}
#logo-wings--subtle {
animation: logowings-subtle 2s ease-in-out infinite alternate;
}
#logo-heart {
animation: logoheart 1s linear infinite;
transform-origin: center;
}
#logo-heart--subtle {
animation: logoheart-subtle 1s linear infinite;
transform-origin: center;
}
#logo-blips {
animation: logoblips 6s linear infinite;
transform-origin: bottom;
transform-box: fill-box;
}
#logo-blips--subtle {
animation: logoblips-subtle 6s linear infinite;
transform-origin: bottom;
transform-box: fill-box;
}
@keyframes logowings {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(5%);
}
}
@keyframes logowings-subtle {
0% {
transform: translateY(5%);
}
100% {
transform: translateY(8%);
}
}
@keyframes logoheart {
0%, 25%, 50%, 100% {
transform: scale(100%);
}
12%, 37% {
transform: scale(105%);
}
}
@keyframes logoheart-subtle {
0%, 25%, 50%, 100% {
transform: scale(100%);
}
12%, 37% {
transform: scale(102%);
}
}
@keyframes logoblips {
0% {
transform: rotateY(0deg)
}
5%, 100% {
transform: rotateY(360deg);
}
}
@keyframes logoblips-subtle {
0% {
transform: rotateY(0deg)
}
5%, 100% {
transform: rotateY(360deg);
}
}
path.hamburger-path {
@apply fill-secondary stroke-secondary;
}
#hamburger-content.hamburger--closed {
@apply hidden sm:flex;
}
#hamburger-content.hamburger--open {
@apply flex;
}
#hamburger-svg.hamburger--open {
transform-origin: center;
transform: rotate(90deg);
}
#hamburger-svg.hamburger--closed {
transform-origin: center;
transform: rotate(0deg);
}

View File

@ -4,70 +4,119 @@ export default {
theme: {
extend: {
fontFamily: {
sans: ["Montserrat", "NotoColorEmoji"],
serif: ["Lora", "NotoColorEmoji"],
mono: ["SourceCodePro", "NotoColorEmoji"],
accent: ["Kanit", "NotoColorEmoji"],
emoji: ["NotoColorEmoji"],
sans: ["Montserrat"],
serif: ["Lora"],
mono: ["SourceCodePro"],
accent: ["Kanit"],
title: ["PlayfairDisplaySC"]
},
colors: {
transparent: "transparent",
current: "currentColor",
primary: {
50: "#D5E8EC",
100: "#9CCAD3",
200: "#4B9AAA",
300: "#326671",
400: "#1F4047",
500: "#0D1B1E",
DEFAULT: "#0D1B1E",
600: "#0C191C",
700: "#070F11",
800: "#040809",
900: "#000000",
50: "#050511",
100: "#0F0E35",
200: "#19165A",
300: "#23207F",
400: "#2D2AA3",
500: "#323a8a",
DEFAULT: "#323a8a",
600: "#575DA2",
700: "#7D81BA",
800: "#A2A4D2",
900: "#C8C8EB",
},
secondary: {
50: "#F3F7F5",
100: "#DBE6E2",
200: "#B6CDC5",
300: "#9EBDB2",
400: "#86AC9F",
500: "#6C9A8B",
DEFAULT: "#6C9A8B",
600: "#5B8677",
700: "#4A6D61",
800: "#3A554B",
900: "#192420",
50: "#0A1515",
100: "#123839",
200: "#1A5C5E",
300: "#228083",
400: "#2AA5A8",
500: "#4bb1bd",
DEFAULT: "#4bb1bd",
600: "#71C3C6",
700: "#97D4D0",
800: "#BCE6DA",
900: "#E2F7E5",
},
accent: {
50: "#FFF9EB",
100: "#FFEDC2",
200: "#FFE7AD",
300: "#FFDA85",
400: "#FFCE5C",
500: "#FFC233",
DEFAULT: "#FFC233",
600: "#FFB60A",
700: "#E09D00",
800: "#A37200",
900: "#523900",
50: "#33000b",
100: "#660015",
200: "#99001f",
300: "#cc0029",
400: "#e04159",
500: "#e85a6a",
DEFAULT: "#e85a6a",
600: "#f0747b",
700: "#f88d8d",
800: "#fda6a6",
900: "#ffbfbe",
},
background: {
50: "#FFFFFF",
100: "#FFFFFF",
200: "#FFFFFF",
300: "#FFFFFF",
400: "#FFFFFF",
500: "#FCFCFC",
DEFAULT: "#FCFCFC",
600: "#CCCCCC",
700: "#A3A3A3",
800: "#707070",
900: "#333333",
50: "#0D0C0B",
100: "#28251F",
200: "#444133",
300: "#605D48",
400: "#7C785D",
500: "#fcfbf8",
DEFAULT: "#fcfbf8",
600: "#FDFDF6",
700: "#FDFEFA",
800: "#FEFFFD",
900: "#FFFFFF",
},
text: {
50: "#0A0A0A",
100: "#141414",
200: "#1F1F1F",
300: "#292929",
400: "#343434",
500: "#202120",
DEFAULT: "#202120",
600: "#5B5B5B",
700: "#767676",
800: "#919191",
900: "#ADADAD",
},
success: {
50: "#001400",
100: "#002800",
200: "#003D00",
300: "#005100",
400: "#006600",
500: "#00CC00",
DEFAULT: "#00CC00",
600: "#33D133",
700: "#66D766",
800: "#99DD99",
900: "#CCE3CC",
},
warning: {
50: "#191200",
100: "#332400",
200: "#4D3600",
300: "#664800",
400: "#805A00",
500: "#EDC000",
DEFAULT: "#EDC000",
600: "#EFD133",
700: "#F1E266",
800: "#F4F399",
900: "#F7F4CC",
},
failure: {
50: "#190000",
100: "#320000",
200: "#4C0000",
300: "#660000",
400: "#800000",
500: "#E40000",
DEFAULT: "#E40000",
600: "#E43333",
700: "#E46666",
800: "#E69999",
900: "#E9CCCC",
},
success: "#00CC00",
warning: "#EDC000",
failure: "#E40000",
},
screens: {
'3xl': '1920px',