Move to using Rack, reformat styles and content

Gemfile

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+gem 'rack'
+
+gem "rack-livereload", group: :development

Gemfile.lock

@@ -0,0 +1,16 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    rack (2.0.6)
+    rack-livereload (0.3.17)
+      rack
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  rack
+  rack-livereload
+
+BUNDLED WITH
+   1.16.6

config.ru

@@ -0,0 +1,14 @@
+use Rack::Static,
+  :urls => ["/images", "/js", "/css"],
+  :root => "public"
+
+run lambda { |env|
+  [
+    200,
+    {
+      'Content-Type'  => 'text/html',
+      'Cache-Control' => 'public, max-age=86400'
+    },
+    File.open('public/index.html', File::RDONLY)
+  ]
+}

config/environments/development.rb

@@ -0,0 +1,4 @@
+MyApp::Application.configure do
+  # Add Rack::LiveReload to the bottom of the middleware stack with the default options:
+  config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload
+end

public/css/style.css

@@ -0,0 +1,130 @@
+:root {
+  --font-color: white;
+}
+
+html {
+    background: #cfecd0; /* fallback color */
+    background: linear-gradient(180deg, #cfecd0, #ffc5ca);
+    background-size: cover;
+    width: 100%;
+}
+
+body {
+  font-family: Tahoma, Geneva, sans-serif;
+}
+
+.flex-container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-flex-flow: row wrap;
+  justify-content: space-around;
+}
+
+.flex-item {
+  padding: 5px;
+  width: 300px;
+  height: 250px;
+  margin-top: 10px;
+}
+
+.block {
+  font-size: 1.5em;
+  text-align: center;
+}
+
+@media only screen and (min-width: 740px) {
+  .block {
+  	font-size: 2em;
+  }
+}
+
+.content {
+	text-align: left;
+	font-size: 0.8em;
+	font-weight: normal;
+}
+
+h3 {
+  color: var(--font-color);
+}
+
+p {
+  color: var(--font-color);
+}
+
+a {
+	color: var(--font-color);
+}
+
+a:hover {
+  color: #808080;
+}
+
+.section {
+	display:flex;
+  flex-direction: column;
+	justify-content:center;
+	align-items:center;
+	padding-bottom: 100px;
+}
+
+.content-with-image {
+  max-width: 900px;
+  margin: 0 25px;
+}
+
+@media only screen and (min-width: 740px) {
+  .content-with-image {
+  	display: flex;
+  }
+}
+
+.featured-text {
+  padding: 0 25px 0 25px;
+  line-height: 1.5em;
+  text-align: left;
+}
+
+.featured-images {
+  width: 650px;
+}
+
+.jsconf-image {
+  width: 400px;
+  border-radius: 2%;
+}
+
+.emberconf-image {
+  height: 400px;
+  border-radius: 2%;
+}
+
+/* .container {
+	padding-bottom: 50px;
+	margin: 0 auto;
+}
+
+.image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+} */
+
+.vaidehi-logo-image {
+	padding: 200px 0 60px 0;
+  width: 320px;
+}
+
+@media only screen and (min-width: 740px) {
+  .vaidehi-logo-image {
+    width: 650px;
+  }
+}

public/css/styles.css

@@ -0,0 +1,126 @@
+:root {
+  --font-color: white;
+  --hover-color: #808080;
+  --gradient-start: #cfecd0;
+  --gradient-end: #ffc5ca;
+  --image-border-radius: 2%;
+}
+
+html {
+  background: var(--gradient-start); /* fallback background color */
+  background: linear-gradient(180deg, var(--gradient-start) , var(--gradient-end));
+  background-size: cover;
+  width: 100%;
+}
+
+body {
+  font-family: Tahoma, Geneva, sans-serif;
+}
+
+/* MOBILE SIZES */
+.flex-container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-flex-flow: row wrap;
+  justify-content: space-around;
+}
+
+.flex-item {
+  padding: 5px;
+  width: 300px;
+  height: 250px;
+  margin-top: 10px;
+}
+
+.block {
+  font-size: 1.5em;
+  text-align: center;
+}
+
+/* .content {
+	text-align: left;
+	font-size: 0.8em;
+	font-weight: normal;
+} */
+
+h3, p, a, li {
+  color: var(--font-color);
+}
+
+ul {
+  text-align: left;
+}
+
+a:hover {
+  color: var(--hover-color);
+}
+
+.section {
+	display: flex;
+  flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding-bottom: 100px;
+}
+
+.content-with-image {
+  max-width: 1100px;
+  margin: 0 25px;
+}
+
+.featured-text {
+  padding: 0 25px;
+  line-height: 1.5em;
+  text-align: left;
+}
+
+.jsconf-image {
+  width: 250px;
+  border-radius: var(--image-border-radius);
+}
+
+.emberconf-image {
+  height: 300px;
+  border-radius: var(--image-border-radius);
+}
+
+.vaidehi-logo-image {
+	padding: 200px 0 60px 0;
+  width: 320px;
+}
+
+/* MID & LARGE SIZES */
+@media only screen and (min-width: 740px) {
+  .block {
+    font-size: 2em;
+  }
+
+  .content-with-image {
+    display: flex;
+    align-items: center;
+  }
+
+  .featured-text {
+    text-align: left;
+  }
+
+  .jsconf-image {
+    width: 400px;
+  }
+
+  .emberconf-image {
+    height: 400px;
+  }
+
+  .vaidehi-logo-image {
+    width: 650px;
+  }
+}