ngn/dumb
1
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Activity

fix: add media queries to enhance mobile experience

Browse Source
This commit is contained in:
rramiachraf 2022-11-12 17:30:18 +01:00
parent 0d7cb0a75e
commit d2c1b90af8
4 changed files with 131 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
static/logo.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

74
static/style.css
View File

@ -1,34 +1,40 @@
/* inter-regular - latin */ /* inter-regular - latin */
@font-face { @font-face {
font-family: 'Inter'; font-family: "Inter";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local(''), 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.woff2")
url('/static/fonts/inter-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ 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 */ /* inter-500 - latin */
@font-face { @font-face {
font-family: 'Inter'; font-family: "Inter";
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
src: local(''), 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.woff2") format("woff2"),
url('/static/fonts/inter-v11-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ /* 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 */ /* inter-700 - latin */
@font-face { @font-face {
font-family: 'Inter'; font-family: "Inter";
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: local(''), 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.woff2") format("woff2"),
url('/static/fonts/inter-v11-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ /* 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; margin: 0;
padding: 0; padding: 0;
@ -47,6 +53,8 @@ body {
#lyrics { #lyrics {
color: #171717; color: #171717;
line-height: 2.5rem; line-height: 2.5rem;
flex-shrink: 0;
flex-grow: 1;
} }
#lyrics a { #lyrics a {
@ -58,15 +66,16 @@ body {
background-color: #ccc; background-color: #ccc;
} }
#nav { nav {
font-size: 2.5rem; background-color: #ffcd38;
text-align: center; display: flex;
font-weight: 700; align-items: center;
background-color: #FFCD38; justify-content: center;
color: #1B1A17;
padding: 0.5rem; padding: 0.5rem;
letter-spacing: 1rem; }
font-family: monospace;
nav img {
width: 50px;
} }
a { a {
@ -86,7 +95,7 @@ a {
#metadata h2 { #metadata h2 {
font-size: 1.4rem; font-size: 1.4rem;
color: #1E1E1E; color: #1e1e1e;
font-weight: 500; font-weight: 500;
} }
@ -97,8 +106,7 @@ a {
} }
#container { #container {
display: grid; display: flex;
grid-template-columns: 1fr 3fr 1fr;
padding: 5rem 10rem; padding: 5rem 10rem;
gap: 5rem; gap: 5rem;
} }
@ -111,13 +119,13 @@ a {
#title { #title {
font-size: 2rem; font-size: 2rem;
color: #1B1A17; color: #1b1a17;
} }
#credits summary { #credits summary {
font-size: 1.4rem; font-size: 1.4rem;
cursor: pointer; cursor: pointer;
color: #1E1E1E; color: #1e1e1e;
} }
#credits p { #credits p {
@ -175,6 +183,18 @@ a {
#home code { #home code {
background-color: #eee; background-color: #eee;
padding: 0.3rem 1rem; padding: 0.3rem 1rem;
border-radius: .5rem; border-radius: 0.5rem;
color: #333; color: #333;
} }
@media screen and (max-width: 900px) {
#container {
padding: 3rem 2rem;
flex-direction: column;
gap: 3rem;
}
#metadata {
align-items: center;
}
}

6
views/home.tmpl
View File

@ -4,9 +4,13 @@
<title>dumb</title> <title>dumb</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/static/style.css" /> <link rel="stylesheet" type="text/css" href="/static/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body> <body>
<h1 id="nav">DUMB</h1> <nav>
<a href="/"><img src="/static/logo.svg" /></a>
</nav>
<div id="home"> <div id="home">
<div> <div>
<h1>Welcome to dumb</h1> <h1>Welcome to dumb</h1>

5
views/lyrics.tmpl
View File

@ -3,11 +3,14 @@
<head> <head>
<title>{{.Artist}} - {{.Title}} lyrics</title> <title>{{.Artist}} - {{.Title}} lyrics</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/static/style.css" /> <link rel="stylesheet" type="text/css" href="/static/style.css" />
<script type="text/javascript" src="/static/script.js" defer></script> <script type="text/javascript" src="/static/script.js" defer></script>
</head> </head>
<body> <body>
<h1 id="nav">DUMB</h1> <nav>
<a href="/"><img src="/static/logo.svg" /></a>
</nav>
<div id="container"> <div id="container">
<div id="metadata"> <div id="metadata">
<img src="{{.Image}}"/> <img src="{{.Image}}"/>