diff options
author | serg <contact@sergfurtak.com> | 2018-06-07 18:27:33 +0300 |
---|---|---|
committer | serg <contact@sergfurtak.com> | 2018-06-07 18:27:33 +0300 |
commit | 9335bddeb175fa93b051bee7243bf213f41c7ef9 (patch) | |
tree | 7670fba0f67cb4a7e9e3e2e07d61a660f4c8f71b | |
parent | b61afc124e24e0bcb453ed7fe9f09a3e2ebe63ec (diff) |
[ref] move responsive image to the separate partial template
-rw-r--r-- | layouts/partials/head-includes.html | 2 | ||||
-rw-r--r-- | layouts/partials/header.html | 18 | ||||
-rw-r--r-- | layouts/partials/modules/projects.html | 19 | ||||
-rw-r--r-- | layouts/partials/modules/responsive-image.html | 18 | ||||
-rw-r--r-- | static/app.css | 2 |
5 files changed, 23 insertions, 36 deletions
diff --git a/layouts/partials/head-includes.html b/layouts/partials/head-includes.html index b5b73f8..3c99529 100644 --- a/layouts/partials/head-includes.html +++ b/layouts/partials/head-includes.html @@ -134,7 +134,7 @@ -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } - .main-description img { + .main-description .image-item { position: absolute; bottom: 0; display: block; diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 7833d5d..3dabda9 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -6,23 +6,7 @@ {{- with $header.description -}} <h1 class="break-word">{{- . | safeHTML -}}</h1> {{- end -}} - {{- with $header.image -}} - {{- $imageUrl := .url -}} - {{- $imageAltText := .alt_text -}} - {{- $responsiveSources := .responsive_sources -}} - {{- with $imageUrl -}} - <picture> - {{- with $responsiveSources -}} - {{- range $imageWidth, $imageSourceUrl := . -}} - {{- $.Scratch.Add "imageSrcSetArray" (slice (print ($imageSourceUrl | relURL) " " $imageWidth "w")) -}} - {{- end -}} - <source media="(max-width: 46.25em)" srcset="{{delimit ($.Scratch.Get "imageSrcSetArray") ", "}}"> - {{- $.Scratch.Delete "imageSrcSetArray" -}} - {{- end -}} - <img class="project-image" src="{{. | relURL}}" alt="{{$imageAltText}}"> - </picture> - {{- end -}} - {{- end -}} + {{- partial "modules/responsive-image" (dict "page" . "image" $header.image) -}} </div> </div> </div> diff --git a/layouts/partials/modules/projects.html b/layouts/partials/modules/projects.html index e264fc1..a5c2475 100644 --- a/layouts/partials/modules/projects.html +++ b/layouts/partials/modules/projects.html @@ -1,25 +1,10 @@ +{{$page := .}} {{- with .Params.projects -}} <ul class="projects clearfix"> {{- range . -}} <li class="project{{with .class}} {{.}}{{end}}"> <a href="{{.link}}"> - {{- with .image -}} - {{- $imageUrl := .url -}} - {{- $imageAltText := .alt_text -}} - {{- $responsiveSources := .responsive_sources -}} - {{- with $imageUrl -}} - <picture> - {{- with $responsiveSources -}} - {{- range $imageWidth, $imageSourceUrl := . -}} - {{- $.Scratch.Add "imageSrcSetArray" (slice (print ($imageSourceUrl | relURL) " " $imageWidth "w")) -}} - {{- end -}} - <source media="(max-width: 46.25em)" srcset="{{delimit ($.Scratch.Get "imageSrcSetArray") ", "}}"> - {{- $.Scratch.Delete "imageSrcSetArray" -}} - {{- end -}} - <img class="project-image" src="{{. | relURL}}" alt="{{$imageAltText}}"> - </picture> - {{- end -}} - {{- end -}} + {{- partial "modules/responsive-image" (dict "page" $page "image" .image) -}} <div class="project-hover"> <div class="project-caption"> {{- with .title -}} diff --git a/layouts/partials/modules/responsive-image.html b/layouts/partials/modules/responsive-image.html new file mode 100644 index 0000000..6e8f0eb --- /dev/null +++ b/layouts/partials/modules/responsive-image.html @@ -0,0 +1,18 @@ +{{$page := .page}} +{{- with .image -}} + {{- $imageUrl := .url -}} + {{- $imageAltText := .alt_text -}} + {{- $responsiveSources := .responsive_sources -}} + {{- with $imageUrl -}} + <picture> + {{- with $responsiveSources -}} + {{- range $imageWidth, $imageSourceUrl := . -}} + {{- $page.Scratch.Add "imageSrcSetArray" (slice (print ($imageSourceUrl | relURL) " " $imageWidth "w")) -}} + {{- end -}} + <source media="(max-width: 46.25em)" srcset="{{delimit ($page.Scratch.Get "imageSrcSetArray") ", "}}"> + {{- $page.Scratch.Delete "imageSrcSetArray" -}} + {{- end -}} + <img class="image-item" src="{{. | relURL}}" alt="{{$imageAltText}}"> + </picture> + {{- end -}} +{{- end -}}
\ No newline at end of file diff --git a/static/app.css b/static/app.css index df79a82..b0388e1 100644 --- a/static/app.css +++ b/static/app.css @@ -1,2 +1,2 @@ -.burger-wrap{float:right;height:100%}.burger-wrap:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.burger{position:relative;width:2.5em;height:1.8em;display:inline-block;vertical-align:middle;cursor:pointer}.burger>div{position:absolute;left:0;right:0;background:#171616;height:.2em}.burger .top{top:0;transition:transform 0.5s, top 0.2s}.burger .middle{top:.8em;transition:transform 0.5s ease 0.2s, top 0.2s}.burger .bottom{top:1.6em;transition:all 0.5s ease 0.1s}.BurgerMenu--active .burger .top{top:.8em;transform:rotate(135deg)}.BurgerMenu--active .burger .middle{transform:rotate(-135deg)}.BurgerMenu--active .burger .bottom{top:0.8em;opacity:0;transform:rotate(180deg)}.BurgerMenu--active .links{visibility:visible;opacity:1}.projects{margin-top:4.5em;margin-bottom:3.5em}.projects .project{margin-bottom:2em}.projects a{position:relative;display:block}.projects a:hover .project-hover{background:#224afa;color:#fff;opacity:0.9;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-ms-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;transition:opacity 200ms linear}.projects .project-image{display:block;max-width:100%;height:auto}.projects .project-hover{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;-webkit-transition:all 200ms linear 300ms;-moz-transition:all 200ms linear 300ms;-ms-transition:all 200ms linear 300ms;-o-transition:all 200ms linear 300ms;transition:all 200ms linear 300ms}.project-caption{padding-top:2.7em;padding-left:2.1em;line-height:1.2}.project-caption .project-title{font-size:2.8em;font-weight:bold}.project-caption .project-type{font-size:1.4em;text-transform:uppercase}.line::before{content:"";display:block;height:1px;background:#ebebeb;margin-top:4.2em;margin-bottom:4.2em}.bottom-space{margin-bottom:4.2em}.stickyNavigation .nav-container{position:fixed;z-index:10;width:100%;padding-bottom:1.5em;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,0.1);box-shadow:0 5px 7px 0 rgba(1,1,1,0.1);-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:0.3s;animation-duration:0.3s}.stickyNavigation .navbar{height:5em;padding-top:1.5em}.stickyNavigation .logo img{max-height:5em}.stickyNavigation .header{padding-top:9.1em}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 60px, 0);transform:translate3d(0, 60px, 0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 60px, 0);transform:translate3d(0, 60px, 0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@media only screen and (min-width: 22.5625em){.projects{margin-top:7.5em;margin-bottom:6em}.project-caption .project-title{font-size:3.5em}}@media only screen and (min-width: 27.875em){.project-caption .project-type{font-size:1.6em}}@media only screen and (min-width: 46.3125em){.projects{margin-top:10em}.projects .project{float:left}.projects .short-col{width:32.21238%}.projects .wide-col{width:66.01769%}.projects .project:nth-child(2n){margin-right:1.7699%}.project-caption{padding-top:3.7em;padding-left:3.1em}.project-caption .project-title{font-size:4em}}@media only screen and (min-width: 58.5em){.project-caption .project-title{font-size:4.6em}} +.burger-wrap{float:right;height:100%}.burger-wrap:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.burger{position:relative;width:2.5em;height:1.8em;display:inline-block;vertical-align:middle;cursor:pointer}.burger>div{position:absolute;left:0;right:0;background:#171616;height:.2em}.burger .top{top:0;transition:transform 0.5s, top 0.2s}.burger .middle{top:.8em;transition:transform 0.5s ease 0.2s, top 0.2s}.burger .bottom{top:1.6em;transition:all 0.5s ease 0.1s}.BurgerMenu--active .burger .top{top:.8em;transform:rotate(135deg)}.BurgerMenu--active .burger .middle{transform:rotate(-135deg)}.BurgerMenu--active .burger .bottom{top:0.8em;opacity:0;transform:rotate(180deg)}.BurgerMenu--active .links{visibility:visible;opacity:1}.projects{margin-top:4.5em;margin-bottom:3.5em}.projects .project{margin-bottom:2em}.projects a{position:relative;display:block}.projects a:hover .project-hover{background:#224afa;color:#fff;opacity:0.9;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-ms-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;transition:opacity 200ms linear}.projects .image-item{display:block;max-width:100%;height:auto}.projects .project-hover{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;-webkit-transition:all 200ms linear 300ms;-moz-transition:all 200ms linear 300ms;-ms-transition:all 200ms linear 300ms;-o-transition:all 200ms linear 300ms;transition:all 200ms linear 300ms}.project-caption{padding-top:2.7em;padding-left:2.1em;line-height:1.2}.project-caption .project-title{font-size:2.8em;font-weight:bold}.project-caption .project-type{font-size:1.4em;text-transform:uppercase}.line::before{content:"";display:block;height:1px;background:#ebebeb;margin-top:4.2em;margin-bottom:4.2em}.bottom-space{margin-bottom:4.2em}.stickyNavigation .nav-container{position:fixed;z-index:10;width:100%;padding-bottom:1.5em;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,0.1);box-shadow:0 5px 7px 0 rgba(1,1,1,0.1);-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:0.3s;animation-duration:0.3s}.stickyNavigation .navbar{height:5em;padding-top:1.5em}.stickyNavigation .logo img{max-height:5em}.stickyNavigation .header{padding-top:9.1em}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 60px, 0);transform:translate3d(0, 60px, 0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 60px, 0);transform:translate3d(0, 60px, 0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@media only screen and (min-width: 22.5625em){.projects{margin-top:7.5em;margin-bottom:6em}.project-caption .project-title{font-size:3.5em}}@media only screen and (min-width: 27.875em){.project-caption .project-type{font-size:1.6em}}@media only screen and (min-width: 46.3125em){.projects{margin-top:10em}.projects .project{float:left}.projects .short-col{width:32.21238%}.projects .wide-col{width:66.01769%}.projects .project:nth-child(2n){margin-right:1.7699%}.project-caption{padding-top:3.7em;padding-left:3.1em}.project-caption .project-title{font-size:4em}}@media only screen and (min-width: 58.5em){.project-caption .project-title{font-size:4.6em}} |