grav-theme-libretic/scss/template/modular/_features.scss

112 lines
2.4 KiB
SCSS
Raw Normal View History

2015-01-15 19:15:54 +01:00
// Modular Showcase styling
.modular {
.features {
2015-01-21 14:19:59 +01:00
padding: 4rem 0;
2015-01-15 19:15:54 +01:00
padding-bottom: 1rem;
text-align: center;
@include clearfix;
h2 {
margin: 0;
line-height: 100%;
color: $light-gray;
}
2015-01-20 12:31:35 +01:00
hr {
margin-top: 4rem;
}
2015-01-15 19:15:54 +01:00
p {
margin: 1rem 0;
@include breakpoint(mobile-only) {
font-size: $core-font-size;
}
}
.button {
background-color: $core-accent;
color: $header-text;
font-family: $font-family-header;
border-radius: $border-radius;
box-shadow: none;
font-size: $core-font-size;
}
.feature-items {
margin-top: 2rem;
@supports not (flex-wrap: wrap) {
overflow: hidden;
}
}
.feature {
display:block;
float: left;
width: 25%;
vertical-align: top;
margin-top: 2rem;
margin-bottom: 1rem;
@include breakpoint(large-mobile-range) {
margin-top: 1rem;
width: 50%;
}
@include breakpoint(small-mobile-range) {
margin-top: 1rem;
width: 100%;
}
i.fa {
font-size: 2rem;
}
h4 {
margin: 0;
font-size: 1.1rem;
}
p {
display: inline-block;
font-size: $core-font-size;
margin: 0.2rem 0 1rem;
}
}
&.big {
text-align: center;
.feature {
width: 33.33%;
@include breakpoint(small-mobile-range) {
margin-top: 1rem;
width: 100%;
}
}
i.fa {
font-size: 4.5rem;
margin-bottom: 1.5rem;
}
.feature-content {
padding-right: 2rem;
text-align: justify;
2015-01-15 19:15:54 +01:00
&.icon-offset {
margin-left: 1rem;
}
h4 {
font-size: 1.2rem;
}
p {
padding: 0;
}
}
}
}
}