summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJfriedli2021-03-18 10:38:18 +0100
committerJfriedli2021-03-18 10:38:18 +0100
commit7f253f71866a35a4c681a9ac37109d0ea4ab3d0e (patch)
tree8f3dd049d4d75db00832017403cd7a0fc78f7616
parent170d77b3ecb2d0c5c35263a2f5598002af599a43 (diff)
started restyling
Diffstat
-rw-r--r--package-lock.json27
-rw-r--r--package.json1
-rw-r--r--tailwind.config.js13
-rw-r--r--templates/base.html30
-rw-r--r--templates/index.html39
5 files changed, 68 insertions, 42 deletions
diff --git a/package-lock.json b/package-lock.json
index c2f7457..ceea4cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
9 "license": "MIT", 9 "license": "MIT",
10 "dependencies": { 10 "dependencies": {
11 "@fullhuman/postcss-purgecss": "^4.0.2", 11 "@fullhuman/postcss-purgecss": "^4.0.2",
12 "@tailwindcss/forms": "^0.2.1",
12 "autoprefixer": "^10.2.5", 13 "autoprefixer": "^10.2.5",
13 "postcss": "^8.2.8", 14 "postcss": "^8.2.8",
14 "postcss-cli": "^8.3.1", 15 "postcss-cli": "^8.3.1",
@@ -137,6 +138,14 @@
137 "node": ">= 8" 138 "node": ">= 8"
138 } 139 }
139 }, 140 },
141 "node_modules/@tailwindcss/forms": {
142 "version": "0.2.1",
143 "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
144 "integrity": "sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==",
145 "dependencies": {
146 "mini-svg-data-uri": "^1.2.3"
147 }
148 },
140 "node_modules/@types/parse-json": { 149 "node_modules/@types/parse-json": {
141 "version": "4.0.0", 150 "version": "4.0.0",
142 "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", 151 "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -946,6 +955,11 @@
946 "node": ">=8" 955 "node": ">=8"
947 } 956 }
948 }, 957 },
958 "node_modules/mini-svg-data-uri": {
959 "version": "1.2.3",
960 "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
961 "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
962 },
949 "node_modules/minimatch": { 963 "node_modules/minimatch": {
950 "version": "3.0.4", 964 "version": "3.0.4",
951 "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", 965 "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -1785,6 +1799,14 @@
1785 "fastq": "^1.6.0" 1799 "fastq": "^1.6.0"
1786 } 1800 }
1787 }, 1801 },
1802 "@tailwindcss/forms": {
1803 "version": "0.2.1",
1804 "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
1805 "integrity": "sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==",
1806 "requires": {
1807 "mini-svg-data-uri": "^1.2.3"
1808 }
1809 },
1788 "@types/parse-json": { 1810 "@types/parse-json": {
1789 "version": "4.0.0", 1811 "version": "4.0.0",
1790 "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", 1812 "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -2393,6 +2415,11 @@
2393 "picomatch": "^2.0.5" 2415 "picomatch": "^2.0.5"
2394 } 2416 }
2395 }, 2417 },
2418 "mini-svg-data-uri": {
2419 "version": "1.2.3",
2420 "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
2421 "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
2422 },
2396 "minimatch": { 2423 "minimatch": {
2397 "version": "3.0.4", 2424 "version": "3.0.4",
2398 "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", 2425 "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
diff --git a/package.json b/package.json
index 0da90b1..8674c0a 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
20 "license": "MIT", 20 "license": "MIT",
21 "dependencies": { 21 "dependencies": {
22 "@fullhuman/postcss-purgecss": "^4.0.2", 22 "@fullhuman/postcss-purgecss": "^4.0.2",
23 "@tailwindcss/forms": "^0.2.1",
23 "autoprefixer": "^10.2.5", 24 "autoprefixer": "^10.2.5",
24 "postcss": "^8.2.8", 25 "postcss": "^8.2.8",
25 "postcss-cli": "^8.3.1", 26 "postcss-cli": "^8.3.1",
diff --git a/tailwind.config.js b/tailwind.config.js
index ce94ce1..74b3d31 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,17 +2,24 @@ const defaultTheme = require('tailwindcss/defaultTheme')
2 2
3module.exports = { 3module.exports = {
4 future: { 4 future: {
5 // removeDeprecatedGapUtilities: true,
6 // purgeLayersByDefault: true,
7 }, 5 },
8 purge: [], 6 purge: [],
9 theme: { 7 theme: {
10 extend: { 8 extend: {
9 colors: {
10 blue: {
11 light: '#f4f7fb',
12 DEFAULT: '#99c1f1',
13 dark: '#1b5eb4',
14 }
15 },
11 fontFamily: { 16 fontFamily: {
12 sans: ['Inter var', ...defaultTheme.fontFamily.sans], 17 sans: ['Inter var', ...defaultTheme.fontFamily.sans],
13 }, 18 },
14 }, 19 },
15 }, 20 },
16 variants: {}, 21 variants: {},
17 plugins: [], 22 plugins: [
23 require('@tailwindcss/forms'),
24 ],
18} 25}
diff --git a/templates/base.html b/templates/base.html
index b337df5..17c28f2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,20 +10,14 @@
10 <link rel="stylesheet" href="{{ ASSET_URL }}"> 10 <link rel="stylesheet" href="{{ ASSET_URL }}">
11 {% endassets %} 11 {% endassets %}
12 </head> 12 </head>
13<body> 13<body class="flex flex-col h-screen justify-between">
14 <header class=""> 14 <header class="h-20 w-full bg-blue-100 my-0 flex justify-center">
15 <div class="container"> 15 <a href='.' class="mt-8">
16 <div> 16 <img class='max-h-28' src="{{ url_for('static', filename='logo.png') }}" alt="mat2 logo"/>
17 <div> 17 </a>
18 <a href='.'>
19 <img class='logo' src="{{ url_for('static', filename='logo.png') }}" alt="mat2 logo"/>
20 </a>
21 </div>
22 </div>
23 </div>
24 </header> 18 </header>
25 19
26 <div class="container mx-auto"> 20 <div class="container h-10 mt-8">
27 <div> 21 <div>
28 {% with messages = get_flashed_messages() %} 22 {% with messages = get_flashed_messages() %}
29 {% if messages %} 23 {% if messages %}
@@ -39,15 +33,11 @@
39 </div> 33 </div>
40 </div> 34 </div>
41 35
42 <div> 36 <section class="container mb-auto mx-auto mt-8">
43 <section> 37 {% block content %}{% endblock %}
44 <div> 38 </section>
45 {% block content %}{% endblock %}
46 </div>
47 </section>
48 </div>
49 39
50 <footer> 40 <footer class="h-10 flex justify-center">
51 © <a href='https://dustri.org'>jvoisin</a> - 41 © <a href='https://dustri.org'>jvoisin</a> -
52 <a href='https://0xacab.org/jvoisin/mat2-web'>source</a> - 42 <a href='https://0xacab.org/jvoisin/mat2-web'>source</a> -
53 ♥ 43 ♥
diff --git a/templates/index.html b/templates/index.html
index f92ef69..008f5f3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,25 +1,26 @@
1{% extends "base.html" %} 1{% extends "base.html" %}
2{% block content %} 2{% block content %}
3 <div class="shadowed-box u-text-center u-center-block"> 3 <div class="flex justify-center">
4 <h2 class="uk-text-center">Remove metadata</h2> 4 <div class="max-w-lg rounded overflow-hidden shadow-lg pb-4">
5 <p class="uk-text-center"> 5 <div class="px-6 py-4">
6 The file you see is just the tip of the iceberg. Remove the hidden metadata. 6 <div class="font-bold text-xl mb-2">Remove Metadata</div>
7 </p> 7 <p class="text-gray-700 text-base">
8 <div class="uk-flex uk-flex-center"> 8 The file you see is just the tip of the iceberg. Remove the hidden metadata.
9 <div> 9 </p>
10 <form method=post enctype=multipart/form-data> 10 </div>
11 <div class="uk-margin"> 11 <div class="px-6 pt-4 pb-2 grid grid-rows-1">
12 <input type="file" name=file id="upload_file" accept="{{ mimetypes | join(', ') }}"> 12 <form method="post" enctype="multipart/form-data" class="grid grid-rows-1">
13 <button class="uk-button uk-button-primary" type="submit" value="Upload">Upload</button> 13 <input type="file" name="file" id="upload_file" accept="{{ mimetypes | join(', ') }}">
14 </div> 14 <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit" value="Upload">Remove Metadata</button>
15 </form> 15 </form>
16 </div> 16 </div>
17 </div> 17 </div>
18 <a href="/info" role="link" class="">
19 <span class="info-link">
20 ?
21 </span>
22 </a>
23
24 </div> 18 </div>
19 <button
20 class="p-0 w-10 h-10 absolute sm:bottom-8 md:bottom-16 sm:right-8 md:right-16 bg-blue-300 hover:bg-blue-400 rounded-full active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none"
21 >
22 <a href="/info" role="link" class="w-6 h-6 text-white inline-block font-bold">
23 ?
24 </a>
25 </button>
25{% endblock %} 26{% endblock %}