Skip to content

Commit 02f4c64

Browse files
SajjadTalksSajjadTalks
authored
added footer
1 parent 7c7d052 commit 02f4c64

File tree

3 files changed

+135
-20
lines changed

3 files changed

+135
-20
lines changed

‎static/style.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,7 @@ div.highlight:hover .code-copy-button {
366366
}
367367
}
368368

369+
369370
ul.task-list {
370371
list-style-type: none;
371372
padding-left: 0.5em;
@@ -391,4 +392,91 @@ li.task-list-item > input[type="checkbox"] {
391392
li.task-list-item.task-list-item-checked {
392393
text-decoration: line-through;
393394
color: var(--muted-text-color);
395+
}
396+
397+
398+
399+
.site-footer .footer-links {
400+
margin-bottom: 0.8rem;
401+
font-size: 0.9rem;
402+
display: flex; /* Use flexbox for alignment */
403+
flex-wrap: wrap; /* Allow wrapping on small screens */
404+
justify-content: center; /* Center links */
405+
align-items: center; /* Align items vertically */
406+
gap: 0.5rem 1rem; /* Row gap and column gap */
407+
}
408+
409+
.site-footer .footer-links a {
410+
color: var(--muted-text-color);
411+
text-decoration: none; /* Remove underline from links */
412+
display: inline-flex; /* Align icon and text */
413+
align-items: center;
414+
transition: color 0.2s ease;
415+
}
416+
417+
.site-footer .footer-links a:hover {
418+
color: var(--link-color);
419+
text-decoration: none; /* Keep underline off on hover */
420+
}
421+
422+
/* Style the icons */
423+
.site-footer .footer-links a i {
424+
margin-right: 0.4em; /* Space between icon and text */
425+
font-size: 1.1em; /* Slightly larger icon */
426+
/* vertical-align: middle; */ /* Alternative alignment if not using flex */
427+
}
428+
429+
/* Hide separators on small screens if links wrap (optional) */
430+
.site-footer .footer-links .separator {
431+
color: var(--muted-text-color);
432+
433+
}
434+
435+
@media (max-width: 480px) {
436+
.site-footer .footer-links .separator {
437+
display: none; /* Hide separators on very small screens */
438+
}
439+
.site-footer .footer-links {
440+
gap: 0.8rem; /* Increase gap when wrapped */
441+
}
442+
}
443+
444+
445+
.site-footer .copyright {
446+
margin-top: 1rem; /* Add space above copyright */
447+
margin-bottom: 0.2rem;
448+
}
449+
.site-footer .generated-by {
450+
font-size: 0.8rem;
451+
color: var(--muted-text-color);
452+
}
453+
454+
455+
456+
.post-header {
457+
margin-bottom: 2rem;
458+
padding-bottom: 1.5rem;
459+
border-bottom: 1px solid var(--border-color);
460+
}
461+
462+
.post-title {
463+
margin-top: 0;
464+
margin-bottom: 0.5rem;
465+
font-size: 2.5rem;
466+
line-height: 1.2;
467+
}
468+
469+
.post-meta {
470+
margin-bottom: 0;
471+
}
472+
473+
/* Styling for the back navigation */
474+
.post-navigation {
475+
margin-top: 2.5rem; /* Space above the back link */
476+
padding-top: 1rem; /* Space within the nav area */
477+
border-top: 1px solid var(--border-color); /* Optional top border */
478+
}
479+
480+
.post-navigation a {
481+
font-weight: bold;
394482
}

‎templates/base.html‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,33 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
11+
12+
<!-- Font Awesome -->
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
14+
1115
<!-- Main Stylesheet -->
1216
<link rel="stylesheet" href="{{ url_for_static('style.css') }}">
13-
{# Optional: Link generated pygments CSS if you use that method #}
14-
{# <link rel="stylesheet" href="{{ url_for_static('pygments.css') }}"> #}
1517
{% block extra_head %}{% endblock %}
1618
</head>
1719
<body>
1820
<div class="site-container">
1921
<header class="site-header">
2022
<div class="header-content">
2123
<div class="header-branding">
22-
<h1><a href="{{ url_for_index() }}">Sajjad Talk</a></h1>
24+
<h1><a href="{{ url_for_index() }}">Sajjad Talks</a></h1>
2325
</div>
2426

2527
{# --- Search and Theme Toggle Area --- #}
2628
<div class="header-controls">
27-
{# Search Input #}
2829
<div class="search-container">
2930
<input type="search" id="search-input" placeholder="Search posts..." aria-label="Search posts">
3031
<div id="search-results" class="search-results-box" aria-live="polite"></div>
3132
</div>
32-
{# Theme Toggle Button #}
3333
<button id="theme-toggle" class="theme-toggle-button" aria-label="Toggle dark mode">
34-
{# Icons will be handled by CSS/JS #}
3534
<span class="icon-sun">☀️</span>
3635
<span class="icon-moon">🌙</span>
3736
</button>
3837
</div>
39-
4038
<nav class="main-nav">
4139
{# Add nav links if needed #}
4240
</nav>
@@ -49,12 +47,31 @@ <h1><a href="{{ url_for_index() }}">Sajjad Talk</a></h1>
4947
</main>
5048

5149
<footer class="site-footer">
52-
<p>© {{ now().year }} SajjadTalks</p>
50+
{# --- Footer Links with Icons --- #}
51+
<div class="footer-links">
52+
<a href="https://github.com/SajjadTalks" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile">
53+
<i class="fab fa-github" aria-hidden="true"></i> GitHub
54+
</a>
55+
<span class="separator">|</span>
56+
<a href="https://sajjadtalks.github.io/" target="_blank" rel="noopener noreferrer" aria-label="Personal Website">
57+
<i class="fas fa-globe" aria-hidden="true"></i> Website
58+
</a>
59+
<span class="separator">|</span>
60+
<a href="mailto:Sajjad_phone@proton.me" aria-label="Contact via Email">
61+
<i class="fas fa-envelope" aria-hidden="true"></i> Contact
62+
</a>
63+
<span class="separator">|</span>
64+
<a href="https://t.me/SajjadTalks" target="_blank" rel="noopener noreferrer" aria-label="Telegram Profile">
65+
<i class="fab fa-telegram" aria-hidden="true"></i> Telegram {# Use fa-telegram instead of fa-telegram-plane maybe #}
66+
</a>
67+
</div>
68+
{# --- Copyright Notice --- #}
69+
<p class="copyright">© {{ now().year }} SajjadTalks</p>
70+
<p class="generated-by">Generated by Python</p>
5371
</footer>
5472
</div> {# End site-container #}
5573

5674
{# --- JavaScript --- #}
57-
{# Link the main script file, use defer to load after HTML parsing #}
5875
<script src="{{ url_for_static('script.js') }}" defer></script>
5976
</body>
6077
</html>

‎templates/post.html‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
{% extends "base.html" %}
22

3-
{% block title %}{{ post.metadata.title }} - My Blog{% endblock %}
3+
{% block title %}{{ post.metadata.title }} - SajjadTalks Blog{% endblock %} {# Updated Blog Title #}
44

55
{% block content %}
66
<article class="post">
7-
<h2>{{ post.metadata.title }}</h2>
8-
<p class="post-meta">
9-
Published on {{ post.metadata.date }}
10-
{% if post.metadata.author %} by {{ post.metadata.author }}{% endif %}
11-
</p>
7+
8+
9+
<header class="post-header">
10+
<h1 class="post-title">{{ post.metadata.title }}</h1>
11+
<p class="post-meta">
12+
Published on {{ post.date_obj.strftime('%B %d, %Y') }} {# Use formatted date_obj #}
13+
{% if post.metadata.author %} by {{ post.metadata.author }}{% endif %}
14+
</p>
15+
</header> {# End post-header #}
16+
17+
1218
<div class="post-content">
13-
{{ post.html_content | safe }} {# safe filter prevents Jinja from escaping HTML #}
14-
</div>
15-
</article>
16-
<hr>
17-
<p><a href="{{ url_for_index() }}">← Back to Index</a></p>
19+
{{ post.html_content | safe }}
20+
</div> {# End post-content #}
21+
22+
</article> {# End post #}
23+
24+
<nav class="post-navigation">
25+
<a href="{{ url_for_index() }}">← Back to Blog Index</a>
26+
</nav>
27+
1828
{% endblock %}

0 commit comments

Comments
 (0)