mirror of
https://github.com/danbee/my-images
synced 2025-03-04 08:49:05 +00:00
Dan Barber
6936911880
* Convert SASS to SCSS * Dark mode! (no light mode anymore though) * Pretty GitHub login button * Media queries to keep thumbnail sizes consistent by changing the number of grid columns
41 lines
895 B
SCSS
41 lines
895 B
SCSS
// Place all the styles related to the images controller here.
|
|
// They will automatically be included in application.css.
|
|
// You can use Sass (SCSS) here: http://sass-lang.com/
|
|
|
|
ul.images {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-gap: 0.75rem;
|
|
justify-content: space-between;
|
|
|
|
li {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
img {
|
|
background-color: white;
|
|
max-width: calc(100% - 0.5rem);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
|
border-radius: 2px;
|
|
padding: 0.25rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 380px) {
|
|
ul.images { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
|
|
@media (min-width: 590px) {
|
|
ul.images { grid-template-columns: repeat(4, 1fr); }
|
|
}
|
|
|
|
@media (min-width: 820px) {
|
|
ul.images { grid-template-columns: repeat(5, 1fr); }
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
ul.images { grid-template-columns: repeat(6, 1fr); }
|
|
}
|