mirror of
https://github.com/KevinMidboe/brewPi.git
synced 2025-10-29 16:50:12 +00:00
Linting & minor style changes
This commit is contained in:
@@ -1,75 +1,75 @@
|
||||
<script lang="ts">
|
||||
import { fly } from 'svelte/transition';
|
||||
import Navigation from './Navigation.svelte';
|
||||
import Navigation from './Navigation.svelte';
|
||||
import GithubIcon from '../icons/Github.svelte';
|
||||
|
||||
let open: boolean = false;
|
||||
let open: boolean = false;
|
||||
|
||||
function toggleMenu() {
|
||||
open = !open;
|
||||
}
|
||||
function toggleMenu() {
|
||||
open = !open;
|
||||
}
|
||||
|
||||
function close() {
|
||||
open = false;
|
||||
}
|
||||
|
||||
$: headerText = !open ? 'Menu' : 'Close';
|
||||
$: headerText = !open ? 'Menu' : 'Close';
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div class="slideout-menu" transition:fly="{{ x: 550, duration: 300 }}">
|
||||
<h1>Navigation</h1>
|
||||
|
||||
<Navigation on:click={close} />
|
||||
<Navigation on:click="{close}" />
|
||||
|
||||
<ul class="bottom-content">
|
||||
<li>
|
||||
<a href="https://github.com/kevinmidboe/brewpi">
|
||||
<GithubIcon />
|
||||
<span class="meta">View on Github</span>
|
||||
</a>
|
||||
<a href="https://github.com/kevinmidboe/brewpi">
|
||||
<GithubIcon />
|
||||
<span class="meta">View on Github</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<header>
|
||||
<div on:click={toggleMenu} class:open aria-label="Open menu" class="menu">
|
||||
{#if !open}
|
||||
<span class="page-header-buttons__open">
|
||||
<span /> <span /> <span />
|
||||
</span>
|
||||
{:else}
|
||||
<span class="page-header-buttons__close">
|
||||
<span />
|
||||
<span />
|
||||
</span>
|
||||
{/if}
|
||||
<div on:click="{toggleMenu}" class:open="{open}" aria-label="Open menu" class="menu">
|
||||
{#if !open}
|
||||
<span class="page-header-buttons__open">
|
||||
<span></span> <span></span> <span></span>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="page-header-buttons__close">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<span class="page-header-text">{headerText}</span>
|
||||
</div>
|
||||
<span class="page-header-text">{headerText}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style lang="scss" module="scoped">
|
||||
.slideout-menu {
|
||||
position: fixed;
|
||||
.slideout-menu {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
max-width: 550px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
max-width: 550px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: #fff3f6;
|
||||
background-color: #fff3f6;
|
||||
color: black;
|
||||
padding: calc(100px + 2rem) 2rem 1rem;
|
||||
padding: calc(100px + 2rem) 2rem 1rem;
|
||||
border-top-left-radius: 4rem;
|
||||
|
||||
h1 {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
h1 {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
padding: 100px 2rem 2rem;
|
||||
@@ -78,116 +78,117 @@
|
||||
.bottom-content {
|
||||
margin-top: auto;
|
||||
|
||||
li, li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li,
|
||||
li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.meta {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.meta {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
header {
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
padding: 0 1rem;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: var(--header-height);
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
padding: 0 1rem;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: var(--header-height);
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
background-color: var(--green);
|
||||
.menu {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
background-color: var(--green);
|
||||
color: #fff3f6;
|
||||
padding: 14px 20px;
|
||||
border-radius: 25px;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
padding: 14px 20px;
|
||||
border-radius: 25px;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
&.open {
|
||||
background-color: salmon;
|
||||
color: black;
|
||||
}
|
||||
&.open {
|
||||
background-color: salmon;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
}
|
||||
|
||||
.page-header-text {
|
||||
padding-left: 11px;
|
||||
display: inline-block;
|
||||
}
|
||||
.page-header-text {
|
||||
padding-left: 11px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.page-header-buttons__open {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.page-header-buttons__open {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
|
||||
&:first-child {
|
||||
top: 4px;
|
||||
}
|
||||
&:first-child {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 11px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-header-buttons__close {
|
||||
position: relative;
|
||||
.page-header-buttons__close {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
place-items: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
|
||||
&:first-child {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:first-child {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&:nth-child(2) {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,14 +17,11 @@
|
||||
.page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding: 2.5em;
|
||||
margin-top: var(--header-height);
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
margin: var(--header-height) 2.5rem 0;
|
||||
|
||||
@include mobile {
|
||||
padding: 1em;
|
||||
margin: var(--header-height) 1rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
line-height: 1.5;
|
||||
|
||||
a {
|
||||
font-size: 1.2rem;
|
||||
color: #19A786;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<section class="card">
|
||||
<div class="desktop-only image-container" style="height: {height}px">
|
||||
<img src="/images/{ brew.image }" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
|
||||
<img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
|
||||
</div>
|
||||
|
||||
<div class="beer-container" bind:clientHeight="{height}">
|
||||
@@ -34,28 +34,28 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><b>Brygget:</b></td>
|
||||
<td>{ dateString }</td>
|
||||
<td>{dateString}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><b>Laget av:</b></td>
|
||||
<td>{ wizards }</td>
|
||||
<td>{wizards}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><b>Kategori:</b></td>
|
||||
<td>{ brew.beer.category }</td>
|
||||
<td>{brew.beer.category}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><b>Alkoholprosent:</b></td>
|
||||
<td>~ { brew.abv }%</td>
|
||||
<td>~ {brew.abv}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="mobile-only image-container">
|
||||
<img src="/images/{ brew.image }" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
|
||||
<img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
|
||||
</div>
|
||||
|
||||
<h3>Historie</h3>
|
||||
@@ -88,9 +88,27 @@
|
||||
section {
|
||||
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@200;300;400;500;600;700;800&display=swap');
|
||||
font-family: 'Epilogue', sans-serif;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
padding: unset !important;
|
||||
margin-bottom: 3rem;
|
||||
|
||||
@include mobile {
|
||||
.beer-container {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.beer-container {
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
@@ -120,7 +138,7 @@
|
||||
}
|
||||
|
||||
.beer-container {
|
||||
background-color: rgba(215, 224, 223, 0.6);
|
||||
background-color: rgba(215, 224, 223, 0.8);
|
||||
padding: 2rem 1rem;
|
||||
|
||||
@include tablet {
|
||||
|
||||
Reference in New Issue
Block a user