Instantly share code, notes, and snippets.

Mario Hernandez mariohernandez

View GitHub Profile
View main-menu-include.twig
{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
]
%}
{% set attributes = attributes.addClass(classes) %}
{% embed '@sixflags_theme/main-menu/main-menu.twig' with {
attributes: attributes,
View main-menu.twig
{% macro main_menu_tree(items, attributes, menu_level, menu_name) %}
{% import _self as menu %}
{% if items %}
{% if menu_level == 0 %}
<ul class="main-menu__menu{{ attributes.class ? ' ' ~ attributes.class }}"
{{- attributes ? attributes.without(class) }}>
{% else %}
<ul class="main-menu__menu--sublinks" id="{{ menu_name }}-{{ menu_level }}">
{% endif %}
{% for item in items %}
View menu.html.twig
{% import _self as menus %}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
{% import _self as menus %}
{% if items %}
{% if menu_level == 0 %}
<ul{{ attributes }}>
{% else %}
View twig-debug-mode-output.html
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'menu__main' -->
<!-- FILE NAME SUGGESTIONS:
* menu--main.html.twig
x menu.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/navigation/menu.html.twig' -->
View main-menu-component.twig
<nav class="main-menu">
<ul class="main-menu__items">
{% for item in items %}
<li class="main-menu__item{{ item.below ? ' has-submenu' }}">
<a class="main-menu__item--link" href="{{ item.url }}">
{{ item.title }}
</a>
{% if item.below %}
<ul class="main-menu__sub-menu" id="main-menu">
{% for sublink in item.below.items %}
View movie-card.scss
// Import site utilities.
@import '../../global/utils/init';
.movie-card {
background: $color-black;
color: $color-white;
height: 250px;
max-width: 420px;
overflow: hidden;
position: relative;
View movie-card.yml
cover_image: <img src='/sites/default/files/action-3.jpg' alt='' />
heading:
title: "I love this movie"
url: "#"
heading_level: 4
modifier:
movie-card__header
average_rating: "3"
mpaa_rating: "PG-13"
synopsis: "Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna."
View movie-card.twig
<article class="movie-card {{ modifier_class }}"
{{ attributes ? attributes.class }}"
{{ attributes ? attributes|without(class) }}>
{{ title_prefix }}
{{ title_suffix }}
{% if cover_image %}
<div class="movie-card__cover-image">
{{ cover_image }}
</div>
{% endif %}
View featured-movie.scss
View card.css
.card {
width: 300px;
background: #fff;
transition: box-shadow 0.3s ease-in-out;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
/* Add box shadow to entire card on hover */
.card:hover {
box-shadow: 0 1px 35px 0 rgba(0, 0, 0, 0.3);