mirror of https://github.com/ascribe/wp-theme
287 lines
4.7 KiB
Plaintext
287 lines
4.7 KiB
Plaintext
//
|
|
// Grid
|
|
// --------------
|
|
// bigchain.io
|
|
//
|
|
// adapted from github.com/kremalicious/kremalicious3/blob/master/_src/_assets/styl/grid.styl
|
|
//
|
|
|
|
|
|
//
|
|
// More sane box model
|
|
//
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
//
|
|
// Base
|
|
//
|
|
.grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.grid__col {
|
|
flex: 1;
|
|
// Firefox grid fix for whatever reason
|
|
min-height: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.row {
|
|
.clearfix; // for legacy float usage reasons
|
|
max-width: @screen-lg-min;
|
|
margin: auto;
|
|
padding-left: (@gutter-space/4);
|
|
padding-right: (@gutter-space/4);
|
|
|
|
@media (@screen-sm) {
|
|
padding-left: (@gutter-space/2);
|
|
padding-right: (@gutter-space/2);
|
|
}
|
|
@media (@screen-md) {
|
|
padding-left: @gutter-space;
|
|
padding-right: @gutter-space;
|
|
}
|
|
}
|
|
|
|
// more narrow row for all long text content
|
|
.row--content {
|
|
max-width: (@screen-md-min - @gutter-space);
|
|
}
|
|
|
|
|
|
//
|
|
// Alignment per row
|
|
//
|
|
.grid--top {
|
|
align-items: flex-start
|
|
}
|
|
|
|
.grid--bottom {
|
|
align-items: flex-end
|
|
}
|
|
|
|
.grid--center {
|
|
align-items: center
|
|
}
|
|
|
|
.grid--justifycenter {
|
|
justify-content: center
|
|
}
|
|
|
|
|
|
//
|
|
// Alignment per cell
|
|
//
|
|
.grid__col--top {
|
|
align-self: flex-start
|
|
}
|
|
|
|
.grid__col--bottom {
|
|
align-self: flex-end
|
|
}
|
|
|
|
.grid__col--center {
|
|
align-self: center
|
|
}
|
|
|
|
|
|
//
|
|
// Gutters
|
|
//
|
|
.grid--gutters {
|
|
margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);
|
|
|
|
> .grid__col {
|
|
padding: @gutter-space 0 0 @gutter-space;;
|
|
}
|
|
}
|
|
|
|
@media (@screen-sm) {
|
|
.grid-small--gutters {
|
|
margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);
|
|
|
|
> .grid__col {
|
|
padding: @gutter-space 0 0 @gutter-space;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (@screen-md) {
|
|
.grid-medium--gutters {
|
|
margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);
|
|
|
|
> .grid__col {
|
|
padding: @gutter-space 0 0 @gutter-space;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (@screen-lg) {
|
|
.grid-large--gutters {
|
|
margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);
|
|
|
|
> .grid__col {
|
|
padding: @gutter-space 0 0 @gutter-space;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Columns
|
|
//
|
|
.grid--fit {
|
|
> .grid__col { flex: 1; }
|
|
}
|
|
|
|
.grid--full {
|
|
> .grid__col { flex: 0 0 100%; }
|
|
}
|
|
|
|
.grid--1of6 {
|
|
> .grid__col { flex: 0 0 16.5%; }
|
|
}
|
|
|
|
.grid--2of6,
|
|
.grid--third {
|
|
> .grid__col { flex: 0 0 33%; }
|
|
}
|
|
|
|
.grid--3of6,
|
|
.grid--half {
|
|
> .grid__col { flex: 0 0 50%; }
|
|
}
|
|
|
|
.grid--4of6 {
|
|
> .grid__col { flex: 0 0 66%; }
|
|
}
|
|
|
|
.grid--5of6 {
|
|
> .grid__col { flex: 0 0 82.5%; }
|
|
}
|
|
|
|
@media (@screen-xs) {
|
|
.grid-mini--fit {
|
|
> .grid__col { flex: 1; }
|
|
}
|
|
.grid-mini--full{
|
|
> .grid__col { flex: 0 0 100%; }
|
|
}
|
|
.grid-mini--1of6 {
|
|
> .grid__col { flex: 0 0 16.5%; }
|
|
}
|
|
.grid-mini--2of6,
|
|
.grid-mini--third {
|
|
> .grid__col { flex: 0 0 33%; }
|
|
}
|
|
.grid-mini--3of6,
|
|
.grid-mini--half {
|
|
> .grid__col { flex: 0 0 50%; }
|
|
}
|
|
.grid-mini--4of6 {
|
|
> .grid__col { flex: 0 0 66%; }
|
|
}
|
|
.grid-mini--5of6 {
|
|
> .grid__col { flex: 0 0 82.5%; }
|
|
}
|
|
}
|
|
|
|
@media (@screen-sm) {
|
|
.grid-small--fit {
|
|
> .grid__col { flex: 1; }
|
|
}
|
|
.grid-small--full{
|
|
> .grid__col { flex: 0 0 100%; }
|
|
}
|
|
.grid-small--1of6 {
|
|
> .grid__col { flex: 0 0 16.5%; }
|
|
}
|
|
.grid-small--2of6,
|
|
.grid-small--third {
|
|
> .grid__col { flex: 0 0 33%; }
|
|
}
|
|
.grid-small--3of6,
|
|
.grid-small--half {
|
|
> .grid__col { flex: 0 0 50%; }
|
|
}
|
|
.grid-small--4of6 {
|
|
> .grid__col { flex: 0 0 66%; }
|
|
}
|
|
.grid-small--5of6 {
|
|
> .grid__col { flex: 0 0 82.5%; }
|
|
}
|
|
}
|
|
|
|
@media (@screen-md) {
|
|
.grid-medium--fit {
|
|
> .grid__col { flex: 1 }
|
|
}
|
|
|
|
.grid-medium--full {
|
|
> .grid__col { flex: 0 0 100%; }
|
|
}
|
|
|
|
.grid-medium--1of6 {
|
|
> .grid__col { flex: 0 0 16.5%; }
|
|
}
|
|
|
|
.grid-medium--2of6,
|
|
.grid-medium--third {
|
|
> .grid__col { flex: 0 0 33%; }
|
|
}
|
|
|
|
.grid-medium--3of6,
|
|
.grid-medium--half {
|
|
> .grid__col { flex: 0 0 50%; }
|
|
}
|
|
|
|
.grid-medium--4of6 {
|
|
> .grid__col { flex: 0 0 66%; }
|
|
}
|
|
|
|
.grid-medium--5of6 {
|
|
> .grid__col { flex: 0 0 82.5%; }
|
|
}
|
|
}
|
|
|
|
@media (@screen-lg) {
|
|
.grid-large--fit {
|
|
> .grid__col { flex: 1; }
|
|
}
|
|
|
|
.grid-large--full {
|
|
> .grid__col { flex: 0 0 100%; }
|
|
}
|
|
|
|
.grid-large--1of6 {
|
|
> .grid__col { flex: 0 0 16.5%; }
|
|
}
|
|
|
|
.grid-large--2of6,
|
|
.grid-large--third {
|
|
> .grid__col { flex: 0 0 33%; }
|
|
}
|
|
|
|
.grid-large--3of6,
|
|
.grid-large--half {
|
|
> .grid__col { flex: 0 0 50%; }
|
|
}
|
|
|
|
.grid-large--4of6 {
|
|
> .grid__col { flex: 0 0 66%; }
|
|
}
|
|
|
|
.grid-large--5of6 {
|
|
> .grid__col { flex: 0 0 82.5%; }
|
|
}
|
|
}
|