Restyle most recent list: add grid

app.py

@@ -506,7 +506,8 @@ def _before_request():
 def _inject_variables():
     return {
         'T': partial(get_string, g.lang),
-        'app_name': _getconf('site', 'title')
+        'app_name': _getconf('site', 'title'),
+        'strong': lambda x:Markup('<strong>{0}</strong>').format(x),
     }
 
 @app.route('/')

static/style.css

@@ -21,10 +21,12 @@ body{font-family:sans-serif}
 
 /* interface styles */
 .nl-list{list-style:none}
+.nl-list > li{margin-bottom: 1em}
 .nl-title{font-size:1.2em; font-weight: 500}
 .nl-desc{font-size:0.9em;opacity:.75;font-family:serif}
-.nl-new{margin:6px 0 12px 0;display:flex;justify-content:start}
+.nl-new{margin:6px 0 12px 0;display:flex;justify-content:start; float: right}
 .nl-new > a{margin-right:12px}
+.nl-prev,.nl-next{text-align:center}
 input{border:0;border-bottom:3px solid #ccc;font:inherit;color:#181818;background-color:transparent}
 input:focus{color:black;border-bottom-color:#09f}
 input.error{border-bottom-color:#ff1800}
@@ -85,6 +87,12 @@ a:hover{color:#0088ff}
 .metro-divider{height:1px;background-color:white;clear:both}
 .metro-badge{background-color:#333;border-radius:4px;color:white;font-size:80%}
 
+/* grids */
+@media (min-width:800px) {
+    .nl-list {display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr; column-gap: 1.5em}
+    .nl-list > .nl-prev, .nl-list > .nl-next {grid-column-end: span 2}
+}
+
 /* dark theme */
 body.dark, .dark input, .dark textarea{background-color: #1f1f1f; color: white}
 .dark .inner-content{color: #e5e5e5}

strings.csv

@@ -22,3 +22,4 @@ random-page,Random page,Pagina casuale
 search,Search,Cerca
 year,Year,Anno
 calculate,Calculate,Calcola
+show-all,Show all,Mostra tutto

templates/home.html

@@ -5,13 +5,15 @@
 {% block content %}
 <h1>{{ T('welcome').format(app_name) }}</h1>
 
-<h2>{{ T('latest-notes') }}</h2>
-
-<ul class="nl-list">
-  <li class="nl-new">
+<div class="nl-new">
   <a href="/create/"><button class="submit-primary">{{ T('new-note') }}</button></a>
   <a href="/upload/"><button class="submit-secondary">{{ T('upload-file') }}</button></a>
-  </li>
+</div>
+
+<h2>{{ T('latest-notes') }}</h2>
+
+<br style="clear:both">
+<ul class="nl-list">
   {% for n in new_notes %}
   <li>
     <a href="{{ n.get_url() }}" class="nl-title">{{ n.title }}</a>
@@ -26,7 +28,7 @@
     {% endif %}
   </li>
   {% endfor %}
-  <li><a href="/p/most_recent/">Show all</a></li>
+  <li><a href="/p/most_recent/">{{ T('show-all') }}</a></li>
 </ul>
 
 <h2>{{ T('latest-uploads') }}</h2>