Updates for mobile layout.

02_using.md

@@ -8,7 +8,7 @@ permalink: using
 
 Using the app is also pretty straightforward. After you've added in the IP address [on the settings page]({{ 'config' | relative_url }}), you'll then be able to read your thermostat data and control it.
 
-*Note: Your Venstar thermostat has a local API. This app is interacting with this local API. Meaning, if your phone isn't connected to the same Wi-Fi network as your thermostat, you won't be able to read from it or control it. (Unless you use DDNS, but that is an avanced topic not covered here and not encouraged unless you're experienced/comfortable implementing/configuring it.)*
+*Note: Your Venstar thermostat has a local API. This app is interacting with this local API. Meaning, if your phone isn't connected to the same Wi-Fi network as your thermostat, you won't be able to read from it or control it. (Unless you use DDNS, but that is an advanced topic not covered here and not encouraged unless you're experienced/comfortable implementing/configuring it.)*
 
 ## What's this I see?
 

_includes/head.html

@@ -2,6 +2,7 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{{ page.title }}</title>
+	<link rel="shortcut icon" type="image/png" href="{{ 'public/img/favicon.png' | relative_url }}">
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lekton:ital,wght@0,400;0,700;1,400&display=swap">

_includes/sidebar.html

@@ -1,5 +1,8 @@
 <div class="sidebar">
-	<div class="site-title"><a href="{{ 'index' | relative_url }}">{{ site.title }}</a></div>
+	<div class="logo-site-title">
+		<a href="{{ 'index' | relative_url }}"><img class="sidebar-logo" src="{{ 'public/img/icon.png' | relative_url }}" alt="Thermostat Controller logo"></a>
+		<a class="site-title" href="{{ 'index' | relative_url }}" id="site-title-link">{{ site.title }}</a>
+	</div>
 	<div class="site-description">
 		<p>{{ site.description }}</p>
 	</div>

_layouts/default.html

@@ -5,7 +5,13 @@
 		<div class="container">
 			{% include sidebar.html %}
 			<div class="main">
-				{{ content }}
+				<div class="logo-menu-button">
+					<a href="{{ 'index' | relative_url }}"><img class="logo" src="{{ 'public/img/icon.png' | relative_url }}" alt="Thermostat Controller logo"></a>
+					<a class="menu-button" href="#site-title-link">Menu</a>
+				</div>
+				<div class="content">
+					{{ content }}
+				</div>
 			</div>
 		</div>
 	</body>

_layouts/page.html

@@ -5,7 +5,13 @@
 		<div class="container">
 			{% include sidebar.html %}
 			<div class="main">
-				{{ content }}
+				<div class="logo-menu-button">
+					<a href="{{ 'index' | relative_url }}"><img class="logo" src="{{ 'public/img/icon.png' | relative_url }}" alt="Thermostat Controller logo"></a>
+					<a class="menu-button" href="#site-title-link">Menu</a>
+				</div>
+				<div class="content">
+					{{ content }}
+				</div>
 			</div>
 		</div>
 	</body>

public/css/style.css

@@ -57,12 +57,21 @@ li {
 	padding: 96px 32px 0;
 	order: 1;
 }
-.site-title {
+.logo-site-title {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
 	margin-bottom: 4px;
+}
+.sidebar-logo {
+	width: 48px;
+	height: auto;
+	border-radius: 16px;
+}
+.site-title {
+	width: calc(100% - 64px);
 	font-size: 2em;
 	line-height: 1.1;
-}
-.site-title a {
 	color: #000;
 	font-weight: 700;
 }
@@ -94,6 +103,38 @@ li {
 	padding: 96px 32px 40px 64px;
 	order: 2;
 }
+.logo-menu-button {
+	display: none;
+	width: 100%;
+	justify-content: space-between;
+	margin-bottom: 48px;
+}
+.logo {
+	width: 48px;
+	height: auto;
+	border-radius: 16px;
+}
+.menu-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 48px;
+	width: 80px;
+	border: 1px solid #ddd;
+	border-radius: 16px;
+	cursor: pointer;
+	text-decoration: none;
+	color: #000;
+}
+.menu-button:hover {
+	text-decoration: none;
+	color: #000;
+}
+.content {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
 
 @media screen and (max-width: 1000px) {
 	.sidebar {
@@ -104,11 +145,20 @@ li {
 		margin: 48px 32px 0;
 		border-top: 1px solid #ddd;
 	}
+	.sidebar-logo {
+		display: none;
+	}
+	.site-title {
+		width: 100%;
+	}
 	.main {
 		width: 100%;
 		order: 1;
 		padding: 48px 32px 24px;
 	}
+	.logo-menu-button {
+		display: flex;
+	}	
 }
 
 /* dracula */