Skip to content

Commit 2af360b

Browse files
TorstenDittmannTorstenDittmann
committed
Add blog component and update site styling
The changes include adding a new blog component with feed and article styles, switching to dark theme, refining layout styles, and bumping the package version.
1 parent cc98e41 commit 2af360b

File tree

7 files changed

+228
-89
lines changed

7 files changed

+228
-89
lines changed

‎apps/example/index.html‎

Lines changed: 103 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<!doctype html>
2-
<html lang="en" data-theme="light">
1+
<!DOCTYPE html>
2+
<html lang="en" data-theme="dark">
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -52,8 +52,7 @@ <h2>Preview</h2>
5252
/>
5353
I agree to the
5454
<a href="#" onclick="event.preventDefault()"
55-
>Privacy Policy</a
56-
>
55+
>Privacy Policy</a>
5756
</label>
5857
</fieldset>
5958
</form>
@@ -140,8 +139,7 @@ <h6>Heading 6</h6>
140139
<a
141140
href="https://unsplash.com/photos/a562ZEFKW8I"
142141
target="_blank"
143-
>unsplash.com</a
144-
>
142+
>unsplash.com</a>
145143
</figcaption>
146144
</figure>
147145
</section>
@@ -181,12 +179,10 @@ <h2>Form elements</h2>
181179
<option selected value="">Select…</option>
182180
<option>…</option>
183181
</select>
184-
<label for="file"
185-
>File browser
182+
<label for="file">File browser
186183
<input type="file" id="file" name="file" />
187184
</label>
188-
<label for="range"
189-
>Range slider
185+
<label for="range">Range slider
190186
<input
191187
type="range"
192188
min="0"
@@ -226,16 +222,13 @@ <h2>Form elements</h2>
226222
disabled
227223
/>
228224
</label>
229-
<label for="date"
230-
>Date
225+
<label for="date">Date
231226
<input type="date" id="date" name="date" />
232227
</label>
233-
<label for="time"
234-
>Time
228+
<label for="time">Time
235229
<input type="time" id="time" name="time" />
236230
</label>
237-
<label for="color"
238-
>Color
231+
<label for="color">Color
239232
<input
240233
type="color"
241234
id="color"
@@ -411,6 +404,100 @@ <h2>Progress bar</h2>
411404
</tbody>
412405
</table>
413406
</section>
407+
<div role="feed" aria-busy="false">
408+
<a role="article" href="#">
409+
<figure>
410+
<img
411+
src="https://picsum.photos/id/100/1280/720"
412+
alt="Descriptive alt text for post 1"
413+
/>
414+
</figure>
415+
<h2>First Blog Post Title</h2>
416+
<time datetime="2025-03-15">March 15, 2025</time>
417+
<p>
418+
Brief excerpt or summary of the first blog post that
419+
gives readers a preview...
420+
</p>
421+
</a>
422+
<a role="article" href="#">
423+
<figure>
424+
<img
425+
src="https://picsum.photos/id/200/1280/720"
426+
alt="Descriptive alt text for post 3"
427+
/>
428+
</figure>
429+
<h2>Third Blog Post Title</h2>
430+
<time datetime="2025-03-05">March 5, 2025</time>
431+
<p>
432+
Brief excerpt or summary of the third blog post that
433+
gives readers a preview...
434+
</p>
435+
</a>
436+
<a role="article" href="#">
437+
<figure>
438+
<img
439+
src="https://picsum.photos/id/151/1280/720"
440+
alt="Descriptive alt text for post 2"
441+
/>
442+
</figure>
443+
<h2>Second Blog Post Title</h2>
444+
<time datetime="2025-03-10">March 10, 2025</time>
445+
<p>
446+
Brief excerpt or summary of the second blog post that
447+
gives readers a preview...
448+
</p>
449+
</a>
450+
<a role="article" href="#">
451+
<figure>
452+
<img
453+
src="https://picsum.photos/id/250/1280/720"
454+
alt="Descriptive alt text for post 4"
455+
/>
456+
</figure>
457+
<h2>Fourth Blog Post Title</h2>
458+
<time datetime="2025-03-01">March 1, 2025</time>
459+
<p>
460+
Brief excerpt or summary of the fourth blog post that
461+
gives readers a preview...
462+
</p>
463+
</a>
464+
</div>
465+
<article>
466+
<figure>
467+
<img
468+
src="https://picsum.photos/id/100/1280/720"
469+
alt="Descriptive alt text for the blog post"
470+
/>
471+
</figure>
472+
<h1>Blog Post Title</h1>
473+
<time datetime="2025-03-15">March 15, 2025</time>
474+
475+
<p>
476+
First paragraph of the blog post with an introduction to the
477+
topic. This paragraph should be compelling and draw the
478+
reader in...
479+
</p>
480+
481+
<h2>First Section Heading</h2>
482+
<p>
483+
Content for the first section of the blog post. This might
484+
include detailed information, examples, or explanations...
485+
</p>
486+
487+
<h2>Second Section Heading</h2>
488+
<p>Content for the second section of the blog post...</p>
489+
490+
<blockquote>
491+
<p>
492+
An important quote or excerpt that stands out from the
493+
rest of the content.
494+
</p>
495+
<cite>Source of the quote</cite>
496+
</blockquote>
497+
498+
<h2>Final Section</h2>
499+
<p>Concluding thoughts and summary of the blog post...</p>
500+
</article>
414501
</main>
415502
<dialog id="modalExample">
416503
<header>

‎packages/main/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@dittmann/ui",
3-
"version": "1.0.17",
3+
"version": "1.0.18",
44
"description": "",
55
"main": "dist/index.css",
66
"scripts": {

‎packages/main/src/compoments/_blog.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@use "../partials/breakpoints";
2+
3+
[role="feed"] {
4+
display: grid;
5+
grid-template-columns: 1fr;
6+
gap: 2rem;
7+
8+
@media (min-width: map-get(breakpoints.$breakpoints, "small")) {
9+
grid-template-columns: 1fr 1fr;
10+
}
11+
}
12+
13+
article,
14+
[role="article"] {
15+
display: grid;
16+
gap: 1rem;
17+
border-width: 1px;
18+
border-style: solid;
19+
border-radius: 0.5rem;
20+
text-decoration: none;
21+
22+
> * {
23+
padding-inline: 1rem;
24+
&:last-child {
25+
padding-block-end: 1rem;
26+
}
27+
}
28+
> figure {
29+
margin: 0;
30+
border-start-start-radius: calc(0.5rem - 1px);
31+
border-start-end-radius: calc(0.5rem - 1px);
32+
padding: 0;
33+
aspect-ratio: 16 / 9;
34+
overflow: hidden;
35+
36+
> img {
37+
transition: transform 0.3s ease;
38+
width: 100%;
39+
height: 100%;
40+
object-fit: cover;
41+
}
42+
}
43+
44+
&:hover > figure > img {
45+
transform: scale(1.05);
46+
}
47+
}

‎packages/main/src/compoments/_card.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
article,
21
section {
32
display: grid;
43
gap: 1rem;

‎packages/main/src/compoments/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@
1010
@use "card";
1111
@use "table";
1212
@use "form";
13+
@use "blog";

‎packages/main/src/layouts/_dashboard.scss‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,51 @@ body.dashboard {
77
"header"
88
"main"
99
"footer";
10-
header {
11-
grid-area: header;
12-
}
13-
main {
14-
display: grid;
15-
grid-area: main;
16-
gap: 1rem;
17-
}
18-
footer {
19-
grid-area: footer;
20-
}
21-
main,
22-
footer {
23-
margin: 0 auto;
24-
@include breakpoints.container;
25-
}
26-
header {
27-
position: sticky;
28-
top: 0;
29-
grid-area: header;
30-
z-index: 10;
31-
border-bottom-width: 1px;
32-
border-bottom-style: solid;
33-
background-color: #09090b;
34-
padding-inline: 1rem;
35-
nav {
36-
display: flex;
37-
justify-content: space-between;
38-
align-items: center;
39-
height: 100%;
40-
menu {
41-
display: inline-flex;
10+
11+
> {
12+
header {
13+
grid-area: header;
14+
}
15+
main {
16+
display: grid;
17+
grid-area: main;
18+
gap: 1rem;
19+
}
20+
footer {
21+
grid-area: footer;
22+
}
23+
main,
24+
footer {
25+
margin: 0 auto;
26+
@include breakpoints.container;
27+
}
28+
header {
29+
position: sticky;
30+
top: 0;
31+
grid-area: header;
32+
z-index: 10;
33+
border-bottom-width: 1px;
34+
border-bottom-style: solid;
35+
background-color: #09090b;
36+
padding-inline: 1rem;
37+
> nav {
38+
display: flex;
39+
justify-content: space-between;
4240
align-items: center;
43-
gap: 1rem;
44-
margin: 0;
45-
list-style-type: none;
46-
* {
41+
height: 100%;
42+
> menu {
43+
display: inline-flex;
44+
align-items: center;
45+
gap: 1rem;
4746
margin: 0;
48-
}
49-
a {
50-
&:not(:hover) {
51-
text-decoration: none;
47+
list-style-type: none;
48+
* {
49+
margin: 0;
50+
}
51+
a {
52+
&:not(:hover) {
53+
text-decoration: none;
54+
}
5255
}
5356
}
5457
}

‎packages/main/src/layouts/_website.scss‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,40 @@ body.website {
77
"header"
88
"main"
99
"footer";
10-
header {
11-
grid-area: header;
12-
}
13-
main {
14-
display: grid;
15-
grid-area: main;
16-
gap: 1rem;
17-
}
18-
footer {
19-
grid-area: footer;
20-
}
21-
header,
22-
main,
23-
footer {
24-
margin: 0 auto;
25-
@include breakpoints.container;
26-
}
27-
header {
28-
grid-area: header;
29-
nav {
30-
display: flex;
31-
justify-content: space-between;
32-
align-items: baseline;
33-
menu {
34-
display: inline-flex;
10+
> {
11+
header {
12+
grid-area: header;
13+
}
14+
main {
15+
display: grid;
16+
grid-area: main;
17+
gap: 1rem;
18+
}
19+
footer {
20+
grid-area: footer;
21+
}
22+
header,
23+
main,
24+
footer {
25+
margin: 0 auto;
26+
@include breakpoints.container;
27+
}
28+
header {
29+
grid-area: header;
30+
> nav {
31+
display: flex;
32+
justify-content: space-between;
3533
align-items: baseline;
36-
gap: 1rem;
37-
padding: 0;
38-
list-style-type: none;
39-
a {
40-
&:not(:hover) {
41-
text-decoration: none;
34+
> menu {
35+
display: inline-flex;
36+
align-items: baseline;
37+
gap: 1rem;
38+
padding: 0;
39+
list-style-type: none;
40+
> a {
41+
&:not(:hover) {
42+
text-decoration: none;
43+
}
4244
}
4345
}
4446
}

0 commit comments

Comments
 (0)