switched to css grid
This commit is contained in:
parent
77e8fd2c8b
commit
646f660227
|
@ -4,14 +4,13 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width:100%;
|
max-height: 30vh;
|
||||||
max-height:100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#globalContainer {
|
#globalContainer {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titleContainer {
|
#titleContainer {
|
||||||
|
@ -19,11 +18,7 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
#navigationContainer {
|
#navigationContainer {
|
||||||
flex: auto;
|
|
||||||
overflow: auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
|
||||||
height: 100%;
|
|
||||||
border-top: 2px solid #ccc;
|
border-top: 2px solid #ccc;
|
||||||
border-bottom: 2px solid #ccc;
|
border-bottom: 2px solid #ccc;
|
||||||
}
|
}
|
||||||
|
@ -34,22 +29,15 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
#playerContainer {
|
#playerContainer {
|
||||||
height: 30vh;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#albumCover {
|
#albumCover {
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
padding-left: 1em;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#playerControls {
|
#playerControls {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-right: 0.5em;
|
|
||||||
padding-bottom: 0.5em;
|
padding-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="playerContainer">
|
<div id="playerContainer">
|
||||||
<span id="albumCover"><img src=""/></span>
|
<span id="albumCover"><img src=""></span>
|
||||||
<span id="playerControls">
|
<span id="playerControls">
|
||||||
<h4><span id="nowPlayingArtist"></span> - <span id="nowPlayingAlbum"></span></h4>
|
<h4><span id="nowPlayingArtist"></span> - <span id="nowPlayingAlbum"></span></h4>
|
||||||
<h3 id="nowPlayingTitle"></h3>
|
<h3 id="nowPlayingTitle"></h3>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user