zippy-8.x-1.x-dev/templates/layout/page.html.twig

{#
/**
 * @file
 * Zurb Foundations's theme implementation to display a single page.
 *
 * Available variables:
 *
 * General utility variables:
 * - base_path: The base URL path of the Drupal installation. Will usually be
 *   "/" unless you have installed Drupal in a sub-directory.
 * - is_front: A flag indicating if the current page is the front page.
 * - logged_in: A flag indicating if the user is registered and signed in.
 * - is_admin: A flag indicating if the user has permission to access
 *   administration pages.
 *
 * Site identity:
 * - front_page: The URL of the front page. Use this instead of base_path when
 *   linking to the front page. This includes the language domain or prefix.
 * - logo: The url of the logo image, as defined in theme settings.
 * - linked_logo: The logo image, linked to <front>.
 * - site_name: The name of the site. This is empty when displaying the site
 *   name has been disabled in the theme settings.
 * - linked_site_name: The name of the site that also links to <front>.
 * - site_slogan: The slogan of the site. This is empty when displaying the site
 *   slogan has been disabled in theme settings.
 * - hide_site_name: A flag indicating if the site name has been toggled off on
 *   the theme settings page. If hidden, the "visually-hidden" class is added
 *   to make the site name visually hidden, but still accessible.
 * - hide_site_slogan: A flag indicating if the site slogan has been toggled off
 *   on the theme settings page. If hidden, the "visually-hidden" class is
 *   added to make the site slogan visually hidden, but still accessible.
 *
 * Page content (in order of occurrence in the default page.html.twig):
 * - messages: Status and error messages. Should be displayed prominently.
 * - node: Fully loaded node, if there is an automatically-loaded node
 *   associated with the page and the node ID is the second argument in the
 *   page's path (e.g. node/12345 and node/12345/revisions, but not
 *   comment/reply/12345).
 *
 * Regions:
 * - page.meta_header
 * - page.header
 * - page.help
 * - page.highlighted
 * - page.content
 * - page.sidebar_first
 * - page.sidebar_second
 * - page.footer_first
 * - page.footer_middle
 * - page.footer_last
 *
 * @see template_preprocess_page()
 * @see bartik_preprocess_page()
 * @see html.html.twig
 */
#}

<div class="off-canvas-wrapper">
  <div class="inner-wrap off-canvas-wrapper-inner" id="inner-wrap" data-off-canvas-wrapper>
    <aside id="left-off-canvas-menu" class="off-canvas left-off-canvas-menu position-left" role="complementary" data-off-canvas>
      {{ page.left_off_canvas }}
    </aside>

    <aside id="right-off-canvas-menu" class="off-canvas right-off-canvas-menu position-right" role="complementary" data-off-canvas>
      {{ page.right_off_canvas }}
    </aside>

    <div class="off-canvas-content" data-off-canvas-content>
      {% if page.meta_header %}
        {% if meta_header_grid %}
          <div class="row">
            <div class="large-12 columns">
        {% endif %}
        {{ page.meta_header }}
        {% if meta_header_grid %}
            </div>
          </div>
        {% endif %}
      {% endif %}

      {% include '@zippy/includes/header.html.twig' %}

      <div class="row">
        {% if show_account_info %}
          <div class="{{ site_slogan ? 'large-6' : 'large-4 columns large-offset-8' }} columns hide-for-small">
            <p>
              {% if logged_in %}
                <a href="{{ path('user.page') }}">{{ 'My Account'|t }}</a>
                <a href="{{ path('user.logout') }}">{{ 'Logout'|t }}</a>
              {% else %}
                <a href="{{ path('user.login') }}">{{ 'Login'|t }}</a>
                <a href="{{ path('user.register') }}">{{ 'Sign Up'|t }}</a>
              {% endif %}
            </p>
          </div>
        {% endif %}
        {% if site_slogan %}
          <div class="large-6 columns hide-for-small">
            {{ site_slogan }}
          </div>
        {% endif %}
        {% if show_account_info %}
          <div class="show-for-small">
            <div class="six mobile-two columns">
              <p>
                <a href="{{ path('user.login') }}" class="radius button">{{ 'Login'|t }}</a>
              </p>
            </div>
            <div class="six mobile-two columns">
              <p>
                <a href="{{ path('user.register') }}" class="radius success button">{{ 'Sign Up'|t }}</a>
              </p>
            </div>
          </div>
        {% endif %}
      </div>

      {% if messages and not zurb_foundation_messages_modal %}
      <div class="l-messages row">
        <div class="large-12 columns">
          {{ messages }}
        </div>
      </div>
      {% endif %}

      {% if page.help %}
      <div class="l-help row">
        <div class="large-12 columns">
          {{ page.help }}
        </div>
      </div>
      {% endif %}

      <div class="row">
        {% if page.home_slider %}
          <section class="smal-12 medium-12 large-12 columns">
            {{ page.home_slider }}
          </section>
        {% endif %}

        {% if page.top_content_without_sidebar %}
          <section class="smal-12 medium-12 large-12 columns no-sidebar-top-content">
            {{ page.top_content_without_sidebar }}
          </section>
        {% endif %}
        <main id="main" class="{{ main_grid }} columns" role="main">
          {% if page.highlighted %}
            {% spaceless %}
              {{ page.highlighted }}
            {% endspaceless %}
          {% endif %}
          <a id="main-content"></a>
          {% if breadcrumb %} {{ breadcrumb }} {% endif %}
          <section>
            {{ page.content }}
          </section>
        </main>

        {% if page.sidebar_first %}
          <div id="sidebar-first" class="{{ sidebar_first_grid }} columns sidebar ">
            {{ page.sidebar_first }}
          </div>
        {% endif %}
        {% if page.sidebar_second %}
          <div id="sidebar-second" class="{{ sidebar_sec_grid }} columns sidebar">
            {{ page.sidebar_second }}
          </div>
        {% endif %}

        {% if page.bottom_content_without_sidebar %}
          <section class="smal-12 medium-12 large-12 columns no-sidebar-bottom-content">
            {{ page.bottom_content_without_sidebar }}
          </section>
        {% endif %}
      </div>

      <div class="blast-box">
        <div class="blast-icon"><i class="fa fa-cog fa-spin"></i></div>
        <div class="blast-frame">
          <p>Change text color</p>
          <div class="blast-colors">
            <div class="blast-color">#FFFFFF</div>
            <div class="blast-color">#555555</div>
            <div class="blast-color">#ca4400</div>
            <div class="blast-color">#3D261A</div>
            <div class="blast-color">#B6B254</div>
            <div class="blast-color">#6B2E56</div>
          </div>
          <p class="blast-custom-colors">Custom text colors</p>
          <input type="color" name="blastCustomColor" value="#cf2626" placeholder="color code...">

          <p>Change background color</p>
          <div class="blast-colors">
            <div class="blast-bg-color">#FFFFFF</div>
            <div class="blast-bg-color">#555555</div>
            <div class="blast-bg-color">#ca4400</div>
            <div class="blast-bg-color">#3D261A</div>
            <div class="blast-bg-color">#B6B254</div>
            <div class="blast-bg-color">#6B2E56</div>
          </div>

          <p class="blast-custom-colors">Custom background colors</p>
          <input type="color" name="blastCustomBgColor" value="#cf2626" placeholder="color code...">
        </div>
      </div>

      {% include '@zippy/includes/footer.html.twig' %}

    </div>
  </div>
</div>