assets/styles/main.sass

@@ -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

config/_default/config.yml

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

content/_index.md

@@ -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">