Copied a lot of stuff from my template repo
This commit is contained in:
56
src/style/_cards.scss
Normal file
56
src/style/_cards.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
h1,h2,h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 1 0 400px;
|
||||
box-sizing: border-box;
|
||||
margin: 1rem .25em;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: .25rem;
|
||||
|
||||
> a {
|
||||
color: unset;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: red;
|
||||
padding: .75rem 1.25rem;
|
||||
background-color: rgba(0,0,0,.03);
|
||||
border: 0px solid rgba(0,0,0,.125);
|
||||
border-bottom-width: 1px;
|
||||
|
||||
@media screen and (max-width: $breakpoint-xs) {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: .75rem 1.25rem;
|
||||
|
||||
@media screen and (max-width: $breakpoint-xs) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-xs) {
|
||||
flex: 1 0 280px;
|
||||
border-width: 0;
|
||||
padding-bottom: 15px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 250px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user