studio-variable/ebabx-proto
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

empty space in home

Browse source
This commit is contained in:
Julie Blanc 2026-05-17 12:25:30 +02:00
parent ecdc3d3384
commit e2741e4755
5 changed files with 85 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

52
assets/css/04.compositions.css
View file

@ -22,9 +22,16 @@
}
@media (min-width: 60rem) {
.column{
display: flex;
flex-direction: column;
height: 100%;
}
.column > *:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
}
.column > section:first-of-type {
padding-top: 0;
@ -38,7 +45,6 @@
.row{
grid-column: 1/end;
border-top: var(--border);
margin-top: calc(var(--space-gutter)*-0.25 + 3px);
}
.row section {
@ -46,6 +52,48 @@
grid-template-columns: repeat(3, 1fr);
column-gap: var(--gap, var(--space-gutter));
}
.empty {
flex: 1;
border-left: var(--border);
padding-left: var(--space-gutter);
padding-top: var(--space-gutter);
position: relative;
}
.empty::before{
content: '';
display: block;
position: absolute;
width: calc(100% - var(--space-gutter));
border-top: var(--border);
top: 0;
left: var(--space-gutter);
}
.empty::after {
content: '';
position: absolute;
top: var(--space-gutter);
left: var(--space-gutter);
right: 0;
bottom: 0;
display: block;
width: auto;
height: auto;
pointer-events: none;
background: linear-gradient(
to bottom right,
transparent calc(50% - 0.5px),
black calc(50% - 0.5px),
black calc(50% + 0.5px),
transparent calc(50% + 0.5px)
);
}
}
/* Flow */
@ -63,4 +111,4 @@
gap: var(--gap, var(--space-gutter));
justify-content: var(--cluster-horizontal-alignment, flex-start);
align-items: var(--cluster-vertical-alignment, center);
}
}

17
assets/css/05.blocks.css
View file

@ -4,10 +4,16 @@
/* Region */
.region {
margin-inline: var(--space-regions);
/* margin-inline: var(--space-regions); */
padding-block: var(--space-regions);
}
.region-footer{
display: flex;
justify-content: flex-end;
padding-top: var(--space-regions);
}
/* Buttons */
@ -131,7 +137,7 @@ a.tag:hover {
align-items: baseline;
padding-top: calc(var(--space-gutter)*0.5);
h3{
min-height: 4rem;
min-height: 2.5lh;
}
time {
grid-column: 1 / 1;
@ -341,8 +347,9 @@ top: -1px;
grid-column: span 2;
border-left: var(--border);
padding-left: var(--space-gutter);
font-size: var(--text-size-heading-4);
line-height: 1.2;
font-size: var(--text-size-heading-3);
font-weight: 500;
line-height: var(--leading-short);
max-width: 46ch;
min-height: 14rem;
}
@ -368,7 +375,7 @@ top: -1px;
column-gap: var(--space-gutter);
/* margin-top: calc(-1 * var(--border-width)); */
/* margin-top: 10vh; */
font-size: 0.75rem;
font-size: var(--font-size-meta);
line-height: 1.2;
font-weight: 500;
margin-inline: var(--space-regions);

34
assets/css/07.templates.css
View file

@ -7,10 +7,17 @@
@media (min-width: 60rem) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-gutter);
margin-inline: var(--space-regions);
}
main > .column:first-of-type {
border-right: var(--border);
grid-column: span 2;
}
main > .column:not(:first-of-type) .region {
border-left: var(--border);
padding-left: var(--space-gutter);
margin-bottom: var(--space-gutter);
}
}
@ -48,6 +55,7 @@
padding-top: 0;
header {
border-top: 0;
padding-top: 0;
}
}
.ressources {
@ -62,24 +70,8 @@
display: flex;
justify-content: space-between;
}
.ressources a::after {
content: "";
border: var(--border);
border-radius: 50%;
display: inline-flex;
width: 1.25em;
height: 1.25em;
margin-left: auto;
box-shadow: 0 var(--box-shadow-thickness) 0 var(--color-global-text);
background-color: var(--color-light);
background-image: var(--icon-arrow-right);
background-repeat: no-repeat;
background-position: center;
background-size: 1em;
transform: translateY(.125em);
transition: all 0.1s ease-out;
}
.ressources a:hover::after {
#ressources a:hover::after {
--translateY: 3px;
--box-shadow-thickness: 3px;
transform: translateY(calc(.125em + var(--translateY)));
@ -104,7 +96,7 @@
@media (min-width: 60rem) {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1lh auto auto auto 1fr;
grid-template-rows: 1.5lh auto auto auto 1fr;
align-items: baseline;
}