Skip to content

Commit

Permalink
Update design
Browse files Browse the repository at this point in the history
  • Loading branch information
@MinThaMie
MinThaMie committed Nov 25, 2023
1 parent 1c3a57a commit abe6849
Show file tree
Hide file tree
Showing 9 changed files with 221 additions and 112 deletions.
3 changes: 0 additions & 3 deletions app/components/code-snippet.css
View file

This file was deleted.

2 changes: 1 addition & 1 deletion app/components/code-snippet.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<button type="button" local-class="button" {{on "click" this.toggle}}>{{if this.show "Hide code" "Show code"}}</button>
<button type="button" class="button" {{on "click" this.toggle}}>{{if this.show "Hide code" "Show code"}}</button>
{{#if this.show}}
{{#let (get-code-snippet @name) as |snippet|}}
<CodeBlock @code= {{snippet.source}} @language={{snippet.language}} />
Expand Down
21 changes: 0 additions & 21 deletions app/components/day.css
View file

This file was deleted.

10 changes: 5 additions & 5 deletions app/components/day.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<div local-class="intro">
<div class="intro">
<h2>Day {{@number}}</h2>
<p>The puzzle can be found <a href='https://adventofcode.com/2022/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
<Inputtoggle @toggle={{this.toggle}}/>
</p>
</div>
<div local-class="container">
<div local-class="solution1">
<div class="container">
<div class="solution1">
Solution 1 is {{if this.input @solution1 @example1}}
<CodeSnippet @name="day{{ @number}}-solution1.js"/>
</div>
<div local-class="solution2">
<div class="solution2">
Solution 2 is {{if this.input @solution2 @example2}}
<CodeSnippet @name="day{{ @number}}-solution2.js"/>
</div>
<div local-class="description">
<div class="description">
{{yield}}
</div>
</div>
46 changes: 0 additions & 46 deletions app/components/inputtoggle.css
View file

This file was deleted.

8 changes: 4 additions & 4 deletions app/components/inputtoggle.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<label local-class="container" for="input">
<label class="input-container" for="input">
<span>example</span>
<div local-class="switch">
<div local-class="bar"></div>
<div local-class="circle {{if this.input "right" "left"}} {{if this.focused "focused" ""}}"></div>
<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
Expand Down
175 changes: 174 additions & 1 deletion app/styles/app.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
62 changes: 31 additions & 31 deletions app/templates/application.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
{{page-title "Advent Of Code2023"}}
<div local-class="content-wrap">
<h1>Welcome to MinThaMie & Liulangzhe98's advent of code 2023</h1>
<nav local-class="navigation">
{{page-title "Advent Of Code 2023"}}
<nav class="navigation">
<ul>
<LinkTo @route="puzzles.1">Day 1</LinkTo>
<LinkTo @route="puzzles.2">Day 2</LinkTo>
<LinkTo @route='puzzles.3'>Day 3</LinkTo>
<LinkTo @route='puzzles.4'>Day 4</LinkTo>
<LinkTo @route='puzzles.5'>Day 5</LinkTo>
<LinkTo @route='puzzles.6'>Day 6</LinkTo>
<LinkTo @route='puzzles.7'>Day 7</LinkTo>
<LinkTo @route="puzzles.8">Day 8</LinkTo>
<LinkTo @route="puzzles.9">Day 9</LinkTo>
<LinkTo @route="puzzles.10">Day 10</LinkTo>
<LinkTo @route="puzzles.11">Day 11</LinkTo>
<LinkTo @route="puzzles.12">Day 12</LinkTo>
<LinkTo @route="puzzles.13">Day 13</LinkTo>
<LinkTo @route="puzzles.14">Day 14</LinkTo>
<LinkTo @route="puzzles.15">Day 15</LinkTo>
<LinkTo @route="puzzles.16">Day 16</LinkTo>
<LinkTo @route="puzzles.17">Day 17</LinkTo>
<LinkTo @route="puzzles.18">Day 18</LinkTo>
<LinkTo @route="puzzles.19">Day 19</LinkTo>
<LinkTo @route="puzzles.20">Day 20</LinkTo>
<LinkTo @route="puzzles.21">Day 21</LinkTo>
<LinkTo @route="puzzles.22">Day 22</LinkTo>
<LinkTo @route="puzzles.23">Day 23</LinkTo>
<LinkTo @route="puzzles.24">Day 24</LinkTo>
<LinkTo @route="puzzles.25">Day 25</LinkTo>
<LinkTo @route="puzzles.1">1</LinkTo>
<LinkTo @route="puzzles.2">2</LinkTo>
<LinkTo @route='puzzles.3'>3</LinkTo>
<LinkTo @route='puzzles.4'>4</LinkTo>
<LinkTo @route='puzzles.5'>5</LinkTo>
<LinkTo @route='puzzles.6'>6</LinkTo>
<LinkTo @route='puzzles.7'>7</LinkTo>
<LinkTo class="half-complete" @route="puzzles.8">8</LinkTo>
<LinkTo class="complete" @route="puzzles.9">9</LinkTo>
<LinkTo @route="puzzles.10">10</LinkTo>
<LinkTo @route="puzzles.11">11</LinkTo>
<LinkTo @route="puzzles.12">12</LinkTo>
<LinkTo @route="puzzles.13">13</LinkTo>
<LinkTo @route="puzzles.14">14</LinkTo>
<LinkTo @route="puzzles.15">15</LinkTo>
<LinkTo @route="puzzles.16">16</LinkTo>
<LinkTo @route="puzzles.17">17</LinkTo>
<LinkTo @route="puzzles.18">18</LinkTo>
<LinkTo @route="puzzles.19">19</LinkTo>
<LinkTo @route="puzzles.20">20</LinkTo>
<LinkTo @route="puzzles.21">21</LinkTo>
<LinkTo @route="puzzles.22">22</LinkTo>
<LinkTo @route="puzzles.23">23</LinkTo>
<LinkTo @route="puzzles.24">24</LinkTo>
<LinkTo @route="puzzles.25">25</LinkTo>
</ul>
</nav>
<div class="content-wrap">
<h1>Welcome to MinThaMie & Liulangzhe's advent of code 2023</h1>
{{outlet}}
</div>
<footer local-class="footer">
<span>An open-source project made with ❤️ by <a href="https://twitter.com/agvanherwijnen" class="underline" rel="external">Anne-Greeth</a> and Thijs. Hosted by <a href="https://www.netlify.com" class="underline" rel="external">Netlify</a>.</span>
<footer class="footer">
<span>An open-source project made with ❤️ by <a href="https://twitter.com/agvanherwijnen" class="underline" rel="external">Anne-Greeth</a> and <a href="https://github.com/Liulangzhe98/" class="underline" rel="external">Thijs</a>. Hosted by <a href="https://www.netlify.com" class="underline" rel="external">Netlify</a>.</span>
<span>Wanna run this project yourself, check out the code on the <a href="https://github.com/minthamie/advent-of-code-2023" class="underline" rel="external">GitHub repository</a>.</span>
</footer>
6 changes: 6 additions & 0 deletions ember-cli-build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ module.exports = function (defaults) {

const { Webpack } = require('@embroider/webpack');
return require('@embroider/compat').compatBuild(app, Webpack, {
staticAddonTestSupportTrees: true,
staticAddonTrees: true,
staticHelpers: true,
staticModifiers: true,
staticComponents: true,
staticEmberSource: true,
skipBabel: [
{
package: 'qunit',
Expand Down

0 comments on commit abe6849

Please sign in to comment.