add max-wdith to image shortcode - change css of #hero to .section--hero
parent
40299fb971
commit
301675b096
|
@ -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>
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue