cebulacamp/landing: rewrite to plain html and css

We don't have pug/scss in Bazel/hscloud, so we just go ahead and rewrite
this to the lowest common denominator of web technologies.

Alternatively, we could at least go for gcss, which does have Bazel
rules - but it's probably not worth the effort.

Change-Id: I379157d8fd8682c4bcb87768e9cfe1f051fe9033
diff --git a/hswaw/cebulacamp/landing/style/_palette.scss b/hswaw/cebulacamp/landing/style/_palette.scss
deleted file mode 100644
index 08e11a2..0000000
--- a/hswaw/cebulacamp/landing/style/_palette.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/* Coolors Exported Palette - coolors.co/1f2a26-d8d4f2-e8e321-2ad37a-3d8cd0 */
-
-/* HSL */
-$color1: hsla(158%, 15%, 14%, 1);
-$color2: hsla(248%, 54%, 89%, 1);
-$color3: hsla(58%, 81%, 52%, 1);
-$color4: hsla(148%, 67%, 50%, 1);
-$color5: hsla(208%, 61%, 53%, 1);
-
-/* RGB */
-$color1: rgba(31, 42, 38, 1);
-$color2: rgba(216, 212, 242, 1);
-$color3: rgba(232, 227, 33, 1);
-$color4: rgba(42, 211, 122, 1);
-$color5: rgba(61, 140, 208, 1);
\ No newline at end of file
diff --git a/hswaw/cebulacamp/landing/style/main.css b/hswaw/cebulacamp/landing/style/main.css
new file mode 100644
index 0000000..5668e45
--- /dev/null
+++ b/hswaw/cebulacamp/landing/style/main.css
@@ -0,0 +1,148 @@
+.hero {
+    color: rgba(223, 219, 244, 1);;
+    background-color: rgba(0, 0, 0, 1);;
+    text-align: center;
+    padding: 5em;
+}
+
+@media only screen and (max-width: 1281px) {
+    .hero {
+        padding: 1em !important;
+    }
+    main {
+        width: 90% !important;
+    }
+    section {
+        margin: 0 0 1em 0 !important;
+        padding: 0em !important;
+    }
+    .hotel-pic {
+        width: 100% !important;
+    }
+}
+
+* {
+    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: rgba(0, 0, 0, 1);;
+}
+
+main {
+    width: 60%;
+    margin: 0 auto;
+}
+
+/* TODO: Maybe some fun with how text is laid */
+
+section.starter {
+    border: none !important;
+    padding: 1em;
+}
+
+section.starter img {
+    width: 100%
+}
+
+section {
+    color: rgba(223, 219, 244, 1);;
+    /* TODO: have some fun with transparency :D */
+    background-color: rgba(0, 0, 0, 1);;
+    padding-bottom: 5em;
+    word-wrap: break-word;
+    padding: 3em;
+}
+
+section:nth-child(2) {
+    margin: 0em 1em 0em -2em;
+}
+
+section:nth-child(3) {
+    margin: -3em -1em 3em 1em;
+}
+
+section:nth-child(4) {
+    margin: -6em -3em 6em 4em;
+}
+
+section:nth-child(5) {
+    margin: -9em -5em 9em 7em;
+}
+
+section:nth-child(6) {
+    margin: -12em -7em 12em 10em;
+}
+
+section:nth-child(7) {
+    margin: -15em -9em 15em 13em;
+}
+
+section p {
+    margin: 1em;
+}
+
+section h2 {
+    display: inline-block;
+    margin: 1em 1em 1em 0em;
+    padding: .5em;
+}
+
+section:nth-child(even) {
+    border: 8px solid rgba(173, 35, 101, 1);;
+}
+
+section:nth-child(even) h2 {
+    background-color: rgba(173, 35, 101, 1);;
+}
+
+section:nth-child(even) a {
+    color: rgba(173, 35, 101, 1);;
+}
+
+section:nth-child(even) a:hover {
+   color: rgba(61, 140, 208, 1);;
+}
+
+section:nth-child(odd) {
+    border: 8px solid rgba(61, 140, 208, 1);;
+}
+
+section:nth-child(odd) h1 {
+    background-color: rgba(61, 140, 208, 1);;
+}
+
+section:nth-child(odd) a {
+    color: rgba(61, 140, 208, 1);;
+}
+
+section:nth-child(odd) a:hover {
+    color: rgba(173, 35, 101, 1);;
+}
+
+/* testing area */
+.acc0 {
+    color: rgba(61, 140, 208, 1);;
+}
+
+.acc1 {
+    color: rgba(232, 227, 33, 1);;
+}
+
+.acc2 {
+    color: rgba(173, 35, 101, 1);;
+}
+
+.hotel-pic
+{
+    width: 50%;
+    display: block;
+    margin: .5em auto;
+    width: 50%;
+}
diff --git a/hswaw/cebulacamp/landing/style/main.scss b/hswaw/cebulacamp/landing/style/main.scss
deleted file mode 100644
index 4bba72f..0000000
--- a/hswaw/cebulacamp/landing/style/main.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-//$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%; }
-}
diff --git a/hswaw/cebulacamp/landing/style/palette.scss b/hswaw/cebulacamp/landing/style/palette.scss
deleted file mode 100644
index 700073b..0000000
--- a/hswaw/cebulacamp/landing/style/palette.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/* Coolors Exported Palette - coolors.co/1f2a26-dfdbf4-e8e321-3d8cd0-ad2365 */
-
-/* HSL */
-$color1: hsla(158%, 15%, 14%, 1);
-$color2: hsla(250%, 53%, 91%, 1);
-$color3: hsla(58%, 81%, 52%, 1);
-$color4: hsla(208%, 61%, 53%, 1);
-$color5: hsla(331%, 66%, 41%, 1);
-
-/* RGB */
-$color1: rgba(31, 42, 38, 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);