refactor youtube shortocde with direct site keys - add before/after padding

master
David Kebler 2017-04-12 12:32:04 -07:00
parent 7667e7d097
commit 644649597d
2 changed files with 39 additions and 27 deletions

View File

@ -1,21 +1,18 @@
{{ if .IsNamedParams }}
{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "maxwidth" .maxwidth }}{{ end }}
{{ with .Get "maxwidth" }}{{ $.Scratch.Set "maxwidth" . }}{{ end }}
{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "wpad" .wpad }}{{ end }}
{{ with .Get "wpad" }}{{ $.Scratch.Set "wpad" . }}{{ end }}
{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "noThumb" .disable_thumb }}{{ end }}
{{ with .Get "nothumb" }}{{ $.Scratch.Set "noThumb" . }}{{ end }}
<div class="box box--column">
{{ $.Scratch.Set "maxwidth" ( $.Page.Site.Params.youtube.maxwidth | .Get "maxwidth" ) }}
{{ $.Scratch.Set "wpad" ( $.Page.Site.Params.youtube.wpad | .Get "wpad" ) }}
{{ $.Scratch.Set "nothumb" ( $.Page.Site.Params.youtube.disable_thumb | .Get "nothumb" ) }}
<div class="box box--embed box--column box--youtube">
{{ with .Get "title" }}
<div class="box__title">{{ . }}</div>
{{ end }}
<div class="box box--embed box--youtube"
<div
youtube_id="{{ .Get "id" }}"
{{ with .Get "start"}} start="{{ . }}"{{ end }}
{{ with .Get "plist"}} list="{{ . }}"{{ end }}
{{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
{{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
{{ with $.Scratch.Get "noThumb"}} nothumb="yes" {{ end }}
{{ with $.Scratch.Get "nothumb"}} nothumb="yes" {{ end }}
>
<!-- thumb and video get put here -->
</div>
@ -25,11 +22,10 @@
</div>
{{ else }}
{{ $numOfParams := ( len .Params ) }}
{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "noThumb" .disable_thumb }}{{ end }}
<div class="box box--embed box--youtube"
youtube_id="{{ .Get 0 }}"
{{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}
{{ with $.Scratch.Get "noThumb"}} nothumb="yes" {{ end }}
{{ with $.Page.Site.Params.youtube.disable_thumb }} nothumb="yes" {{ end }}
>
<!-- image or iframe injected here -->
</div>

View File

@ -176,6 +176,22 @@
flex-flow: wrap;
align-content: center;
justify-content: center;
padding-left: 0.5em;
padding-right: 0.5em;
}
.box--embed::before {
content: "";
height: 0.5em;
}
.box--embed::after {
content: "";
height: 0.5em;
}
.box--btn-bar {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
@ -184,6 +200,15 @@
align-items: center;
}
.box__caption {
font-style: italic;
}
.box__title {
text-transform: capitalize;
font-weight: bold;
}
.box--image {
max-width: 450px;
padding: 0.5em;
@ -197,12 +222,10 @@
.box--btn {
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.box--btn-bar > .box--btn {
margin-right: 0.2em;
margin-bottom: 0.5em;
}
.btn__text {
@ -246,7 +269,7 @@
opacity: 1;
}
/*may get rid of thise*/
/*may get rid of this after fixing embed shortcode */
.box__embed {
width: 100%;
display: flex;
@ -259,6 +282,7 @@
.box--embed {
flex-direction: column;
flex-wrap: nowrap;
padding-bottom: 0;
}
.thumb--yt {
@ -267,26 +291,18 @@
justify-content: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: brightness(.8);
}
.thumb--yt:hover {
-webkit-filter: brightness(1.2);
-webkit-filter: brightness(1);
cursor: pointer;
}
.thumb--yt > .play-button {
font-size: 4em;
}
.box__caption {
text-transform: capitalize;
font-style: italic;
}
.box__title {
text-transform: uppercase;
font-weight: bold;
padding-top: 0.75em;
font-size: 3.5em;
color: red;
text-shadow: 3px 3px black;
}
.box__embed--disqus {