feat: Add sticky on services section

This commit is contained in:
Simon 2022-02-14 09:36:54 +01:00
parent 062a9e13e9
commit ddf1e850a0
3 changed files with 55 additions and 3 deletions

View File

@ -1,6 +1,6 @@
$line-height: 1.15 $line-height: 1.15
$size-small: 600px $size-small: 600px
$layout-size: 960px $layout-size: 1040px
// COLOR // COLOR
@ -96,7 +96,6 @@ $color-tertiary: #A61A07
.card, .cards > *, .footnotes .card, .cards > *, .footnotes
color: var(--color-secondary-card-paragraph) color: var(--color-secondary-card-paragraph)
background: var(--color-secondary-card-background) background: var(--color-secondary-card-background)
border-radius: var(--border-radius)
h1, h2, h3, h4, h5, h6 h1, h2, h3, h4, h5, h6
color: var(--color-secondary-card-headline) color: var(--color-secondary-card-headline)
button, .button button, .button
@ -124,6 +123,7 @@ body
--border-style: dashed --border-style: dashed
--border-size: 4px --border-size: 4px
--border-radius: calc(var(--tile)/2) --border-radius: calc(var(--tile)/2)
--border-radius-small: 3px
--link-style: dotted --link-style: dotted
font-size: 1.125rem font-size: 1.125rem
@ -287,6 +287,12 @@ sub
max-width: $layout-size max-width: $layout-size
padding: var(--tile) padding: var(--tile)
margin: 0 auto margin: 0 auto
width: 90%
margin-right: auto
margin-left: auto
@media screen and (max-width: 800px)
width: inherit
.blogDate:first-child + h1 .blogDate:first-child + h1
padding-top: var(--tile) padding-top: var(--tile)
@ -297,6 +303,43 @@ sub
.quote:first-child .quote:first-child
margin-top: 0 margin-top: 0
.sticky
position: relative
display: block
.sticky-col
top: 0
position: sticky
width: 40%
margin-right: 7%
float: left
margin-bottom: 1rem
.sticky-cards
width: 50%
float: right
.cards
grid-template-columns: 1fr
& > *
border-radius: var(--border-radius-small)
@media screen and (max-width: 800px)
.sticky-col, .sticky-cards
width: inherit
position: relative
margin-right: 0
.clearfix::before, .clearfix::after
content: " "
display: table
.clearfix::after
clear: both
.cards .cards
display: grid display: grid
grid-template-columns: 1fr 1fr grid-template-columns: 1fr 1fr

View File

@ -16,7 +16,7 @@ permalinks:
params: params:
FaviconFile: /favicon.svg FaviconFile: /favicon.svg
ImageSize: 960x ImageSize: 1040x
minify: minify:
tdewolff: tdewolff:

View File

@ -23,10 +23,17 @@ RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale
</div> </div>
<div class="theme-secondary"> <div class="theme-secondary">
<div class="content"> <div class="content">
<div class="sticky clearfix">
<div class="sticky-col">
## Quels services propose RésiLien ? ## Quels services propose RésiLien ?
{.center} {.center}
Tous les services sont Open Source et sont accompagnés d'une formation personnalisée. Des sauvegardes sont effectuées quotidiennement sur un autre site.
</div>
<div class="sticky-cards">
- <header> - <header>
![Collaboration sur un document](/icons/writting.svg) ![Collaboration sur un document](/icons/writting.svg)
@ -57,6 +64,8 @@ RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale
Avec le logiciel libre Hugo, l'équipe de RésiLien peut concevoir un site web selon votre demande et l'héberger sur son infrastructure. Avec le logiciel libre Hugo, l'équipe de RésiLien peut concevoir un site web selon votre demande et l'héberger sur son infrastructure.
{ .cards } { .cards }
</div>
</div>
</div> </div>
</div> </div>
<div class="theme-primary"> <div class="theme-primary">