1--- 2layout: page 3header: false 4full_width: true 5article_header: 6 type: overlay 7 align: center 8 height: 80vh 9--- 10<div class="layout--landing"> 11 <div class="heros"> 12 {%- for _section in page.data.sections -%} 13 {%- include snippets/get-nav-url.html path=_section.background_image.src -%} 14 {%- assign _url = __return -%} 15 {%- if _section.theme == 'light' -%} 16 <section class="hero hero--center hero--light" id="hero-{{ forloop.index }}" 17 {%- elsif _section.theme == 'dark' -%} 18 <section class="hero hero--center hero--dark" id="hero-{{ forloop.index }}" 19 {%- else -%} 20 <section class="hero hero--center" id="hero-{{ forloop.index }}" 21 {%- endif -%} 22 {%- if _section.background_color -%} 23 style="background-image: url({{ _url }}); background-color: {{ _section.background_color }};"> 24 {%- else -%} 25 style="background-image: url({{ _url }});"> 26 {%- endif -%} 27 28 <div class="hero__content"> 29 <div class="mb-5"> 30 31 <h3>{{ _section.title }}</h3> 32 {%- if _section.excerpt-%} 33 <p>{{ _section.excerpt }}</p> 34 {%- endif -%} 35 36 {%- if _section.actions -%} 37 <ul class="menu"> 38 {%- for _action in _section.actions -%} 39 {%- include snippets/get-nav-url.html path=_action.url -%} 40 {%- assign _url = __return -%} 41 {%- assign _type = _action.type | default: 'outline-info' -%} 42 <li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li> 43 {%- endfor -%} 44 </ul> 45 {%- endif -%} 46 47 </div> 48 49 {%- if _section.children -%} 50 {%- assign _size = _section.children | size -%} 51 <div class="grid--container"> 52 <div class="grid grid--p-3"> 53 54 {%- for child in _section.children -%} 55 56 {%- if _size >= 2 -%} 57 {%- assign _cell_md_col = 6 -%} 58 {%- else -%} 59 {%- assign _cell_md_col = 12 | divided_by: _size -%} 60 {%- endif -%} 61 62 {%- if _size >= 4 -%} 63 {%- assign _cell_lg_col = 3 -%} 64 {%- else -%} 65 {%- assign _cell_lg_col = 12 | divided_by: _size -%} 66 {%- endif -%} 67 68 <div class="cell cell--12 cell--md-{{ _cell_md_col }} cell--lg-{{ _cell_lg_col }} "> 69 70 <div class="mb-5"> 71 <h4>{{ child.title }}</h4> 72 73 {%- if child.excerpt-%} 74 <p>{{ child.excerpt }}</p> 75 {%- endif -%} 76 77 {%- if child.actions -%} 78 <ul class="menu"> 79 {%- for _action in child.actions -%} 80 {%- include snippets/get-nav-url.html path=_action.url -%} 81 {%- assign _url = __return -%} 82 {%- assign _type = _action.type | default: 'outline-info' -%} 83 <li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li> 84 {%- endfor -%} 85 </ul> 86 {%- endif -%} 87 </div> 88 89 {%- if child.image and child.image.src -%} 90 91 {%- if child.image.url -%} 92 {%- include snippets/get-nav-url.html path=child.image.url -%} 93 {%- assign _item_image_url = __return -%} 94 {%- else -%} 95 {%- assign _item_image_url = nil -%} 96 {%- endif -%} 97 98 {%- include snippets/get-nav-url.html path=child.image.src -%} 99 {%- assign _item_image_src = __return -%} 100 101 {%- if child.image.is_row -%} 102 <div class="mb-5"> 103 {%- endif -%} 104 <div class="mx-auto" style="{{ child.image.style }}"> 105 {%- if _item_image_url -%} 106 <a href="{{ _item_image_url }}"> 107 {%- endif -%} 108 <img src="{{ _item_image_src }}"/> 109 {%- if _item_image_url -%} 110 </a> 111 {%- endif -%} 112 </div> 113 {%- if child.image.is_row -%} 114 </div> 115 {%- endif -%} 116 {%- endif -%} 117 118 {%- if child.content-%} 119 <p>{{ child.content }}</p> 120 {%- endif -%} 121 122 </div> 123 {%- endfor-%} 124 125 </div> 126 </div> 127 {%- endif -%} 128 129 {%- if _section.image.full_width == true -%} 130 </div> {% comment %} end hero__content {% endcomment %} 131 {%- endif -%} 132 133 {%- if _section.image and _section.image.src -%} 134 135 {%- if _section.image.url -%} 136 {%- include snippets/get-nav-url.html path=_section.image.url -%} 137 {%- assign _section_image_url = __return -%} 138 {%- else -%} 139 {%- assign _section_image_url = nil -%} 140 {%- endif -%} 141 142 {%- include snippets/get-nav-url.html path=_section.image.src -%} 143 {%- assign _section_image_src = __return -%} 144 145 {%- if _section.image.is_row -%} 146 <div class="mb-5"> 147 {%- endif -%} 148 <div class="mx-auto" style="{{ _section.image.style }}"> 149 {%- if _section_image_url -%} 150 <a href="{{ _section_image_url }}"> 151 {%- endif -%} 152 {%- if _section.image.full_width == true -%} 153 <img class="hero__cover hero__cover--full-width" src="{{ _section_image_src }}"/> 154 {%- else -%} 155 <img class="hero__cover" src="{{ _section_image_src }}"/> 156 {%- endif -%} 157 {%- if _section_image_url -%} 158 </a> 159 {%- endif -%} 160 </div> 161 {%- if _section.image.is_row -%} 162 </div> 163 {%- endif -%} 164 {%- endif -%} 165 166 {%- if _section.image.full_width != true -%} 167 </div> {% comment %} end hero__content {% endcomment %} 168 {%- endif -%} 169 170 {%- if _section.content-%} 171 <p>{{ _section.content }}</p> 172 {%- endif -%} 173 </section> 174 {%- endfor -%} 175 </div> 176</div> 177 178{{ content }}