diff --git a/assets/sass/components/_affeliate.scss b/assets/sass/components/_affeliate.scss new file mode 100644 index 0000000..a7c6eea --- /dev/null +++ b/assets/sass/components/_affeliate.scss @@ -0,0 +1,124 @@ +.affeliate { + word-break: keep-all; + padding: 0.5rem; + margin: 2.5rem 0; + border-radius: 0.5rem; + position: relative; + display: flex; + + @include themify($themes) { + border: 1px solid themed('content-box-border-color'); + background-color: themed('content-box-background-color'); + } + + &__imgwrapper { + width: 25%; + text-align: center; + margin: 0 auto; + padding: .5rem; + } + &__image { + width: 100%; + height: auto; + object-fit: cover; + } + &__body { + width: 75%; + text-align: center; + &__title { + font-family: $title-font; + font-size: 1rem; + font-weight: bold; + } + &__description { + font-size: 0.75rem; + } + } + + &__icons { + @include flexbox(); + @include align-items(center); + @include justify-content(center); + @include flex-wrap(wrap); + margin: 0.5rem 0; + + a { + text-decoration: none !important; + } + } + + &__item { + font-family: $title-font; + font-size: 0.8rem; + cursor: pointer; + border-radius: 0.25rem; + margin: 0.25rem; + text-transform: capitalize; + + @include flexbox(); + @include align-items(center); + + &[data-type="affeliate"] { + svg { + @include themify($themes) { + color: themed('share-color'); + background-color: themed('share-background-color'); + @include box-shadow(1px, 1px, 3px, 0, themed('share-shadow-color')); + } + } + } + + svg { + padding: 0.375rem; + border-radius: 0.25rem; + margin-right: 0.25rem; + + &[data-name="amazon"] { + color: white; + @include on-event { + background-color: #FF9900; + } + } + &[data-name="rakuten"] { + color: white; + @include on-event { + background-color: #BF0000; + } + } + &[data-name="yahoojp"] { + color: white; + @include on-event { + background-color: #FF0132; + } + } + &[data-name="gmarket"] { + color: white; + @include on-event { + background-color: #48AC4A; + } + } + &[data-name="link"] { + color: white; + @include on-event { + background-color: #00457C; + } + } + + @include transition(transform, 0.15s, ease-in); + @include on-event { + @include translateY(-0.25rem); + } + } + } + + @media screen and (max-width: 767px) { + display: block; + + &__imgwrapper { + width: 60%; + } + &__body { + width: 100%; + } + } +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 465f547..32033d0 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -82,6 +82,7 @@ $viewport_size: {{ .Site.Params.viewportSize | default "normal" }}; @import 'components/button'; @import 'components/featuredImage'; @import 'components/comment'; +@import 'components/affeliate'; @import 'pages/404'; @import 'pages/about'; diff --git a/exampleSite/content/en/posts/shortcodes.md b/exampleSite/content/en/posts/shortcodes.md index 880f40f..026433c 100644 --- a/exampleSite/content/en/posts/shortcodes.md +++ b/exampleSite/content/en/posts/shortcodes.md @@ -133,3 +133,14 @@ warning text {{< notice error >}} error text {{< /notice >}} + +## Affeliate +{{< affeliate title="The Very Hungry Caterpillar" + description="Author: Eric Carle; Publisher: Philomel Books
THE all-time classic picture book, from generation to generation, sold somewhere in the world every 30 seconds! A sturdy and beautiful book to give as a gift for new babies, baby showers, birthdays, and other new beginnings!" + img="images/shortcodes/affeliate.jpg" + amazon="https://www.amazon.com/dp/0399226907/" + rakuten="https://books.rakuten.co.jp/rb/4177444/" + yahoojp="https://store.shopping.yahoo.co.jp/maniacs-shop/pd-01041801.html" + gmarket="http://global.gmarket.co.kr/item?goodsCode=260740452" + link="https://www.penguinrandomhouse.com/books/557025/9780399256042" >}} + diff --git a/exampleSite/static/images/shortcodes/affeliate.jpg b/exampleSite/static/images/shortcodes/affeliate.jpg new file mode 100644 index 0000000..e301ef6 Binary files /dev/null and b/exampleSite/static/images/shortcodes/affeliate.jpg differ diff --git a/layouts/partials/svgs/affeliate/amazon.svg b/layouts/partials/svgs/affeliate/amazon.svg new file mode 100644 index 0000000..b894ba4 --- /dev/null +++ b/layouts/partials/svgs/affeliate/amazon.svg @@ -0,0 +1 @@ + diff --git a/layouts/partials/svgs/affeliate/gmarket.svg b/layouts/partials/svgs/affeliate/gmarket.svg new file mode 100644 index 0000000..c32151d --- /dev/null +++ b/layouts/partials/svgs/affeliate/gmarket.svg @@ -0,0 +1 @@ + diff --git a/layouts/partials/svgs/affeliate/link.svg b/layouts/partials/svgs/affeliate/link.svg new file mode 100644 index 0000000..406f70a --- /dev/null +++ b/layouts/partials/svgs/affeliate/link.svg @@ -0,0 +1 @@ + diff --git a/layouts/partials/svgs/affeliate/rakuten.svg b/layouts/partials/svgs/affeliate/rakuten.svg new file mode 100644 index 0000000..624b51b --- /dev/null +++ b/layouts/partials/svgs/affeliate/rakuten.svg @@ -0,0 +1 @@ + diff --git a/layouts/partials/svgs/affeliate/yahoojp.svg b/layouts/partials/svgs/affeliate/yahoojp.svg new file mode 100644 index 0000000..848c63c --- /dev/null +++ b/layouts/partials/svgs/affeliate/yahoojp.svg @@ -0,0 +1 @@ + diff --git a/layouts/shortcodes/affeliate.html b/layouts/shortcodes/affeliate.html new file mode 100644 index 0000000..82abebb --- /dev/null +++ b/layouts/shortcodes/affeliate.html @@ -0,0 +1,42 @@ +
+
+ {{ if .Get "img" }} + {{ if .Get + {{ end }} +
+
+
+ {{ if .Get "title"}}{{ .Get "title" }}{{ end }} +
+
+ {{ if .Get "description"}}{{ .Get "description" | safeHTML }}{{ end }} +
+
+ {{ if .Get "amazon"}} + + {{ partial "svgs/affeliate/amazon.svg" (dict "width" 30 "height" 30) }} + + {{ end }} + {{ if .Get "rakuten"}} + + {{ partial "svgs/affeliate/rakuten.svg" (dict "width" 30 "height" 30) }} + + {{ end }} + {{ if .Get "yahoojp"}} + + {{ partial "svgs/affeliate/yahoojp.svg" (dict "width" 30 "height" 30) }} + + {{ end }} + {{ if .Get "gmarket"}} + + {{ partial "svgs/affeliate/gmarket.svg" (dict "width" 30 "height" 30) }} + + {{ end }} + {{ if .Get "link"}} + + {{ partial "svgs/affeliate/link.svg" (dict "width" 30 "height" 30) }} + + {{ end }} +
+
+