diff --git a/static/up.css b/static/up.css index 7495365..127ffb7 100644 --- a/static/up.css +++ b/static/up.css @@ -147,69 +147,61 @@ } } -/* ######### Animations ######### */ - -#darkbox { width:1280px; - height:720px; - position:absolute; - top:0; - left:0; - background-color:#333; - overflow: hidden; - text-align:center; - margin-top: 7%; - } -.darkboximg { padding:0; max-width: 1216px; max-height: 684px;} #gallery { - line-height:0; - -webkit-column-count:5; - -webkit-column-gap:5px; - -moz-column-count:5; - -moz-column-gap:5px; - column-count:5; - column-gap:5px; - margin-top:2rem; + margin-top: 10vw; + display: flex; + flex-wrap: wrap; } -#gallery img { - width: 100% !important; - height: auto !important; - margin-bottom:5px; - filter: grayscale(100%); - transition: filter 1s; +.item{ + margin-bottom: 1vw; } -#gallery img:hover { - filter:none; - transform: scale(1.2); +.item img{ + width: 20vw; + display:flex; + flex-wrap:wrap; } -@media (max-width: 1200px) { - #gallery { - -moz-column-count: 4; - -webkit-column-count: 4; - column-count: 4; + +.row { + display: flex; + flex-wrap: wrap; + padding: 0 4px; +} + +.control{ + display:block; + position:inherit; + +} + +/* Create four equal columns that sits next to each other */ +.column { + flex: 30%; + max-width: 30%; + padding: 0 4px; + +} + +.column img { + margin-top: 8px; + vertical-align: middle; +} + +/* Responsive layout - makes a two column-layout instead of four columns */ +@media (max-width: 850px) { + .column { + flex: 50%; + max-width: 50%; } } -@media (max-width: 1000px) { - #gallery { - -moz-column-count: 3; - -webkit-column-count: 3; - column-count: 3; - } -} -@media (max-width: 800px) { - #gallery { - -moz-column-count: 2; - -webkit-column-count: 2; - column-count: 2; - } -} -@media (max-width: 400px) { - #gallery { - -moz-column-count: 1; - -webkit-column-count: 1; - column-count: 1; + +/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ +@media (max-width: 600px) { + .column { + flex: 100%; + max-width: 100%; } } diff --git a/templates/_head.html b/templates/_head.html index 3bc1bb1..64bce8e 100644 --- a/templates/_head.html +++ b/templates/_head.html @@ -4,7 +4,7 @@ - + Un serveur et des ... diff --git a/templates/gallery.html b/templates/gallery.html index 926cff7..f66ebbf 100644 --- a/templates/gallery.html +++ b/templates/gallery.html @@ -7,20 +7,29 @@
-