Initial port

[editorial.git] / assets / main / sass / components / _posts.scss

diff --git a/assets/main/sass/components/_posts.scss b/assets/main/sass/components/_posts.scss
new file mode 100644 (file)
index 0000000..4350a92
--- /dev/null
+++ b/assets/main/sass/components/_posts.scss
@@ -0,0 +1,179 @@
+///\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
+\r
+/* Posts */\r
+\r
+       .posts {\r
+               $gutter: (_size(gutter) * 2);\r
+\r
+               @include vendor('display', 'flex');\r
+               @include vendor('flex-wrap', 'wrap');\r
+               margin: 0 0 _size(element-margin) ($gutter * -1);\r
+               width: calc(100% + #{$gutter});\r
+\r
+               article {\r
+                       @include vendor('flex-grow', '0');\r
+                       @include vendor('flex-shrink', '1');\r
+                       margin: 0 0 $gutter $gutter;\r
+                       position: relative;\r
+                       width: calc(#{(100% / 3)} - #{$gutter});\r
+\r
+                       &:before {\r
+                               background: _palette(border);\r
+                               content: '';\r
+                               display: block;\r
+                               height: calc(100% + #{$gutter});\r
+                               left: ($gutter * -0.5);\r
+                               position: absolute;\r
+                               top: 0;\r
+                               width: 1px;\r
+                       }\r
+\r
+                       &:after {\r
+                               background: _palette(border);\r
+                               bottom: ($gutter * -0.5);\r
+                               content: '';\r
+                               display: block;\r
+                               height: 1px;\r
+                               position: absolute;\r
+                               right: 0;\r
+                               width: calc(100% + #{$gutter});\r
+                       }\r
+\r
+                       > :last-child {\r
+                               margin-bottom: 0;\r
+                       }\r
+\r
+                       .image {\r
+                               display: block;\r
+                               margin: 0 0 _size(element-margin) 0;\r
+\r
+                               img {\r
+                                       display: block;\r
+                                       width: 100%;\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('xlarge-to-max') {\r
+                       article {\r
+                               &:nth-child(3n + 1) {\r
+                                       &:before {\r
+                                               display: none;\r
+                                       }\r
+\r
+                                       &:after {\r
+                                               width: 100%;\r
+                                       }\r
+                               }\r
+\r
+                               &:nth-last-child(1),\r
+                               &:nth-last-child(2),\r
+                               &:nth-last-child(3) {\r
+                                       margin-bottom: 0;\r
+\r
+                                       &:before {\r
+                                               height: 100%;\r
+                                       }\r
+\r
+                                       &:after {\r
+                                               display: none;\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('<=xlarge') {\r
+                       article {\r
+                               width: calc(50% - #{$gutter});\r
+\r
+                               &:nth-last-child(3) {\r
+                                       margin-bottom: $gutter;\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('small-to-xlarge') {\r
+                       article {\r
+                               &:nth-child(2n + 1) {\r
+                                       &:before {\r
+                                               display: none;\r
+                                       }\r
+\r
+                                       &:after {\r
+                                               width: 100%;\r
+                                       }\r
+                               }\r
+\r
+                               &:nth-last-child(1),\r
+                               &:nth-last-child(2) {\r
+                                       margin-bottom: 0;\r
+\r
+                                       &:before {\r
+                                               height: 100%;\r
+                                       }\r
+\r
+                                       &:after {\r
+                                               display: none;\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('<=small') {\r
+                       $gutter: _size(gutter) * 1.5;\r
+\r
+                       margin: 0 0 _size(element-margin) ($gutter * -1);\r
+                       width: calc(100% + #{$gutter});\r
+\r
+                       article {\r
+                               margin: 0 0 $gutter $gutter;\r
+                               width: calc(50% - #{$gutter});\r
+\r
+                               &:before {\r
+                                       height: calc(100% + #{$gutter});\r
+                                       left: ($gutter * -0.5);\r
+                               }\r
+\r
+                               &:after {\r
+                                       bottom: ($gutter * -0.5);\r
+                                       width: calc(100% + #{$gutter});\r
+                               }\r
+\r
+                               &:nth-last-child(3) {\r
+                                       margin-bottom: $gutter;\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('<=xsmall') {\r
+                       $gutter: _size(gutter) * 1.5;\r
+\r
+                       margin: 0 0 _size(element-margin) 0;\r
+                       width: 100%;\r
+\r
+                       article {\r
+                               margin: 0 0 $gutter 0;\r
+                               width: 100%;\r
+\r
+                               &:before {\r
+                                       display: none;\r
+                               }\r
+\r
+                               &:after {\r
+                                       width: 100%;\r
+                               }\r
+\r
+                               &:last-child {\r
+                                       margin-bottom: 0;\r
+\r
+                                       &:after {\r
+                                               display: none;\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+       }
\ No newline at end of file