From bf9327349a7a88233d07519318dfa0df3dc25f78 Mon Sep 17 00:00:00 2001
From: Marko Semet <marko10_000@gmx.de>
Date: Thu, 25 Jul 2019 22:15:55 +0200
Subject: [PATCH] Support mobile

---
 theme/static/css/light.css | 74 ++++++++++++++++++++++++++++++++++++++
 theme/static/css/main.css  | 65 ++++++++++++++++++++++++++++++---
 theme/templates/base.html  |  3 ++
 3 files changed, 138 insertions(+), 4 deletions(-)

diff --git a/theme/static/css/light.css b/theme/static/css/light.css
index f60f970..578167f 100644
--- a/theme/static/css/light.css
+++ b/theme/static/css/light.css
@@ -38,9 +38,15 @@ header nav > ul > li {
 header nav > ul > li > div > a {
 	background: #000;
 }
+header > label > div {
+	font-weight: bold;
+	font-size: 120%;
+}
 
 /* Page */
 .page_title {
+	font-size: 200%;
+	font-weight: bold;
 	border-bottom: #000 solid 0.1em;
 }
 .page_title a {
@@ -57,3 +63,71 @@ header nav > ul > li > div > a {
 	color: #888;
 	font-style: italic;
 }
+article h1 {
+	font-size: 180%;
+	border-bottom: #000 solid 0.1em;
+}
+article h2 {
+	font-size: 150%;
+	border-bottom: #000 solid 0.1em;
+}
+article h3 {
+	font-size: 130%;
+	border-bottom: #000 solid 0.1em;
+}
+article h4 {
+	font-size: 120%;
+	border-bottom: #000 solid 0.1em;
+}
+article h5 {
+	font-size: 110%;
+	border-bottom: #000 solid 0.1em;
+}
+article h6 {
+	font-size: 100%;
+	border-bottom: #000 solid 0.1em;
+}
+
+/*
+ * Mobile
+ */
+@media (hover: none) {
+	header > label {
+		font-weight: bold;
+		font-size: 120%;
+	}
+	header nav > ul > li {
+		background: #000;
+		font-weight: bold;
+	}
+	header nav > ul > li.active a {
+		font-style: italic;
+	}
+}
+@media only screen and (max-width: 500px) {
+	/* Titles size */
+	.page_title {
+		font-size: 150%;
+	}
+	.page_title .translations {
+		font-size: 66%;
+	}
+	article h1 {
+		font-size: 150%;
+	}
+	article h2 {
+		font-size: 140%;
+	}
+	article h3 {
+		font-size: 130%;
+	}
+	article h4 {
+		font-size: 120%;
+	}
+	article h5 {
+		font-size: 110%;
+	}
+	article h6 {
+		font-size: 100%;
+	}
+}
diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 6ec1d7c..bdb7215 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -35,6 +35,18 @@ body > * {
 }
 
 /* header */
+#header_menu {
+	display: none;
+}
+#header_menu ~ label {
+	display: none;
+}
+header > label {
+	display: block;
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
 header nav ul {
 	padding: 0;
 	border: 0;
@@ -80,11 +92,56 @@ main {
 .translations {
 	float: right;
 }
-.page_title {
-	font-size: 200%;
-	font-weight: bold;
-}
 .details {
 	display: inline-grid;
 	grid-template-columns: auto auto;
 }
+
+/*
+ * Mobile
+ */
+@media (hover: none) {
+	#header_menu ~ label {
+		display: block;
+	}
+	#header_menu ~ nav {
+		display: none;
+	}
+	#header_menu:checked ~ nav {
+		display: block;
+	}
+	header nav > ul {
+		padding-top: 0.25em;
+		margin-left: 0;
+	}
+	header nav > ul > li {
+		display: block;
+		float: none;
+		margin-left: 0;
+		padding-top: 0.5em;
+		padding-bottom: 0.5em;
+		padding-left: 2em;
+	}
+	header nav > ul > li.page {
+		float: none;
+	}
+
+	header nav > ul > li > div {
+		margin-bottom: 0;
+	}
+	header nav > ul > li > div > a {
+		display: inline-block;
+		position: relative;
+		padding-bottom: 0;
+		top: 0;
+	}
+	header nav > ul > li:hover > div > a, header nav > ul > li.active > div > a {
+		top: 0;
+	}
+}
+@media only screen and (max-width: 500px) {
+	/* Shrink border */
+	body > * {
+		padding: 0;
+	}
+}
diff --git a/theme/templates/base.html b/theme/templates/base.html
index 2f9d1d6..a987ae1 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -29,12 +29,15 @@
 				<link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
 			{% endif %}
 		{% endblock head %}
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/main.css" />
 		<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/light.css" />
 	</head>
 	<body>
 		<header>
 			<h1><a href="{{ SITEURL }}/">{{ SITENAME }} <strong>{{ SITESUBTITLE }}</strong></a></h1>
+			<input id="header_menu" type="checkbox" name="header_menu" />
+			<label for="header_menu">Menü</label>
 			<nav>
 				<ul>
 					{% for title, link in (MENUITEMS if MENUITEMS else [])[::-1] %}