Remove layout code from sassline, not needed
This commit is contained in:
parent
e6de56532d
commit
d27e754328
@ -4,4 +4,3 @@
|
||||
@import "sassline-base/modular-scale";
|
||||
@import "sassline-base/mixins";
|
||||
@import "sassline-base/typography";
|
||||
@import "sassline-base/layouts";
|
||||
|
@ -1,282 +0,0 @@
|
||||
// Layouts
|
||||
// ---------------------------------------
|
||||
|
||||
// Container.
|
||||
.section {
|
||||
@include clearfix;
|
||||
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 94%;
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include maxwidth(3);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include maxwidth(4);
|
||||
}
|
||||
}
|
||||
|
||||
// Single column (based on measure for typeset content).
|
||||
.single-measure {
|
||||
@include measure(all);
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Base column styles.
|
||||
.column {
|
||||
@include measure(0);
|
||||
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
float: left;
|
||||
margin: initial;
|
||||
max-width: initial;
|
||||
padding-left: map-get($gutterwidths, small);
|
||||
padding-right: map-get($gutterwidths, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
padding-left: map-get($gutterwidths, medium);
|
||||
padding-right: map-get($gutterwidths, medium);
|
||||
}
|
||||
}
|
||||
|
||||
// Two columns.
|
||||
.column--duo {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
width: 50%;
|
||||
|
||||
&:nth-of-type(2n+3) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(n+3) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Three columns.
|
||||
.column--trio {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
width: 33.333%;
|
||||
|
||||
&:nth-of-type(3n+4) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(n+4) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Four columns. Two at smaller breakpoints.
|
||||
.column--quad {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
// Two column layout with a main text column and a sidebar.
|
||||
|
||||
// Main column.
|
||||
.column--main {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium);
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar.
|
||||
.column--sidebar {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small, false);
|
||||
|
||||
padding-right: map-get($gutterwidths, medium);
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small, false);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium, false);
|
||||
|
||||
padding-right: map-get($gutterwidths, large);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium, false);
|
||||
}
|
||||
}
|
||||
|
||||
// If sidebar on the right side.
|
||||
.column--main + .column--sidebar {
|
||||
@include breakpoint(break-1) {
|
||||
padding-left: map-get($gutterwidths, medium);
|
||||
padding-right: map-get($gutterwidths, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
padding-left: map-get($gutterwidths, large);
|
||||
padding-right: map-get($gutterwidths, medium);
|
||||
}
|
||||
}
|
||||
|
||||
// Set the main text one level down in the modular scale for narrower columns.
|
||||
.column--trio,
|
||||
.column--quad,
|
||||
.column--sidebar {
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
|
||||
p {
|
||||
@include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 3);
|
||||
}
|
||||
|
||||
li {
|
||||
@include fontsize(eta, 3);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
|
||||
p {
|
||||
@include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 4);
|
||||
}
|
||||
|
||||
li {
|
||||
@include fontsize(eta, 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main column on the right with inline sidenotes.
|
||||
// The sidenotes will move out the column into the sidebar position aligned to the baseline.
|
||||
.column--right {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small);
|
||||
@include ideal-measure(1, small, false, margin-left);
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small);
|
||||
@include ideal-measure(2, small, false, margin-left);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium);
|
||||
@include ideal-measure(3, medium, false, margin-left);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium);
|
||||
@include ideal-measure(4, medium, false, margin-left);
|
||||
}
|
||||
|
||||
.sidenote {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small, false);
|
||||
|
||||
left: 0;
|
||||
padding-left: map-get($gutterwidths, small);
|
||||
padding-right: map-get($gutterwidths, medium);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small, false);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium, false);
|
||||
|
||||
padding-right: map-get($gutterwidths, large);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium, false);
|
||||
|
||||
padding-left: map-get($gutterwidths, medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main column on the left with inline sidenotes.
|
||||
.column--left {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium);
|
||||
}
|
||||
|
||||
.sidenote {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small, false);
|
||||
@include ideal-measure(1, small, true, left);
|
||||
|
||||
padding-left: map-get($gutterwidths, medium);
|
||||
padding-right: map-get($gutterwidths, small);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small, false);
|
||||
@include ideal-measure(2, small, true, left);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium, false);
|
||||
@include ideal-measure(3, medium, true, left);
|
||||
|
||||
padding-left: map-get($gutterwidths, large);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium, false);
|
||||
@include ideal-measure(4, medium, true, left);
|
||||
|
||||
padding-right: map-get($gutterwidths, medium);
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user