Skip to content

Commit 2f7feae

Browse files
SebiSebas1524SebiSebas1524
committed
[Change} Some color were changed plus the button from side bar
1 parent dc8c7af commit 2f7feae

File tree

2 files changed

+251
-1
lines changed

2 files changed

+251
-1
lines changed

‎_config.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,8 @@ pageviews:
8888
# light — Use the light color scheme
8989
# dark — Use the dark color scheme
9090
#
91-
theme_mode: # [light | dark]
91+
theme_mode: # dark
92+
9293

9394
# The CDN endpoint for media resources.
9495
# Notice that once it is assigned, the CDN url

‎assets/css/jekyll-theme-chirpy.scss‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
---
2+
---
3+
4+
/* prettier-ignore */
5+
@use 'main' {%- if jekyll.environment == 'production' -%}.bundle{%- endif -%};
6+
7+
/* ===== COLOR PALETTE VARIABLES ===== */
8+
$primary-purple: #4a2847;
9+
$medium-purple: #6B3F69;
10+
$light-purple: #8D5F8C;
11+
$dusty-rose: #c9a5bb;
12+
13+
/* Gradients - MAUVE & DUSTY ROSE FOCUSED */
14+
$gradient-main: linear-gradient(135deg, #4a2847 0%, #6B3F69 25%, #8D5F8C 50%, #6B3F69 75%, #4a2847 100%);
15+
$gradient-subtle: linear-gradient(90deg, #6B3F69, #8D5F8C);
16+
$gradient-accent: linear-gradient(45deg, #c9a5bb, #d4b4c6, #bea0b3);
17+
18+
/* ===== DARK THEME COLOR SCHEME ===== */
19+
html:not([data-mode]),
20+
html[data-mode=dark] {
21+
/* Framework Colors */
22+
--main-bg: #4a2847;
23+
--mask-bg: #6B3F69;
24+
--main-border-color: #8D5F8C;
25+
26+
/* Text Colors */
27+
--text-color: #f5f1ed;
28+
--text-muted-color: #a89aae;
29+
--text-muted-highlight-color: #f5f1ed;
30+
--heading-color: #f5f1ed;
31+
--label-color: #a89aae;
32+
33+
/* Links & Quotes */
34+
--blockquote-border-color: #c9a5bb;
35+
--blockquote-text-color: #a89aae;
36+
--link-color: #c9a5bb;
37+
--link-underline-color: #d4b4c6;
38+
39+
/* Buttons */
40+
--button-bg: #6B3F69;
41+
--btn-border-color: #8D5F8C;
42+
--btn-backtotop-color: #f5f1ed;
43+
--btn-backtotop-border-color: #8D5F8C;
44+
--btn-box-shadow: rgba(201, 165, 187, 0.2);
45+
46+
/* Cards & Headers */
47+
--card-header-bg: #6B3F69;
48+
--card-bg: #4a2847;
49+
50+
/* Checkboxes */
51+
--checkbox-color: #8D5F8C;
52+
--checkbox-checked-color: #c9a5bb;
53+
54+
/* Images & Gradients */
55+
--img-bg: radial-gradient(circle, #4a2847 0%, #6B3F69 100%);
56+
--shimmer-bg: linear-gradient(90deg, rgba(201, 165, 187, 0) 0%, rgba(201, 165, 187, 0.3) 50%, rgba(201, 165, 187, 0) 100%);
57+
58+
/* Site Title & Branding */
59+
--site-title-color: #f5f1ed;
60+
--site-subtitle-color: #a89aae;
61+
62+
/* Sidebar */
63+
--sidebar-bg: #6B3F69;
64+
--sidebar-border-color: #8D5F8C;
65+
--sidebar-muted-color: #a89aae;
66+
--sidebar-active-color: #f5f1ed;
67+
--sidebar-hover-bg: #4a2847;
68+
--sidebar-btn-bg: #4a2847;
69+
--sidebar-btn-color: #a89aae;
70+
--nav-cursor-color: #c9a5bb;
71+
72+
/* Avatar */
73+
--avatar-border-color: rgba(230, 230, 230, 0.5);
74+
75+
/* Topbar */
76+
--topbar-bg: rgba(74, 40, 71, 0.95);
77+
--topbar-text-color: #f5f1ed;
78+
79+
/* Search */
80+
--search-border-color: #8D5F8C;
81+
--search-icon-color: #a89aae;
82+
--input-focus-border-color: #c9a5bb;
83+
84+
/* Post List */
85+
--post-list-text-color: #f5f1ed;
86+
87+
/* Pagination */
88+
--btn-patinator-text-color: #f5f1ed;
89+
--btn-paginator-hover-color: #4a2847;
90+
91+
/* Table of Contents */
92+
--toc-highlight: #c9a5bb;
93+
--toc-popup-border-color: #8D5F8C;
94+
95+
/* Tags */
96+
--tag-hover: #8D5F8C;
97+
98+
/* Tables */
99+
--tb-odd-bg: #4a2847;
100+
--tb-even-bg: #6B3F69;
101+
--tb-border-color: #8D5F8C;
102+
103+
/* Footnotes & Sharing */
104+
--footnote-target-bg: #c9a5bb;
105+
--btn-share-color: #a89aae;
106+
--btn-share-hover-color: #f5f1ed;
107+
}
108+
109+
//////////////////////////////////////////////////////////////////////////////////////////////////////
110+
111+
/* ===== ENHANCED STYLING WITH MAUVE & DUSTY ROSE ===== */
112+
113+
/* Sidebar with mauve gradient */
114+
.sidebar {
115+
background: linear-gradient(180deg, #8D5F8C 0%, #6B3F69 100%);
116+
background-attachment: fixed;
117+
}
118+
119+
/* Post containers with dusty rose accent */
120+
.post,
121+
.card {
122+
border-left: 3px solid #DDC3C3;
123+
transition: all 0.3s ease;
124+
125+
&:hover {
126+
border-left-color: #e8d0d0;
127+
box-shadow: inset 0 0 20px rgba(221, 195, 195, 0.1);
128+
}
129+
}
130+
131+
/* Links with dusty rose transitions */
132+
a {
133+
transition: color 0.2s ease;
134+
135+
&:hover {
136+
color: #e8d0d0;
137+
}
138+
}
139+
140+
/* Code blocks with dusty rose accent */
141+
pre,
142+
code {
143+
border-left: 3px solid #DDC3C3;
144+
}
145+
146+
/* Blockquotes with dusty rose gradient */
147+
blockquote {
148+
border-left: 4px solid;
149+
border-image: linear-gradient(180deg, #DDC3C3, #e8d0d0, #d9b8b8) 1;
150+
background: linear-gradient(90deg, rgba(221, 195, 195, 0.05), transparent);
151+
}
152+
153+
/* Buttons with dusty rose gradient */
154+
.btn-primary {
155+
background: linear-gradient(135deg, #DDC3C3, #e8d0d0);
156+
border-color: #DDC3C3;
157+
transition: all 0.3s ease;
158+
159+
&:hover {
160+
background: linear-gradient(135deg, #e8d0d0, #f0d8d8);
161+
border-color: #e8d0d0;
162+
transform: translateY(-2px);
163+
box-shadow: 0 4px 12px rgba(221, 195, 195, 0.4);
164+
}
165+
}
166+
167+
/* Tags with mauve hover */
168+
.tag,
169+
.category {
170+
background: #A376A2;
171+
transition: all 0.2s ease;
172+
173+
&:hover {
174+
background: linear-gradient(135deg, #8D5F8C, #DDC3C3);
175+
}
176+
}
177+
178+
/* Pagination active state with dusty rose */
179+
.pagination .active .page-link {
180+
background: linear-gradient(135deg, #DDC3C3, #e8d0d0);
181+
border-color: #DDC3C3;
182+
}
183+
184+
/* Scrollbar styling with dusty rose */
185+
::-webkit-scrollbar-thumb {
186+
background: linear-gradient(180deg, #DDC3C3, #e8d0d0);
187+
188+
&:hover {
189+
background: linear-gradient(180deg, #e8d0d0, #f0d8d8);
190+
}
191+
}
192+
193+
//////////////////////////////////////////////////////////////////////////////////////////////////////
194+
195+
/* ===== SIDEBAR REFINEMENT ===== */
196+
.sidebar {
197+
border-radius: 0 15px 15px 0;
198+
}
199+
200+
.nav-item {
201+
padding-left: 0px;
202+
padding-right: 0px;
203+
}
204+
205+
#sidebar ul li.nav-item {
206+
padding-left: 0px;
207+
padding-right: 0px;
208+
}
209+
210+
#sidebar ul li.nav-item a.nav-link {
211+
border-radius: 0px;
212+
}
213+
214+
.nav-link {
215+
border-radius: 0px;
216+
transition: all 0.3s ease;
217+
padding: 1rem 1.5rem;
218+
color: #b899b8;
219+
220+
&:hover {
221+
background: rgba(221, 195, 195, 0.1);
222+
color: #DDC3C3;
223+
}
224+
225+
&.active {
226+
font-size: 1.2rem;
227+
font-weight: 700;
228+
padding: 1.2rem 2rem;
229+
background: linear-gradient(135deg, #5a4d63, #6B3F69);
230+
color: #f5f1ed;
231+
width: calc(100% + 3rem);
232+
margin-left: -1.5rem;
233+
margin-right: -1.5rem;
234+
padding-left: 2rem;
235+
padding-right: 2rem;
236+
border-radius: 15px;
237+
border: 2px solid #DDC3C3;
238+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
239+
}
240+
}
241+
242+
/* ===== LINK HOVER EFFECTS ===== */
243+
a {
244+
transition: color 0.2s ease;
245+
246+
&:hover {
247+
opacity: 0.9;
248+
}
249+
}

0 commit comments

Comments
 (0)