hswaw/cebulacamp/landing: import from github.com/cebulacamp/queens-landing
License: WTFPL
At commit: c9b43f5c1e69d6d263a8380a15372bd7d3497ac2
Change-Id: Iedad211589438569c0288c1cc3c2a67846bfcac6
diff --git a/hswaw/cebulacamp/landing/style/main.scss b/hswaw/cebulacamp/landing/style/main.scss
new file mode 100644
index 0000000..4bba72f
--- /dev/null
+++ b/hswaw/cebulacamp/landing/style/main.scss
@@ -0,0 +1,158 @@
+//$color1: rgba(31, 42, 38, 1);
+$color1: rgba(0, 0, 0, 1);
+$color2: rgba(223, 219, 244, 1);
+$color3: rgba(232, 227, 33, 1);
+$color4: rgba(61, 140, 208, 1);
+$color5: rgba(173, 35, 101, 1);
+
+$break-width: 600px;
+$mobile: "screen and (max-width: #{$break-width})";
+$desktop: "screen and (min-width: #{$break-width})";
+
+.hero {
+ //height: 115vh;
+ color: $color2;
+ background-color: $color1;
+ text-align: center;
+ @media #{$desktop} { padding: 5em; }
+ @media #{$mobile} { padding: 1em; }
+}
+
+* {
+ box-sizing: border-box;
+ // TODO: find what's causing weird top belt
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ background-color: $color1;
+}
+
+main {
+ @media #{$desktop} { width: 60%; }
+ @media #{$mobile} { width: 90%; }
+ margin: 0 auto;
+}
+
+// TODO: Maybe some fun with how text is laid
+
+section.starter {
+ border: none !important;
+ @media #{$desktop} { padding: 1em; }
+ @media #{$mobile} { padding: 0em; }
+}
+
+section.starter img {
+ width: 100%
+}
+
+section {
+ color: $color2;
+ //background-color: transparent;
+ // TODO: have some fun with transparency :D
+ background-color: $color1;
+ padding-bottom: 5em;
+ word-wrap: break-word;
+
+ p {
+ margin: 1em;
+ }
+
+ h2 {
+ display: inline-block;
+ margin: 1em 1em 1em 0em;
+ padding: .5em;
+ }
+
+ @media #{$mobile} {
+ margin-bottom: 1em;
+ }
+
+ @media #{$desktop} {
+ padding: 3em;
+
+ // TODO: generate this shit
+ &:nth-child(2) {
+ margin: 0em 1em 0em -2em;
+ }
+
+ &:nth-child(3) {
+ margin: -3em -1em 3em 1em;
+ }
+
+ &:nth-child(4) {
+ margin: -6em -3em 6em 4em;
+ }
+
+ &:nth-child(5) {
+ margin: -9em -5em 9em 7em;
+ }
+
+ &:nth-child(6) {
+ margin: -12em -7em 12em 10em;
+ }
+
+ &:nth-child(7) {
+ margin: -15em -9em 15em 13em;
+ }
+ }
+}
+
+section:nth-child(even) {
+ h2 {
+ background-color: $color5;
+ }
+
+
+ a {
+ color: $color5;
+
+ &:hover {
+ color: $color4;
+ }
+ }
+
+ border: 8px solid $color5;
+}
+
+section:nth-child(odd) {
+ h2 {
+ background-color: $color4;
+ }
+
+ a {
+ color: $color4;
+
+ &:hover {
+ color: $color5;
+ }
+ }
+
+ border: 8px solid $color4;
+}
+
+// testing area
+.acc0 {
+ color: $color4;
+}
+
+.acc1 {
+ color: $color3;
+}
+
+.acc2 {
+ color: $color5;
+}
+
+.hotel-pic
+{
+ width: 50%;
+ display: block;
+ margin: .5em auto;
+ @media #{$desktop} { width: 50%; }
+ @media #{$mobile} { width: 100%; }
+}