Skip to content

Commit 28b75e3

Browse files
AyfriAyfri
committed
feat(theme): Implement enhanced neon theme across all pages and components.
1 parent dd09d80 commit 28b75e3

File tree

12 files changed

+719
-207
lines changed

12 files changed

+719
-207
lines changed

‎src/jsMain/kotlin/io/github/ayfri/Style.kt‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@ object AppStyle : StyleSheet() {
9393
}
9494

9595
val sections by style {
96-
margin(0.px, max(2.cssRem, 4.vw))
9796
padding(3.cssRem)
9897

9998
media(mediaMaxWidth(mobileFirstBreak)) {
@@ -116,18 +115,23 @@ object AppStyle : StyleSheet() {
116115
}
117116

118117
val title by style {
119-
backgroundColor(Color(TITLE_BACKGROUND_COLOR))
120118
border {
121-
color(Color(TITLE_BORDER_COLOR))
122-
style(LineStyle.Solid)
123119
width(2.px)
120+
style(LineStyle.Solid)
121+
color(Color("transparent"))
124122
}
123+
background("""
124+
linear-gradient(#1A1225, #1A1225) padding-box,
125+
linear-gradient(45deg, #00D4FF, #FF0080) border-box
126+
""")
125127
borderRadius(1.cssRem)
126128
fontSize(2.1.cssRem)
127129

128130
margin(0.px, 0.px, 3.cssRem)
129131
padding(1.cssRem, 1.5.cssRem)
130132

133+
color(Color.white)
134+
131135
media(mediaMaxWidth(mobileFirstBreak)) {
132136
self {
133137
fontSize(1.8.cssRem)
@@ -141,6 +145,18 @@ object AppStyle : StyleSheet() {
141145
marginBottom(1.8.cssRem)
142146
}
143147
}
148+
149+
"span" {
150+
background(linearGradient(45.deg) {
151+
stop(Color("#00D4FF"))
152+
stop(Color("#FF0080"))
153+
})
154+
property("-webkit-background-clip", "text")
155+
property("-webkit-text-fill-color", "transparent")
156+
property("-moz-text-fill-color", "transparent")
157+
property("-moz-background-clip", "text")
158+
property("text-shadow", "0 0 20px rgba(0, 212, 255, 0.5)")
159+
}
144160
}
145161

146162
val monoFont by style {

‎src/jsMain/kotlin/io/github/ayfri/components/Footer.kt‎

Lines changed: 64 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
44
import com.varabyte.kobweb.compose.css.TextAlign
55
import com.varabyte.kobweb.compose.css.borderColor
66
import com.varabyte.kobweb.compose.css.gridTemplateRows
7+
import com.varabyte.kobweb.compose.css.scale
78
import com.varabyte.kobweb.compose.css.textAlign
89
import io.github.ayfri.AppStyle
910
import io.github.ayfri.MAIL_TO
@@ -280,17 +281,20 @@ fun Footer() {
280281
}
281282

282283
object FooterStyle : StyleSheet() {
283-
const val FOOTER_COLOR = "#1a1120"
284-
const val FOOTER_DARK_COLOR = "#150d1a"
285-
const val FOOTER_LINK_HOVER = "#b3b3b3"
284+
const val FOOTER_COLOR = "#1A1225"
285+
const val FOOTER_DARK_COLOR = "#0F0A1A"
286+
const val FOOTER_ACCENT_START = "#00D4FF"
287+
const val FOOTER_ACCENT_END = "#FF0080"
288+
const val FOOTER_LINK_HOVER = "#00D4FF"
286289
const val FOOTER_HEADING_COLOR = "#ffffff"
287290
const val FOOTER_TEXT_COLOR = "#cccccc"
288291
const val FOOTER_LINK_COLOR = "#aaaaaa"
289292

290293
val footerWrapper by style {
291294
background(linearGradient(180.deg) {
292-
stop(Color("#302F39"))
293-
stop(Color("#211C24"), 100.percent)
295+
stop(Color("#1E1535"))
296+
stop(Color(FOOTER_COLOR), 30.percent)
297+
stop(Color("#0F0A1A"), 100.percent)
294298
})
295299

296300
display(DisplayStyle.Flex)
@@ -301,6 +305,17 @@ object FooterStyle : StyleSheet() {
301305
val contactSection by style {
302306
padding(2.cssRem, 0.px)
303307
color(Color.white)
308+
background(linearGradient(135.deg) {
309+
stop(Color("#1A1225"))
310+
stop(Color("#2A1B3D"), 50.percent)
311+
stop(Color("#1A1225"), 100.percent)
312+
})
313+
borderBottom {
314+
width(2.px)
315+
style(LineStyle.Solid)
316+
color(Color("transparent"))
317+
}
318+
property("border-image", "linear-gradient(90deg, $FOOTER_ACCENT_START, $FOOTER_ACCENT_END) 1")
304319
}
305320

306321
val contactContainer by style {
@@ -322,6 +337,14 @@ object FooterStyle : StyleSheet() {
322337
textAlign(TextAlign.Center)
323338
marginTop(0.px)
324339
marginBottom(1.5.cssRem)
340+
background(linearGradient(45.deg) {
341+
stop(Color(FOOTER_ACCENT_START))
342+
stop(Color(FOOTER_ACCENT_END))
343+
})
344+
property("-webkit-background-clip", "text")
345+
property("-webkit-text-fill-color", "transparent")
346+
property("-moz-text-fill-color", "transparent")
347+
property("-moz-background-clip", "text")
325348
}
326349

327350
val footer by style {
@@ -369,8 +392,10 @@ object FooterStyle : StyleSheet() {
369392
borderBottom {
370393
width(2.px)
371394
style(LineStyle.Solid)
372-
color(Color("#444444"))
395+
color(Color("transparent"))
373396
}
397+
property("border-image", "linear-gradient(90deg, $FOOTER_ACCENT_START, $FOOTER_ACCENT_END) 1")
398+
property("border-image-slice", "1")
374399
}
375400

376401
@OptIn(ExperimentalComposeWebApi::class)
@@ -388,12 +413,13 @@ object FooterStyle : StyleSheet() {
388413
textDecoration("none")
389414
transitions {
390415
defaultDuration(0.3.s)
391-
properties("color")
416+
properties("color", "text-shadow")
392417
}
393418

394419
hover(self) style {
395-
color(Color.white)
420+
color(Color(FOOTER_LINK_HOVER))
396421
textDecoration("underline")
422+
property("text-shadow", "0 0 8px rgba(0, 212, 255, 0.6)")
397423
}
398424
}
399425
}
@@ -406,12 +432,13 @@ object FooterStyle : StyleSheet() {
406432
marginTop(0.8.cssRem)
407433
transitions {
408434
defaultDuration(0.3.s)
409-
properties("color")
435+
properties("color", "text-shadow")
410436
}
411437

412438
hover(self) style {
413-
color(Color.white)
439+
color(Color(FOOTER_LINK_HOVER))
414440
textDecoration("underline")
441+
property("text-shadow", "0 0 8px rgba(0, 212, 255, 0.6)")
415442
}
416443
}
417444

@@ -429,12 +456,18 @@ object FooterStyle : StyleSheet() {
429456
color(Color(FOOTER_LINK_COLOR))
430457
transitions {
431458
defaultDuration(0.3.s)
432-
properties("color", "transform")
459+
properties("color", "transform", "text-shadow")
433460
}
434461

435462
hover(self) style {
436-
color(Color.white)
437-
property("transform", "translateY(-3px)")
463+
background(linearGradient(45.deg) {
464+
stop(Color(FOOTER_ACCENT_START))
465+
stop(Color(FOOTER_ACCENT_END))
466+
})
467+
property("-webkit-background-clip", "text")
468+
property("-webkit-text-fill-color", "transparent")
469+
property("transform", "translateY(-3px) scale(1.1)")
470+
property("text-shadow", "0 0 15px rgba(255, 0, 128, 0.8)")
438471
}
439472
}
440473

@@ -465,9 +498,20 @@ object FooterStyle : StyleSheet() {
465498

466499
val contactForm by style {
467500
"button" {
468-
backgroundColor(Color("#50435A"))
501+
background(linearGradient(45.deg) {
502+
stop(Color(FOOTER_ACCENT_START))
503+
stop(Color(FOOTER_ACCENT_END))
504+
})
505+
color(Color.white)
469506
marginTop(1.cssRem)
470507
width(100.percent)
508+
fontWeight(700)
509+
property("box-shadow", "0 0 15px rgba(0, 212, 255, 0.4)")
510+
511+
hover {
512+
property("box-shadow", "0 0 20px rgba(255, 0, 128, 0.6)")
513+
scale(1.02)
514+
}
471515
}
472516
}
473517

@@ -557,6 +601,12 @@ object FooterStyle : StyleSheet() {
557601
textAlign("center")
558602
fontSize(0.9.cssRem)
559603
color(Color("#888888"))
604+
borderTop {
605+
width(1.px)
606+
style(LineStyle.Solid)
607+
color(Color("transparent"))
608+
}
609+
property("border-image", "linear-gradient(90deg, transparent, $FOOTER_ACCENT_START, $FOOTER_ACCENT_END, transparent) 1")
560610

561611
"p" {
562612
margin(0.px)

‎src/jsMain/kotlin/io/github/ayfri/components/Header.kt‎

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@ import androidx.compose.runtime.Composable
44
import androidx.compose.runtime.getValue
55
import androidx.compose.runtime.mutableStateOf
66
import androidx.compose.runtime.setValue
7+
import com.varabyte.kobweb.compose.css.BoxSizing
78
import com.varabyte.kobweb.compose.css.WhiteSpace
9+
import com.varabyte.kobweb.compose.css.boxSizing
10+
import com.varabyte.kobweb.compose.css.scale
811
import com.varabyte.kobweb.compose.css.whiteSpace
912
import io.github.ayfri.AppStyle.mobileFirstBreak
1013
import io.github.ayfri.AppStyle.mobileSecondBreak
1114
import io.github.ayfri.data.REPO_LINK
1215
import io.github.ayfri.utils.*
16+
import org.jetbrains.compose.web.ExperimentalComposeWebApi
1317
import org.jetbrains.compose.web.attributes.ATarget
1418
import org.jetbrains.compose.web.attributes.target
1519
import org.jetbrains.compose.web.css.*
@@ -59,8 +63,10 @@ fun Header() {
5963
}
6064

6165
object HeaderStyle : StyleSheet() {
62-
const val NAVBAR_COLOR = "#2A2B36"
63-
const val NAVBAR_COLOR_SELECTED = "#1e1c28"
66+
const val NAVBAR_COLOR = "#1A1225" // Plus sombre, violet foncé
67+
const val NAVBAR_COLOR_SELECTED = "#2A1B3D" // Violet plus clair pour sélection
68+
const val NAVBAR_ACCENT_START = "#00D4FF" // Cyan néon
69+
const val NAVBAR_ACCENT_END = "#FF0080" // Magenta néon
6470
val navbarHeight by variable<CSSNumeric>()
6571

6672
init {
@@ -71,8 +77,18 @@ object HeaderStyle : StyleSheet() {
7177

7278
val navbar by style {
7379
alignItems(AlignItems.Center)
74-
backgroundColor(Color(NAVBAR_COLOR))
75-
boxSizing("border-box")
80+
background(linearGradient(135.deg) {
81+
stop(Color(NAVBAR_COLOR))
82+
stop(Color("#1E1535"), 50.percent)
83+
stop(Color(NAVBAR_COLOR), 100.percent)
84+
})
85+
borderBottom {
86+
width(1.px)
87+
style(LineStyle.Solid)
88+
color(Color("transparent"))
89+
}
90+
property("border-image", "linear-gradient(90deg, $NAVBAR_ACCENT_START, $NAVBAR_ACCENT_END) 1")
91+
boxSizing(BoxSizing.BorderBox)
7692
display(DisplayStyle.Flex)
7793
justifyContent(JustifyContent.SpaceBetween)
7894
position(Position.Fixed)
@@ -98,6 +114,7 @@ object HeaderStyle : StyleSheet() {
98114
justifyContent(JustifyContent.Center)
99115
}
100116

117+
@OptIn(ExperimentalComposeWebApi::class)
101118
val navbarLinks by style {
102119
"a" style {
103120
color(Color.white)
@@ -107,9 +124,37 @@ object HeaderStyle : StyleSheet() {
107124
lineHeight(navbarHeight.value())
108125
padding(0.px, clamp(1.3.cssRem, 2.5.vw, 2.3.cssRem))
109126
whiteSpace(WhiteSpace.NoWrap)
127+
position(Position.Relative)
128+
129+
before {
130+
property("content", "''")
131+
position(Position.Absolute)
132+
bottom(0.px)
133+
left(50.percent)
134+
width(0.px)
135+
height(2.px)
136+
background(linearGradient(90.deg) {
137+
stop(Color(NAVBAR_ACCENT_START))
138+
stop(Color(NAVBAR_ACCENT_END))
139+
})
140+
property("transform", "translateX(-50%)")
141+
transitions {
142+
defaultDuration(0.3.s)
143+
properties("width")
144+
}
145+
}
110146

111147
group(self + className("active"), hover(self)) style {
112-
backgroundColor(Color(NAVBAR_COLOR_SELECTED))
148+
background(linearGradient(135.deg) {
149+
stop(Color(NAVBAR_COLOR_SELECTED))
150+
stop(Color("#2F2040"), 50.percent)
151+
stop(Color(NAVBAR_COLOR_SELECTED), 100.percent)
152+
})
153+
property("box-shadow", "0 0 15px rgba(0, 212, 255, 0.3)")
154+
155+
before {
156+
width(80.percent)
157+
}
113158
}
114159
}
115160

@@ -121,7 +166,10 @@ object HeaderStyle : StyleSheet() {
121166
left(0.px)
122167
width(100.percent)
123168

124-
backgroundColor(Color(NAVBAR_COLOR))
169+
background(linearGradient(180.deg) {
170+
stop(Color(NAVBAR_COLOR))
171+
stop(Color("#1E1535"))
172+
})
125173

126174
self + className("open") style {
127175
display(DisplayStyle.Flex)
@@ -137,15 +185,30 @@ object HeaderStyle : StyleSheet() {
137185
}
138186
}
139187

188+
@OptIn(ExperimentalComposeWebApi::class)
140189
val navbarGithub by style {
141190
borderRadius(.5.cssRem)
142191
gap(1.cssRem)
143192
height(80.percent)
144193
marginRight(1.vw)
145194
padding(.5.cssRem, 1.cssRem)
195+
border {
196+
width(1.px)
197+
style(LineStyle.Solid)
198+
color(Color("transparent"))
199+
}
200+
transitions {
201+
defaultDuration(0.3.s)
202+
properties("box-shadow", "scale")
203+
}
204+
background("""
205+
linear-gradient(${NAVBAR_COLOR}, ${NAVBAR_COLOR}) padding-box,
206+
linear-gradient(45deg, $NAVBAR_ACCENT_START, $NAVBAR_ACCENT_END) border-box
207+
""")
146208

147209
hover(self) style {
148-
backgroundColor(Color(NAVBAR_COLOR_SELECTED))
210+
property("box-shadow", "0 0 20px rgba(255, 0, 128, 0.4)")
211+
scale(1.05)
149212
}
150213

151214
media(mediaMaxWidth(mobileFirstBreak)) {
@@ -163,6 +226,12 @@ object HeaderStyle : StyleSheet() {
163226
display(DisplayStyle.None)
164227
color(Color.white)
165228
cursor(Cursor.Pointer)
229+
fontSize(1.5.cssRem)
230+
property("text-shadow", "0 0 10px rgba(0, 212, 255, 0.7)")
231+
232+
hover(self) style {
233+
property("text-shadow", "0 0 15px rgba(255, 0, 128, 0.8)")
234+
}
166235

167236
media(mediaMaxWidth(mobileSecondBreak)) {
168237
self {

0 commit comments

Comments
 (0)