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/index.html b/hswaw/cebulacamp/landing/index.html
new file mode 100644
index 0000000..de4ee9d
--- /dev/null
+++ b/hswaw/cebulacamp/landing/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Cebulacamp 2020</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" type="text/css" href="style/main.css">
+<header class="hero">
+ <h1>Kongres Komunikacyjny Cebula 2020</h1>
+ <h2>Testing in production</h2>
+ <p class="acc0">2020/11/13 - 2020/11/15</p>
+ <p class="acc1">Hotel Orle, Gdańsk</p>
+ <p>
+ Three days of under-organized hacking and talking in a hotel in northern Poland. We might talk about the Polish hacker scene. We might get technical. We might even speak mostly Polish, but we'll do our best to welcome people who don't speak encrypted. We're friendly.
+ </p>
+ <p class="acc2">
+ But, most importantly, we will have a bonfire with kiełbaski. Hopefully even vegan ones. Join us!
+ </p>
+</header>
+<main>
+ <section class="starter">
+ <img src="cebula2020.jpeg">
+ </section>
+ <section>
+ <div class="section-content">
+ <header>
+ <h2>Tickets</h2>
+ <p>
+ Get your tickets now at <a href="https://tickets.hackerspace.pl/cebulacamp/kkc20/1">tickets.hackerspace.pl/cebulacamp/kkc20/1</a>.
+ </p>
+ <p>
+ An all-inclusive ticket (bed in shared room for two nights, food for three days) is 500 PLN. If you want a solo room, or to share a room with someone in particular, contact <a href="mailto:cebula@hackerspace.pl">cebula@hackerspace.pl</a>, or (once you bought your ticket) <a href="mailto:info@orle.pl">info@orle.com.pl</a>.
+ </p>
+ <p>
+ <img class="hotel-pic" src="hotel-orle.jpg">
+ </p>
+ <p>
+ Has a kind of vintage glare to it, eh? Totally legit!
+ </p>
+ </header>
+ </div>
+ </section>
+ <section>
+ <div class="section-content">
+ <header>
+ <h2>CFP</h2>
+ <p>
+ Yes, there will be some talks. No, they won't be very formal.
+ </p>
+ <p>
+ Please take part in Cebula Camp! <a href="https://cfp.cebula.camp/kkc-2020/cfp">Submit your talks</a>, or, <a href="https://cfp.cebula.camp/kkc-2020/sneak/">Look at Sneak Peaks</a>.
+ </p>
+ </header>
+ </div>
+ </section>
+ <section>
+ <div class="section-content">
+ <header>
+ <h2>Contact</h2>
+ <p>
+ Reach the organizers at <a href="mailto:cebula@hackerspace.pl">cebula@hackerspace.pl</a>. Reach the hotel (in case of room requests, etc) at <a href="mailto:info@orle.com.pl">info@orle.com.pl</a>, and CC cebula@hackerspace.pl if you so with.
+ </p>
+ <p>
+ irc: #cebulacamp on Freenode
+ </p>
+ <p>
+ Cebula Camp is an inclusive event. Be excellent to each other, or stay home. Harassment and discrimination are not welcome or tolerated, online or AFK. If you're a subject, observer, or third-party to any of these, please, get in touch, write to <a href="mailto:cebula@hackerspace.pl">cebula@hackerspace.pl</a> or <a href="mailto:q3k@q3k.org">q3k personally</a>.
+ </p>
+ </header>
+ </div>
+ </section>
+</main>
diff --git a/hswaw/cebulacamp/landing/index.pug b/hswaw/cebulacamp/landing/index.pug
deleted file mode 100644
index 8077ada..0000000
--- a/hswaw/cebulacamp/landing/index.pug
+++ /dev/null
@@ -1,55 +0,0 @@
-doctype html
-head
- meta(charset="utf-8")
- title Cebulacamp 2020
- meta(name="viewport" content="width=device-width, initial-scale=1")
- link(rel="stylesheet" type="text/css" href="style/main.scss")
-body
- //[if IE]
- <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>[endif]
-
- header.hero
- h1 Kongres Komunikacyjny Cebula 2020
- h2 Testing in production
- p.acc0 2020/11/13 - 2020/11/15
- p.acc1 Hotel Orle, Gdańsk
- p Three days of under-organized hacking and talking in a hotel in northern Poland. We might talk about the Polish hacker scene. We might get technical. We might even speak mostly Polish, but we'll do our best to welcome people who don't speak encrypted. We're friendly.
- p.acc2 But, most importantly, we will have a bonfire with kiełbaski. Hopefully even vegan ones. Join us!
-
- main
- section.starter
- img(src="cebula2020.jpeg")
-
- section
- .section-content
- header
- h2 Tickets
-
- p Get your tickets now at <a href="https://tickets.hackerspace.pl/cebulacamp/kkc20/1">tickets.hackerspace.pl/cebulacamp/kkc20/1</a>.
-
- p An all-inclusive ticket (bed in shared room for two nights, food for three days) is 500 PLN. If you want a solo room, or to share a room with someone in particular, contact <a href="mailto:cebula@hackerspace.pl">cebula@hackerspace.pl</a>, or (once you bought your ticket) <a href="mailto:info@orle.pl">info@orle.com.pl</a>.
-
- p
- img(src="hotel-orle.jpg").hotel-pic
-
- p Has a kind of vintage glare to it, eh? Totally legit!
-
- section
- .section-content
- header
- h2 CFP
-
- p Yes, there will be some talks. No, they won't be very formal.
-
- p Please take part in Cebula Camp! <a href="https://cfp.cebula.camp/kkc-2020/cfp">Submit your talks</a>, or, <a href="https://cfp.cebula.camp/kkc-2020/sneak/">Look at Sneak Peaks</a>.
-
- section
- .section-content
- header
- h2 Contact
-
- p Reach the organizers at <a href="mailto:cebula@hackerspace.pl">cebula@hackerspace.pl</a>. Reach the hotel (in case of room requests, etc) at <a href="mailto:info@orle.com.pl">info@orle.com.pl</a>, and CC cebula@hackerspace.pl if you so with.
-
- p irc: #cebulacamp on Freenode
-
- p Cebula Camp is an inclusive event. Be excellent to each other, or stay home. Harassment and discrimination are not welcome or tolerated, online or AFK. If you're a subject, observer, or third-party to any of these, please, get in touch, write to <a href="mailto:cebula@hackerspace.pl">cebula@hackerspace.pl</a> or <a href="mailto:q3k@q3k.org">q3k personally</a>.
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);