Update styling, responsiveness & fix linting

.template-lintrc.js

@@ -2,4 +2,6 @@
 
 module.exports = {
   extends: 'recommended',
+
+  ignore: ['blueprints/**'],
 };

README.md

@@ -2,6 +2,8 @@
 
 Welcome to our amazing Advent of Code app. We (MinThamie & LiuLangZhe (sis & bro)) will try to solve as many of the 2023 Advent of Code puzzles as possible. In previous years we used to do this seperately, but this year we want to bundle our efforts, so we've updated MinThaMie's UI to house both our inputs! Each day will show a silver or gold medal, depending on wheter we got 1 or two stars!
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/5ec72945-2653-447b-9a0a-1b8cf3ac89b3/deploy-status)](https://app.netlify.com/sites/advent-of-code-2023/deploys)
+
 ## Prerequisites
 
 You will need the following things properly installed on your computer.

app/components/day.hbs

@@ -1,8 +1,8 @@
 <div class="intro">
   <h2>Day {{@number}}</h2>
-  <p>The puzzle can be found <a href='https://adventofcode.com/2022/day/{{@number}}'>here</a>.<br>
+  <p>The puzzle can be found <a href='https://adventofcode.com/2023/day/{{@number}}'>here</a>.<br>
   The puzzle always has example input and a personalised input.<br>
-  You can use the toggle below to toggle between the example solution and the personalised solution
+  You can use the toggle below to toggle between the example solution and the personalised solution.
   <Inputtoggle @toggle={{this.toggle}}/>
   </p>
 </div>

app/components/inputtoggle.hbs

@@ -1,9 +1,9 @@
 <label class="input-container" for="input">
-  <span>example</span>
+  <span>Example</span>
   <div class="switch">
       <div class="bar"></div>
       <div class="circle {{if this.input "right" "left"}} {{if this.focused "focused" ""}}"></div>
   </div>
   <input type="checkbox" id="input" name="input" value="input" checked={{this.input}} {{on 'click' this.toggle}} {{on 'focusin' this.handleFocusIn}}
-  {{on 'focusout' this.handleFocusOut}}>personalised input
+  {{on 'focusout' this.handleFocusOut}}>Personalised Input
 </label>

app/controllers/puzzles/1.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-vars */
+
 import PuzzlesBaseController from './base';
 
 export default class Puzzles1Controller extends PuzzlesBaseController {

app/controllers/puzzles/10.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles10Controller extends PuzzlesBaseController {

app/controllers/puzzles/11.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles11Controller extends PuzzlesBaseController {

app/controllers/puzzles/12.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles12Controller extends PuzzlesBaseController {

app/controllers/puzzles/13.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles13Controller extends PuzzlesBaseController {

app/controllers/puzzles/14.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles14Controller extends PuzzlesBaseController {

app/controllers/puzzles/15.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles15Controller extends PuzzlesBaseController {

app/controllers/puzzles/16.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles16Controller extends PuzzlesBaseController {

app/controllers/puzzles/17.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles17Controller extends PuzzlesBaseController {

app/controllers/puzzles/18.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles18Controller extends PuzzlesBaseController {

app/controllers/puzzles/19.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles19Controller extends PuzzlesBaseController {

app/controllers/puzzles/2.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles2Controller extends PuzzlesBaseController {

app/controllers/puzzles/20.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles20Controller extends PuzzlesBaseController {

app/controllers/puzzles/21.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles21Controller extends PuzzlesBaseController {

app/controllers/puzzles/22.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles22Controller extends PuzzlesBaseController {

app/controllers/puzzles/23.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles23Controller extends PuzzlesBaseController {

app/controllers/puzzles/24.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles24Controller extends PuzzlesBaseController {

app/controllers/puzzles/25.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles25Controller extends PuzzlesBaseController {

app/controllers/puzzles/3.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles3Controller extends PuzzlesBaseController {

app/controllers/puzzles/4.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles4Controller extends PuzzlesBaseController {

app/controllers/puzzles/5.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles5Controller extends PuzzlesBaseController {

app/controllers/puzzles/6.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles6Controller extends PuzzlesBaseController {

app/controllers/puzzles/7.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles7Controller extends PuzzlesBaseController {

app/controllers/puzzles/8.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles8Controller extends PuzzlesBaseController {

app/controllers/puzzles/9.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import PuzzlesBaseController from './base';
 
 export default class Puzzles9Controller extends PuzzlesBaseController {

app/controllers/puzzles/base.js

@@ -1,16 +1,29 @@
 import Controller from '@ember/controller';
+import { htmlSafe } from '@ember/template';
 
 export default class PuzzlesBaseController extends Controller {
   get example1() {
     return this.solve1(this.model.example);
   }
   get solution1() {
-    return `MinThaMie's solution: ${this.solve1(this.model.fullMinThaMie)} <br><br> LiuLangZhe's solution: ${this.solve1(this.model.fullLiuLangzhe)}`;;
+    return htmlSafe(
+      `<ul><li>MinThaMie's solution: ${this.solve1(
+        this.model.fullMinThaMie,
+      )}</li><li>LiuLangZhe's solution: ${this.solve1(
+        this.model.fullLiuLangzhe,
+      )}</li></ul>`,
+    );
   }
   get example2() {
     return this.solve2(this.model.example);
   }
   get solution2() {
-    return `MinThaMie's solution: ${this.solve2(this.model.fullMinThaMie)} <br><br> LiuLangZhe's solution: ${this.solve2(this.model.fullLiuLangzhe)}`;
+    return htmlSafe(
+      `<ul><li>MinThaMie's solution: ${this.solve2(
+        this.model.fullMinThaMie,
+      )}</li><li>LiuLangZhe's solution: ${this.solve2(
+        this.model.fullLiuLangzhe,
+      )}</li></ul>`,
+    );
   }
 }

app/styles/app.css

@@ -36,6 +36,7 @@ a {
 
 h1 {
   margin-top: 0;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 }
 
 .navigation {
@@ -98,6 +99,17 @@ h1 {
 
 .button {
   float: right;
+  cursor: pointer;
+  background: transparent;
+  border: 2px solid var(--theme-color);
+  border-radius: 8px;
+  padding: 2px 4px;
+  transition: all 0.3s;
+}
+
+.button:hover {
+  background-color: var(--theme-color);
+  color: white;
 }
 
 /* Day */
@@ -108,6 +120,10 @@ h1 {
   gap: 20px;
 }
 
+.intro p {
+  line-height: 1.5em;
+}
+
 .solution1,
 .solution2,
 .description {
@@ -118,19 +134,29 @@ h1 {
   margin-top: 0;
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
+  body {
+    display: flex;
+    flex-flow: wrap column;
+  }
+
   .container {
     flex-direction: column;
   }
-  .solution1, .solution2, .description {
+
+  .solution1,
+  .solution2,
+  .description {
     width: 100%;
   }
 }
 
 /* Input toggle */
 
 .input-container {
+  margin-top: 20px;
   display: flex;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 }
 
 .input-container input[type="checkbox"] {
@@ -142,7 +168,7 @@ h1 {
 }
 
 .switch {
-  margin: 0px 5px;
+  margin: 0 5px;
   display: flex;
   align-items: center;
   width: 40px;
@@ -166,7 +192,7 @@ h1 {
   border-radius: 50%;
   background-color: var(--theme-color);
   z-index: 1;
-  transition: transform .8s;
+  transition: transform 0.8s;
 }
 
 .circle.focused {

app/templates/application.hbs

@@ -29,7 +29,7 @@
   </ul>
 </nav>
 <div class="content-wrap">
-<h1>Welcome to MinThaMie & Liulangzhe's advent of code 2023</h1>
+<h1>Welcome to MinThaMie & LiuLangZhe's advent of code 2023</h1>
 {{outlet}}
 </div>
 <footer class="footer">

blueprints/puzzle/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable n/no-extraneous-require */
 'use strict';
 
 const fs = require('fs');