1 files changed, 67 insertions, 25 deletions

diff --git a/templates/web/static/linkopedia.css b/templates/web/static/linkopedia.css
index ae4b47e..881b741 100644
--- a/templates/web/static/linkopedia.css
+++ b/templates/web/static/linkopedia.css
@@ -1,18 +1,23 @@
-html {
+html, body {
     width: 100%;
+    margin: 0;
+    padding: 0;
 }
 
 body {
     width: 100%;
-    max-width: 80ch;
-    margin: 1em auto;
     font-family: Verdana, Geneva, sans-serif;
     font-size: 12pt;
     color: #828282;
 }
 
+* {
+    box-sizing: border-box;
+}
+
+
 a:link {
-    color: #000;
+    color: #003b7b;
     text-decoration: none;
 }
 
@@ -20,16 +25,14 @@ a:hover {
     text-decoration: underline;
 }
 
-header>h1 {
+header h1 {
     font-size: 1em;
     margin: 0;
-    display: inline-block;
 }
 
 header img {
     height: 32px;
-    vertical-align: bottom;
-    margin: 0.5em 1em 0.5em 0;
+    margin: 0.5em;
 }
 
 body>header {
@@ -37,22 +40,45 @@ body>header {
     background-color: #cbe4ff;
     padding: 0 1em;
     line-height: 2em;
+}
+
+body>header>div {
+    max-width: 80ch;
+    margin: 0 auto;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: baseline;
+    align-items: center;
 }
-
-body>header>h1>a {
+body>header h1>a {
     color: #000;
+    display: flex;
+    align-items: center;
 }
 
+body>nav {
+    max-width: 80ch;
+    margin: 1em auto;
+}
+
+body > nav input {
+	width: 100%;
+	padding: .5em;
+	border-radius: 5px;
+	border: 1px solid #e0e0e0;
+	font-size: 1.5em;
+}
+
+body>section {
+    max-width: 80ch;
+    margin: 1em auto;
+}
 
-body>section,
 body>article {
+    max-width: 80ch;
+    margin: 1em auto;
     padding: 1em;
     background-color: #f2f2f2;
-    border-bottom: 2px solid #cbe4ff;
 }
 
 body>article header h1 {
@@ -63,22 +89,35 @@ body>article header aside {
     font-size: 0.8em;
 }
 
-#linkslist {
-    margin: 0;
+#linkcard {
+    margin: 0 0 1em 0;
+    padding: 1em;
+    background-color: #f2f2f2;
+    border-color: #e0e0e0;
+    border-radius: 5px;
+    transition: all 0.1s linear;
+    outline: 0em solid #e0e0e0;
 }
 
-#linkslist dd {
-    margin: 0.2em 0 1em 0;
+#linkcard:hover {
+    outline: 0.2em solid #e0e0e0;
 }
 
-body>article footer,
-#linkslist dd>footer {
-    font-size: 0.8em;
-    margin-top: 0.2em;
+#linkcard dt {
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-bottom: 0.5em;
+}
+#linkcard dd {
+    margin: 0;
 }
 
-#linkslist a:link {
-    color: #000;
+
+
+body>article footer,
+#linkcard dd>footer {
+    font-size: 0.8em;
+    margin-top: 1em;
 }
 
 a.tag {
@@ -105,8 +144,11 @@ a.tag:hover {
 }
 
 body>footer {
-    margin-top: 2em;
+    max-width: 80ch;
+    margin: 1em auto 1em;
+    padding: 1em 0 0 0;
     text-align: center;
+    border-top: 2px solid #cbe4ff;
 }
 
 /* -----
@@ -116,7 +158,7 @@ SVG Icons - svgicons.sparkk.fr
 .svg-icon {
     width: 1em;
     height: 1em;
-    vertical-align: middle;
+    vertical-align: -0.2em; /* middle; */
 }
 
 .svg-icon path,