Add some css

2020-09-10 15:25:40 +02:00
parent 7fc979053e
commit 9fb5e43a0b
13 changed files with 2036 additions and 25 deletions
@@ -0,0 +1,20 @@
+{% macro dependency(dependency) %}
+    <label class="m-2">
+        <input name="{{ dependency.name }}"
+               type="checkbox"{% if dependency.default %} checked{% endif %}>
+        <span>{{ dependency.name }}</span>
+    </label>
+{% endmacro %}
+
+{% macro input(input) %}
+    <div class="md:flex md:items-center mb-6">
+        <div class="md:w-1/3">
+            <label class="input-label" for="{{ input.name }}">
+                {{ input.display }}
+            </label>
+        </div>
+        <div class="md:w-2/3">
+            <input name="{{ input.name }}" id="{{ input.name }}" class="input"{% if input.value %} value="{{ input.value }}"{% endif %}>
+        </div>
+    </div>
+{% endmacro %}
@@ -3,10 +3,13 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/styles.css">
    <title>Kotlin Starter</title>
 </head>
 <body>
-{% block content %}
-{% endblock %}
+<main class="container mx-auto">
+    {% block content %}
+    {% endblock %}
+</main>
 </body>
 </html>
@@ -1,30 +1,19 @@
 {% extends "views/@base" %}

-{% macro dependency(dependency) %}
-    <label>
-        <input name="{{ dependency.name }}" type="checkbox"{% if dependency.default %} checked{% endif %}>
-        <span>{{ dependency.name }}</span>
-    </label>
-{% endmacro %}
-
-{% macro input(input) %}
-    <label>
-        <span>{{ input.display }}</span>
-        <input name="{{ input.name }}" type="text"{% if input.value %} value="{{ input.value }}"{% endif %}>
-    </label>
-{% endmacro %}
+{% import "views/#macros" %}

 {% block content %}
-    <h1>Kotlin Starter</h1>
-    <form method="post">
+    <h1 class="text-2xl font-bold text-purple-800 mb-4">Kotlin Starter</h1>
+    <form method="post" class="w-full max-w-sm mx-auto">
        {% for input in inputs %}
            {{ input(input) }}
        {% endfor %}
-        <br>
-        {% for dependency in dependencies %}
-            {{ dependency(dependency) }}
-        {% endfor %}
-        <br>
-        <button type="submit">Submit</button>
+        <hr>
+        <div class="flex flex-wrap">
+            {% for dependency in dependencies %}
+                {{ dependency(dependency) }}
+            {% endfor %}
+        </div>
+        <button type="submit" class="w-full btn btn-purple">Submit</button>
    </form>
 {% endblock %}