studio-variable/index-website-static
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css

Browse source
This commit is contained in:
Julie Blanc 2025-12-19 10:17:06 +01:00
parent 8c604d12c9
commit 79833e88a7
13 changed files with 455 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/css/base/_var.scss
View file

@ -13,10 +13,12 @@
--fs-normal: 16px;
--fs-medium: 20px;
--fs-big: 30px;
--fs-x-big: 38px;
--fs-xbig: 38px;
--fs-button-bold: 22px;
--max-w-content: 700px;
@media #{$small} {
--fs-medium: 20px;
--fs-big: 26px;
@ -41,7 +43,7 @@
--color-bg: #161616;
--color-txt: #ffffff;
--color-txt-light: var(--grey-600);
--color-txt-light: var(--grey-400);
--color-accent: #00ff00;
--color-accent-50: #e9ffe9;
--color-accent-100: #d8fdd8;

1
assets/css/partials/_site-footer.scss
View file

@ -7,6 +7,7 @@
.logo {
margin-top: calc(var(--spacing)*0.25);
margin-bottom: calc(var(--spacing)*1);
opacity: 0;
svg{
width: 100px;
}

1
assets/css/partials/_site-header.scss
View file

@ -34,6 +34,7 @@
#site-title {
flex-grow: 2;
opacity: 0;
svg{
width: 100px;
}

1
assets/css/partials/_site-menu.scss
View file

@ -12,6 +12,7 @@
display: flex;
flex-direction: column;
display: none;
.baseline{
font-size: var(--fs-medium);

2
assets/css/style.scss
View file

@ -19,4 +19,6 @@
@import 'partials/main-layout';
@import 'template/page-article';

99
assets/css/template/_page-article.scss Normal file
View file

@ -0,0 +1,99 @@
.page-article header{
max-width: var(--max-w-content);
margin: calc(var(--spacing)*2) auto;
.page-type{
text-transform: uppercase;
color: var(--color-txt-light);
margin-bottom: calc(var(--spacing)*0.5);
}
h2{
font-size: var(--fs-xbig);
}
}
.page-article .section__article{
max-width: var(--max-w-content);
margin: calc(var(--spacing)*3) auto;
a:hover{
color: var(--grey-200);
}
.section__title{
font-weight: normal;
text-transform: uppercase;
font-size: var(--fs-medium);
margin-bottom: calc(var(--spacing)*1)
}
}
.page-article .hero{
width: 100vw;
position: relative;
left: calc(var(--padding-body)*-1);
margin: calc(var(--spacing)*3) 0;
figcaption{
color: var(--color-txt-light);
font-size: var(--fs-small);
max-width: var(--max-w-content);
margin: 0 auto;
padding-top: calc(var(--spacing)*0.5);
}
&.hero-video{
figure{
width: 100%;
img{
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
}
}
}
.page-article .short{
font-size: var(--fs-medium);
margin: calc(var(--spacing)*3) auto;
max-width: var(--max-w-content);
}
.page-article #section__synthese{
font-size: var(--fs-medium);
}
.page-article #banner--page{
height: calc(100dvh - var(--header-h));
height: calc(100dvh - var(--header-h));
margin-bottom: calc((100dvh - var(--header-h))*-1);
background-color: red;
position: sticky;
top: var(--header-h);
width: 240px;
}
.page-article #section__dl{
margin-top: 0px;
border-bottom: var(--border-light);
.dl__group{
display: grid;
grid-template-columns: 40% 1fr;
border-top: var(--border-light);
padding: calc(var(--spacing)*0.5) 0;
}
dt{
color: var(--color-txt-light);
}
}