Skip to content

Commit 0ae836a

Browse files
authored
Merge pull request #211 from n0th1ng-else/div-replace
2 parents 2edb54c + f688c43 commit 0ae836a

File tree

11 files changed

+90
-67
lines changed

11 files changed

+90
-67
lines changed

src/lib/browser/components/Footer.svelte

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,39 +26,39 @@
2626
<SocialNetworks accounts="{$accountsStore}" />
2727
</div>
2828
<div class="legal centered w-space">
29-
<div class="legal__part">
29+
<p class="legal__part">
3030
<AdditionalText>
3131
My posts reflect my own views and may not be those of my employer
3232
</AdditionalText>
33-
</div>
34-
<div class="legal__part">
33+
</p>
34+
<p class="legal__part">
3535
<AdditionalText>
3636
Unless otherwise noted, all code is free to use under the
3737
<Link inline url="{legalRoute}">MIT License</Link>
3838
</AdditionalText>
39-
</div>
39+
</p>
4040
</div>
4141
<div class="author on-right w-space">
42-
<div>
42+
<p>
4343
<AdditionalText>© {year} Sergey Nikitin</AdditionalText>
44-
</div>
45-
<div>
44+
</p>
45+
<p>
4646
<AdditionalText>
4747
Made with <Link inline external url="https://svelte.dev">Svelte</Link>
4848
<Link inline external url="https://kit.svelte.dev">Kit</Link> with 🧡
4949
</AdditionalText>
50-
</div>
50+
</p>
5151
</div>
5252
<div class="network big-screen centered w-space">
5353
<SocialNetworks accounts="{$accountsStore}" />
5454
</div>
55-
<div class="centered w-space">
55+
<p class="centered w-space">
5656
{#if fcp}
5757
<AdditionalText small>{version} // first contentful paint took {fcp}s.</AdditionalText>
5858
{:else}
5959
<AdditionalText small>{version}</AdditionalText>
6060
{/if}
61-
</div>
61+
</p>
6262
</Footer>
6363

6464
<style lang="scss">

src/lib/browser/components/Header.svelte

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,14 @@
5858
<header class="header-wrapper">
5959
<nav class="header">
6060
<div class="navigation-wrapper">
61-
<div class="back-container" class:show="{showBack}">
61+
<p class="back-container" class:show="{showBack}">
6262
<Arrow type="left" size="sm" on:click="{onBack}" />
63-
</div>
64-
<div class="logo-container">
63+
</p>
64+
<p class="logo-container">
6565
<HeaderLink url="{homeRoute}" active="{homeRoute === activePath}">
6666
<span class="brand">Nothing Else.</span>
6767
</HeaderLink>
68-
</div>
68+
</p>
6969
<div class="navigation">
7070
<List type="header">
7171
<li class="nav__item--big">
@@ -101,9 +101,9 @@
101101
</li>
102102
</List>
103103
</div>
104-
<div class="theme">
104+
<p class="theme">
105105
<Button secondary on:click="{switchTheme}" icon="{icon}" hint="change theme" />
106-
</div>
106+
</p>
107107
</div>
108108
</nav>
109109
</header>

src/lib/browser/components/NotFound.svelte

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
<script lang="ts">
22
import Link from '$lib/browser/ui/Link.svelte';
33
import Paragraph from '$lib/browser/ui/Paragraph.svelte';
4+
import SubTitle from '$lib/browser/ui/SubTitle.svelte';
45
import { blogRoute } from '$lib/common/routes';
56
import imageNotFound from '../../../assets/images/not-found.svg';
67
</script>
78

89
<article>
10+
<SubTitle centered>Ops, bumped into empty space?</SubTitle>
11+
912
<aside class="container">
1013
<img class="image" src="{imageNotFound}" alt="" title="Page not found" />
1114
</aside>
12-
<section class="text">
13-
<Paragraph>One day something funny would appear on this page...</Paragraph>
14-
<Paragraph>But for now, I was not able to find anything for you, really. My bad.</Paragraph>
15-
<Paragraph>
16-
Check out <Link inline url="{blogRoute}">my blog</Link>, if you have not already
17-
</Paragraph>
18-
</section>
15+
16+
<Paragraph centered>
17+
One day something funny would appear on this page... But for now, I was not able to find
18+
anything for you, really. My bad. Check out <Link inline url="{blogRoute}">my blog</Link>, if
19+
you have not already
20+
</Paragraph>
1921
</article>
2022

2123
<style lang="scss">
2224
@import '../../../lib/browser/ui/theme';
2325
@import '../../../global';
2426
2527
.text {
26-
margin-top: $unit;
2728
text-align: center;
2829
}
2930
@@ -36,6 +37,7 @@
3637
.container {
3738
margin: auto;
3839
height: auto;
40+
padding: $unit 0;
3941
width: 4 * $unit-plus;
4042
}
4143

src/lib/browser/components/ScrollTop.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
let y = 0;
88
</script>
99

10-
<div class="to-top-container" class:show="{y > yBorder}">
10+
<p class="to-top-container" class:show="{y > yBorder}">
1111
<Arrow on:click="{scrollToTop}" />
12-
</div>
12+
</p>
1313

1414
<svelte:window bind:scrollY="{y}" />
1515

src/lib/browser/components/SocialNetworks.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<div class="social-networks-wrapper">
2121
{#each networks as network (network.title)}
22-
<div class="social-networks-item">
22+
<p class="social-networks-item">
2323
<Link external url="{network.link}">
2424
<img
2525
src="{network.image}"
@@ -29,13 +29,13 @@
2929
class:d="{isDark}"
3030
/>
3131
</Link>
32-
</div>
32+
</p>
3333
{/each}
34-
<div class="social-networks-item">
34+
<p class="social-networks-item">
3535
<Link url="{rssRoute}">
3636
<img src="{icoRss}" alt="RSS feed" class="logo" class:l="{!isDark}" class:d="{isDark}" />
3737
</Link>
38-
</div>
38+
</p>
3939
</div>
4040

4141
<style lang="scss">

src/lib/browser/ui/Card.svelte

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,35 +21,35 @@
2121

2222
<section class="ui-card" class:l="{!isDark}" class:d="{isDark}">
2323
{#if item.logo}
24-
<div class="ui-card__logo-container">
24+
<p class="ui-card__logo-container">
2525
<img class="ui-card__logo" src="{item.logo}" alt="" />
26-
</div>
26+
</p>
2727
{/if}
2828
{#if !item.logo || extended}
2929
<div class="ui-card__section ui-card__title ui-card__text">
3030
<LowerTitle>{item.name}</LowerTitle>
3131
</div>
3232
{/if}
3333
{#if getPositionTitle(item.position)}
34-
<div class="ui-card__text ui-card__section">
34+
<p class="ui-card__text ui-card__section">
3535
<AdditionalText>{getPositionTitle(item.position)}</AdditionalText>
36-
</div>
36+
</p>
3737
{/if}
3838
<div class="ui-card__actions ui-card__section">
3939
{#if item.url}
40-
<div class="ui-card__action">
40+
<p class="ui-card__action">
4141
<Button href="{item.url}" disabled="{readonly}" external>Website</Button>
42-
</div>
42+
</p>
4343
{/if}
4444
{#if item.source}
45-
<div class="ui-card__action">
45+
<p class="ui-card__action">
4646
<Button href="{item.source}" disabled="{readonly}" external>Source</Button>
47-
</div>
47+
</p>
4848
{/if}
4949
{#if item.registry}
50-
<div class="ui-card__action">
50+
<p class="ui-card__action">
5151
<Button href="{item.registry}" disabled="{readonly}" external>Package</Button>
52-
</div>
52+
</p>
5353
{/if}
5454
</div>
5555
{#if item.tags}
@@ -62,9 +62,9 @@
6262
</div>
6363
{/if}
6464
{#if item.description}
65-
<div class="ui-card__text ui-card__section">
65+
<p class="ui-card__text ui-card__section">
6666
<AdditionalText>{item.description}</AdditionalText>
67-
</div>
67+
</p>
6868
{/if}
6969
</section>
7070

src/lib/browser/ui/Editor.svelte

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,15 @@
2727
<div>
2828
<h1>{title}</h1>
2929
</div>
30-
<div>
30+
<p>
3131
{#each tags as tag}
3232
<span class="editor__tag">#{tag}</span>
3333
{/each}
34-
</div>
34+
</p>
3535
{#if logo}
36-
<div>
36+
<p>
3737
<img class="editor__logo" src="{logo}" alt="" />
38-
</div>
38+
</p>
3939
{/if}
4040
<div>
4141
{#await convertMarkdown(content)}
@@ -49,16 +49,16 @@
4949
</div>
5050
{:else}
5151
<div class="editor__content">
52-
<div>
52+
<p>
5353
<TextArea bind:text="{title}" size="xl" placeholder="Create a title..." />
54-
</div>
55-
<div>
54+
</p>
55+
<p>
5656
<TextArea bind:text="{keywords}" size="m" placeholder="Add a few keywords..." />
57-
</div>
57+
</p>
5858
</div>
59-
<div class="editor__content">
59+
<p class="editor__content">
6060
<TextArea bind:text="{content}" size="s" placeholder="Start the article..." />
61-
</div>
61+
</p>
6262
{/if}
6363
</div>
6464

src/lib/browser/ui/Paragraph.svelte

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<script lang="ts">
22
export let mono = false;
3+
4+
export let centered = false;
35
</script>
46

5-
<p class="ui-paragraph" class:mono><slot /></p>
7+
<p class="ui-paragraph" class:mono class:centered><slot /></p>
68

79
<style lang="scss">
810
@import './theme';
@@ -13,5 +15,9 @@
1315
&.mono {
1416
@include set-font-mono();
1517
}
18+
19+
&.centered {
20+
text-align: center;
21+
}
1622
}
1723
</style>

src/lib/browser/ui/SubTitle.svelte

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
const unsubscribeTheme = onThemeChange(th => (isDark = isDarkTheme(th)));
99
1010
export let inline = false;
11+
export let centered = false;
12+
1113
export let id = '';
1214
1315
let show = false;
@@ -33,6 +35,7 @@
3335
class:l="{!isDark}"
3436
class:d="{isDark}"
3537
class:header="{!inline}"
38+
class:centered
3639
on:focus="{showAnchor}"
3740
on:mouseover="{showAnchor}"
3841
on:mouseleave="{hideAnchor}"
@@ -41,7 +44,13 @@
4144
<Anchor id="{id}" show="{show}" />
4245
</h2>
4346
{:else}
44-
<h2 class="ui-sub" class:l="{!isDark}" class:d="{isDark}" class:header="{!inline}">
47+
<h2
48+
class="ui-sub"
49+
class:l="{!isDark}"
50+
class:d="{isDark}"
51+
class:header="{!inline}"
52+
class:centered
53+
>
4554
<slot />
4655
</h2>
4756
{/if}
@@ -69,6 +78,10 @@
6978
position: relative;
7079
}
7180
81+
&.centered {
82+
text-align: center;
83+
}
84+
7285
&.l {
7386
@include subtitle-style($l-primary);
7487
}

src/lib/browser/ui/Tag.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
export let title: string;
55
</script>
66

7-
<div class="ui-tag">
7+
<p class="ui-tag">
88
<AdditionalText>#{title}</AdditionalText>
9-
</div>
9+
</p>
1010

1111
<style lang="scss">
1212
@import './theme';

0 commit comments

Comments
 (0)