add max-wdith to image shortcode - change css of #hero to .section--hero

master
David Kebler 2017-04-22 16:03:10 -07:00
parent 40299fb971
commit 301675b096
5 changed files with 33 additions and 27 deletions

View File

@ -45,6 +45,6 @@ $(document).ready(function () {
<!-- use same lightbox for full sized images in when link="modal" --> <!-- use same lightbox for full sized images in when link="modal" -->
<script> <script>
$(document).ready(function () { $(document).ready(function () {
{{ $.Site.Params.lightbox | safeJS }}('.box--image') {{ $.Site.Params.lightbox | safeJS }}('.box--image-lightbox')
}); });
</script> </script>

View File

@ -1,12 +1,17 @@
{{ $path := "/images/" }} {{ $path := "/images/" }}
{{ $filename := .Get "filename" }} {{ $filename := .Get "filename" }}
{{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }} {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
<div class="box box--column box--image"> <div class="box box--column box--image
{{ with .Get "link"}}{{ if eq . "lightbox" }} box--image-lightbox{{ end }}{{ end }}
"
{{ with .Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
{{ with .Get "wpad"}} wPad="{{ . }}"{{ end }}
>
{{ with .Get "title" }} {{ with .Get "title" }}
<div class="box__title">{{ . }}</div> <div class="box__title">{{ . }}</div>
{{ end }} {{ end }}
{{ with .Get "link"}} {{ with .Get "link"}}
{{ if eq . "modal" }}<a href="{{ $path }}{{ $filename }}">{{ else }}<a href="{{.}}">{{ end }} {{ if eq . "lightbox" }}<a href="{{ $path }}{{ $filename }}">{{ else }}<a href="{{.}}" target="_blank" >{{ end }}
{{ end }} {{ end }}
<img src="{{ $path }}{{ .Get "filename" }}" /> <img src="{{ $path }}{{ .Get "filename" }}" />
{{ if .Get "link"}}</a>{{ end }} {{ if .Get "link"}}</a>{{ end }}

View File

@ -104,7 +104,6 @@ ol {
a, a,
.clickable { .clickable {
color: inherit; color: inherit;
opacity: 0.8;
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
@ -113,7 +112,7 @@ a,
a:hover, a:hover,
.clickable:hover { .clickable:hover {
opacity: 1; filter: saturate(140%);
} }
.btn { .btn {

View File

@ -143,7 +143,7 @@
/* ---------------- /* ----------------
Hero Section Hero Section
---------------- */ ---------------- */
#hero { .section--hero {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
display: flex; display: flex;
@ -152,18 +152,18 @@
width: 100vw; width: 100vw;
} }
#hero .section-content--hero { .section--hero .section-content--hero {
text-align: center; text-align: center;
line-height: 1; line-height: 1;
} }
/*mobile first*/ /*mobile first*/
#hero h1, .section--hero h1,
#hero h2, .section--hero h2,
#hero h3, .section--hero h3,
#hero h4, .section--hero h4,
#hero h5, .section--hero h5,
#hero h6 { .section--hero h6 {
line-height: 1; line-height: 1;
} }
@ -189,12 +189,14 @@
align-items: center; align-items: center;
} }
.box--embed::before { .box--embed::before,
.box--image::before {
content: ""; content: "";
height: 0.5em; height: 0.5em;
} }
.box--embed::after { .box--embed::after,
.box--image::after {
content: ""; content: "";
height: 0.5em; height: 0.5em;
} }

View File

@ -19,12 +19,12 @@
} }
@media only screen and (min-device-width: 800px) and (max-device-width: 1199px) { @media only screen and (min-device-width: 800px) and (max-device-width: 1199px) {
#hero h1, .section--hero h1,
#hero h2, .section--hero h2,
#hero h3, .section--hero h3,
#hero h4, .section--hero h4,
#hero h5, .section--hero h5,
#hero h6 { .section--hero h6 {
line-height: 1.1; line-height: 1.1;
} }
} }
@ -40,12 +40,12 @@
margin-left: 6em; margin-left: 6em;
} }
#hero h1, .section--hero h1,
#hero h2, .section--hero h2,
#hero h3, .section--hero h3,
#hero h4, .section--hero h4,
#hero h5, .section--hero h5,
#hero h6 { .section--hero h6 {
line-height: inherit; line-height: inherit;
} }
} }