From 7918707dd9d2d4420baa8aed0fe8cf8c375f938b Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Thu, 25 Nov 2021 23:28:21 +0100
Subject: [PATCH] Change style.

---
 source/components/page_footer.rs         | 149 ++---------------------
 source/scss/_mixins.scss                 |   5 -
 source/scss/components/_errors.scss      |   1 -
 source/scss/components/_page-footer.scss |  37 ------
 source/scss/components/_page-header.scss |   3 -
 source/scss/components/_page-main.scss   |   3 -
 source/scss/components/_userstyles.scss  |   6 +-
 source/scss/index.scss                   |   5 +-
 8 files changed, 12 insertions(+), 197 deletions(-)
 delete mode 100644 source/scss/_mixins.scss

diff --git a/source/components/page_footer.rs b/source/components/page_footer.rs
index 6011c51..e5f5fe9 100644
--- a/source/components/page_footer.rs
+++ b/source/components/page_footer.rs
@@ -1,94 +1,20 @@
-use gloo_timers::callback::Interval;
-use rand::Rng;
 use yew::prelude::*;
 
 /// The main page `<footer>` element.
-pub(crate) struct PageFooter {
-  /// The handle to the `setInterval`, this is stored so it doesn't get dropped
-  /// and stop the interval from happening.
-  _interval_handle: Interval,
-  /// The number of which square is currently active.
-  active_square: u32,
-  /// The link to this component.
-  link: ComponentLink<Self>,
-  /// The maximum number of squares to render.
-  max_squares: u32,
-}
-
-/// The possible messages for [`PageFooter`].
-#[derive(Debug)]
-pub(crate) enum PageFooterMessage {
-  /// The message to decrease the max squares by 1.
-  DecrementMaxSquares,
-  /// The message to increase the max squares by 1.
-  IncrementMaxSquares,
-  /// The message from the interval to update the active square.
-  TickActiveSquare,
-}
+pub(crate) struct PageFooter;
 
 impl Component for PageFooter {
-  type Message = PageFooterMessage;
+  type Message = ();
   type Properties = ();
 
-  fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+  fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
     log::trace!("Creating PageFooter");
 
-    let interval_handle = {
-      let link = link.clone();
-      Interval::new(1000, move || {
-        link.send_message(Self::Message::TickActiveSquare)
-      })
-    };
-
-    Self {
-      _interval_handle: interval_handle,
-      active_square: 0,
-      link,
-      max_squares: 5,
-    }
+    Self
   }
 
-  fn update(&mut self, msg: Self::Message) -> ShouldRender {
-    log::trace!("PageFooterMessage::{:?}", msg);
-
-    match msg {
-      Self::Message::DecrementMaxSquares => {
-        if self.max_squares > 1 {
-          self.max_squares -= 1;
-          log::debug!("Max squares set to {}", self.max_squares);
-          true
-        } else {
-          false
-        }
-      }
-
-      Self::Message::IncrementMaxSquares => {
-        if self.max_squares < 360 {
-          self.max_squares += 1;
-          log::debug!("Max squares set to {}", self.max_squares);
-          true
-        } else {
-          false
-        }
-      }
-
-      Self::Message::TickActiveSquare => {
-        if self.max_squares == 1 {
-          if self.active_square == 0 {
-            self.active_square = 1;
-          } else {
-            self.active_square = 0;
-          }
-        } else {
-          self.active_square += 1;
-          if self.active_square >= self.max_squares {
-            self.active_square = 0;
-          }
-        }
-
-        true
-      }
-    }
+  fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    unimplemented!()
   }
 
   fn change(&mut self, _props: Self::Properties) -> ShouldRender {
@@ -96,69 +22,8 @@ impl Component for PageFooter {
   }
 
   fn view(&self) -> Html {
-    let squares = (0..self.max_squares)
-      .into_iter()
-      .map(|square| {
-        let mut classes = classes!("square");
-        if square == self.active_square {
-          classes.push("active");
-        }
-
-        let hue = {
-          if self.max_squares == 1 {
-            rand::thread_rng().gen_range(0..=360)
-          } else {
-            (360 / self.max_squares) * square
-          }
-        };
-        let style = format!("background-color: hsl({}, 100%, 50%);", hue);
-
-        return html! {
-          <div style=style class=classes />
-        };
-      })
-      .collect::<Html>();
-
-    let squares = {
-      let style = format!(
-        "--square-transition: {0}s; --squares: {0};",
-        self.max_squares
-      );
-      let decrement = self
-        .link
-        .callback(|_| PageFooterMessage::DecrementMaxSquares);
-      let increment = self
-        .link
-        .callback(|_| PageFooterMessage::IncrementMaxSquares);
-
-      html! {
-        <div style=style class="squares">
-          <button onclick=decrement>{"-"}</button>
-          {squares}
-          <button onclick=increment>{"+"}</button>
-        </div>
-      }
-    };
-
-    let technologies = html! {
-      <p class="technologies">
-        {"Written in "}
-        <a target="_blank" href="https://www.rust-lang.org">{"Rust"}</a>
-        {" with "}
-        <a target="_blank" href="https://yew.rs">{"Yew"}</a>
-        {" and compiled to "}
-        <a target="_blank" href="https://webassembly.org">{"WebAssembly"}</a>
-        {" with "}
-        <a target="_blank" href="https://trunkrs.dev">{"Trunk"}</a>
-        {"."}
-      </p>
-    };
-
     html! {
-      <footer class="page-footer">
-        {squares}
-        {technologies}
-      </footer>
+      <footer class="page-footer"></footer>
     }
   }
 }
diff --git a/source/scss/_mixins.scss b/source/scss/_mixins.scss
deleted file mode 100644
index debc5b1..0000000
--- a/source/scss/_mixins.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@mixin responsive-container {
-  margin-left: auto;
-  margin-right: auto;
-  width: 1000px;
-}
diff --git a/source/scss/components/_errors.scss b/source/scss/components/_errors.scss
index 326a5c8..a393331 100644
--- a/source/scss/components/_errors.scss
+++ b/source/scss/components/_errors.scss
@@ -1,5 +1,4 @@
 .error-404 {
-  @include responsive-container;
   align-items: center;
   display: flex;
   height: 100vh;
diff --git a/source/scss/components/_page-footer.scss b/source/scss/components/_page-footer.scss
index 96bcd31..b4ec6f7 100644
--- a/source/scss/components/_page-footer.scss
+++ b/source/scss/components/_page-footer.scss
@@ -1,40 +1,3 @@
 .page-footer {
-  @include responsive-container;
   margin-top: 1rem;
-
-  .squares {
-    display: grid;
-    grid-template-columns: min-content repeat(var(--squares, 5), 1fr) min-content;
-    height: 1rem;
-    margin-bottom: 1rem;
-
-    button {
-      align-items: center;
-      border: none;
-      display: flex;
-      font-family: monospace;
-      font-size: 1rem;
-      height: 100%;
-      justify-content: center;
-      width: 2rem;
-    }
-
-    .square {
-      height: 100%;
-
-      &.active {
-        opacity: 100%;
-      }
-
-      &:not(.active) {
-        opacity: 0%;
-        transition: opacity var(--square-transition, 5s);
-      }
-    }
-  }
-
-  .technologies {
-    background-color: #333;
-    padding: 1rem;
-  }
 }
diff --git a/source/scss/components/_page-header.scss b/source/scss/components/_page-header.scss
index 4a402c3..613eaa6 100644
--- a/source/scss/components/_page-header.scss
+++ b/source/scss/components/_page-header.scss
@@ -1,6 +1,3 @@
 .page-header {
-  @include responsive-container;
-  background-color: #333;
-  margin-top: 1rem;
   padding: 1rem;
 }
diff --git a/source/scss/components/_page-main.scss b/source/scss/components/_page-main.scss
index 05ebd4a..f72db4c 100644
--- a/source/scss/components/_page-main.scss
+++ b/source/scss/components/_page-main.scss
@@ -1,7 +1,4 @@
 .page-main {
-  @include responsive-container;
-  background-color: #333;
-  margin-top: 1rem;
   padding: 1rem;
 
   .contact-links {
diff --git a/source/scss/components/_userstyles.scss b/source/scss/components/_userstyles.scss
index 67fdf84..456200c 100644
--- a/source/scss/components/_userstyles.scss
+++ b/source/scss/components/_userstyles.scss
@@ -6,7 +6,7 @@
   padding: 0;
 
   .style {
-    background-color: #333;
+    border: 2px solid #fff;
     padding: 1rem;
 
     .header {
@@ -26,8 +26,8 @@
         text-decoration: none;
 
         &:hover {
-          background-color: #ff0;
-          border-color: #ff0;
+          background-color: #fff;
+          border-color: #fff;
           color: #000;
         }
       }
diff --git a/source/scss/index.scss b/source/scss/index.scss
index 8154259..1132c38 100644
--- a/source/scss/index.scss
+++ b/source/scss/index.scss
@@ -1,19 +1,18 @@
 @import 'reset';
-@import 'mixins';
 
 html {
   font-size: 62.5%;
 }
 
 body {
-  background-color: #111;
+  background-color: #000;
   color: #fff;
   font-family: sans-serif;
   font-size: 2rem;
 }
 
 a {
-  color: #ff0;
+  color: #fff;
   font-weight: bold;
 }