From a12f7e3b241160b2d2ef5076a132ce446e4182a6 Mon Sep 17 00:00:00 2001 From: mxmehl Date: Mon, 16 Oct 2017 18:08:39 +0200 Subject: [PATCH] margin between images --- static/assets/css/main.css | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/static/assets/css/main.css b/static/assets/css/main.css index 5a7562d..195766c 100644 --- a/static/assets/css/main.css +++ b/static/assets/css/main.css @@ -266,7 +266,7 @@ body.modal-active #wrapper:after { -moz-pointer-events: auto; -webkit-pointer-ev body.loading #wrapper:before { -moz-transition: opacity 1s ease-out !important; -webkit-transition: opacity 1s ease-out !important; -ms-transition: opacity 1s ease-out !important; transition: opacity 1s ease-out !important; -moz-transition-delay: 0.3s !important; -webkit-transition-delay: 0.3s !important; -ms-transition-delay: 0.3s !important; transition-delay: 0.3s !important; opacity: 0.25; top: 50%; visibility: visible; } /* Header */ -body { padding: 0 0 4em 0; } +body { padding: 0 0 0 0; } #header { -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -moz-transition: -moz-transform 1s ease; -webkit-transition: -webkit-transform 1s ease; -ms-transition: -ms-transform 1s ease; transition: transform 1s ease; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; background: #1f2224; top: 0; height: 4em; left: 0; line-height: 4em; padding: 0 1.5em; position: static; user-select: none; width: 100%; z-index: 10002; } body.loading #header { -moz-transform: translateY(-4em); -webkit-transform: translateY(-4em); -ms-transform: translateY(-4em); transform: translateY(-4em); } @@ -281,12 +281,15 @@ body.loading #header { -moz-transform: translateY(-4em); -webkit-transform: tran #header nav > ul > li a:hover { color: #ffffff !important; } #header nav > ul > li a.active { background-color: #242629; } -@media screen and (max-width: 736px) { body { padding: 4em 0 0 0; } +@media screen and (max-width: 736px) { body { padding: 0 0 0; } #header { -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); bottom: auto; height: 4em; padding: 0 1em; top: 0; } body.loading #header { -moz-transform: translateY(-3.4em); -webkit-transform: translateY(-3.4em); -ms-transform: translateY(-3.4em); transform: translateY(-3.4em); } #header h1 { font-size: 0.9em; } #header nav > ul > li a { font-size: 0.9em; padding: 0 1.15em; } } /* Main */ +#main .thumb { + margin: 0 0 10px 10px; +} #main { -moz-transition: -moz-filter 0.3s ease, -webkit-filter 0.3s ease, -ms-filter 0.3s ease, -moz-filter 0.3s ease; -webkit-transition: -moz-filter 0.3s ease, -webkit-filter 0.3s ease, -ms-filter 0.3s ease, -webkit-filter 0.3s ease; -ms-transition: -moz-filter 0.3s ease, -webkit-filter 0.3s ease, -ms-filter 0.3s ease, -ms-filter 0.3s ease; transition: -moz-filter 0.3s ease, -webkit-filter 0.3s ease, -ms-filter 0.3s ease, filter 0.3s ease; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } #main .thumb { -moz-transition: opacity 0.6s ease-in-out; -webkit-transition: opacity 0.6s ease-in-out; -ms-transition: opacity 0.6s ease-in-out; transition: opacity 0.6s ease-in-out; -moz-pointer-events: auto; -webkit-pointer-events: auto; -ms-pointer-events: auto; pointer-events: auto; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); opacity: 1; overflow: hidden; position: relative; } #main .thumb:after { background-image: -moz-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%); background-image: -webkit-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%); background-image: -ms-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%); background-image: linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%); -moz-pointer-events: none; -webkit-pointer-events: none; -ms-pointer-events: none; pointer-events: none; background-size: cover; content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } @@ -301,7 +304,7 @@ body.ie #main:before { background: rgba(36, 38, 41, 0.55); } body.content-active #main { -moz-filter: blur(6px); -webkit-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6px); } body.content-active #main:after { -moz-pointer-events: auto; -webkit-pointer-events: auto; -ms-pointer-events: auto; pointer-events: auto; opacity: 1; visibility: visible; } body.loading #main .thumb { -moz-pointer-events: none; -webkit-pointer-events: none; -ms-pointer-events: none; pointer-events: none; opacity: 0; } -#main .thumb { -moz-transition-delay: 2.525s; -webkit-transition-delay: 2.525s; -ms-transition-delay: 2.525s; transition-delay: 2.525s; height: calc(40vh - 2em); min-height: 20em; width: 25%; } +#main .thumb { -moz-transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s; height: calc(40vh - 2em); min-height: 20em; width: 25%; } #main .thumb:nth-child(1) { -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } #main .thumb:nth-child(2) { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } #main .thumb:nth-child(3) { -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } @@ -314,7 +317,7 @@ body.loading #main .thumb { -moz-pointer-events: none; -webkit-pointer-events: n #main .thumb:nth-child(10) { -moz-transition-delay: 1.1s; -webkit-transition-delay: 1.1s; -ms-transition-delay: 1.1s; transition-delay: 1.1s; } #main .thumb:nth-child(11) { -moz-transition-delay: 1.2s; -webkit-transition-delay: 1.2s; -ms-transition-delay: 1.2s; transition-delay: 1.2s; } #main .thumb:nth-child(12) { -moz-transition-delay: 1.3s; -webkit-transition-delay: 1.3s; -ms-transition-delay: 1.3s; transition-delay: 1.3s; } -@media screen and (max-width: 1680px) { #main .thumb { -moz-transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s; height: calc(40vh - 2em); min-height: 20em; width: 33.3333333333%; } +@media screen and (max-width: 1680px) { #main .thumb { -moz-transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s; height: calc(40vh - 2em); min-height: 20em; width: calc(33.3333333333% - 13.333px); } #main .thumb:nth-child(1) { -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } #main .thumb:nth-child(2) { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } #main .thumb:nth-child(3) { -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } @@ -324,14 +327,14 @@ body.loading #main .thumb { -moz-pointer-events: none; -webkit-pointer-events: n #main .thumb:nth-child(7) { -moz-transition-delay: 0.8s; -webkit-transition-delay: 0.8s; -ms-transition-delay: 0.8s; transition-delay: 0.8s; } #main .thumb:nth-child(8) { -moz-transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -ms-transition-delay: 0.9s; transition-delay: 0.9s; } #main .thumb:nth-child(9) { -moz-transition-delay: 1s; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1s; } } -@media screen and (max-width: 1280px) { #main .thumb { -moz-transition-delay: 1.625s; -webkit-transition-delay: 1.625s; -ms-transition-delay: 1.625s; transition-delay: 1.625s; height: calc(40vh - 2em); min-height: 20em; width: 50%; } +@media screen and (max-width: 1280px) { #main .thumb { -moz-transition-delay: 1.625s; -webkit-transition-delay: 1.625s; -ms-transition-delay: 1.625s; transition-delay: 1.625s; height: calc(40vh - 2em); min-height: 20em; width: calc(50% - 15px); } #main .thumb:nth-child(1) { -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } #main .thumb:nth-child(2) { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } #main .thumb:nth-child(3) { -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } #main .thumb:nth-child(4) { -moz-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; } #main .thumb:nth-child(5) { -moz-transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; transition-delay: 0.6s; } #main .thumb:nth-child(6) { -moz-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -ms-transition-delay: 0.7s; transition-delay: 0.7s; } } -@media screen and (max-width: 980px) { #main .thumb { -moz-transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s; height: calc(28.5714285714vh - 1.3333333333em); min-height: 18em; width: 50%; } +@media screen and (max-width: 980px) { #main .thumb { -moz-transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s; height: calc(28.5714285714vh - 1.3333333333em); min-height: 18em; width: calc(50% - 15px); } #main .thumb:nth-child(1) { -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } #main .thumb:nth-child(2) { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } #main .thumb:nth-child(3) { -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } @@ -342,6 +345,9 @@ body.loading #main .thumb { -moz-pointer-events: none; -webkit-pointer-events: n #main .thumb:nth-child(8) { -moz-transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -ms-transition-delay: 0.9s; transition-delay: 0.9s; } #main .thumb:nth-child(9) { -moz-transition-delay: 1s; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1s; } } @media screen and (max-width: 480px) { #main .thumb { -moz-transition-delay: 1.175s; -webkit-transition-delay: 1.175s; -ms-transition-delay: 1.175s; transition-delay: 1.175s; height: calc(40vh - 2em); min-height: 18em; width: 100%; } + #main .thumb { + margin: 0 0 10px 0; + } #main .thumb:nth-child(1) { -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } #main .thumb:nth-child(2) { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } #main .thumb:nth-child(3) { -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } }