split up layout and global file and clean up markup
This commit is contained in:
committed by
Benedikt Rötsch
parent
090e0e332a
commit
bf1e00c1e9
29
assets/stylesheets/layout/grid-lists.css
Normal file
29
assets/stylesheets/layout/grid-lists.css
Normal file
@@ -0,0 +1,29 @@
|
||||
.grid-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 0 calc(var(--grid-gutter) / 2 * -1);
|
||||
|
||||
& > * {
|
||||
box-sizing: border-box;
|
||||
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
|
||||
flex: 0 0 calc(50% - var(--grid-gutter));
|
||||
|
||||
@media (--breakpoint-desktop) {
|
||||
flex: 0 0 calc(33% - var(--grid-gutter));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-list-small {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 0 calc(var(--grid-gutter) / 2 * -1);
|
||||
|
||||
& > * {
|
||||
box-sizing: border-box;
|
||||
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
|
||||
flex: 0 0 calc(50% - var(--grid-gutter));
|
||||
}
|
||||
}
|
||||
3
assets/stylesheets/layout/index.css
Normal file
3
assets/stylesheets/layout/index.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@import 'layout-centered';
|
||||
@import 'layout-sidebar';
|
||||
@import 'grid-lists';
|
||||
5
assets/stylesheets/layout/layout-centered.css
Normal file
5
assets/stylesheets/layout/layout-centered.css
Normal file
@@ -0,0 +1,5 @@
|
||||
@block layout-centered {
|
||||
max-width: var(--content-max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 2vw;
|
||||
}
|
||||
43
assets/stylesheets/layout/layout-sidebar.css
Normal file
43
assets/stylesheets/layout/layout-sidebar.css
Normal file
@@ -0,0 +1,43 @@
|
||||
@block layout-sidebar {
|
||||
padding: 0 2vw;
|
||||
max-width: var(--content-max-width);
|
||||
margin: 0 auto;
|
||||
|
||||
@media (--breakpoint-desktop) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@element sidebar {
|
||||
@media (--breakpoint-desktop) {
|
||||
flex: 0 0 220px;
|
||||
border-radius: 7px;
|
||||
box-shadow: var(--card-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@element sidebar-header {
|
||||
padding: var(--grid-gutter);
|
||||
border-bottom: 1px solid var(--color-sidebar-seperator);
|
||||
}
|
||||
|
||||
@element sidebar-title {
|
||||
font-size: 1.25em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@element sidebar-content {
|
||||
background: var(--color-sidebar-bg);
|
||||
padding: var(--grid-gutter);
|
||||
}
|
||||
|
||||
@element content {
|
||||
padding: var(--grid-gutter) 0;
|
||||
|
||||
@media (--breakpoint-desktop) {
|
||||
flex: 1 1 auto;
|
||||
margin-left: var(--grid-gutter);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user