Skip to content

Commit f726a76

Browse files
simplearyansimplearyan
committed
Cleaning CSS Style | AD | Design
1 parent 057d5b4 commit f726a76

11 files changed

Lines changed: 86 additions & 16 deletions

File tree

‎src/components/BlogCard.astro‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ const cardStyle = lightColor
7676
}
7777

7878
.blog-card:hover {
79-
transform: translateY(-4px);
80-
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
79+
/* transform: translateY(-4px); */
80+
/* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1); */
8181
/* border-color: var(--color-primary); */
8282
z-index: 10;
8383
}
@@ -162,7 +162,9 @@ const cardStyle = lightColor
162162

163163
.title {
164164
/* font-family: "Playfair Display", serif; */
165-
font-family: "Outfit", sans-serif !important;
165+
/* font-family: "Outfit", sans-serif !important; */
166+
font-family: var(--font-carrois);
167+
/* font-family: var(--font-barlow); */
166168
font-size: 1.4rem;
167169
font-weight: 700;
168170
line-height: 1.3;

‎src/components/ads/HorizontalAd.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,9 @@
3030
background: rgba(var(--color-surface-rgb), 0.5);
3131
border-radius: 8px;
3232
border-bottom: 1px solid var(--color-border);
33-
33+
background-color: var(--color-bg-offset);
3434
/* padding: 1rem 0; */
35+
margin-bottom: 2rem;
3536
}
3637

3738
.ad-label {

‎src/components/ads/InArticleAd.astro‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
---
44

55
<div class="in-article-ad-container">
6+
<span class="ad-label">Advertisement</span>
67
<script
78
async
89
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7993314093599705"
@@ -24,5 +25,18 @@
2425
margin: 2rem 0;
2526
text-align: center;
2627
overflow: hidden;
28+
background-color: var(--color-bg-offset);
29+
padding: 1rem 0;
30+
border-radius: 8px;
31+
}
32+
33+
.ad-label {
34+
font-family: var(--font-sans);
35+
font-size: 10px;
36+
text-transform: uppercase;
37+
letter-spacing: 0.1em;
38+
color: var(--color-text-muted);
39+
margin-bottom: 0.5rem;
40+
display: block;
2741
}
2842
</style>

‎src/components/ads/MultiplexAd.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
border-top: 1px solid var(--color-border);
2727
width: 100%;
2828
border-bottom: 1px solid var(--color-border);
29+
background-color: var(--color-bg-offset);
2930
}
3031

3132
.ad-label {

‎src/components/ads/ThinVerticalRailAd.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
display: block;
8585
width: 120px;
8686
min-height: 500px;
87-
/* background-color: aliceblue; */
87+
background-color: var(--color-bg-offset);
8888
}
8989
.right-rail {
9090
right: 0px;

‎src/components/layout/Header.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,9 @@ const { disableSticky = false } = Astro.props;
162162
font-size: 0.95rem;
163163
color: var(--color-text);
164164
position: relative;
165+
font-family: var(--font-carrois);
166+
/* font-family: var(--font-barlow); */
167+
/* font-family: var(--font-montserrat); */
165168
}
166169

167170
.desktop-nav a:hover {

‎src/layouts/Layout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const socialImageURL = new URL(image, Astro.url);
7979
<link rel="preconnect" href="https://fonts.googleapis.com" />
8080
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8181
<link
82-
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Oswald:wght@300;400;700&family=Inter:wght@400;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&family=Fira+Code&family=Montserrat:wght@700&family=Playfair+Display:ital,wght@1,400;1,600&family=Kalam:wght@300;400;700&family=Outfit:wght@400;500;600;700&display=swap"
82+
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Carrois+Gothic&family=Cinzel:wght@400;700;900&family=Oswald:wght@300;400;700&family=Inter:wght@400;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&family=Fira+Code&family=Montserrat:wght@700&family=Playfair+Display:ital,wght@1,400;1,600&family=Kalam:wght@300;400;700&family=Outfit:wght@400;500;600;700&display=swap"
8383
rel="stylesheet"
8484
/>
8585

‎src/pages/blog/[...slug].astro‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ const components = {
183183
Arrow,
184184
Underline,
185185
Aside,
186-
h2: H2Ad,
186+
// h2: H2Ad,
187187
};
188188
---
189189

@@ -307,6 +307,18 @@ const components = {
307307
</div>
308308
)}
309309

310+
<div id="in-article-ad-source" class="hidden">
311+
<InArticleAd />
312+
</div>
313+
314+
<script>
315+
import { insertAd } from "../../scripts/insertAd";
316+
// Using requestAnimationFrame to ensure DOM is ready and layout is settled
317+
requestAnimationFrame(() => {
318+
insertAd('.prose', 'in-article-ad-source');
319+
});
320+
</script>
321+
310322
<MultiplexAd />
311323
</article>
312324
</Layout>

‎src/pages/index.astro‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -557,9 +557,10 @@ const posts = (await getCollection("blog"))
557557

558558
.view-all {
559559
/* font-family: var(--font-mono); */
560-
font-family: "Montserrat", sans-serif;
561-
font-family: "Playfair Display", serif;
562-
font-family: "Inter", sans-serif;
560+
/* font-family: "Montserrat", sans-serif; */
561+
/* font-family: "Playfair Display", serif; */
562+
/* font-family: "Inter", sans-serif; */
563+
font-family: var(--font-barlow);
563564
font-size: 0.9rem;
564565
color: var(--color-primary);
565566
font-weight: 700;

‎src/scripts/insertAd.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export function insertAd(proseSelector: string, adContainerId: string) {
2+
const prose = document.querySelector(proseSelector);
3+
const adPlaceholder = document.getElementById(adContainerId);
4+
5+
// Get the ad content (the div with class 'in-article-ad-container' inside the placeholder)
6+
const adContent = adPlaceholder?.firstElementChild;
7+
8+
if (!prose || !adPlaceholder || !adContent) return;
9+
10+
const headings = prose.querySelectorAll('h2');
11+
12+
// Rule 1: Insert after 3rd h2
13+
if (headings.length >= 3) {
14+
headings[2].insertAdjacentElement('beforebegin', adContent);
15+
return;
16+
}
17+
18+
// Rule 2 & 3: Fallback to paragraphs
19+
const paragraphs = prose.querySelectorAll('p');
20+
21+
// Insert after 3rd paragraph
22+
if (paragraphs.length >= 3) {
23+
paragraphs[2].insertAdjacentElement('afterend', adContent);
24+
}
25+
// Fallback: Append to end if article is very short
26+
else {
27+
prose.appendChild(adContent);
28+
}
29+
}

0 commit comments

Comments
 (0)