Skip to content

Commit 8a81bd7

Browse files
ericgitanguericgitangu
committed
Refactor to mobile-first Tailwind CSS with dark/light theme
- Add Tailwind CSS CDN with dark mode support - Add theme toggle button with localStorage persistence - Use system default fonts (system-ui font stack) - Refactor all templates with Tailwind utility classes - Fix mobile text breaking with break-words and hyphens-auto - Add line-clamp for controlled text overflow - Create custom.css for line-clamp and prose fallbacks - Mobile-first responsive design (grid-cols-1 sm:grid-cols-2 lg:grid-cols-3) - Dark mode support for all pages (navigation, cards, forms, content)
1 parent 1dedbe9 commit 8a81bd7

9 files changed

Lines changed: 462 additions & 174 deletions

File tree

‎portfolio/static/all-posts.css‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -82,18 +82,12 @@ ul {
8282
}
8383

8484
.post__content p,
85-
.post__content .excerpt,
86-
.post__content .excerpt p {
85+
.post__content .excerpt {
8786
font-size: 0.8rem;
8887
color: #4a4a4a;
8988
margin: 0;
90-
line-height: 1.3;
91-
word-wrap: break-word;
92-
overflow-wrap: break-word;
93-
hyphens: none;
94-
-webkit-hyphens: none;
95-
}
96-
97-
.post__content .excerpt a {
98-
color: #390281;
89+
line-height: 1.4;
90+
word-spacing: normal;
91+
letter-spacing: normal;
92+
white-space: normal;
9993
}

‎portfolio/static/custom.css‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
/* Custom CSS for Tailwind CDN fallbacks */
2+
3+
/* Line clamp fallback for older browsers */
4+
.line-clamp-2 {
5+
display: -webkit-box;
6+
-webkit-line-clamp: 2;
7+
-webkit-box-orient: vertical;
8+
overflow: hidden;
9+
}
10+
11+
.line-clamp-3 {
12+
display: -webkit-box;
13+
-webkit-line-clamp: 3;
14+
-webkit-box-orient: vertical;
15+
overflow: hidden;
16+
}
17+
18+
/* Hyphens support for proper word breaking */
19+
.hyphens-auto {
20+
hyphens: auto;
21+
-webkit-hyphens: auto;
22+
-moz-hyphens: auto;
23+
-ms-hyphens: auto;
24+
}
25+
26+
/* Ensure break-words works across browsers */
27+
.break-words {
28+
word-wrap: break-word;
29+
overflow-wrap: break-word;
30+
word-break: break-word;
31+
}
32+
33+
/* Dark mode scrollbar styling */
34+
.dark ::-webkit-scrollbar {
35+
width: 8px;
36+
height: 8px;
37+
}
38+
39+
.dark ::-webkit-scrollbar-track {
40+
background: #1f2937;
41+
}
42+
43+
.dark ::-webkit-scrollbar-thumb {
44+
background: #4b5563;
45+
border-radius: 4px;
46+
}
47+
48+
.dark ::-webkit-scrollbar-thumb:hover {
49+
background: #6b7280;
50+
}
51+
52+
/* Light mode scrollbar styling */
53+
::-webkit-scrollbar {
54+
width: 8px;
55+
height: 8px;
56+
}
57+
58+
::-webkit-scrollbar-track {
59+
background: #f3f4f6;
60+
}
61+
62+
::-webkit-scrollbar-thumb {
63+
background: #d1d5db;
64+
border-radius: 4px;
65+
}
66+
67+
::-webkit-scrollbar-thumb:hover {
68+
background: #9ca3af;
69+
}
70+
71+
/* Prose styling for markdown content */
72+
.prose {
73+
line-height: 1.75;
74+
}
75+
76+
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
77+
margin-top: 1.5em;
78+
margin-bottom: 0.5em;
79+
font-weight: 700;
80+
}
81+
82+
.prose p {
83+
margin-top: 1em;
84+
margin-bottom: 1em;
85+
}
86+
87+
.prose ul, .prose ol {
88+
margin-top: 1em;
89+
margin-bottom: 1em;
90+
padding-left: 1.5em;
91+
}
92+
93+
.prose li {
94+
margin-top: 0.5em;
95+
margin-bottom: 0.5em;
96+
}
97+
98+
.prose code {
99+
padding: 0.2em 0.4em;
100+
border-radius: 0.25rem;
101+
font-size: 0.875em;
102+
}
103+
104+
.prose pre {
105+
padding: 1rem;
106+
border-radius: 0.5rem;
107+
overflow-x: auto;
108+
margin-top: 1em;
109+
margin-bottom: 1em;
110+
}
111+
112+
.prose pre code {
113+
padding: 0;
114+
background: transparent;
115+
}
116+
117+
.prose blockquote {
118+
border-left: 4px solid #6b7280;
119+
padding-left: 1em;
120+
margin-left: 0;
121+
font-style: italic;
122+
color: #6b7280;
123+
}
124+
125+
.dark .prose blockquote {
126+
border-left-color: #9ca3af;
127+
color: #9ca3af;
128+
}
129+
130+
.prose a {
131+
text-decoration: underline;
132+
}
133+
134+
.prose a:hover {
135+
text-decoration: none;
136+
}
137+
138+
.prose img {
139+
max-width: 100%;
140+
height: auto;
141+
border-radius: 0.5rem;
142+
margin-top: 1em;
143+
margin-bottom: 1em;
144+
}
145+
146+
.prose table {
147+
width: 100%;
148+
border-collapse: collapse;
149+
margin-top: 1em;
150+
margin-bottom: 1em;
151+
}
152+
153+
.prose th, .prose td {
154+
border: 1px solid #d1d5db;
155+
padding: 0.5rem 1rem;
156+
text-align: left;
157+
}
158+
159+
.dark .prose th, .dark .prose td {
160+
border-color: #4b5563;
161+
}
162+
163+
.prose th {
164+
background-color: #f3f4f6;
165+
font-weight: 600;
166+
}
167+
168+
.dark .prose th {
169+
background-color: #374151;
170+
}

‎portfolio/static/home.css‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -156,22 +156,17 @@ body {
156156

157157
.post h3 {
158158
margin: 0.25rem 0;
159+
word-spacing: normal;
160+
letter-spacing: normal;
161+
white-space: normal;
159162
}
160163

161-
.post .excerpt,
162-
.post .excerpt p {
164+
.post .excerpt {
163165
font-size: 0.85rem;
164166
color: #666;
165167
margin: 0.5rem 0 0 0;
166168
line-height: 1.4;
167-
word-wrap: break-word;
168-
overflow-wrap: break-word;
169-
hyphens: none;
170-
-webkit-hyphens: none;
171-
max-height: 4.5rem;
172-
overflow: hidden;
173-
}
174-
175-
.post .excerpt a {
176-
color: #390281;
169+
word-spacing: normal;
170+
letter-spacing: normal;
171+
white-space: normal;
177172
}

‎portfolio/templates/portfolio/home.html‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,41 @@
33
{% load i18n %}
44

55
{% block title %}Eric Gitangu{% endblock %}
6-
{% block css_files %}
7-
<link href="stylesheet" href="{% static 'base.css' %}" />
8-
<link href="stylesheet" href="{% static 'home.css' %}" />
9-
{% endblock %}
6+
107
{% block content %}
11-
<section id="welcome">
12-
<header>
13-
<img src="{% static 'avatar.jpg' %}" alt="profile picture">
14-
<h2>Eric's Blog</h2>
8+
<!-- Hero Section -->
9+
<section class="bg-gradient-to-br from-purple-700 to-purple-900 dark:from-purple-900 dark:to-gray-900 py-12 md:py-20 px-4 md:px-12">
10+
<header class="flex flex-col sm:flex-row items-center gap-4 sm:gap-6 max-w-4xl mx-auto">
11+
<img src="{% static 'avatar.jpg' %}" alt="Eric Gitangu"
12+
class="w-24 h-24 md:w-40 md:h-40 object-cover object-top border-4 border-white rounded-xl
13+
bg-amber-100 shadow-lg transform -rotate-3 hover:rotate-0 hover:scale-110 transition-all duration-300">
14+
<h2 class="text-2xl md:text-4xl lg:text-5xl font-bold text-gray-100">Eric's Blog</h2>
1515
</header>
16-
<p>
17-
Welcome! I'm a code-blooded software engineer. I have a keen interest in software development, technology, DIY projects et cetera.</p>
16+
<p class="text-white text-base md:text-xl mt-6 max-w-4xl mx-auto text-center sm:text-left">
17+
Welcome! I'm a code-blooded software engineer. I have a keen interest in software development, technology, DIY projects et cetera.
18+
</p>
1819
</section>
19-
<section id="latest-posts">
20-
<h2>Latest Posts</h2>
21-
<ul>
22-
{% for post in posts %}
23-
{% include 'portfolio/includes/post_slug.html' %}
24-
{% endfor %}
20+
21+
<!-- Latest Posts Section -->
22+
<section class="bg-white dark:bg-gray-800 rounded-xl shadow-xl mx-4 md:mx-auto max-w-5xl -mt-8 mb-8 p-4 md:p-8 relative z-10 transition-colors duration-300">
23+
<h2 class="text-xl md:text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-6">
24+
Latest Posts
25+
</h2>
26+
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 list-none p-0 m-0">
27+
{% for post in posts %}
28+
{% include 'portfolio/includes/post_slug.html' %}
29+
{% endfor %}
2530
</ul>
2631
</section>
27-
<section id='about'>
28-
<h2>My Spiel</h2>
29-
<p>
30-
I'm a software engineer with a passion for building things. I'm a Full Stack Decentralized Application Developer with various interests and skils not limited to Distributed Development, Data Science, Artificial Inteligence and Machine Learning. I enjoy building things from the ground up and learning new things. I'm an experienced developer and I'm always looking for new opportunities to learn and grow through self-learning and contributing to opensource software and various stack exchange forums. I participate actively on programming platforms, <a href='https://www.leetcode.com/ericgitangu'>LeetCode</a>, TopCoder, <a href='https://www.hackerrank.com/theace'>Hackerrank</a> and <a href='https://www.codingame.com/profile/e5d13e7fbe4b82eb26c601fd545bf8af1580081'>CodingGames </a>
32+
33+
<!-- About Section -->
34+
<section class="bg-amber-500 dark:bg-amber-600 py-8 md:py-12 px-4 text-center transition-colors duration-300">
35+
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">My Spiel</h2>
36+
<p class="text-base md:text-lg text-gray-800 dark:text-gray-900 max-w-4xl mx-auto leading-relaxed">
37+
I'm a software engineer with a passion for building things. I'm a Full Stack Decentralized Application Developer with various interests and skills not limited to Distributed Development, Data Science, Artificial Intelligence and Machine Learning. I enjoy building things from the ground up and learning new things. I'm an experienced developer and I'm always looking for new opportunities to learn and grow through self-learning and contributing to opensource software and various stack exchange forums. I participate actively on programming platforms,
38+
<a href='https://www.leetcode.com/ericgitangu' class="text-purple-800 dark:text-purple-900 hover:underline font-semibold">LeetCode</a>, TopCoder,
39+
<a href='https://www.hackerrank.com/theace' class="text-purple-800 dark:text-purple-900 hover:underline font-semibold">Hackerrank</a> and
40+
<a href='https://www.codingame.com/profile/e5d13e7fbe4b82eb26c601fd545bf8af1580081' class="text-purple-800 dark:text-purple-900 hover:underline font-semibold">CodingGames</a>
3141
</p>
3242
</section>
33-
3443
{% endblock %}

‎portfolio/templates/portfolio/includes/post_slug.html‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
{% load static %}
2-
{% load markdown_extras %}
32

4-
<li>
5-
<article class="post">
6-
<a href="{% url 'post_detail' post.slug %}">
3+
<li class="w-full">
4+
<article>
5+
<a href="{% url 'post_detail' post.slug %}"
6+
class="block bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-xl
7+
transition-all duration-300 overflow-hidden h-full
8+
hover:scale-[1.02] active:scale-[0.98]">
79
{% if post.image %}
8-
<img src="{{ post.image.url }}" alt="post image">
10+
<img src="{{ post.image.url }}" alt="{{ post.title }}"
11+
class="w-full h-32 sm:h-40 object-cover">
912
{% endif %}
10-
<div class="post__content">
11-
<h3>{{ post.title }}</h3>
12-
<div class="excerpt">{{ post.excerpt|markdown }}</div>
13+
<div class="p-3 sm:p-4">
14+
<h3 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100
15+
line-clamp-2 break-words hyphens-auto leading-tight">
16+
{{ post.title|truncatewords:8 }}
17+
</h3>
18+
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-2
19+
line-clamp-3 break-words leading-relaxed">
20+
{{ post.excerpt|truncatewords:20|striptags }}
21+
</p>
1322
</div>
1423
</a>
1524
</article>

0 commit comments

Comments
 (0)