krzysieksiemv/MusicPlayer_JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile Support

Browse Source
This commit is contained in:
Christopher
2024-02-25 22:38:27 +01:00
committed by GitHub
parent 82d32ae09b
commit 7c52826998
2 changed files with 64 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -14,7 +14,7 @@
</head>
<body class="body">
<div class="container">
<img src="resources/img/noalbum.jpg" id="song_coverart" alt="noalbum" height="400px">
<img src="resources/img/noalbum.jpg" id="song_coverart" alt="noalbum">
<h2 id="song_title">Sample Title</h3>
<h5 id="song_author">John Krasinski</h5>
<div class="status">
style.css
+63 -21
View File
@@ -5,10 +5,7 @@
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
min-height: 100vh !important;
}
.body {
@@ -17,16 +14,70 @@ body {
backdrop-filter: blur(120px);
}
.container {
padding: 32px;
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 0 8px rgba(0,0,0,0.6);
background-color: rgba(0,0,0,0.5);
color: white;
text-align: center;
@media screen and (max-width: 640px) {
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
width: 90vw;
padding: 32px;
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 0 8px rgba(0,0,0,0.6);
background-color: rgba(0,0,0,0.5);
color: white;
text-align: center;
}
img {
width: 90%;
}
.list {
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 4px rgba(0,0,0,0.6);
border-radius: 0 0 8px 8px;
padding: 16px;
color: white;
width: 90vw;
}
}
@media screen and (min-width: 640px) {
body {
display: flex;
justify-content: center;
align-items: center;
}
img {
height: 400px;
}
.container {
padding: 32px;
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 0 8px rgba(0,0,0,0.6);
background-color: rgba(0,0,0,0.5);
color: white;
text-align: center;
}
.list {
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 4px rgba(0,0,0,0.6);
border-radius: 0 8px 8px 0;
padding: 16px;
color: white;
width: 25%;
}
}
.status {
display: grid;
grid-template-columns: 1fr 5fr 1fr;
@@ -50,15 +101,6 @@ body {
color: green;
}
.list {
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 4px rgba(0,0,0,0.6);
border-radius: 0 8px 8px 0;
padding: 16px;
color: white;
width: 25%;
}
.list ul {
padding: 0;
}