From d2c1b90af8361f51e5d32ecc71fd9542bbc8e74b Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Sat, 12 Nov 2022 17:30:18 +0100
Subject: [PATCH] fix: add media queries to enhance mobile experience

---
 static/logo.svg   | 69 +++++++++++++++++++++++++++++++++++++
 static/style.css  | 86 +++++++++++++++++++++++++++++------------------
 views/home.tmpl   |  6 +++-
 views/lyrics.tmpl |  5 ++-
 4 files changed, 131 insertions(+), 35 deletions(-)
 create mode 100644 static/logo.svg

diff --git a/static/logo.svg b/static/logo.svg
new file mode 100644
index 0000000..762bbce
--- /dev/null
+++ b/static/logo.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="70.153854mm"
+   height="39.268883mm"
+   viewBox="0 0 70.153854 39.268883"
+   version="1.1"
+   id="svg5"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-29.243151,-69.255918)">
+    <text
+       xml:space="preserve"
+       style="font-size:61.6466px;fill:#000000;stroke-width:0.642151"
+       x="27.208815"
+       y="107.66174"
+       id="text113"
+       inkscape:export-filename="text113.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"><tspan
+         sodipodi:role="line"
+         id="tspan111"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:61.6466px;font-family:FreeMono;-inkscape-font-specification:'FreeMono Bold';fill:#171717;fill-opacity:1;stroke-width:0.642151"
+         x="27.208815"
+         y="107.66174">db</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:31.0444px;font-family:FreeMono;-inkscape-font-specification:'FreeMono Bold';fill:#171717;fill-opacity:1;stroke-width:0.264583"
+       x="35.011162"
+       y="97.881958"
+       id="text332"><tspan
+         sodipodi:role="line"
+         id="tspan330"
+         style="fill:#171717;fill-opacity:1;stroke-width:0.264583"
+         x="35.011162"
+         y="97.881958">.</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:31.0444px;font-family:FreeMono;-inkscape-font-specification:'FreeMono Bold';fill:#171717;fill-opacity:1;stroke-width:0.264583"
+       x="75.640366"
+       y="97.881958"
+       id="text336"><tspan
+         sodipodi:role="line"
+         id="tspan334"
+         style="fill:#171717;fill-opacity:1;stroke-width:0.264583"
+         x="75.640366"
+         y="97.881958">.</tspan></text>
+  </g>
+</svg>
diff --git a/static/style.css b/static/style.css
index 1a447fa..7198479 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,34 +1,40 @@
 /* inter-regular - latin */
 @font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: local(''),
-       url('/static/fonts/inter-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/static/fonts/inter-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 400;
+	src: local(""),
+		url("/static/fonts/inter-v11-latin-regular.woff2")
+			format("woff2"),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */
+			url("/static/fonts/inter-v11-latin-regular.woff")
+			format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* inter-500 - latin */
 @font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: local(''),
-       url('/static/fonts/inter-v11-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/static/fonts/inter-v11-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 500;
+	src: local(""),
+		url("/static/fonts/inter-v11-latin-500.woff2") format("woff2"),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */
+			url("/static/fonts/inter-v11-latin-500.woff")
+			format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* inter-700 - latin */
 @font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  src: local(''),
-       url('/static/fonts/inter-v11-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/static/fonts/inter-v11-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 700;
+	src: local(""),
+		url("/static/fonts/inter-v11-latin-700.woff2") format("woff2"),
+		/* Chrome 26+, Opera 23+, Firefox 39+ */
+			url("/static/fonts/inter-v11-latin-700.woff")
+			format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-
 * {
 	margin: 0;
 	padding: 0;
@@ -47,6 +53,8 @@ body {
 #lyrics {
 	color: #171717;
 	line-height: 2.5rem;
+	flex-shrink: 0;
+	flex-grow: 1;
 }
 
 #lyrics a {
@@ -58,15 +66,16 @@ body {
 	background-color: #ccc;
 }
 
-#nav {
-	font-size: 2.5rem;
-	text-align: center;
-	font-weight: 700;
-	background-color: #FFCD38;
-	color: #1B1A17;
+nav {
+	background-color: #ffcd38;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	padding: 0.5rem;
-	letter-spacing: 1rem;
-	font-family: monospace;
+}
+
+nav img {
+	width: 50px;
 }
 
 a {
@@ -86,7 +95,7 @@ a {
 
 #metadata h2 {
 	font-size: 1.4rem;
-	color: #1E1E1E;
+	color: #1e1e1e;
 	font-weight: 500;
 }
 
@@ -97,8 +106,7 @@ a {
 }
 
 #container {
-	display: grid;
-	grid-template-columns: 1fr 3fr 1fr;
+	display: flex;
 	padding: 5rem 10rem;
 	gap: 5rem;
 }
@@ -111,13 +119,13 @@ a {
 
 #title {
 	font-size: 2rem;
-	color: #1B1A17;
+	color: #1b1a17;
 }
 
 #credits summary {
 	font-size: 1.4rem;
 	cursor: pointer;
-	color: #1E1E1E;
+	color: #1e1e1e;
 }
 
 #credits p {
@@ -175,6 +183,18 @@ a {
 #home code {
 	background-color: #eee;
 	padding: 0.3rem 1rem;
-	border-radius: .5rem;
+	border-radius: 0.5rem;
 	color: #333;
 }
+
+@media screen and (max-width: 900px) {
+	#container {
+		padding: 3rem 2rem;
+		flex-direction: column;
+		gap: 3rem;
+	}
+
+	#metadata {
+		align-items: center;
+	}
+}
diff --git a/views/home.tmpl b/views/home.tmpl
index 679f1e5..e3d977d 100644
--- a/views/home.tmpl
+++ b/views/home.tmpl
@@ -4,9 +4,13 @@
 		<title>dumb</title>
 		<meta charset="utf-8" />
 		<link rel="stylesheet" type="text/css" href="/static/style.css" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 	</head>
 	<body>
-		<h1 id="nav">DUMB</h1>
+		<nav>
+			<a href="/"><img src="/static/logo.svg" /></a>
+		</nav>
+
 		<div id="home">
 			<div>
 				<h1>Welcome to dumb</h1>
diff --git a/views/lyrics.tmpl b/views/lyrics.tmpl
index bb646a9..e51f2fe 100644
--- a/views/lyrics.tmpl
+++ b/views/lyrics.tmpl
@@ -3,11 +3,14 @@
 	<head>
 		<title>{{.Artist}} - {{.Title}} lyrics</title>
 		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="stylesheet" type="text/css" href="/static/style.css" />
 		<script type="text/javascript" src="/static/script.js" defer></script>
 	</head>
 	<body>
-		<h1 id="nav">DUMB</h1>
+		<nav>
+			<a href="/"><img src="/static/logo.svg" /></a>
+		</nav>
 		<div id="container">
 			<div id="metadata">
 				<img src="{{.Image}}"/>