fix: add media queries to enhance mobile experience
This commit is contained in:
rramiachraf
parent
0d7cb0a75e
commit
d2c1b90af8
69
static/logo.svg
Normal file
69
static/logo.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}}"/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user