Skip to content

Commit 309393d

Browse files
MrHinshMrHinsh
authored
💄 (UI): improve layout and styling for publications and resources (#350)
Refactor the HTML structure to enhance the layout's flexibility and responsiveness. Adjust the share bar's padding and update the button's title for better user engagement. Modify CSS to improve text readability and ensure consistent styling across different sections. These changes aim to provide a more visually appealing and user-friendly interface, enhancing the overall user experience on the site.
2 parents 6f0a66c + 782f5a2 commit 309393d

File tree

5 files changed

+56
-34
lines changed

5 files changed

+56
-34
lines changed

‎site/layouts/partials/publications/share-bar.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<div class="publications-share-bar d-flex justify-content-between align-items-center border-top border-bottom py-3">
1+
<div class="publications-share-bar d-flex justify-content-between align-items-center py-2">
22
<!-- Left-aligned buttons -->
33
<div>
4-
<a class="btn btn-outline-secondary" href="#comments" title="Jump to Comments"> <i class="fa-regular fa-comment"></i> </a>
4+
<a class="btn btn-outline-secondary" href="#comments" title="Join the conversation"> <i class="fa-regular fa-comment"></i> </a>
55
</div>
66

77
<!-- Right-aligned 'Share' dropdown button -->

‎site/layouts/resources/blog.html

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{- define "headline" }}
22
<section class="container-fluid resources-headline py-md-4">
3-
<section class="container my-2" style="max-width: 900px !important">
3+
<section class="container" style="max-width: 900px !important">
44
<div>
55
<div class="row">
66
<div class="col-12 col-xl-8">
@@ -9,14 +9,16 @@
99
<div class="col-xl-4 d-none d-xl-flex justify-content-end align-items-center">
1010
<h4>tech·nic·al·ly agile</h4>
1111
</div>
12-
<div class="col-12 col-xl-8">
13-
<h1 class="mb-4 nkda-heading-primary">{{- .Title | markdownify }}</h1>
14-
{{- if .Params.subtitle }}
15-
<h2 class="mb-4 nkda-heading-secondary">{{- .Params.subtitle | markdownify }}</h2>
16-
{{ else }}
17-
<h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
18-
{{- end }}
19-
{{- partial "publications/craft.html" . }}
12+
<div class="col-12 col-xl-8 d-flex flex-column">
13+
<div class="flex-grow-1">
14+
<h1 class="mb-4 nkda-heading-primary">{{- .Title | markdownify }}</h1>
15+
{{- if .Params.subtitle }}
16+
<h2 class="mb-4 nkda-heading-secondary">{{- .Params.subtitle | markdownify }}</h2>
17+
{{ else }}
18+
<h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
19+
{{- end }}
20+
</div>
21+
<div class="mt-auto">{{- partial "publications/craft.html" . }}</div>
2022
</div>
2123
<div class="col-xl-4 d-none d-xl-flex justify-content-center align-items-center">
2224
<div class="position-relative">
@@ -37,8 +39,8 @@ <h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
3739
</div>
3840
</section>
3941
</section>
40-
<section class="container my-2" style="max-width: 900px !important">
41-
{{- partial "publications/share-bar.html" . }}
42+
<section class="container-fluid resources-headline-sharebar">
43+
<section class="container" style="max-width: 900px !important">{{- partial "publications/share-bar.html" . }}</section>
4244
</section>
4345
{{- end }}
4446

‎site/layouts/resources/single.html

+12-10
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,16 @@
99
<div class="col-xl-4 d-none d-xl-flex justify-content-end align-items-center">
1010
<h4>tech·nic·al·ly agile</h4>
1111
</div>
12-
<div class="col-12 col-xl-8">
13-
<h1 class="mb-4 nkda-heading-primary">{{- .Title | markdownify }}</h1>
14-
{{- if .Params.subtitle }}
15-
<h2 class="mb-4 nkda-heading-secondary">{{- .Params.subtitle | markdownify }}</h2>
16-
{{ else }}
17-
<h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
18-
{{- end }}
19-
{{- partial "publications/craft.html" . }}
12+
<div class="col-12 col-xl-8 d-flex flex-column">
13+
<div class="flex-grow-1">
14+
<h1 class="mb-4 nkda-heading-primary">{{- .Title | markdownify }}</h1>
15+
{{- if .Params.subtitle }}
16+
<h2 class="mb-4 nkda-heading-secondary">{{- .Params.subtitle | markdownify }}</h2>
17+
{{ else }}
18+
<h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
19+
{{- end }}
20+
</div>
21+
<div class="mt-auto">{{- partial "publications/craft.html" . }}</div>
2022
</div>
2123
<div class="col-xl-4 d-none d-xl-flex justify-content-center align-items-center">
2224
<div class="position-relative">
@@ -37,8 +39,8 @@ <h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
3739
</div>
3840
</section>
3941
</section>
40-
<section class="container my-2" style="max-width: 900px !important">
41-
{{- partial "publications/share-bar.html" . }}
42+
<section class="container-fluid resources-headline-sharebar">
43+
<section class="container" style="max-width: 900px !important">{{- partial "publications/share-bar.html" . }}</section>
4244
</section>
4345
{{- end }}
4446

‎site/layouts/resources/video.html

+12-10
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,16 @@
99
<div class="col-xl-4 d-none d-xl-flex justify-content-end align-items-center">
1010
<h4>tech·nic·al·ly agile</h4>
1111
</div>
12-
<div class="col-12 col-xl-8">
13-
<h1 class="mb-4 nkda-heading-primary">{{- .Title | markdownify }}</h1>
14-
{{- if .Params.subtitle }}
15-
<h2 class="mb-4 nkda-heading-secondary">{{- .Params.subtitle | markdownify }}</h2>
16-
{{ else }}
17-
<h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
18-
{{- end }}
19-
{{- partial "publications/craft.html" . }}
12+
<div class="col-12 col-xl-8 d-flex flex-column">
13+
<div class="flex-grow-1">
14+
<h1 class="mb-4 nkda-heading-primary">{{- .Title | markdownify }}</h1>
15+
{{- if .Params.subtitle }}
16+
<h2 class="mb-4 nkda-heading-secondary">{{- .Params.subtitle | markdownify }}</h2>
17+
{{ else }}
18+
<h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
19+
{{- end }}
20+
</div>
21+
<div class="mt-auto">{{- partial "publications/craft.html" . }}</div>
2022
</div>
2123
<div class="col-xl-4 d-none d-xl-flex justify-content-center align-items-center">
2224
<div class="position-relative">
@@ -37,8 +39,8 @@ <h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
3739
</div>
3840
</section>
3941
</section>
40-
<section class="container my-2" style="max-width: 900px !important">
41-
{{- partial "publications/share-bar.html" . }}
42+
<section class="container-fluid resources-headline-sharebar">
43+
<section class="container" style="max-width: 900px !important">{{- partial "publications/share-bar.html" . }}</section>
4244
</section>
4345
{{- end }}
4446

‎site/static/css/resources.css

+17-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
.resources-headline .text-muted {
1616
color: whitesmoke !important;
17-
font-size: 0.8em;
17+
font-size: 0.9em;
1818
}
1919

2020
.resources-headline a {
@@ -40,3 +40,19 @@
4040
background-color: var(--secondary-color-light);
4141
color: white;
4242
}
43+
44+
.resources-headline-sharebar {
45+
background-color: var(--secondary-color) !important;
46+
}
47+
48+
.resources-headline-sharebar .btn-outline-secondary {
49+
background-color: var(--secondary-color) !important; /* Set white background */
50+
color: whitesmoke !important; /* Ensure text remains secondary */
51+
border-color: whitesmoke !important; /* Keep the secondary border */
52+
}
53+
.resources-headline-sharebar .btn-outline-secondary:hover,
54+
.resources-headline-sharebar .btn-outline-secondary:focus {
55+
background-color: var(--secondary-color-light) !important; /* Light gray hover effect */
56+
color: whitesmoke !important;
57+
border-color: whitesmoke !important;
58+
}

0 commit comments

Comments
 (0)