Skip to content
Snippets Groups Projects
Commit ae1bc451 authored by Tomáš Valenta's avatar Tomáš Valenta
Browse files

add instagram feed

parent 18b17219
No related branches found
No related tags found
1 merge request!19Add Instagram feed
<div class="flex max-w-sm max-w-xs w-full h-[20rem]">
<a
href="#"
class="group h-full w-full flex flex-col align-center overflow-hidden text-center border border-grey-100 relative hover:no-underline"
>
<div class="md:min-h-[20rem] p-4 opacity-0 group-focus:opacity-100 group-hover:opacity-100 duration-150 z-10">
<div class="flex flex-col items-center">
<div class="mb-4 flex items-center justify-between xl:flex-col gap-3">
<div class="flex flex-col">
<h5 class="font-alt text-xl mt-3 mb-1 text-left sm:text-center">
{{ instagram_name }}
</h5>
<small class="text-brands-instagram text-left sm:text-center">
{{ instagram_username }}
</small>
</div>
</div>
<p class="text-small sm:text-base leading-6 mb-2">
{{ instagram_caption }}
</p>
</div>
</div>
<div class="absolute inset-0 flex-shrink-0 z-0 duration-150 group-focus:blur-lg group-focus:opacity-25 group-hover:blur-lg group-hover:opacity-25">
<div class="relative">
<div class="absolute left-4 top-4 bg-white rounded-lg p-1.5 drop-shadow-md">
<i class="ico--instagram text-brands-instagram text-2xl"></i>
</div>
<img
class="h-[20rem] object-cover"
src="{{ instagram_media_url }}"
alt="Obrázek v Instagramovém postu"
>
</div>
</div>
</a>
</div>
context:
instagram_media_url: https://www.pirati.cz/media/images/50039950616_7a075d9a41_c.7948e8c1.fill-480x480.png
instagram_username: "@bartos"
instagram_name: Ivan Bartoš
instagram_caption: "Dneska jsem byl tady. #cool #pirati"
<div class="container--wide mx-auto mb-8 lg:mb-16">
<div class="flex flex-wrap justify-center items-center">
<h2 class="w-full head-7xl xl:text-center mb-6 xl:mb-28">
{{ instagram_section_title }}
</h2>
</div>
<ul class="flex flex-wrap justify-center gap-3">
<li class="w-full flex max-w-sm sm:max-w-xs">
{% include 'patterns/molecules/boxes/instagram_box.html' %}
</li>
<li class="w-full flex max-w-sm sm:max-w-xs">
{% include 'patterns/molecules/boxes/instagram_box.html' %}
</li>
<li class="w-full flex max-w-sm sm:max-w-xs">
{% include 'patterns/molecules/boxes/instagram_box.html' %}
</li>
<li class="w-full flex max-w-sm sm:max-w-xs">
{% include 'patterns/molecules/boxes/instagram_box.html' %}
</li>
</ul>
<div class="flex justify-center mt-8 lg:mt-24">
{% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zobrazit starši' %}
</div>
</div>
context:
instagram_section_title: 'Co právě děláme'
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<main role="main"> <main role="main">
{% include 'patterns/molecules/menus/carousel.html' %} {% include 'patterns/molecules/menus/carousel.html' %}
{% include 'patterns/organisms/main_section/twitter_section.html' %} {% include 'patterns/organisms/main_section/instagram_section.html' %}
{% include 'patterns/organisms/articles/articles_section.html' %} {% include 'patterns/organisms/articles/articles_section.html' %}
{% include 'patterns/organisms/main_section/representatives_section.html' %} {% include 'patterns/organisms/main_section/representatives_section.html' %}
{% include 'patterns/organisms/main_section/region_section.html' %} {% include 'patterns/organisms/main_section/region_section.html' %}
......
...@@ -109,6 +109,7 @@ module.exports = { ...@@ -109,6 +109,7 @@ module.exports = {
'twitter': '#00c9ff', 'twitter': '#00c9ff',
'gmail': '#ec230e', 'gmail': '#ec230e',
'linkedin': '#0066a9', 'linkedin': '#0066a9',
'instagram': '#d93f70',
}, },
'blue': { 'blue': {
'100': '#abcdef', '100': '#abcdef',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment