Merge pull request #268 from n0th1ng-else/spacing

fix(paragraph): Fix spacing
n0th1ng-else · Sep 21, 2024 · cfd4d6c · cfd4d6c
2 parents fdec28a + 68a2ad5
commit cfd4d6c
Show file tree

Hide file tree

Showing 15 changed files with 191 additions and 61 deletions.
diff --git a/src/lib/browser/components/Arrow.svelte b/src/lib/browser/components/Arrow.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import Button from '$lib/browser/ui/Button.svelte';
+	import type { ArrowDirection, ArrowSize } from '$lib/browser/ui/types';
 
 	import iconUp from '../../../assets/icons/arrow-up.svg';
 	import iconLeft from '../../../assets/icons/arrow-left.svg';
@@ -10,8 +11,8 @@
 		dispatch('click');
 	};
 
-	export let type: 'up' | 'left' = 'up';
-	export let size: 'xl' | 'md' | 'lg' = 'xl';
+	export let type: ArrowDirection = 'up';
+	export let size: ArrowSize = 'xl';
 	export let hint: string | undefined = undefined;
 
 	const icon = type === 'up' ? iconUp : iconLeft;

diff --git a/src/lib/browser/components/Footer.svelte b/src/lib/browser/components/Footer.svelte
@@ -5,6 +5,7 @@
 	import AdditionalText from '$lib/browser/ui/AdditionalText.svelte';
 	import Footer from '$lib/browser/ui/Footer.svelte';
 	import Link from '$lib/browser/ui/Link.svelte';
+	import Paragraph from '$lib/browser/ui/Paragraph.svelte';
 	import { getLinkedInContact } from '$lib/browser/utils/contacts';
 	import { getVersion } from '$lib/common/version';
 	import { legalRoute } from '$lib/common/routes';
@@ -27,46 +28,46 @@
 	<div class="network small-screen centered w-space">
 		<SocialNetworks accounts="{$accountsStore}" />
 	</div>
-	<div class="legal centered w-space">
-		<p class="legal__part">
+	<div class="legal w-space">
+		<Paragraph centered>
 			<AdditionalText>
 				My posts reflect my own views and may not be those of my employer
 			</AdditionalText>
-		</p>
-		<p class="legal__part">
+		</Paragraph>
+		<Paragraph centered>
 			<AdditionalText>
 				Unless otherwise noted, all code is free to use under the
 				<Link inline url="{legalRoute}">MIT License</Link>
 			</AdditionalText>
-		</p>
+		</Paragraph>
 	</div>
 	<div class="author on-right w-space">
-		<p>
+		<Paragraph>
 			{#if profileLink}
 				<AdditionalText
 					>© {year} <Link inline external url="{profileLink}">Sergey Nikitin</Link></AdditionalText
 				>
 			{:else}
 				<AdditionalText>© {year} Sergey Nikitin</AdditionalText>
 			{/if}
-		</p>
-		<p>
+		</Paragraph>
+		<Paragraph>
 			<AdditionalText>
 				Made with <Link inline external url="https://svelte.dev">Svelte</Link>
 				<Link inline external url="https://kit.svelte.dev">Kit</Link> with 🧡
 			</AdditionalText>
-		</p>
+		</Paragraph>
 	</div>
 	<div class="network big-screen centered w-space">
 		<SocialNetworks accounts="{$accountsStore}" />
 	</div>
-	<p class="centered w-space no-print">
+	<Paragraph centered printVisible="{false}">
 		{#if fcp}
 			<AdditionalText small>{version} // first contentful paint took {fcp}s.</AdditionalText>
 		{:else}
 			<AdditionalText small>{version}</AdditionalText>
 		{/if}
-	</p>
+	</Paragraph>
 </Footer>
 
 <style lang="scss">
@@ -88,10 +89,6 @@
 
 	.legal {
 		text-align: center;
-
-		&__part {
-			padding: $unit-quarter;
-		}
 	}
 
 	.network.big-screen {
@@ -107,10 +104,4 @@
 			display: block;
 		}
 	}
-
-	@media print {
-		.no-print {
-			display: none;
-		}
-	}
 </style>
diff --git a/src/lib/browser/components/Header.svelte b/src/lib/browser/components/Header.svelte
@@ -7,6 +7,7 @@
 	import { DEFAULT_THEME, persistTheme } from '$lib/common/theme';
 	import Button from '$lib/browser/ui/Button.svelte';
 	import HeaderLink from '$lib/browser/ui/HeaderLink.svelte';
+	import Paragraph from '$lib/browser/ui/Paragraph.svelte';
 	import HeaderNavigation from '$lib/browser/components/HeaderNavigation.svelte';
 	import type { Theme } from '$lib/common/theme';
 
@@ -46,13 +47,17 @@
 <header class="header-wrapper">
 	<nav class="header">
 		<div class="navigation-wrapper">
-			{#if showBack}
-				<p>
+			<div class="back-button" class:open="{showBack}">
+				<Paragraph flat>
 					<Arrow type="left" size="md" on:click="{onBack}" hint="Go back to the articles list" />
-				</p>
-			{/if}
+				</Paragraph>
+			</div>
 			<p class="logo-container">
-				<HeaderLink url="{homeRoute}" active="{homeRoute === activePath}">
+				<HeaderLink
+					url="{homeRoute}"
+					active="{homeRoute === activePath}"
+					label="Go to the home page"
+				>
 					<span class="brand">Nothing Else.</span>
 				</HeaderLink>
 			</p>
@@ -79,6 +84,76 @@
 	@import '../ui/theme';
 	@import '../../../global';
 
+	@keyframes slideInAccordion {
+		0% {
+			opacity: 0;
+			max-width: 0;
+			display: none;
+		}
+
+		1% {
+			opacity: 0;
+			max-width: 0;
+			display: inline-block;
+		}
+
+		99% {
+			opacity: 1;
+			max-width: $unit-triple;
+			display: inline-block;
+		}
+
+		100% {
+			opacity: 1;
+			max-width: $unit-triple;
+			display: inline-block;
+		}
+	}
+
+	@keyframes slideOutAccordion {
+		0% {
+			opacity: 1;
+			max-width: $unit-triple;
+			display: inline-block;
+		}
+
+		1% {
+			opacity: 1;
+			max-width: $unit-triple;
+			display: inline-block;
+		}
+
+		99% {
+			opacity: 0;
+			max-width: 0;
+			display: inline-block;
+		}
+
+		100% {
+			opacity: 0;
+			max-width: 0;
+			display: none;
+		}
+	}
+
+	.back-button {
+		animation-name: slideOutAccordion;
+		animation-duration: $transition-fast;
+
+		opacity: 0;
+		max-width: 0;
+		display: none;
+
+		&.open {
+			animation-name: slideInAccordion;
+			animation-duration: $transition-fast;
+
+			opacity: 1;
+			max-width: $unit-triple;
+			display: inline-block;
+		}
+	}
+
 	.header {
 		padding-block-end: $unit-triple;
 		padding-inline: $unit;

diff --git a/src/lib/browser/components/HeaderNavigation.svelte b/src/lib/browser/components/HeaderNavigation.svelte
@@ -23,7 +23,7 @@
 	<!--			</HeaderLink>-->
 	<!--		</li>-->
 	<li>
-		<HeaderLink url="{aboutRoute}" active="{aboutRoute === activePath}">
+		<HeaderLink url="{aboutRoute}" active="{aboutRoute === activePath}" label="About me">
 			<span class="nav__item">It's me.</span>
 		</HeaderLink>
 	</li>

diff --git a/src/lib/browser/components/NotFound.svelte b/src/lib/browser/components/NotFound.svelte
@@ -13,7 +13,7 @@
 		<img class="image" src="{imageNotFound}" alt="" title="Page not found" />
 	</aside>
 
-	<Paragraph centered>
+	<Paragraph centered flat>
 		One day something funny would appear on this page... But for now, I was not able to find
 		anything for you, really. My bad. Check out <Link inline url="{blogRoute}">my blog</Link>, if
 		you have not already

diff --git a/src/lib/browser/ui/Button.svelte b/src/lib/browser/ui/Button.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onDestroy, createEventDispatcher } from 'svelte';
 	import { onThemeChange, isDarkTheme } from '$lib/browser/stores/theme';
+	import type { IconSize } from '$lib/browser/ui/types';
 	import Link from './Link.svelte';
 
 	let isDark = true;
@@ -23,7 +24,7 @@
 
 	export let iconOutline = false;
 
-	export let iconSize: 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+	export let iconSize: IconSize = 'sm';
 
 	export let hint: string | undefined = undefined;
 
@@ -86,7 +87,7 @@
 	@import './theme';
 	@import '../../../global';
 
-	@mixin button-style($primary, $secondary) {
+	@mixin button-style($primary, $secondary, $active) {
 		@include smooth-change(border-color, color);
 
 		border-color: $primary;
@@ -96,6 +97,10 @@
 			border-color: $secondary;
 			color: $secondary;
 		}
+
+		&:active {
+			background-color: $active;
+		}
 	}
 
 	.ui-button {
@@ -108,8 +113,10 @@
 
 		&.secondary {
 			border: 0;
-			padding: $unit-quarter $unit-half;
+			border-radius: $unit-half;
+			padding: $unit-quarter $unit-quarter;
 		}
+
 		&.inline {
 			border: 0;
 			display: inline;
@@ -123,15 +130,15 @@
 		}
 
 		&.l {
-			@include button-style($l-primary, $l-accent);
+			@include button-style($l-button-primary, $l-button-accent, $l-button-active);
 
 			.outline {
 				@include draw-image-black();
 			}
 		}
 
 		&.d {
-			@include button-style($d-primary, $d-accent);
+			@include button-style($d-button-primary, $d-button-accent, $d-button-active);
 
 			.outline {
 				@include draw-image-white();

diff --git a/src/lib/browser/ui/Editor.svelte b/src/lib/browser/ui/Editor.svelte
@@ -59,11 +59,11 @@
 				<TextArea bind:text="{title}" size="xl" placeholder="Create a title..." />
 			</p>
 			<p>
-				<TextArea bind:text="{keywords}" size="m" placeholder="Add a few keywords..." />
+				<TextArea bind:text="{keywords}" size="md" placeholder="Add a few keywords..." />
 			</p>
 		</div>
 		<p class="editor__content">
-			<TextArea bind:text="{content}" size="s" placeholder="Start the article..." />
+			<TextArea bind:text="{content}" size="sm" placeholder="Start the article..." />
 		</p>
 	{/if}
 </div>

diff --git a/src/lib/browser/ui/HeaderLink.svelte b/src/lib/browser/ui/HeaderLink.svelte
@@ -4,6 +4,7 @@
 
 	export let url = 'javascript:void(0);';
 	export let active = false;
+	export let label = '';
 
 	let isDark = true;
 
@@ -12,7 +13,14 @@
 	onDestroy(() => unsubscribeTheme());
 </script>
 
-<a class="ui-header-link" class:active class:l="{!isDark}" class:d="{isDark}" href="{url}">
+<a
+	class="ui-header-link"
+	class:active
+	class:l="{!isDark}"
+	class:d="{isDark}"
+	href="{url}"
+	aria-label="{label}"
+>
 	<slot />
 </a>
 

diff --git a/src/lib/browser/ui/Paragraph.svelte b/src/lib/browser/ui/Paragraph.svelte
@@ -2,15 +2,26 @@
 	export let mono = false;
 
 	export let centered = false;
+
+	export let flat = false;
+
+	export let printVisible = true;
 </script>
 
-<p class="ui-paragraph" class:mono class:centered><slot /></p>
+<p class="ui-paragraph" class:mono class:centered class:flat class:no-print="{!printVisible}">
+	<slot />
+</p>
 
 <style lang="scss">
 	@import './theme';
+	@import '../../../global';
 
 	.ui-paragraph {
-		margin: 0;
+		margin: $unit-half;
+
+		&.flat {
+			margin: 0;
+		}
 
 		&.mono {
 			@include set-font-mono();
@@ -20,4 +31,10 @@
 			text-align: center;
 		}
 	}
+
+	@media print {
+		.no-print {
+			display: none;
+		}
+	}
 </style>