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
$size-small: 600px
$layout-size: 960px
$layout-size: 1040px
// COLOR
@ -96,7 +96,6 @@ $color-tertiary: #A61A07
.card, .cards > *, .footnotes
color: var(--color-secondary-card-paragraph)
background: var(--color-secondary-card-background)
border-radius: var(--border-radius)
h1, h2, h3, h4, h5, h6
color: var(--color-secondary-card-headline)
button, .button
@ -124,6 +123,7 @@ body
--border-style: dashed
--border-size: 4px
--border-radius: calc(var(--tile)/2)
--border-radius-small: 3px
--link-style: dotted
font-size: 1.125rem
@ -287,6 +287,12 @@ sub
max-width: $layout-size
padding: var(--tile)
margin: 0 auto
width: 90%
margin-right: auto
margin-left: auto
@media screen and (max-width: 800px)
width: inherit
.blogDate:first-child + h1
padding-top: var(--tile)
@ -297,6 +303,43 @@ sub
.quote:first-child
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
display: grid
grid-template-columns: 1fr 1fr

View File

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

View File

@ -23,10 +23,17 @@ RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale
</div>
<div class="theme-secondary">
<div class="content">
<div class="sticky clearfix">
<div class="sticky-col">
## Quels services propose RésiLien ?
{.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>
![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.
{ .cards }
</div>
</div>
</div>
</div>
<div class="theme-primary">