Skip to content

Commit 9dcb81d

Browse files
meroxdotdevmeroxdotdev
committed
chore: important BIG CHANGE ON CARDs
1 parent 3823571 commit 9dcb81d

35 files changed

+111
-65
lines changed

‎_layouts/home.html‎

Lines changed: 63 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
{% assign posts = '' | split: '' %}
1212

1313
<!-- Get pinned posts on current page -->
14-
1514
{% assign visible_start = paginator.page | minus: 1 | times: paginator.per_page %}
1615
{% assign visible_end = visible_start | plus: paginator.per_page %}
1716

@@ -30,7 +29,6 @@
3029
{% endif %}
3130

3231
<!-- Get normal posts on current page -->
33-
3432
{% assign normal_size = paginator.posts | size | minus: pinned_size %}
3533

3634
{% if normal_size > 0 %}
@@ -47,75 +45,91 @@
4745
{% endfor %}
4846
{% endif %}
4947

48+
<style>
49+
.post-preview {
50+
/* Static shadow, no transition */
51+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
52+
}
53+
.post-image-container {
54+
position: relative;
55+
overflow: hidden;
56+
border-radius: 8px;
57+
margin-bottom: 1rem;
58+
}
59+
.post-image {
60+
width: 100%;
61+
height: 200px;
62+
object-fit: cover;
63+
display: block;
64+
}
65+
.post-image-overlay {
66+
position: absolute;
67+
top: 0;
68+
left: 0;
69+
width: 100%;
70+
height: 100%;
71+
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
72+
opacity: 0; /* Hidden by default */
73+
transition: opacity 0.3s ease; /* Smooth transition for overlay */
74+
}
75+
.post-preview:hover .post-image-overlay {
76+
opacity: 1; /* Show overlay when hovering anywhere on the card */
77+
}
78+
</style>
79+
5080
<div id="post-list" class="flex-grow-1 px-xl-1">
5181
{% for post in posts %}
52-
<article class="card-wrapper card">
53-
<a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
54-
{% assign card_body_col = '12' %}
55-
82+
<article class="card-wrapper card mb-4">
83+
<a href="{{ post.url | relative_url }}" class="post-preview d-flex flex-column">
5684
{% if post.image %}
5785
{% assign src = post.image.path | default: post.image %}
5886
{% capture src %}{% include media-url.html src=src subpath=post.media_subpath %}{% endcapture %}
59-
6087
{% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
61-
6288
{% assign lqip = null %}
63-
6489
{% if post.image.lqip %}
6590
{% capture lqip_url %}{% include media-url.html src=post.image.lqip subpath=post.media_subpath %}{% endcapture %}
6691
{% assign lqip = 'lqip="' | append: lqip_url | append: '"' %}
6792
{% endif %}
68-
69-
<div class="col-md-5">
70-
<img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
93+
<div class="post-image-container">
94+
<img src="{{ src }}" alt="{{ alt }}" class="post-image" {{ lqip }}>
95+
<div class="post-image-overlay"></div>
7196
</div>
72-
73-
{% assign card_body_col = '7' %}
7497
{% endif %}
7598

76-
<div class="col-md-{{ card_body_col }}">
77-
<div class="card-body d-flex flex-column">
78-
<h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
79-
80-
<div class="card-text content mt-0 mb-3">
81-
<p>{% include post-description.html %}</p>
82-
</div>
83-
84-
<div class="post-meta flex-grow-1 d-flex align-items-end">
85-
<div class="me-auto">
86-
<!-- posted date -->
87-
<i class="far fa-calendar fa-fw me-1"></i>
88-
{% include datetime.html date=post.date lang=lang %}
89-
90-
<!-- categories -->
91-
{% if post.categories.size > 0 %}
92-
<i class="far fa-folder-open fa-fw me-1"></i>
93-
<span class="categories">
94-
{% for category in post.categories %}
95-
{{ category }}
96-
{%- unless forloop.last -%},{%- endunless -%}
97-
{% endfor %}
98-
</span>
99-
{% endif %}
100-
</div>
101-
102-
{% if post.pin %}
103-
<div class="pin ms-1">
104-
<i class="fas fa-thumbtack fa-fw"></i>
105-
<span>{{ site.data.locales[lang].post.pin_prompt }}</span>
106-
</div>
99+
<div class="card-body d-flex flex-column">
100+
<h1 class="card-title my-2">{{ post.title }}</h1>
101+
<div class="card-text content mt-0 mb-3">
102+
<p>{% include post-description.html %}</p>
103+
</div>
104+
<div class="post-meta flex-grow-1 d-flex align-items-end">
105+
<div class="me-auto">
106+
<!-- posted date -->
107+
<i class="far fa-calendar fa-fw me-1"></i>
108+
{% include datetime.html date=post.date lang=lang %}
109+
<!-- categories -->
110+
{% if post.categories.size > 0 %}
111+
<i class="far fa-folder-open fa-fw me-1"></i>
112+
<span class="categories">
113+
{% for category in post.categories %}
114+
{{ category }}
115+
{%- unless forloop.last -%},{%- endunless -%}
116+
{% endfor %}
117+
</span>
107118
{% endif %}
108119
</div>
109-
<!-- .post-meta -->
120+
{% if post.pin %}
121+
<div class="pin ms-1">
122+
<i class="fas fa-thumbtack fa-fw"></i>
123+
<span>{{ site.data.locales[lang].post.pin_prompt }}</span>
124+
</div>
125+
{% endif %}
110126
</div>
111-
<!-- .card-body -->
112127
</div>
113128
</a>
114129
</article>
115130
{% endfor %}
116131
</div>
117-
<!-- #post-list -->
118132

119133
{% if paginator.total_pages > 1 %}
120134
{% include post-paginator.html %}
121-
{% endif %}
135+
{% endif %}

‎_layouts/post.html‎

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,40 @@
1414

1515
{% include toc-status.html %}
1616

17+
<style>
18+
.post-image-container {
19+
position: relative;
20+
overflow: hidden;
21+
border-radius: 8px;
22+
margin-bottom: 1.5rem;
23+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Static shadow */
24+
}
25+
.post-image {
26+
width: 100%;
27+
max-height: 400px;
28+
object-fit: cover;
29+
display: block;
30+
}
31+
.post-image-overlay {
32+
position: absolute;
33+
top: 0;
34+
left: 0;
35+
width: 100%;
36+
height: 100%;
37+
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
38+
opacity: 0; /* Hidden by default */
39+
transition: opacity 0.3s ease; /* Smooth transition for overlay */
40+
}
41+
article:hover .post-image-overlay {
42+
opacity: 1; /* Show overlay when hovering anywhere on the article */
43+
}
44+
@media (max-width: 768px) {
45+
.post-image {
46+
max-height: 300px;
47+
}
48+
}
49+
</style>
50+
1751
<article class="px-1" data-toc="{{ enable_toc }}">
1852
<header>
1953
<h1 data-toc-skip>{{ page.title }}</h1>
@@ -38,18 +72,16 @@ <h1 data-toc-skip>{{ page.title }}</h1>
3872

3973
{% if page.image %}
4074
{% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
41-
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
4275
{% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
43-
4476
{% if page.image.lqip %}
45-
{%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
77+
{% capture lqip %}lqip="{{ page.image.lqip }}"{% endcapture %}
4678
{% endif %}
47-
48-
<div class="mt-3 mb-3">
49-
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
50-
{%- if page.image.alt -%}
79+
<div class="post-image-container mt-3 mb-3">
80+
<img {{ src }} class="post-image" {{ alt }} w="1200" h="630" {{ lqip }}>
81+
<div class="post-image-overlay"></div>
82+
{% if page.image.alt %}
5183
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
52-
{%- endif -%}
84+
{% endif %}
5385
</div>
5486
{% endif %}
5587

@@ -67,11 +99,11 @@ <h1 data-toc-skip>{{ page.title }}</h1>
6799
<em>
68100
{% if authors %}
69101
{% for author in authors %}
70-
{% if site.data.authors[author].url -%}
102+
{% if site.data.authors[author].url %}
71103
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
72-
{%- else -%}
104+
{% else %}
73105
{{ site.data.authors[author].name }}
74-
{%- endif %}
106+
{% endif %}
75107
{% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
76108
{% endfor %}
77109
{% else %}
@@ -133,7 +165,7 @@ <h1 data-toc-skip>{{ page.title }}</h1>
133165
<i class="far fa-folder-open fa-fw me-1"></i>
134166
{% for category in page.categories %}
135167
<a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
136-
{%- unless forloop.last -%},{%- endunless -%}
168+
{% unless forloop.last %},{% endunless %}
137169
{% endfor %}
138170
</div>
139171
{% endif %}

‎_posts/2025-03-17-google-hub-visit.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: "Inside Google's Offices"
33
date: 2025-03-17 10:00:00 +0200
44
categories: [tech-culture]
55
#tags: [google, work-environment, innovation, warsaw, office-tour, tech-culture]
6-
description: A deep dive into Google's Warsaw HUB, exploring its work culture, amenities, and high-tech environment.
6+
description: A deep dive into Google's Warsaw HUB, exploring its work culture, amenities, and high-tech environment. During my business trip to Warsaw, I had the unique opportunity to visit Google's impressive offices
77
image:
88
path: /assets/img/posts/google-warsaw-hub-banner.webp
99
alt: Google Warsaw HUB Office Tour
@@ -14,7 +14,7 @@ _The reception area of Google's Warsaw HUB_
1414

1515
*Source: [Google Warsaw HUB Reception Image](https://bi.im-g.pl/im/f9/72/1a/z27730169IEG,Hol-wejsciowy-w-wiezowcu-The-Warsaw-Hub-przy-Towar.jpg). The image is external, as I forgot to take a photo of the reception myself.*
1616

17-
During my business trip to Warsaw, I had the unique opportunity to visit Google's impressive offices. Here's an inside look at their workspace, from panoramic views to relaxation zones.
17+
Here's an inside look at their workspace, from panoramic views to relaxation zones.
1818

1919
## A Business Trip Turned Into a Tech Adventure
2020

‎_posts/2025-05-02-ccna-career-boost.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ categories: [career]
55
#tags: [ccna, networking, professional-development, cisco, cybersecurity, career-growth]
66
description: Follow my complete journey from networking beginner to CCNA certified professional - including study methods, practical labs, challenges, and how this certification opened doors to cybersecurity opportunities.
77
image:
8-
path: /assets/img/posts/ccna-journey-banner.webp
8+
path: /assets/img/posts/ccnacareer.webp
99
alt: CCNA Certification Journey
1010
---
1111

‎_posts/2025-06-01-smb-cifs-active-directory-authentication-linux.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ categories: [infrastructure]
55
#tags: [samba, sssd, active-directory, smb, cifs, kerberos, realmd, enterprise, authentication, linux-administration]
66
description: Comprehensive step-by-step tutorial for setting up SMB/CIFS file sharing with Active Directory authentication on Linux servers. Covers SSSD, Samba, Kerberos configuration, troubleshooting, and security best practices.
77
image:
8-
path: /assets/img/posts/smb-cifs-ad-authentication-banner.webp
8+
path: /assets/img/posts/smbsssdwinbind.webp
99
alt: SMB/CIFS Active Directory Authentication on Linux
1010
---
1111

‎assets/img/posts/ai-home-setup.webp‎

56.9 KB
Loading

‎assets/img/posts/ai-home-setup.webp.old‎

38.4 KB
Binary file not shown.

‎assets/img/posts/bth.png‎

315 KB
Loading

‎assets/img/posts/ccnacareer.webp‎

215 KB
Loading

‎assets/img/posts/dell-r720-server.webp‎

-557 KB
Loading

0 commit comments

Comments
 (0)