Improved formatting

This commit is contained in:
root 2023-06-03 16:19:39 +02:00
parent e6c7208712
commit e5e07ecb4e
3 changed files with 65 additions and 59 deletions

View File

@ -3,7 +3,8 @@ body {
background-color: #333333; background-color: #333333;
} }
html, body { html,
body {
border-color: #E7E5E2; border-color: #E7E5E2;
color: #E7E5E2; color: #E7E5E2;
} }
@ -40,7 +41,7 @@ a {
} }
.ab { .ab {
float:none; float: none;
border-radius: 10px; border-radius: 10px;
margin-top: 10px; margin-top: 10px;
justify-content: center; justify-content: center;
@ -51,7 +52,7 @@ a {
} }
.a { .a {
float:left; float: left;
width: 45%; width: 45%;
box-sizing: border-box; box-sizing: border-box;
padding: 25px; padding: 25px;
@ -60,7 +61,7 @@ a {
background-color: #F7D214; background-color: #F7D214;
color: #243233; color: #243233;
font-weight: bold; font-weight: bold;
text-align:left; text-align: left;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
cursor: pointer; cursor: pointer;
text-indent: -25px; text-indent: -25px;
@ -71,7 +72,7 @@ a {
} }
.b { .b {
float:left; float: left;
width: 45%; width: 45%;
box-sizing: border-box; box-sizing: border-box;
padding: 25px; padding: 25px;
@ -80,7 +81,7 @@ a {
background-color: #243233; background-color: #243233;
color: #F7D214; color: #F7D214;
font-weight: bold; font-weight: bold;
text-align:left; text-align: left;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
cursor: pointer; cursor: pointer;
text-indent: -25px; text-indent: -25px;
@ -101,18 +102,18 @@ input[type="radio"] {
cursor: pointer; cursor: pointer;
} }
.ab input:checked + label { .ab input:checked+label {
background-color: #B3472B; background-color: #B3472B;
border: 1px solid #000000; border: 1px solid #000000;
color: #E7E5E2; color: #E7E5E2;
} }
.separator { .separator {
float:left; float: left;
width: 10%; width: 10%;
box-sizing: border-box; box-sizing: border-box;
writing-mode: vertical-lr; writing-mode: vertical-lr;
transform:rotate(210deg); transform: rotate(210deg);
font-size: x-small; font-size: x-small;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
@ -189,7 +190,8 @@ input[type="radio"] {
.a { .a {
font-size: small; font-size: small;
} }
.b { .b {
font-size: small; font-size: small;
} }
} }

View File

@ -23,7 +23,7 @@ body {
background-color: rgb(56, 81, 104) !important; background-color: rgb(56, 81, 104) !important;
} }
.ab input:checked + label { .ab input:checked+label {
background-color: rgb(143, 57, 34) !important; background-color: rgb(143, 57, 34) !important;
border-color: rgb(140, 130, 115) !important; border-color: rgb(140, 130, 115) !important;
color: rgb(215, 212, 207) !important; color: rgb(215, 212, 207) !important;

View File

@ -1,51 +1,55 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ lang }}"> <html lang="{{ lang }}">
<head>
<title>{{ title }}</title> <head>
<link rel="stylesheet" type="text/css" href="/css/ab.css?t={{ epoch }}"> <title>{{ title }}</title>
{%- if theme == "dark" %} <link rel="stylesheet" type="text/css" href="/css/ab.css?t={{ epoch }}">
<link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}"> {%- if theme == "dark" %}
{%- endif %} <link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}"> {%- endif %}
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}"> <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}"> <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}"> <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
<link rel="mask-icon" href="{{ url_for('static', filename='safari-pinned-tab.svg') }}" color="#5bbad5"> <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
<meta name="msapplication-TileColor" content="#da532c"> <link rel="mask-icon" href="{{ url_for('static', filename='safari-pinned-tab.svg') }}" color="#5bbad5">
<meta name="theme-color" content="#ffffff"> <meta name="msapplication-TileColor" content="#da532c">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="theme-color" content="#ffffff">
<meta name="robots" content="noindex, nofollow"> <meta name="viewport" content="width=device-width,initial-scale=1">
<meta property="og:title" content="{{ title }}"> <meta name="robots" content="noindex, nofollow">
<meta property="og:site_name" content="{{ title }}"> <meta property="og:title" content="{{ title }}">
<meta property="og:url" content="{{ url }}"> <meta property="og:site_name" content="{{ title }}">
<meta property="og:description" content="{{ desc }}"> <meta property="og:url" content="{{ url }}">
<meta property="og:type" content="website"> <meta property="og:description" content="{{ desc }}">
<meta property="og:image" content="{{ url_for('static', filename='ab.jpg') }}"> <meta property="og:type" content="website">
</head> <meta property="og:image" content="{{ url_for('static', filename='ab.jpg') }}">
<body> </head>
<div id="content">
<div id="header">{{ title }}</div> <body>
<hr> <div id="content">
{%- set id = namespace(value=0) %} <div id="header">{{ title }}</div>
{%- for question in content %} <hr>
{%- set id.value = id.value + 1 %} {%- set id = namespace(value=0) %}
<div class="ab"> {%- for question in content %}
<input type="radio" id="a{{ id.value }}" class="a" name="group-{{ id.value }}"> {%- set id.value = id.value + 1 %}
<label for="a{{ id.value }}" class="a" title="{{ question['A'] }}"> A)&nbsp;{{ question['A'] }}</label> <div class="ab">
<div class="separator">{{ separator }}</div> <input type="radio" id="a{{ id.value }}" class="a" name="group-{{ id.value }}">
<input type="radio" id="b{{ id.value }}" class="b" name="group-{{ id.value }}"> <label for="a{{ id.value }}" class="a" title="{{ question['A'] }}"> A)&nbsp;{{ question['A'] }}</label>
<label for="b{{ id.value }}" class="b" title="{{ question['B'] }}">B)&nbsp;{{ question['B'] }}</label> <div class="separator">{{ separator }}</div>
</div> <input type="radio" id="b{{ id.value }}" class="b" name="group-{{ id.value }}">
<hr> <label for="b{{ id.value }}" class="b" title="{{ question['B'] }}">B)&nbsp;{{ question['B'] }}</label>
{%- endfor %}
<div id="footer">
<div id="questions">{{ questions_prefix }} {{ num_lines }} {{ questions_suffix }}<br><a href="mailto:{{ mailto }}">Einreichen!</a></div>
<div class="separator">&nbsp;</div>
<form action="/" method="get">
<input type="hidden" name="t" value="{{ epoch }}">
<button id="next" type="submit">{{ more }}</button>
</form>
</div>
</div> </div>
</body> <hr>
</html> {%- endfor %}
<div id="footer">
<div id="questions">{{ questions_prefix }} {{ num_lines }} {{ questions_suffix }}<br><a
href="mailto:{{ mailto }}">Einreichen!</a></div>
<div class="separator">&nbsp;</div>
<form action="/" method="get">
<input type="hidden" name="t" value="{{ epoch }}">
<button id="next" type="submit">{{ more }}</button>
</form>
</div>
</div>
</body>
</html>