finish up restyling

3 files changed, 132 insertions, 60 deletions

diff --git a/static/src/main.css b/static/src/main.css
index 1171fe3..d7ec674 100644
--- a/static/src/main.css
+++ b/static/src/main.css
@@ -73,4 +73,59 @@
   src: local(''),
        url('/static/font/rubik-v12-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('/static/font/rubik-v12-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
\ No newline at end of file
+}
+
+div pre[class*="language-"] {
+  display: inline-block;
+  padding-right: 10em;
+  padding-top: 3rem;
+  border-radius: 6px;
+  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fillRule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="%23FF5F56" stroke="%23E0443E" strokeWidth=".5" /><circle cx="26" cy="6" r="6" fill="%23FFBD2E" stroke="%23DEA123" strokeWidth=".5" /><circle cx="46" cy="6" r="6" fill="%2327C93F" stroke="%231AAB29" strokeWidth=".5" /></g></svg>');
+  background-repeat: no-repeat;
+  background-position: 16px 16px;
+  box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.75);
+}
+
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  max-width: 90%;
+        border: black;
+        color: #f8f8f2;
+        background: none;
+        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+        text-align: left;
+        white-space: pre;
+        word-spacing: normal;
+        word-break: normal;
+        word-wrap: normal;
+        line-height: 1.5;
+
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+
+        -webkit-hyphens: none;
+        -moz-hyphens: none;
+        -ms-hyphens: none;
+        hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+        padding: 1em;
+        margin: .5em 0;
+        overflow: auto;
+        border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+        background: #272822;
+}
diff --git a/templates/base.html b/templates/base.html
index 8d6712c..b259fdc 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,7 +5,6 @@
     <title>MAT2</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="{{ url_for('static', filename='raleway.woff2') }}" as="font" type="font/woff2" rel="preload">
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
     {% assets 'css' %}
     <link rel="stylesheet" href="{{ ASSET_URL }}">
@@ -36,8 +35,11 @@
     </section>
 
     <footer class="h-10 flex justify-center">
-        © <a href='https://dustri.org'>jvoisin</a> -
-        <a href='https://0xacab.org/jvoisin/mat2-web'>source</a> -
-        ♥
+        <a class="flex justify-center" target="_blank" rel="noreferrer" href="https://0xacab.org/jvoisin/mat2-web" class="text-blue-dark">
+            <svg class="w-4 h-4 mr-2 text-blue-dark self-center" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+              </svg>  
+            <span class="self-center text-blue-dark">source</span>
+        </a>
     </footer>
 </body>
\ No newline at end of file
diff --git a/templates/info.html b/templates/info.html
index 889a08f..3be85b8 100644
--- a/templates/info.html
+++ b/templates/info.html
@@ -1,60 +1,75 @@
 {% extends "base.html" %}
 {% block content %}
-    <div>
-        <h1>
-            What are metadata?
-        </h1>
-        <p>
-            Metadata consists of information that characterizes your file. They answer background questions about who, how, when, and what. This gives your file multi-faceted documentation.
-            <a href="https://0xacab.org/jvoisin/mat2/blob/master/README.md">
-                https://0xacab.org/jvoisin/mat2/blob/master/README.md (09.2019)
-            </a>
-        </p>
-
-        <p>
-            The metadata of your file leak a lot of information about you. For example, cameras store file information about the time of a shot and which camera was used for it. Documents, such as PDF or Words, automatically add author or company information to the document. You don't want to publish all this information at all?
-        </p>
-
-        <p>
-            This is precisely the job of MAT2: getting rid, as much as possible, of metadata.
-        </p>
-
-        <h1>
-            MAT2 locally
-        </h1>
-        <p>
-            Please note that while we do not keep a copy of your file, there is no way that you could be certain about this: Act accordingly. Due to this warning, please consider running MAT2 locally on your device.
-        </p>
-
-        <h2>
-            MAT2 is available in pip
-        </h2>
-        <p>
-            <pre class="  language-javascript"><code class="  language-javascript">pip3 install mat2</code></pre>
-        </p>
-        <h2>
-            MAT2 on Debian
-        </h2>
-        <p>
-            MAT2 is available on Debian.
-        </p>
-        <p>
-            <pre class="  language-javascript"><code class="  language-javascript">sudo apt install mat2</code></pre>
-        </p>
-        <p>
-            More info: <a href="https://packages.debian.org/sid/mat2">https://packages.debian.org/sid/mat2</a>
-        </p>
-
-        <h1>
-            Supported file formats
-        </h1>
-        <p>
-            {% for extension in extensions %}
-                <span class="uk-badge">
-                    {{ extension }}
-                </span>
-            {% endfor %}
-        </p>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 p-2 md:p-16 break-words max-w-full">
+        <section>
+            <h1 class="grid grid-rows-1">
+                <div class="font-light text-4xl mb-4">        
+                    What are metadata
+                </div>
+            </h1>
+            <p class="text-gray-700 text-base text-opacity-80 mb-4">
+                Metadata consists of information that characterizes your file. They answer background questions about who, how, when, and what. This gives your file multi-faceted documentation.
+                <a class="text-blue-dark" href="https://0xacab.org/jvoisin/mat2/blob/master/README.md">
+                    https://0xacab.org/jvoisin/mat2/blob/master/README.md (09.2019)
+                </a>
+            </p>
+    
+            <p class="text-gray-700 text-base text-opacity-80 mb-4">
+                The metadata of your file leak a lot of information about you. For example, cameras store file information about the time of a shot and which camera was used for it. Documents, such as PDF or Words, automatically add author or company information to the document. You don't want to publish all this information at all?
+            </p>
+    
+            <p class="text-gray-700 text-base text-opacity-80 mb-4">
+                This is precisely the job of MAT2: getting rid, as much as possible, of metadata.
+            </p>
+    
+            <h1 class="grid grid-rows-1">
+                <div class="font-light text-4xl mb-4">        
+                    MAT2 locally
+                </div>
+            </h1>
+            <p class="text-gray-700 text-base text-opacity-80 mb-4">
+                Please note that while we do not keep a copy of your file, there is no way that you could be certain about this: Act accordingly. Due to this warning, please consider running MAT2 locally on your device.
+            </p>
+    
+            <h2 class="grid grid-rows-1">
+                <div class="font-light text-2xl mb-4">        
+                    MAT2 is available in pip
+                </div>
+            </h2>
+            <p>
+                <pre class="language-javascript"><code class="language-javascript">pip3 install mat2</code></pre>
+            </p>
+    
+            <h2 class="grid grid-rows-1">
+                <div class="font-light text-2xl mb-4">        
+                    MAT2 on Debian
+                </div>
+            </h2>
+            <p class="text-gray-700 text-base text-opacity-80 mb-4">
+                MAT2 is available on Debian.
+            </p>
+    
+            <p>
+                <pre class="max-w-max language-javascript"><code class="language-javascript">sudo apt install mat2</code></pre>
+            </p>
+            <p class="text-gray-700 text-base text-opacity-80 mb-4">
+                More info: <a class="text-blue-dark" href="https://packages.debian.org/sid/mat2">https://packages.debian.org/sid/mat2</a>
+            </p>
+        </section>
+        <section>
+            <h1 class="grid grid-rows-1">
+                <div class="font-light text-4xl mb-4">        
+                    Supported file formats
+                </div>
+            </h1>
+            <div>
+                {% for extension in extensions %}
+                    <span class="rounded-full bg-blue text-white p-2 mb-2 mr-2 rounded float-left">
+                        {{ extension }}
+                    </span>
+                {% endfor %}
+                </div>
+        </section>
 
     </div>