-
-
+
personalised input
diff --git a/app/styles/app.css b/app/styles/app.css
index 2763afa..9391b25 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1 +1,174 @@
-/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
+:root {
+ --bg: #002b36;
+ --orange: #f18f01;
+ --theme-color: #537d04;
+ --calendar-item: 40px;
+ --silver: #bec2cb;
+ --gold: #d4af37;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ background: #f4f6f8;
+ font-family: sans-serif;
+ padding: 0;
+ margin: 0;
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+ grid-gap: 20px;
+}
+
+code {
+ background-color: var(--bg);
+ color: var(--orange);
+ display: inline-block;
+ padding: 2px 5px;
+}
+
+a {
+ color: var(--theme-color);
+}
+
+h1 {
+ margin-top: 0;
+}
+
+.navigation {
+ grid-area: 1 / 1 / 2 / 2;
+}
+
+.navigation ul {
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(7, var(--calendar-item));
+ gap: 10px;
+ margin-left: 20px;
+}
+
+.navigation ul a {
+ color: var(--theme-color);
+ font-size: 18px;
+ text-align: center;
+ border-radius: 50%;
+ height: var(--calendar-item);
+ line-height: var(--calendar-item);
+ border: 2px solid transparent;
+ text-decoration: none;
+}
+
+.navigation ul a.active {
+ border-color: var(--theme-color);
+ text-decoration: none;
+}
+
+.navigation ul a:hover:not(.active) {
+ border-color: var(--theme-color);
+}
+
+.navigation ul a.half-complete {
+ background-color: var(--silver);
+ color: var(--bg);
+}
+
+.navigation ul a.complete {
+ background-color: var(--gold);
+ color: var(--bg);
+}
+
+.content-wrap {
+ grid-area: 1 / 2 / 2 / 3;
+ padding: 20px 40px;
+}
+
+.footer {
+ grid-area: 2 / 1 / 3 / 3;
+ color: white;
+ padding: 10px 40px;
+ background-color: var(--bg);
+}
+
+.underline {
+ color: #81ac30;
+}
+
+.button {
+ float: right;
+}
+
+/* Day */
+.container {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 20px;
+}
+
+.solution1,
+.solution2,
+.description {
+ width: 30vw;
+}
+
+.description h2 {
+ margin-top: 0;
+}
+
+@media (max-width: 900px) {
+ .container {
+ flex-direction: column;
+ }
+ .solution1, .solution2, .description {
+ width: 100%;
+ }
+}
+
+/* Input toggle */
+
+.input-container {
+ display: flex;
+}
+
+.input-container input[type="checkbox"] {
+ position: absolute;
+ opacity: 0;
+ width: 250px;
+ height: 25px;
+ cursor: pointer;
+}
+
+.switch {
+ margin: 0px 5px;
+ display: flex;
+ align-items: center;
+ width: 40px;
+}
+
+.circle.right {
+ transform: translateX(24px);
+}
+
+.bar {
+ width: 40px;
+ height: 5px;
+ border-radius: 5px;
+ background-color: var(--silver);
+ position: absolute;
+}
+
+.circle {
+ height: 16px;
+ width: 16px;
+ border-radius: 50%;
+ background-color: var(--theme-color);
+ z-index: 1;
+ transition: transform .8s;
+}
+
+.circle.focused {
+ box-shadow: 0 0 8px var(--blue);
+}
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 25896af..8df1cbf 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,38 +1,38 @@
-{{page-title "Advent Of Code2023"}}
-
-
Welcome to MinThaMie & Liulangzhe98's advent of code 2023
-