splitted up stylesheet and added lots of scaffolding to it. Style needs working.

[theme-danix.xyz.git] / assets / sass / layout / _contact.scss

diff --git a/assets/sass/layout/_contact.scss b/assets/sass/layout/_contact.scss
new file mode 100644 (file)
index 0000000..e9364bb
--- /dev/null
+++ b/assets/sass/layout/_contact.scss
@@ -0,0 +1,93 @@
+///\r
+/// Forty 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
+/* Contact */\r
+\r
+       #contact {\r
+               border-bottom: solid 1px _palette(border);\r
+               overflow-x: hidden;\r
+\r
+               > .inner {\r
+                       @include vendor('display', 'flex');\r
+                       padding: 0 !important;\r
+\r
+                       > :nth-child(2n - 1) {\r
+                               @include padding(4em, 0, (0, 3em, 0, 0));\r
+                               border-right: solid 1px _palette(border);\r
+                               width: 60%;\r
+                       }\r
+\r
+                       > :nth-child(2n) {\r
+                               padding-left: 3em;\r
+                               width: 40%;\r
+                       }\r
+\r
+                       > .split {\r
+                               padding: 0;\r
+\r
+                               > * {\r
+                                       @include padding(3em, 0, (0, 0, 0, 3em));\r
+                                       position: relative;\r
+\r
+                                       &:before {\r
+                                               border-top: solid 1px _palette(border);\r
+                                               content: '';\r
+                                               display: block;\r
+                                               margin-left: -3em;\r
+                                               position: absolute;\r
+                                               top: 0;\r
+                                               width: calc(100vw + 3em);\r
+                                       }\r
+                               }\r
+\r
+                               > :first-child {\r
+                                       &:before {\r
+                                               display: none;\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('<=medium') {\r
+                       > .inner {\r
+                               display: block;\r
+\r
+                               > :nth-child(2n - 1) {\r
+                                       @include padding(4em, 0, (0, 0, 0, 0));\r
+                                       border-right: 0;\r
+                                       width: 100%;\r
+                               }\r
+\r
+                               > :nth-child(2n) {\r
+                                       padding-left: 0;\r
+                                       width: 100%;\r
+                               }\r
+\r
+                               > .split {\r
+                                       > * {\r
+                                               @include padding(3em, 0, (0, 0, 0, 0));\r
+\r
+                                               &:before {\r
+                                               }\r
+                                       }\r
+\r
+                                       > :first-child {\r
+                                               &:before {\r
+                                                       display: block;\r
+                                               }\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('<=small') {\r
+                       > .inner {\r
+                               > :nth-child(2n - 1) {\r
+                                       @include padding(3em, 0, (0, 0, 0, 0));\r
+                               }\r
+                       }\r
+               }\r
+       }
\ No newline at end of file