started restyling

This commit is contained in:
Jfriedli 2021-03-18 10:38:18 +01:00
parent 170d77b3ec
commit 7f253f7186
5 changed files with 68 additions and 42 deletions

27
package-lock.json generated
View File

@ -9,6 +9,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@fullhuman/postcss-purgecss": "^4.0.2", "@fullhuman/postcss-purgecss": "^4.0.2",
"@tailwindcss/forms": "^0.2.1",
"autoprefixer": "^10.2.5", "autoprefixer": "^10.2.5",
"postcss": "^8.2.8", "postcss": "^8.2.8",
"postcss-cli": "^8.3.1", "postcss-cli": "^8.3.1",
@ -137,6 +138,14 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@tailwindcss/forms": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
"integrity": "sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==",
"dependencies": {
"mini-svg-data-uri": "^1.2.3"
}
},
"node_modules/@types/parse-json": { "node_modules/@types/parse-json": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@ -946,6 +955,11 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/mini-svg-data-uri": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
"integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
},
"node_modules/minimatch": { "node_modules/minimatch": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@ -1785,6 +1799,14 @@
"fastq": "^1.6.0" "fastq": "^1.6.0"
} }
}, },
"@tailwindcss/forms": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
"integrity": "sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==",
"requires": {
"mini-svg-data-uri": "^1.2.3"
}
},
"@types/parse-json": { "@types/parse-json": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@ -2393,6 +2415,11 @@
"picomatch": "^2.0.5" "picomatch": "^2.0.5"
} }
}, },
"mini-svg-data-uri": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
"integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
},
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",

View File

@ -20,6 +20,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@fullhuman/postcss-purgecss": "^4.0.2", "@fullhuman/postcss-purgecss": "^4.0.2",
"@tailwindcss/forms": "^0.2.1",
"autoprefixer": "^10.2.5", "autoprefixer": "^10.2.5",
"postcss": "^8.2.8", "postcss": "^8.2.8",
"postcss-cli": "^8.3.1", "postcss-cli": "^8.3.1",

View File

@ -2,17 +2,24 @@ const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = { module.exports = {
future: { future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
}, },
purge: [], purge: [],
theme: { theme: {
extend: { extend: {
colors: {
blue: {
light: '#f4f7fb',
DEFAULT: '#99c1f1',
dark: '#1b5eb4',
}
},
fontFamily: { fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans], sans: ['Inter var', ...defaultTheme.fontFamily.sans],
}, },
}, },
}, },
variants: {}, variants: {},
plugins: [], plugins: [
require('@tailwindcss/forms'),
],
} }

View File

@ -10,20 +10,14 @@
<link rel="stylesheet" href="{{ ASSET_URL }}"> <link rel="stylesheet" href="{{ ASSET_URL }}">
{% endassets %} {% endassets %}
</head> </head>
<body> <body class="flex flex-col h-screen justify-between">
<header class=""> <header class="h-20 w-full bg-blue-100 my-0 flex justify-center">
<div class="container"> <a href='.' class="mt-8">
<div> <img class='max-h-28' src="{{ url_for('static', filename='logo.png') }}" alt="mat2 logo"/>
<div> </a>
<a href='.'>
<img class='logo' src="{{ url_for('static', filename='logo.png') }}" alt="mat2 logo"/>
</a>
</div>
</div>
</div>
</header> </header>
<div class="container mx-auto"> <div class="container h-10 mt-8">
<div> <div>
{% with messages = get_flashed_messages() %} {% with messages = get_flashed_messages() %}
{% if messages %} {% if messages %}
@ -39,15 +33,11 @@
</div> </div>
</div> </div>
<div> <section class="container mb-auto mx-auto mt-8">
<section> {% block content %}{% endblock %}
<div> </section>
{% block content %}{% endblock %}
</div>
</section>
</div>
<footer> <footer class="h-10 flex justify-center">
© <a href='https://dustri.org'>jvoisin</a> - © <a href='https://dustri.org'>jvoisin</a> -
<a href='https://0xacab.org/jvoisin/mat2-web'>source</a> - <a href='https://0xacab.org/jvoisin/mat2-web'>source</a> -

View File

@ -1,25 +1,26 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="shadowed-box u-text-center u-center-block"> <div class="flex justify-center">
<h2 class="uk-text-center">Remove metadata</h2> <div class="max-w-lg rounded overflow-hidden shadow-lg pb-4">
<p class="uk-text-center"> <div class="px-6 py-4">
The file you see is just the tip of the iceberg. Remove the hidden metadata. <div class="font-bold text-xl mb-2">Remove Metadata</div>
</p> <p class="text-gray-700 text-base">
<div class="uk-flex uk-flex-center"> The file you see is just the tip of the iceberg. Remove the hidden metadata.
<div> </p>
<form method=post enctype=multipart/form-data> </div>
<div class="uk-margin"> <div class="px-6 pt-4 pb-2 grid grid-rows-1">
<input type="file" name=file id="upload_file" accept="{{ mimetypes | join(', ') }}"> <form method="post" enctype="multipart/form-data" class="grid grid-rows-1">
<button class="uk-button uk-button-primary" type="submit" value="Upload">Upload</button> <input type="file" name="file" id="upload_file" accept="{{ mimetypes | join(', ') }}">
</div> <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>
</form> </form>
</div> </div>
</div> </div>
<a href="/info" role="link" class="">
<span class="info-link">
?
</span>
</a>
</div> </div>
<button
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"
>
<a href="/info" role="link" class="w-6 h-6 text-white inline-block font-bold">
?
</a>
</button>
{% endblock %} {% endblock %}