3ab4b21e8c
- blog.json.php : réécriture — intro (writer), featured (pages field), articles triés par date desc (featured exclu de la liste) - layout.css : .page-scrollable + .page-container (styles génériques pour pages scrollables type blog/article) - Blog.svelte : page scrollable avec header intro, article featured (image large + excerpt), liste articles avec dividers, responsive mobile/tablet via @custom-media Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
55 lines
1.3 KiB
CSS
55 lines
1.3 KiB
CSS
/* Golden Grid */
|
|
.golden-grid {
|
|
height: 100vh !important;
|
|
min-height: 100% !important;
|
|
display: grid !important;
|
|
position: relative;
|
|
grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
|
|
grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
|
|
text-align: center;
|
|
}
|
|
|
|
.slide {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/* Pages scrollables (blog, article, etc.) */
|
|
.page-scrollable {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.page-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 50px;
|
|
}
|
|
|
|
/* Vertical Lines */
|
|
.vertical-line {
|
|
z-index: var(--z-base);
|
|
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
|
height: 150%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.vertical-line-start {
|
|
z-index: var(--z-base);
|
|
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
|
grid-area: 1/6 / span 20 / span 1;
|
|
height: 150%;
|
|
}
|
|
|
|
.vertical-line-center {
|
|
z-index: var(--z-base);
|
|
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
|
grid-area: 1/11 / span 20 / span 1;
|
|
height: 150%;
|
|
}
|
|
|
|
.vertical-line-end {
|
|
z-index: var(--z-base);
|
|
border-left: 0.1px solid rgba(238, 238, 238, 0.2);
|
|
grid-area: 1/16 / span 20 / span 1;
|
|
height: 150%;
|
|
}
|