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> </head>
<body class="body"> <body class="body">
<div class="container"> <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> <h2 id="song_title">Sample Title</h3>
<h5 id="song_author">John Krasinski</h5> <h5 id="song_author">John Krasinski</h5>
<div class="status"> <div class="status">
style.css
+63 -21
View File
@@ -5,10 +5,7 @@
body { body {
margin: 0; margin: 0;
display: flex; min-height: 100vh !important;
justify-content: center;
align-items: center;
min-height: 100vh;
} }
.body { .body {
@@ -17,16 +14,70 @@ body {
backdrop-filter: blur(120px); backdrop-filter: blur(120px);
} }
.container { @media screen and (max-width: 640px) {
padding: 32px; body {
border-radius: 8px; display: flex;
border: 1px solid rgba(0,0,0,0.2); flex-direction: column;
box-shadow: 0 0 8px rgba(0,0,0,0.6); justify-content: center;
background-color: rgba(0,0,0,0.5); align-items: center;
color: white; }
text-align: 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 { .status {
display: grid; display: grid;
grid-template-columns: 1fr 5fr 1fr; grid-template-columns: 1fr 5fr 1fr;
@@ -50,15 +101,6 @@ body {
color: green; 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 { .list ul {
padding: 0; padding: 0;
} }