aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--templates/web/base.html14
-rw-r--r--templates/web/entry.html6
-rw-r--r--templates/web/index.html14
-rw-r--r--templates/web/static/linkopedia.css92
4 files changed, 86 insertions, 40 deletions
diff --git a/templates/web/base.html b/templates/web/base.html
index a3c430b..13dedf5 100644
--- a/templates/web/base.html
+++ b/templates/web/base.html
@@ -14,14 +14,18 @@
</head>
<body>
<header>
- <h1><a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='linkopedia_rgb.svg') }}">Linkopedia</a></h1>
- <span>i Bookmark del <a href="https://gl-como.it/">GL-Como</a></span>
+ <div>
+ <h1><a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='linkopedia_rgb.svg') }}">Linkopedia</a></h1>
+ <span>i Bookmark del <a href="https://gl-como.it/">GL-Como</a></span>
+ </div>
</header>
+ <nav>
+ <form method="get" action="{{ url_for('search') }}">
+ <input name="q" placeholder="cerca..." value="{% if q %}{{ q }}{% endif %}">
+ </form>
+ </nav>
{% block content %}{% endblock %}
<footer>
- <form method="get" action="{{ url_for('search') }}"><input name="q" placeholder="cerca..." value="{% if q %}{{ q }}{% endif %}"></form>
- </footer>
- <footer>
<small>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon" viewBox="0 0 194 194"><path d="M3.7 88.4L88.4 3.7c4.9-4.9 12.8-4.9 17.7 0l17.6 17.6-22.3 22.3c-5.3-1.8-11.2-.6-15.4 3.5-4.2 4.2-5.3 10.2-3.5 15.4L61 84c-5.2-1.8-11.2-.6-15.4 3.5-5.8 5.8-5.8 15.2 0 21 5.8 5.8 15.2 5.8 21 0 4.4-4.4 5.4-10.8 3.2-16.2l20.2-20v52.8c-1.4.7-2.8 1.6-3.9 2.8-5.8 5.8-5.8 15.2 0 21 5.8 5.8 15.2 5.8 21 0 5.8-5.8 5.8-15.2 0-21-1.4-1.4-3.1-2.5-4.9-3.2V71.4c1.8-.7 3.4-1.8 4.9-3.2 4.4-4.4 5.5-10.9 3.2-16.3l22-22 58 58.1c4.9 4.9 4.9 12.8 0 17.7l-84.7 84.7c-4.9 4.9-12.8 4.9-17.7 0L3.7 106c-4.9-4.8-4.9-12.8 0-17.6" fill="#f03c2e"/></svg>
<a href="http://git.trueelena.org/bookmarks/gl-como/about/">collection</a>
diff --git a/templates/web/entry.html b/templates/web/entry.html
index 9c3015d..488d87f 100644
--- a/templates/web/entry.html
+++ b/templates/web/entry.html
@@ -10,12 +10,12 @@
<footer>
<div title="Aggiunto">
<svg class="svg-icon" viewBox="0 0 20 20"><path d="M16.557,4.467h-1.64v-0.82c0-0.225-0.183-0.41-0.409-0.41c-0.226,0-0.41,0.185-0.41,0.41v0.82H5.901v-0.82c0-0.225-0.185-0.41-0.41-0.41c-0.226,0-0.41,0.185-0.41,0.41v0.82H3.442c-0.904,0-1.64,0.735-1.64,1.639v9.017c0,0.904,0.736,1.64,1.64,1.64h13.114c0.904,0,1.64-0.735,1.64-1.64V6.106C18.196,5.203,17.461,4.467,16.557,4.467 M17.377,15.123c0,0.453-0.366,0.819-0.82,0.819H3.442c-0.453,0-0.82-0.366-0.82-0.819V8.976h14.754V15.123z M17.377,8.156H2.623V6.106c0-0.453,0.367-0.82,0.82-0.82h1.639v1.23c0,0.225,0.184,0.41,0.41,0.41c0.225,0,0.41-0.185,0.41-0.41v-1.23h8.196v1.23c0,0.225,0.185,0.41,0.41,0.41c0.227,0,0.409-0.185,0.409-0.41v-1.23h1.64c0.454,0,0.82,0.367,0.82,0.82V8.156z"></path></svg>
- {{ entry.data.added }}
+ {{ entry.data.added|datetime }}
</div>
- {% if entry.data.updated and entry.data.updated > entry.data.added %}
+ {% if entry.data.updated and (entry.data.updated|datetime > entry.data.added|datetime) %}
<div title="Aggiornato">
<svg class="svg-icon" viewBox="0 0 20 20"><path d="M5.5 3.2c-.2 0-.4.2-.4.4v.9H3.4c-.9 0-1.6.7-1.6 1.6v9c0 1 .7 1.7 1.6 1.7h13.2c.9 0 1.6-.8 1.6-1.7v-9c0-.9-.7-1.6-1.6-1.6h-1.7v-.9c0-.2-.2-.4-.4-.4s-.4.2-.4.4v.9H5.9v-.9c0-.2-.2-.4-.4-.4zm-2 2H5v1.3c0 .2.2.4.4.4s.4-.2.4-.4V5.3h8.2v1.2c0 .2.2.4.4.4s.4-.2.4-.4V5.3h1.7c.4 0 .8.4.8.8v2H2.6v-2c0-.4.4-.8.8-.8zM2.5 9h14.8v2.6h-2.9c-1 0-1.6.7-1.6 1.6v2.7H3.4a.8.8 0 01-.8-.8V9zm11.9 3.4h2.9V15c0 .5-.4.8-.8.8h-3v-2.7c0-.5.4-.8.9-.8z"/></svg>
- {{ entry.data.updated }}
+ {{ entry.data.updated|datetime }}
</div>
{% endif %}
{% if entry.data.tags|count > 0 %}
diff --git a/templates/web/index.html b/templates/web/index.html
index 9683ddb..425e310 100644
--- a/templates/web/index.html
+++ b/templates/web/index.html
@@ -2,24 +2,24 @@
{% block content %}
<section>
- {% if q %}<h2>Cerca: '{{ q }}'</h2>{% endif %}
- <dl id="linkslist">
- {% for entry in entries %}
+ {% if q %}<h2>Risultati ricerca:</h2>{% endif %}
+ {% for entry in entries %}
+ <dl id="linkcard">
<dt class="link" id="{{ entry.eid }}">
<a href="{{ entry.data.url }}" title="{{ entry.data.url }}">{{ entry.data.title }}</a>
</dt>
<dd>
{{ entry.data.description }}
<footer>
- {% if entry.data.updated and entry.data.updated != entry.data.added %}
+ {% if entry.data.updated and entry.data.updated|datetime > entry.data.added|datetime %}
<span title="Aggiornato - Aggiunto il {{ entry.data.added }}">
<svg class="svg-icon" viewBox="0 0 20 20"><path d="M5.5 3.2c-.2 0-.4.2-.4.4v.9H3.4c-.9 0-1.6.7-1.6 1.6v9c0 1 .7 1.7 1.6 1.7h13.2c.9 0 1.6-.8 1.6-1.7v-9c0-.9-.7-1.6-1.6-1.6h-1.7v-.9c0-.2-.2-.4-.4-.4s-.4.2-.4.4v.9H5.9v-.9c0-.2-.2-.4-.4-.4zm-2 2H5v1.3c0 .2.2.4.4.4s.4-.2.4-.4V5.3h8.2v1.2c0 .2.2.4.4.4s.4-.2.4-.4V5.3h1.7c.4 0 .8.4.8.8v2H2.6v-2c0-.4.4-.8.8-.8zM2.5 9h14.8v2.6h-2.9c-1 0-1.6.7-1.6 1.6v2.7H3.4a.8.8 0 01-.8-.8V9zm11.9 3.4h2.9V15c0 .5-.4.8-.8.8h-3v-2.7c0-.5.4-.8.9-.8z"/></svg>
- {{ entry.data.updated }}
+ {{ entry.data.updated|datetime }}
</span>
{% else %}
<span title="Aggiunto">
<svg class="svg-icon" viewBox="0 0 20 20"><path d="M16.557,4.467h-1.64v-0.82c0-0.225-0.183-0.41-0.409-0.41c-0.226,0-0.41,0.185-0.41,0.41v0.82H5.901v-0.82c0-0.225-0.185-0.41-0.41-0.41c-0.226,0-0.41,0.185-0.41,0.41v0.82H3.442c-0.904,0-1.64,0.735-1.64,1.639v9.017c0,0.904,0.736,1.64,1.64,1.64h13.114c0.904,0,1.64-0.735,1.64-1.64V6.106C18.196,5.203,17.461,4.467,16.557,4.467 M17.377,15.123c0,0.453-0.366,0.819-0.82,0.819H3.442c-0.453,0-0.82-0.366-0.82-0.819V8.976h14.754V15.123z M17.377,8.156H2.623V6.106c0-0.453,0.367-0.82,0.82-0.82h1.639v1.23c0,0.225,0.184,0.41,0.41,0.41c0.225,0,0.41-0.185,0.41-0.41v-1.23h8.196v1.23c0,0.225,0.185,0.41,0.41,0.41c0.227,0,0.409-0.185,0.409-0.41v-1.23h1.64c0.454,0,0.82,0.367,0.82,0.82V8.156z"></path></svg>
- {{ entry.data.added }}
+ {{ entry.data.added|datetime }}
</span>
{% endif %}
@@ -34,8 +34,8 @@
{% endif %}
</footer>
</dd>
- {% endfor %}
</dl>
+ {% endfor %}
{% if entries|count > 0 %}
{% if q %}
<a id="nextpage" href="{{ url_for('search', q=q, p=page+1) }}">altro</a>
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,
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 12:35:43 +0000