quatuorbellefeuille.com

commit a2d75c2b59f192e7c78dae64d7a87338bc6a3107
parent f7b6a33991f8ce027b53f4ac95a2dbde72f07467
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Mon,  9 Nov 2020 01:12:59 +0100

Make sidebars sticky

Diffstat:
M
artistes.css
 | 
11
++++++-----
M
commun.css
 | 
7
+++----

2 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/artistes.css b/artistes.css
@@ -1,14 +1,12 @@
-body {
-    height: 100vh;
-}
-
 .main {
     display: flex;
+    background: #f00;
 }
 
 .main-social {
     overflow: auto;
     flex-grow: 1;
+    background: #f44;
 }
 
 .main div {
@@ -17,6 +15,9 @@ body {
 
 .main #photos {
     flex: 1;
+    align-self: flex-start;
+    position: sticky;
+    top: 0;
     background: #eee;
 }
 
@@ -26,7 +27,7 @@ body {
 }
 
 #photos img {
-    width: 40%;
+    width: 25%;
     border-color: #ddd;
     border-width: 1vw;
     border-style: solid;
diff --git a/commun.css b/commun.css
@@ -52,6 +52,8 @@ header.social {
     display: flex;
     flex-direction: column;
     align-items: center;
+    position: sticky;
+    top: 0;
 }
 
 .social img {
@@ -72,15 +74,12 @@ header.social {
 
 
 body {
+    height: 100vh;
     display: flex;
     flex-direction: column;
     margin: 0;
 }
 
-.main {
-    background: #f00;
-}
-
 footer {
     margin: auto;
 }