oldschoolshuffle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*App.css*/ | |
.App { | |
margin: auto; | |
padding-left: 50px; | |
padding-right: 50px; | |
text-align: center; | |
display: grid; /* Sets the element to grid mode */ | |
grid-template-columns: 2fr 1fr; /* We want 2 columns, with the first column 2/3 of the space */ | |
grid-column-gap: 20px; /* give us 20px margin between columns */ | |
grid-template-rows: 1fr 2fr 3fr 2fr 1fr; /*5 rows, little on top and bottom, larger in middle*/ | |
grid-row-gap: 20px; | |
justify-items: stretch; | |
align-items: stretch; | |
height: 100vh; /* vh lets you always make the container full screen height. So EASY! */ | |
max-width: 1600px; | |
} | |
.App-header { | |
grid-column: 1/1; /* put the header only in the first column */ | |
} | |
.featuredPost { | |
grid-column: 1/1; /* put the featured post only in the first column*/ | |
grid-row: 2/4; /* spread featured post over row 2 and row 3 (stop at row 4) */ | |
} | |
.spotifyPlayer { | |
grid-column: 2/3; /* put the player in the second column */ | |
grid-row: 2/5; /* spread the player over rows 2, 3, and 4 (stopping at edge of 5)*/ | |
} | |
.otherPosts { | |
grid-column: 1/1; /* put other posts in first column*/ | |
grid-row-start: 4; /* other posts is only 1 row tall, just the the 4th row */ | |
} | |
.footer { | |
grid-column: 1/3; /* spread footer across cols 1 and 2. (start at 1, end where 3 would be)*/ | |
grid-row-start: 5; /* put footer in the 5th row (starting at row 4 edge) */ | |
max-width:800px /* offsets our footer to the left on big screens and looks classy */ | |
} | |
.App-title { | |
font-size: 1.5em; | |
} | |
@media only screen and (max-width: 800px) { | |
.App { | |
margin: auto; | |
padding-left: 20px; | |
padding-right: 20px; | |
text-align: center; | |
display: grid; | |
grid-template-columns: 1fr; | |
grid-template-rows: 1fr 2fr 2fr 1fr; | |
grid-row-gap: 20px; | |
justify-items: stretch; | |
align-items: stretch; | |
height: auto; | |
/*height: 100vh;*/ | |
max-width: 1600px; | |
overflow: auto; | |
} | |
.App-header { | |
grid-column: 1/1; | |
grid-row: 1/1; | |
} | |
.featuredPost { | |
grid-column: 1/1; | |
grid-row: 2/3; | |
} | |
.spotifyPlayer { | |
grid-column: 1/1; | |
grid-row: 3/4; | |
} | |
.otherPosts { | |
grid-column: 1/1; | |
grid-row-start: 4/5; | |
} | |
.footer { | |
grid-column: 1/1; | |
grid-row-start: 5/6; | |
} | |
.App-title { | |
font-size: 1.5em; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment