Ditch scss

Gemfile

@@ -10,7 +10,6 @@ gem 'pg', '~> 1.2'
 gem 'rack', '~> 2.2'
 gem 'rake', '~> 13.0'
 gem 'rspec', '~> 3.9'
-gem 'sassc', '~> 2.2'
 gem 'sequel', '~> 5.30'
 gem 'sinatra', '~> 2.0'
 gem "truncato", "~> 0.7.11"

Rakefile

@@ -35,17 +35,15 @@ task 'scrape' do
 end
 
 task 'build' do
-  require 'sassc'
-
   unless Dir.exist?('./web/public')
     puts 'Creating web/public/'
     Dir.mkdir('./web/public')
   end
 
-  scss = File.read('./web/assets/style.scss')
-  css = SassC::Engine.new(scss, style: :compressed).render
+  css = File.read('./web/assets/style.css')
   puts 'Writing web/public/style.css'
   File.write('./web/public/style.css', css)
+
   js = File.read('./web/assets/script.js')
   puts 'Writing web/public/script.js'
   File.write('./web/public/script.js', js)

web/assets/style.css

@@ -0,0 +1,202 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: verdana, sans-serif;
+}
+
+img {
+  max-width: 100%;
+}
+
+blockquote {
+  font-style: italic;
+  margin: 0;
+}
+
+.error {
+  color: #DD2222;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  max-width: 800px;
+  min-height: 100vh;
+  padding: 15px;
+}
+
+.header__link {
+  color: black;
+  text-decoration: none;
+}
+
+.btn {
+  background-color: rgb(40, 96, 144);
+  border: 1px solid #222;
+  border-radius: 5px;
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 20px;
+  padding: 0.5em 0.5em;
+  text-decoration: none;
+}
+
+.btn:hover {
+  background-color: rgb(30, 85, 135);
+}
+
+.btn--small {
+  font-size: 14px;
+}
+
+.btn--prev {
+  margin-right: 1em;
+}
+
+.center {
+  text-align: center;
+}
+
+.auth {
+  align-items: center;
+  display: flex;
+  font-size: 14px;
+  justify-content: space-between;
+}
+
+.auth__copy {
+  margin: 0;
+}
+
+.auth__username {
+  font-weight: bold;
+}
+
+.footer {
+  border-top: 1px solid black;
+  font-size: 12px;
+  margin: 20px 0;
+}
+
+.form {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin: 2em auto;
+  width: 100%;
+}
+
+.form__search {
+  border: 1px solid #999;
+  border-radius: 5px;
+  font-size: 20px;
+  padding: 0.5em;
+}
+
+.form .filters {
+  margin: 1em 0;
+}
+
+.filters__section {
+  display: flex;
+  padding: .5em 0;
+}
+
+.filters__subsection--sort {
+  visibility: hidden;
+}
+
+.filters__subsection--sort.open {
+  visibility: visible;
+}
+
+.filters__subsection {
+  flex: 1;
+}
+
+.filters__subsection--static {
+  flex: 1;
+}
+
+.filters__subsection:nth-child(2) {
+  padding: 0 1em;
+}
+
+.form__field {
+  margin: 10px 0;
+}
+
+.form__text-field {
+  border: 1px solid #000000;
+  border-radius: 4px;
+  font-size: 16px;
+  padding: 5px;
+  width: 100%;
+}
+
+.form__submit {
+  font-size: 16px;
+}
+
+.form--login {
+  margin-top: 0;
+}
+
+.form--login .form__label {
+  display: block;
+  margin: 10px 0;
+}
+
+.results-container {
+  padding-bottom: 1em;
+}
+
+.results__subheader {
+  border-bottom: 1px solid black;
+  margin: 1.5em 0;
+  padding: 5px 0;
+}
+
+.results__result {
+  background: #efefef;
+  border: 1px solid black;
+  border-radius: 5px;
+  margin: 1em 0;
+  padding: 0.5em;
+}
+
+.results__result.threads .result__info {
+  margin-bottom: 0;
+}
+
+.result__info {
+  display: flex;
+  font-size: 12px;
+  justify-content: space-between;
+}
+
+@media (max-width: 500px) {
+  .result__info {
+    flex-direction: column;
+  }
+
+  .result__info span {
+    display: inline-block;
+    margin: 5px 0;
+  }
+
+  .filters__section {
+    flex-direction: column;
+  }
+
+  .filters__subsection:nth-child(2) {
+    padding: 0;
+  }

web/assets/style.scss

@@ -1,5 +0,0 @@
-@import './web/assets/styles/auth.scss';
-@import './web/assets/styles/form.scss';
-@import './web/assets/styles/global.scss';
-@import './web/assets/styles/results.scss';
-@import './web/assets/styles/footer.scss';

web/assets/styles/auth.scss

@@ -1,14 +0,0 @@
-.auth {
-  align-items: center;
-  display: flex;
-  font-size: 14px;
-  justify-content: space-between;
-}
-
-.auth__copy {
-  margin: 0;
-}
-
-.auth__username {
-  font-weight: bold;
-}

web/assets/styles/footer.scss

@@ -1,5 +0,0 @@
-.footer {
-  border-top: 1px solid black;
-  font-size: 12px;
-  margin: 20px 0;
-}

web/assets/styles/form.scss

@@ -1,76 +0,0 @@
-.form {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  margin: 2em auto;
-  width: 100%;
-}
-
-.form__search {
-  border: 1px solid #999;
-  border-radius: 5px;
-  font-size: 20px;
-  padding: 0.5em;
-}
-
-.form .filters {
-  margin: 1em 0;
-}
-
-.filters__section {
-  display: flex;
-  padding: .5em 0;
-
-  @media(max-width: 768px) {
-    flex-direction: column;
-  }
-}
-
-.filters__subsection--sort {
-  visibility: hidden;
-}
-
-.filters__subsection--sort.open {
-  visibility: visible;
-}
-
-.filters__subsection {
-  flex: 1;
-
-  &.filters__subsection--static {
-    flex: 1;
-  }
-
-  &:nth-child(2) {
-    padding: 0 1em;
-
-    @media(max-width: 768px) {
-      padding: 0;
-    }
-  }
-}
-
-.form__field {
-  margin: 10px 0;
-}
-
-.form__text-field {
-  border: 1px solid #000000;
-  border-radius: 4px;
-  font-size: 16px;
-  padding: 5px;
-  width: 100%;
-}
-
-.form__submit {
-  font-size: 16px;
-}
-
-.form--login {
-  margin-top: 0;
-}
-
-.form--login .form__label {
-  display: block;
-  margin: 10px 0;
-}

web/assets/styles/global.scss

@@ -1,62 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-html, body {
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: verdana, sans-serif;
-}
-
-img {
-  max-width: 100%;
-}
-
-blockquote {
-  font-style: italic;
-  margin: 0;
-}
-
-.error {
-  color: #DD2222;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  margin: auto;
-  max-width: 800px;
-  min-height: 100vh;
-  padding: 15px;
-}
-
-.header__link {
-  color: black;
-  text-decoration: none;
-}
-
-.btn {
-  background-color: rgb(40, 96, 144);
-  border: 1px solid #222;
-  border-radius: 5px;
-  color: #ffffff;
-  cursor: pointer;
-  font-size: 20px;
-  padding: 0.5em 0.5em;
-  text-decoration: none;
-}
-
-.btn:hover {
-  background-color: rgb(30, 85, 135);
-}
-
-.btn--small {
-  font-size: 14px;
-}
-
-.center {
-  text-align: center;
-}

web/assets/styles/results.scss

@@ -1,40 +0,0 @@
-.results-container {
-  padding-bottom: 1em;
-}
-
-.results__subheader {
-  border-bottom: 1px solid black;
-  margin: 1.5em 0;
-  padding: 5px 0;
-}
-
-.results__result {
-  background: #efefef;
-  border: 1px solid black;
-  border-radius: 5px;
-  margin: 1em 0;
-  padding: 0.5em;
-}
-
-.results__result.threads .result__info {
-  margin-bottom: 0;
-}
-
-.result__info {
-  display: flex;
-  font-size: 12px;
-  justify-content: space-between;
-
-  @media (max-width: 500px) {
-    flex-direction: column;
-
-    span {
-      display: inline-block;
-      margin: 5px 0;
-    }
-  }
-}
-
-.btn--prev {
-  margin-right: 1em;
-}