Skip to content

Instantly share code, notes, and snippets.

@kellenmace
Last active January 29, 2019 14:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kellenmace/b717fe565dbd7cd22bd8a7219b3dcdfd to your computer and use it in GitHub Desktop.
Save kellenmace/b717fe565dbd7cd22bd8a7219b3dcdfd to your computer and use it in GitHub Desktop.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #252527;
background: #fd746c; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ff9068, #fd746c);
background: linear-gradient(to right, #ff9068, #fd746c);
}
.app {
margin: 40px;
}
@media screen and (min-width:900px) {
.app {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
}
.title {
margin: 20px 0;
}
.posts-search__form {
margin-bottom: 40px;
}
.posts-search__search-field {
width: 100%;
padding: 20px;
font-size: 25px;
border: none;
}
.results {
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 695px) {
.results {
margin-right: -20px;
}
}
.post-card {
background: rgba(0,0,0,0.1);
background: rgba(37, 37, 39, 0.1);
padding: 20px;
margin-bottom: 20px;
flex: 1 1 300px;
}
@media screen and (min-width: 695px) {
.post-card {
margin-right: 20px;
}
}
.post-card__image {
height: auto;
max-width: 100%;
margin-bottom: 20px;
}
.post-card__heading {
margin: 0 0 20px;
}
.post-card__detail {
display: block;
}
.post-card__label {
font-weight: 700;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment