Make lots of improvements to the narrow-screen layout

entries/jinja2/entries/h-entry.html

@@ -7,12 +7,12 @@
       {{i}}<span class="p-name sr-only">{{ entry.author.name }}</span>
     {{i}}</a>
     {{i}}<a class="u-uid u-url" href="{{ entry.url }}">
-      {{i}}<time class="dt-published media" datetime="{{ entry.published.isoformat() }}">
+      {{i}}<time class="dt-published media" datetime="{{ entry.published.isoformat() }}" title="{{ entry.published.isoformat() }}">
         {{i}}<i class="fas fa-fw fa-calendar" aria-hidden="true"></i>
         {{i}}<div class="media-body">{{ entry.published | ago }}</div>
         {{i}}</time>
     {{i}}</a>
-    {{i}}<time class="dt-updated media" datetime="{{ entry.updated.isoformat() }}"{% if (entry.updated | ago) == (entry.published | ago) %} hidden{% endif %}>
+    {{i}}<time class="dt-updated media" datetime="{{ entry.updated.isoformat() }}" title="{{ entry.updated.isoformat() }}"{% if (entry.updated | ago) == (entry.published | ago) %} hidden{% endif %}>
       {{i}}<i class="fas fa-fw fa-pencil-alt" aria-hidden="true"></i>
       {{i}}<div class="media-body">{{ entry.updated | ago }}</div>
     {{i}}</time>

entries/static/entries/css/h-entry.styl

@@ -25,7 +25,7 @@ ol.entries, div.entry
 			text-align center
 			img.u-photo
 				border-radius .25rem
-				height 3em
+				max-height 3em
 		> *
 			margin-bottom .25rem
 		.media
@@ -33,6 +33,9 @@ ol.entries, div.entry
 			max-width 10rem
 			> :first-child
 				margin-right 2px
+				display none
+				@media (min-width $sm)
+					display inline-block
 	> .card
 		flex 1
 	.e-content
@@ -40,6 +43,7 @@ ol.entries, div.entry
 			list-style-type disc
 		ul, ol
 			margin-bottom 1rem
+			padding-left 1.1rem
 			ul
 				list-style-type circle
 			ul, ol
@@ -53,3 +57,5 @@ ol.entries, div.entry
 	.card-link
 		display inline-block
 		font-size 0.8rem
+		margin-left 0
+		margin-right 1.25rem

home/static/home/css/index.styl

@@ -1,8 +1,3 @@
-$sm =  576px
-$md =  768px
-$lg =  992px
-$xl = 1200px
-
 main
 	flex-direction column
 	align-items center

lemoncurry/jinja2/__init__.py

@@ -7,6 +7,8 @@ from compressor.contrib.jinja2ext import CompressorExtension
 from django_activeurl.ext.django_jinja import ActiveUrl
 
 from entries.kinds import all as entry_kinds
+from wellknowns.favicons import icons as favicons
+
 from .ago import ago
 from .markdown import markdown
 from ..theme import color as theme_color
@@ -27,6 +29,7 @@ def environment(**options):
     })
     env.globals.update({
         'entry_kinds': entry_kinds,
+        'favicons': favicons,
         'package': load_package_json(),
         'settings': settings,
         'static': staticfiles_storage.url,

lemoncurry/jinja2/ago.py

@@ -6,4 +6,4 @@ def ago(dt: datetime) -> str:
     # We have to convert the datetime we get to local time first, because ago
     # just strips the timezone from a timezone-aware datetime.
     dt = dt.astimezone()
-    return human(dt, past_tense='{}', abbreviate=True)
+    return human(dt, precision=1, past_tense='{}', abbreviate=True)

lemoncurry/jinja2/lemoncurry/layout.html

@@ -23,6 +23,9 @@
 
     <meta name="generator" content="{{ package.name }} {{ package.version }}" />
     <meta name="theme-color" content="{{ theme_color(3) }}" />
+    {% for i in favicons %}
+    <link rel="{{ i.rel }}" type="{{ i.mime }}" sizes="{{ i.sizes }}" href="{{ i.url }}" />
+    {% endfor %}
 
     <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
           integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

lemoncurry/static/lemoncurry/css/layout.styl

@@ -1,8 +1,4 @@
 $monokai_bg = #272822
-$sm =  576px
-$md =  768px
-$lg =  992px
-$xl = 1200px
 
 html
 	background-color $base00

lemoncurry/static/lemoncurry/css/theme.js

@@ -6,9 +6,20 @@ const {safeLoad} = require('js-yaml');
 
 const themePath = join(__dirname, '..', '..', 'base16-materialtheme-scheme', 'material-darker.yaml');
 
+const breakpoints = {
+	sm: 576,
+	md: 768,
+	lg: 992,
+	xl: 1200,
+};
+
 module.exports = function() {
 	const theme = safeLoad(readFileSync(themePath, 'utf8'));
 	return function(style) {
+		for (let key in breakpoints) {
+			style.define('$' + key, new stylus.nodes.Unit(breakpoints[key], 'px'));
+		}
+
 		for (let i = 0; i < 16; i++) {
 			const key = 'base0' + i.toString(16).toUpperCase();
 			const hex = theme[key];

lemoncurry/utils.py

@@ -30,10 +30,12 @@ PACKAGE = PackageJson()
 
 
 def friendly_url(url):
+    if '//' not in url:
+        url = '//' + url
     (scheme, netloc, path, params, q, fragment) = urlparse(url)
     if path == '/':
         return netloc
-    return netloc + path
+    return "{}\u200B{}".format(netloc, path)
 
 
 def load_package_json() -> Dict[str, Any]: