///\r
-/// Massively by HTML5 UP\r
+/// Editorial by HTML5 UP\r
/// html5up.net | @ajlkn\r
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
///\r
/* Main */\r
\r
#main {\r
- background-color: _palette(bg);\r
- position: relative;\r
- margin: 0 auto;\r
- width: calc(100% - #{_size(padding) * 2});\r
- max-width: _size(wrapper);\r
- z-index: 2;\r
+ @include vendor('flex-grow', '1');\r
+ @include vendor('flex-shrink', '1');\r
+ width: 100%;\r
\r
- > * {\r
- @include padding((_size(padding) * 2), (_size(padding) * 2));\r
- border-top: solid 2px _palette(border);\r
- margin: 0;\r
+ > .inner {\r
+ @include padding(0, 6em);\r
+ margin: 0 auto;\r
+ max-width: 110em;\r
\r
- &:first-child {\r
- border-top: 0;\r
- }\r
- }\r
-\r
- > footer {\r
- text-align: center;\r
- }\r
-\r
- > .post {\r
- @include padding((_size(padding) * 4), (_size(padding) * 4));\r
-\r
- header {\r
- &.major {\r
- > .date {\r
- margin-top: -2rem;\r
- }\r
-\r
- > h1, h2 {\r
- font-size: 4rem;\r
- line-height: 1.1;\r
- margin: 0 0 _size(element-margin) 0;\r
- }\r
- }\r
- }\r
-\r
- &.featured {\r
- text-align: center;\r
- }\r
-\r
- @include breakpoint('<=large') {\r
- @include padding((_size(padding) * 3), (_size(padding) * 2));\r
- }\r
-\r
- @include breakpoint('<=small') {\r
- @include padding((_size(padding) * 2), (_size(padding) * 1));\r
+ > section {\r
+ @include padding(6em, 0);\r
+ border-top: solid 2px _palette(border);\r
\r
- header {\r
- &.major {\r
- > .date {\r
- margin-top: -1rem;\r
- margin-bottom: _size(element-margin);\r
- }\r
-\r
- > h1, h2 {\r
- font-size: 2.5rem;\r
- line-height: 1.2;\r
- margin: 0 0 (_size(element-margin) * 0.75) 0;\r
- }\r
- }\r
+ &:first-of-type {\r
+ border-top: 0 !important;\r
}\r
}\r
}\r
\r
- > .posts {\r
- @include fixed-grid((\r
- columns: 2,\r
- gutters: (_size(padding) * 4),\r
- horizontal-align: center,\r
- vertical-align: flex-start,\r
- flush: false\r
- ));\r
- width: 100%;\r
- padding: 0;\r
-\r
- > article {\r
- border-color: _palette(border);\r
- border-left-width: 2px;\r
- border-style: solid;\r
- border-top-width: 2px;\r
- text-align: center;\r
+ @include breakpoint('<=xlarge') {\r
+ > .inner {\r
+ @include padding(0, 5em);\r
\r
- > :last-child {\r
- margin-bottom: 0;\r
- }\r
-\r
- &:nth-child(2n - 1) {\r
- border-left-width: 0;\r
- }\r
-\r
- &:nth-child(-n + 2) {\r
- border-top-width: 0;\r
+ > section {\r
+ @include padding(5em, 0);\r
}\r
}\r
+ }\r
\r
- @include breakpoint('<=medium') {\r
- @include fixed-grid-resize((\r
- columns: 2,\r
- gutters: (_size(padding) * 2.5),\r
- flush: false\r
- ));\r
- }\r
-\r
- @include breakpoint('<=small') {\r
- @include fixed-grid-resize((\r
- columns: 1,\r
- gutters: (_size(padding) * 2),\r
- prev-columns: 2,\r
- flush: false\r
- ));\r
-\r
- > article {\r
- &:nth-child(2n - 1) {\r
- border-left-width: 2px;\r
- }\r
-\r
- &:nth-child(-n + 2) {\r
- border-top-width: 2px;\r
- }\r
-\r
- &:nth-child(n) {\r
- border-left-width: 0;\r
- }\r
-\r
- &:nth-child(-n + 1) {\r
- border-top-width: 0;\r
- }\r
+ @include breakpoint('<=large') {\r
+ > .inner {\r
+ @include padding(0, 4em);\r
\r
- .image {\r
- max-width: 25rem;\r
- margin-left: auto;\r
- margin-right: auto;\r
- }\r
+ > section {\r
+ @include padding(4em, 0);\r
}\r
}\r
}\r
\r
@include breakpoint('<=small') {\r
- > * {\r
- @include padding((_size(padding) * 1), (_size(padding) * 1));\r
- }\r
- }\r
+ > .inner {\r
+ @include padding(0, 2em);\r
\r
- @include breakpoint('<=xsmall') {\r
- width: 100%;\r
+ > section {\r
+ @include padding(3em, 0);\r
+ }\r
+ }\r
}\r
}
\ No newline at end of file
projects / editorial.git / blobdiff