Use sass instead of pure css

src/views/about.nim

@@ -1,7 +1,7 @@
 import karax/[karaxdsl, vdom]
 
 proc renderAbout*(): VNode =
-  buildHtml(tdiv(class="about-page")):
+  buildHtml(tdiv(class="overlay-panel")):
     h1: text "About"
     p:
       text "Nitter is a free and open source alternative Twitter front-end focused on privacy. "

src/views/general.nim

@@ -56,14 +56,14 @@ proc renderMain*(body: VNode; prefs: Prefs; title="Nitter"; titleText=""; desc="
   result = doctype & $node
 
 proc renderSearch*(): VNode =
-  buildHtml(tdiv(class="panel")):
+  buildHtml(tdiv(class="panel-container")):
     tdiv(class="search-panel"):
       form(`method`="post", action="/search"):
         input(`type`="text", name="query", autofocus="", placeholder="Enter usernames...")
         button(`type`="submit"): icon "search"
 
 proc renderError*(error: string): VNode =
-  buildHtml(tdiv(class="panel")):
+  buildHtml(tdiv(class="panel-container")):
     tdiv(class="error-panel"):
       span: text error
 

src/views/preferences.nim

@@ -53,7 +53,7 @@ macro renderPrefs*(): untyped =
       result[2].add stmt
 
 proc renderPreferences*(prefs: Prefs; path: string): VNode =
-  buildHtml(tdiv(class="preferences-container")):
+  buildHtml(tdiv(class="overlay-panel")):
     fieldset(class="preferences"):
       form(`method`="post", action="/saveprefs"):
         refererField path

src/views/timeline.nim

@@ -41,12 +41,12 @@ proc renderOlder(timeline: Timeline; username: string): VNode =
 
 proc renderNoMore(): VNode =
   buildHtml(tdiv(class="timeline-footer")):
-    h2(class="timeline-end", style={textAlign: "center"}):
+    h2(class="timeline-end"):
       text "No more tweets."
 
 proc renderNoneFound(): VNode =
   buildHtml(tdiv(class="timeline-header")):
-    h2(class="timeline-none", style={textAlign: "center"}):
+    h2(class="timeline-none"):
       text "No tweets found."
 
 proc renderProtected(username: string): VNode =