Skip to content

Commit 29da01d

Browse files
quantuminformationquantuminformation
committed
Specify fixed dimensions for social icons
1 parent 3190eca commit 29da01d

File tree

6 files changed

+155
-178
lines changed

6 files changed

+155
-178
lines changed

‎blog/1-lorem-ipsum/index.html‎

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,44 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="UTF-8">
55
<title>Understanding Lorem Ipsum</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta property="og:title" content="Understanding Lorem Ipsum" />
8-
<meta
9-
property="og:description"
10-
content="Lorem ipsum is placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content." />
11-
<meta property="og:image" content="/img/nikos.jpg" />
12-
<meta property="og:url" content="/blog/1-lorem-ipsum" />
13-
<meta property="twitter:title" content="Understanding Lorem Ipsum" />
14-
<meta
15-
property="twitter:description"
16-
content="Lorem ipsum is placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content." />
17-
<meta property="twitter:image" content="/img/nikos.jpg" />
18-
<meta property="twitter:url" content="/blog/1-lorem-ipsum" />
19-
<meta name="twitter:card" content="summary_large_image" />
20-
<link rel="icon" href="data:," />
21-
<link
22-
rel="stylesheet"
23-
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />
24-
<link rel="stylesheet" href="/css/reset.css" />
25-
<link rel="stylesheet" href="/css/utility.css" />
26-
<link rel="stylesheet" href="/css/common.css" />
27-
<link rel="stylesheet" href="/css/form.css" />
28-
<link rel="stylesheet" href="/css/button-badge.css" />
29-
<link rel="stylesheet" href="/css/typography.css" />
30-
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)" />
31-
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta property="og:title" content="Understanding Lorem Ipsum">
8+
<meta property="og:description" content="Lorem ipsum is placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content.">
9+
<meta property="og:image" content="/img/nikos.jpg">
10+
<meta property="og:url" content="/blog/1-lorem-ipsum">
11+
<meta property="twitter:title" content="Understanding Lorem Ipsum">
12+
<meta property="twitter:description" content="Lorem ipsum is placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content.">
13+
<meta property="twitter:image" content="/img/nikos.jpg">
14+
<meta property="twitter:url" content="/blog/1-lorem-ipsum">
15+
<meta name="twitter:card" content="summary_large_image">
16+
<link rel="icon" href="data:,">
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css">
18+
<link rel="stylesheet" href="/css/reset.css">
19+
<link rel="stylesheet" href="/css/utility.css">
20+
<link rel="stylesheet" href="/css/common.css">
21+
<link rel="stylesheet" href="/css/form.css">
22+
<link rel="stylesheet" href="/css/button-badge.css">
23+
<link rel="stylesheet" href="/css/typography.css">
24+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)">
25+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">
3226
<script src="/js/store.js" defer type="module"></script>
3327
<script src="/js/componentLoader.js" defer type="module"></script>
3428
</head>
3529
<body class="flex flex-col">
3630
<div class="site-container flex flex-col" style="flex: 1">
3731
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
3832
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
39-
<h1 class="blog-title">Understanding Lorem Ipsum</h1>
40-
<p class="minor">Nikos Katsikanis - January 1, 2025</p>
41-
<div class="preview">
42-
<p>
43-
Lorem ipsum is placeholder text commonly used to demonstrate the visual form of a document without
44-
relying on meaningful content.
45-
</p>
46-
</div>
47-
<p>This article explores the history of lorem ipsum and why designers rely on it.</p>
48-
<div data-component="discuss"></div>
33+
34+
<h1 class="blog-title">Understanding Lorem Ipsum</h1>
35+
<p class="minor">Nikos Katsikanis - January 1, 2025</p>
36+
<div class="preview">
37+
<p>Lorem ipsum is placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content.</p>
38+
</div>
39+
<p>This article explores the history of lorem ipsum and why designers rely on it.</p>
40+
<div data-component="discuss"></div>
41+
4942
</main>
5043
<div class="flex justify-center">
5144
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
@@ -58,4 +51,4 @@ <h1 class="blog-title">Understanding Lorem Ipsum</h1>
5851
<div data-component="theme-switcher"></div>
5952
</footer>
6053
</body>
61-
</html>
54+
</html>

‎blog/2-dolor-sit/index.html‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,44 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="UTF-8">
55
<title>Dolor Sit Amet Explained</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta property="og:title" content="Dolor Sit Amet Explained" />
8-
<meta
9-
property="og:description"
10-
content="Dolor sit amet is a familiar phrase that keeps attention on layout rather than meaning." />
11-
<meta property="og:image" content="/img/nikos.jpg" />
12-
<meta property="og:url" content="/blog/2-dolor-sit" />
13-
<meta property="twitter:title" content="Dolor Sit Amet Explained" />
14-
<meta
15-
property="twitter:description"
16-
content="Dolor sit amet is a familiar phrase that keeps attention on layout rather than meaning." />
17-
<meta property="twitter:image" content="/img/nikos.jpg" />
18-
<meta property="twitter:url" content="/blog/2-dolor-sit" />
19-
<meta name="twitter:card" content="summary_large_image" />
20-
<link rel="icon" href="data:," />
21-
<link
22-
rel="stylesheet"
23-
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />
24-
<link rel="stylesheet" href="/css/reset.css" />
25-
<link rel="stylesheet" href="/css/utility.css" />
26-
<link rel="stylesheet" href="/css/common.css" />
27-
<link rel="stylesheet" href="/css/form.css" />
28-
<link rel="stylesheet" href="/css/button-badge.css" />
29-
<link rel="stylesheet" href="/css/typography.css" />
30-
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)" />
31-
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta property="og:title" content="Dolor Sit Amet Explained">
8+
<meta property="og:description" content="Dolor sit amet is a familiar phrase that keeps attention on layout rather than meaning.">
9+
<meta property="og:image" content="/img/nikos.jpg">
10+
<meta property="og:url" content="/blog/2-dolor-sit">
11+
<meta property="twitter:title" content="Dolor Sit Amet Explained">
12+
<meta property="twitter:description" content="Dolor sit amet is a familiar phrase that keeps attention on layout rather than meaning.">
13+
<meta property="twitter:image" content="/img/nikos.jpg">
14+
<meta property="twitter:url" content="/blog/2-dolor-sit">
15+
<meta name="twitter:card" content="summary_large_image">
16+
<link rel="icon" href="data:,">
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css">
18+
<link rel="stylesheet" href="/css/reset.css">
19+
<link rel="stylesheet" href="/css/utility.css">
20+
<link rel="stylesheet" href="/css/common.css">
21+
<link rel="stylesheet" href="/css/form.css">
22+
<link rel="stylesheet" href="/css/button-badge.css">
23+
<link rel="stylesheet" href="/css/typography.css">
24+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)">
25+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">
3226
<script src="/js/store.js" defer type="module"></script>
3327
<script src="/js/componentLoader.js" defer type="module"></script>
3428
</head>
3529
<body class="flex flex-col">
3630
<div class="site-container flex flex-col" style="flex: 1">
3731
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
3832
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
39-
<h1 class="blog-title">Dolor Sit Amet Explained</h1>
40-
<p class="minor">Nikos Katsikanis - January 2, 2025</p>
41-
<div class="preview">
42-
<p>Dolor sit amet is a familiar phrase that keeps attention on layout rather than meaning.</p>
43-
</div>
44-
<p>Using neutral words lets readers focus on typography, spacing, and overall design.</p>
45-
<div data-component="discuss"></div>
33+
34+
<h1 class="blog-title">Dolor Sit Amet Explained</h1>
35+
<p class="minor">Nikos Katsikanis - January 2, 2025</p>
36+
<div class="preview">
37+
<p>Dolor sit amet is a familiar phrase that keeps attention on layout rather than meaning.</p>
38+
</div>
39+
<p>Using neutral words lets readers focus on typography, spacing, and overall design.</p>
40+
<div data-component="discuss"></div>
41+
4642
</main>
4743
<div class="flex justify-center">
4844
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
@@ -55,4 +51,4 @@ <h1 class="blog-title">Dolor Sit Amet Explained</h1>
5551
<div data-component="theme-switcher"></div>
5652
</footer>
5753
</body>
58-
</html>
54+
</html>

‎blog/3-consectetur/index.html‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,44 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="UTF-8">
55
<title>Consectetur Adipiscing Tips</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta property="og:title" content="Consectetur Adipiscing Tips" />
8-
<meta
9-
property="og:description"
10-
content="Consectetur adipiscing demonstrates how paragraphs wrap and align within a column." />
11-
<meta property="og:image" content="/img/nikos.jpg" />
12-
<meta property="og:url" content="/blog/3-consectetur" />
13-
<meta property="twitter:title" content="Consectetur Adipiscing Tips" />
14-
<meta
15-
property="twitter:description"
16-
content="Consectetur adipiscing demonstrates how paragraphs wrap and align within a column." />
17-
<meta property="twitter:image" content="/img/nikos.jpg" />
18-
<meta property="twitter:url" content="/blog/3-consectetur" />
19-
<meta name="twitter:card" content="summary_large_image" />
20-
<link rel="icon" href="data:," />
21-
<link
22-
rel="stylesheet"
23-
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />
24-
<link rel="stylesheet" href="/css/reset.css" />
25-
<link rel="stylesheet" href="/css/utility.css" />
26-
<link rel="stylesheet" href="/css/common.css" />
27-
<link rel="stylesheet" href="/css/form.css" />
28-
<link rel="stylesheet" href="/css/button-badge.css" />
29-
<link rel="stylesheet" href="/css/typography.css" />
30-
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)" />
31-
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta property="og:title" content="Consectetur Adipiscing Tips">
8+
<meta property="og:description" content="Consectetur adipiscing demonstrates how paragraphs wrap and align within a column.">
9+
<meta property="og:image" content="/img/nikos.jpg">
10+
<meta property="og:url" content="/blog/3-consectetur">
11+
<meta property="twitter:title" content="Consectetur Adipiscing Tips">
12+
<meta property="twitter:description" content="Consectetur adipiscing demonstrates how paragraphs wrap and align within a column.">
13+
<meta property="twitter:image" content="/img/nikos.jpg">
14+
<meta property="twitter:url" content="/blog/3-consectetur">
15+
<meta name="twitter:card" content="summary_large_image">
16+
<link rel="icon" href="data:,">
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css">
18+
<link rel="stylesheet" href="/css/reset.css">
19+
<link rel="stylesheet" href="/css/utility.css">
20+
<link rel="stylesheet" href="/css/common.css">
21+
<link rel="stylesheet" href="/css/form.css">
22+
<link rel="stylesheet" href="/css/button-badge.css">
23+
<link rel="stylesheet" href="/css/typography.css">
24+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)">
25+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">
3226
<script src="/js/store.js" defer type="module"></script>
3327
<script src="/js/componentLoader.js" defer type="module"></script>
3428
</head>
3529
<body class="flex flex-col">
3630
<div class="site-container flex flex-col" style="flex: 1">
3731
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
3832
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
39-
<h1 class="blog-title">Consectetur Adipiscing Tips</h1>
40-
<p class="minor">Nikos Katsikanis - January 3, 2025</p>
41-
<div class="preview">
42-
<p>Consectetur adipiscing demonstrates how paragraphs wrap and align within a column.</p>
43-
</div>
44-
<p>Adjust the width of your browser to see how the text responds to different spaces.</p>
45-
<div data-component="discuss"></div>
33+
34+
<h1 class="blog-title">Consectetur Adipiscing Tips</h1>
35+
<p class="minor">Nikos Katsikanis - January 3, 2025</p>
36+
<div class="preview">
37+
<p>Consectetur adipiscing demonstrates how paragraphs wrap and align within a column.</p>
38+
</div>
39+
<p>Adjust the width of your browser to see how the text responds to different spaces.</p>
40+
<div data-component="discuss"></div>
41+
4642
</main>
4743
<div class="flex justify-center">
4844
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
@@ -55,4 +51,4 @@ <h1 class="blog-title">Consectetur Adipiscing Tips</h1>
5551
<div data-component="theme-switcher"></div>
5652
</footer>
5753
</body>
58-
</html>
54+
</html>

‎blog/4-adipiscing/index.html‎

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,44 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="UTF-8">
55
<title>Sed Do Eiusmod Insights</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta property="og:title" content="Sed Do Eiusmod Insights" />
8-
<meta
9-
property="og:description"
10-
content="Sed do eiusmod tempor incididunt shows how longer phrases feel in a block of text." />
11-
<meta property="og:image" content="/img/nikos.jpg" />
12-
<meta property="og:url" content="/blog/4-adipiscing" />
13-
<meta property="twitter:title" content="Sed Do Eiusmod Insights" />
14-
<meta
15-
property="twitter:description"
16-
content="Sed do eiusmod tempor incididunt shows how longer phrases feel in a block of text." />
17-
<meta property="twitter:image" content="/img/nikos.jpg" />
18-
<meta property="twitter:url" content="/blog/4-adipiscing" />
19-
<meta name="twitter:card" content="summary_large_image" />
20-
<link rel="icon" href="data:," />
21-
<link
22-
rel="stylesheet"
23-
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />
24-
<link rel="stylesheet" href="/css/reset.css" />
25-
<link rel="stylesheet" href="/css/utility.css" />
26-
<link rel="stylesheet" href="/css/common.css" />
27-
<link rel="stylesheet" href="/css/form.css" />
28-
<link rel="stylesheet" href="/css/button-badge.css" />
29-
<link rel="stylesheet" href="/css/typography.css" />
30-
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)" />
31-
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta property="og:title" content="Sed Do Eiusmod Insights">
8+
<meta property="og:description" content="Sed do eiusmod tempor incididunt shows how longer phrases feel in a block of text.">
9+
<meta property="og:image" content="/img/nikos.jpg">
10+
<meta property="og:url" content="/blog/4-adipiscing">
11+
<meta property="twitter:title" content="Sed Do Eiusmod Insights">
12+
<meta property="twitter:description" content="Sed do eiusmod tempor incididunt shows how longer phrases feel in a block of text.">
13+
<meta property="twitter:image" content="/img/nikos.jpg">
14+
<meta property="twitter:url" content="/blog/4-adipiscing">
15+
<meta name="twitter:card" content="summary_large_image">
16+
<link rel="icon" href="data:,">
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css">
18+
<link rel="stylesheet" href="/css/reset.css">
19+
<link rel="stylesheet" href="/css/utility.css">
20+
<link rel="stylesheet" href="/css/common.css">
21+
<link rel="stylesheet" href="/css/form.css">
22+
<link rel="stylesheet" href="/css/button-badge.css">
23+
<link rel="stylesheet" href="/css/typography.css">
24+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)">
25+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">
3226
<script src="/js/store.js" defer type="module"></script>
3327
<script src="/js/componentLoader.js" defer type="module"></script>
3428
</head>
3529
<body class="flex flex-col">
3630
<div class="site-container flex flex-col" style="flex: 1">
3731
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
3832
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
39-
<h1 class="blog-title">Sed Do Eiusmod Insights</h1>
40-
<p class="minor">Nikos Katsikanis - January 4, 2025</p>
41-
<div class="preview">
42-
<p>Sed do eiusmod tempor incididunt shows how longer phrases feel in a block of text.</p>
43-
</div>
44-
<p>
45-
These sentences are intentionally plain so that emphasis stays on styling rather than narrative.
46-
</p>
47-
<div data-component="discuss"></div>
33+
34+
<h1 class="blog-title">Sed Do Eiusmod Insights</h1>
35+
<p class="minor">Nikos Katsikanis - January 4, 2025</p>
36+
<div class="preview">
37+
<p>Sed do eiusmod tempor incididunt shows how longer phrases feel in a block of text.</p>
38+
</div>
39+
<p>These sentences are intentionally plain so that emphasis stays on styling rather than narrative.</p>
40+
<div data-component="discuss"></div>
41+
4842
</main>
4943
<div class="flex justify-center">
5044
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
@@ -57,4 +51,4 @@ <h1 class="blog-title">Sed Do Eiusmod Insights</h1>
5751
<div data-component="theme-switcher"></div>
5852
</footer>
5953
</body>
60-
</html>
54+
</html>

0 commit comments

Comments
 (0)