diff --git a/404.html b/404.html index 2f296ed..aa763bd 100644 --- a/404.html +++ b/404.html @@ -21,7 +21,7 @@
- + \ No newline at end of file diff --git a/assets/introduction.md.BiMdkVLd.js b/assets/introduction.md.BpzFD954.js similarity index 98% rename from assets/introduction.md.BiMdkVLd.js rename to assets/introduction.md.BpzFD954.js index 005bef7..fd5d685 100644 --- a/assets/introduction.md.BiMdkVLd.js +++ b/assets/introduction.md.BpzFD954.js @@ -1,4 +1,4 @@ -import{_ as t,c as n,j as i,a as l,t as h,a0 as e,o as k}from"./chunks/framework.BsBGiIpp.js";const u=JSON.parse('{"title":"Introduction","description":"","frontmatter":{"title":"Introduction"},"headers":[],"relativePath":"introduction.md","filePath":"introduction.md"}'),p={name:"introduction.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,y,o){return k(),n("div",null,[i("h1",E,[l(h(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`

What does Vue Structural Headings do? ​

It provides two components and optionally compoasables to help you build semantic HTML structure.

ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline

ContentContainer ​

The ContentContainer is used to display the depth of the page structure.

With each nested ContentContainer, the page structure becomes one level deeper (level).

The appropriate HTML element for the page structure is determined based on the level.

ContentHeadline ​

The ContentHeadline is used to display the heading structure.

The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.

Example ​

vue
<template>
+import{_ as t,c as n,j as i,a as l,t as h,a0 as e,o as k}from"./chunks/framework.BsBGiIpp.js";const u=JSON.parse('{"title":"Introduction","description":"","frontmatter":{"title":"Introduction"},"headers":[],"relativePath":"introduction.md","filePath":"introduction.md"}'),p={name:"introduction.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,y,o){return k(),n("div",null,[i("h1",E,[l(h(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
What does Vue Structural Headings do? ​
It provides two components and optionally compoasables to help you build semantic HTML structure.
ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline
ContentContainer ​
The ContentContainer is used to display the depth of the page structure.
With each nested ContentContainer, the page structure becomes one level deeper (level).
The appropriate HTML element for the page structure is determined based on the level.
ContentHeadline ​
The ContentHeadline is used to display the heading structure.
The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.
Example ​
vue
<template>
   <div>
     <header>Header</header>
     <ContentContainer>
diff --git a/assets/introduction.md.BiMdkVLd.lean.js b/assets/introduction.md.BpzFD954.lean.js
similarity index 98%
rename from assets/introduction.md.BiMdkVLd.lean.js
rename to assets/introduction.md.BpzFD954.lean.js
index 005bef7..fd5d685 100644
--- a/assets/introduction.md.BiMdkVLd.lean.js
+++ b/assets/introduction.md.BpzFD954.lean.js
@@ -1,4 +1,4 @@
-import{_ as t,c as n,j as i,a as l,t as h,a0 as e,o as k}from"./chunks/framework.BsBGiIpp.js";const u=JSON.parse('{"title":"Introduction","description":"","frontmatter":{"title":"Introduction"},"headers":[],"relativePath":"introduction.md","filePath":"introduction.md"}'),p={name:"introduction.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,y,o){return k(),n("div",null,[i("h1",E,[l(h(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
What does Vue Structural Headings do? ​
It provides two components and optionally compoasables to help you build semantic HTML structure.
ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline
ContentContainer ​
The ContentContainer is used to display the depth of the page structure.
With each nested ContentContainer, the page structure becomes one level deeper (level).
The appropriate HTML element for the page structure is determined based on the level.
ContentHeadline ​
The ContentHeadline is used to display the heading structure.
The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.
Example ​
vue
<template>
+import{_ as t,c as n,j as i,a as l,t as h,a0 as e,o as k}from"./chunks/framework.BsBGiIpp.js";const u=JSON.parse('{"title":"Introduction","description":"","frontmatter":{"title":"Introduction"},"headers":[],"relativePath":"introduction.md","filePath":"introduction.md"}'),p={name:"introduction.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,y,o){return k(),n("div",null,[i("h1",E,[l(h(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
What does Vue Structural Headings do? ​
It provides two components and optionally compoasables to help you build semantic HTML structure.
ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline
ContentContainer ​
The ContentContainer is used to display the depth of the page structure.
With each nested ContentContainer, the page structure becomes one level deeper (level).
The appropriate HTML element for the page structure is determined based on the level.
ContentHeadline ​
The ContentHeadline is used to display the heading structure.
The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.
Example ​
vue
<template>
   <div>
     <header>Header</header>
     <ContentContainer>
diff --git a/assets/setup.md.CQaH6Dt3.js b/assets/setup.md.CRryCxb2.js
similarity index 76%
rename from assets/setup.md.CQaH6Dt3.js
rename to assets/setup.md.CRryCxb2.js
index 983ba6f..61e2d8c 100644
--- a/assets/setup.md.CQaH6Dt3.js
+++ b/assets/setup.md.CRryCxb2.js
@@ -1 +1 @@
-import{_ as e,c as i,j as t,a as n,t as l,a0 as p,o as r}from"./chunks/framework.BsBGiIpp.js";const v=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"setup.md","filePath":"setup.md"}'),d={name:"setup.md"},o={id:"frontmatter-title",tabindex:"-1"};function h(s,a,c,u,k,b){return r(),i("div",null,[t("h1",o,[n(l(s.$frontmatter.title)+" ",1),a[0]||(a[0]=t("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),a[1]||(a[1]=p('
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure
',3))])}const m=e(d,[["render",h]]);export{v as __pageData,m as default};
+import{_ as e,c as i,j as t,a as n,t as l,a0 as p,o as d}from"./chunks/framework.BsBGiIpp.js";const v=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"setup.md","filePath":"setup.md"}'),r={name:"setup.md"},o={id:"frontmatter-title",tabindex:"-1"};function h(s,a,c,u,k,b){return d(),i("div",null,[t("h1",o,[n(l(s.$frontmatter.title)+" ",1),a[0]||(a[0]=t("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),a[1]||(a[1]=p('
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure
',3))])}const m=e(r,[["render",h]]);export{v as __pageData,m as default};
diff --git a/assets/setup.md.CQaH6Dt3.lean.js b/assets/setup.md.CRryCxb2.lean.js
similarity index 76%
rename from assets/setup.md.CQaH6Dt3.lean.js
rename to assets/setup.md.CRryCxb2.lean.js
index 983ba6f..61e2d8c 100644
--- a/assets/setup.md.CQaH6Dt3.lean.js
+++ b/assets/setup.md.CRryCxb2.lean.js
@@ -1 +1 @@
-import{_ as e,c as i,j as t,a as n,t as l,a0 as p,o as r}from"./chunks/framework.BsBGiIpp.js";const v=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"setup.md","filePath":"setup.md"}'),d={name:"setup.md"},o={id:"frontmatter-title",tabindex:"-1"};function h(s,a,c,u,k,b){return r(),i("div",null,[t("h1",o,[n(l(s.$frontmatter.title)+" ",1),a[0]||(a[0]=t("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),a[1]||(a[1]=p('
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure
',3))])}const m=e(d,[["render",h]]);export{v as __pageData,m as default};
+import{_ as e,c as i,j as t,a as n,t as l,a0 as p,o as d}from"./chunks/framework.BsBGiIpp.js";const v=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"setup.md","filePath":"setup.md"}'),r={name:"setup.md"},o={id:"frontmatter-title",tabindex:"-1"};function h(s,a,c,u,k,b){return d(),i("div",null,[t("h1",o,[n(l(s.$frontmatter.title)+" ",1),a[0]||(a[0]=t("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),a[1]||(a[1]=p('
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure
',3))])}const m=e(r,[["render",h]]);export{v as __pageData,m as default};
diff --git a/assets/usage.md.CTpmMplF.js b/assets/usage.md.vy8U9M_X.js
similarity index 96%
rename from assets/usage.md.CTpmMplF.js
rename to assets/usage.md.vy8U9M_X.js
index 092451d..3fd9436 100644
--- a/assets/usage.md.CTpmMplF.js
+++ b/assets/usage.md.vy8U9M_X.js
@@ -1,4 +1,4 @@
-import{_ as t,c as n,j as i,a as h,t as l,a0 as e,o as k}from"./chunks/framework.BsBGiIpp.js";const u=JSON.parse('{"title":"Usage","description":"","frontmatter":{"title":"Usage"},"headers":[],"relativePath":"usage.md","filePath":"usage.md"}'),p={name:"usage.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,o,y){return k(),n("div",null,[i("h1",E,[h(l(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
+import{_ as t,c as n,j as i,a as l,t as h,a0 as e,o as k}from"./chunks/framework.BsBGiIpp.js";const u=JSON.parse('{"title":"Usage","description":"","frontmatter":{"title":"Usage"},"headers":[],"relativePath":"usage.md","filePath":"usage.md"}'),p={name:"usage.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,o,y){return k(),n("div",null,[i("h1",E,[l(h(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
   <ContentContainer>
     <header class="hero">…</header>
     <ContentContainer class="text-image">…</ContentContainer>
@@ -20,7 +20,7 @@ import{_ as t,c as n,j as i,a as h,t as l,a0 as e,o as k}from"./chunks/framework
 
 <script setup>
 import { ContentContainer } from 'vue-semantic-structure';
-</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
+</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
   <CustomContentContainer>
     <CustomContentContainer>
       <header class="hero">…</header>
diff --git a/assets/usage.md.CTpmMplF.lean.js b/assets/usage.md.vy8U9M_X.lean.js
similarity index 96%
rename from assets/usage.md.CTpmMplF.lean.js
rename to assets/usage.md.vy8U9M_X.lean.js
index 092451d..3fd9436 100644
--- a/assets/usage.md.CTpmMplF.lean.js
+++ b/assets/usage.md.vy8U9M_X.lean.js
@@ -1,4 +1,4 @@
-import{_ as t,c as n,j as i,a as h,t as l,a0 as e,o as k}from"./chunks/framework.BsBGiIpp.js";const u=JSON.parse('{"title":"Usage","description":"","frontmatter":{"title":"Usage"},"headers":[],"relativePath":"usage.md","filePath":"usage.md"}'),p={name:"usage.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,o,y){return k(),n("div",null,[i("h1",E,[h(l(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
+import{_ as t,c as n,j as i,a as l,t as h,a0 as e,o as k}from"./chunks/framework.BsBGiIpp.js";const u=JSON.parse('{"title":"Usage","description":"","frontmatter":{"title":"Usage"},"headers":[],"relativePath":"usage.md","filePath":"usage.md"}'),p={name:"usage.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,o,y){return k(),n("div",null,[i("h1",E,[l(h(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
   <ContentContainer>
     <header class="hero">…</header>
     <ContentContainer class="text-image">…</ContentContainer>
@@ -20,7 +20,7 @@ import{_ as t,c as n,j as i,a as h,t as l,a0 as e,o as k}from"./chunks/framework
 
 <script setup>
 import { ContentContainer } from 'vue-semantic-structure';
-</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
+</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
   <CustomContentContainer>
     <CustomContentContainer>
       <header class="hero">…</header>
diff --git a/components/content-container.html b/components/content-container.html
index 92040cb..57e1f9a 100644
--- a/components/content-container.html
+++ b/components/content-container.html
@@ -50,7 +50,7 @@
     </section>
   </article>
 </main>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/components/content-headline.html b/components/content-headline.html
index 08a4d9b..e47e915 100644
--- a/components/content-headline.html
+++ b/components/content-headline.html
@@ -50,7 +50,7 @@
     </section>
   </article>
 </main>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/composables/use-content-container.html b/composables/use-content-container.html
index 014076c..b3de3d3 100644
--- a/composables/use-content-container.html
+++ b/composables/use-content-container.html
@@ -35,7 +35,7 @@
 
 const { currentTag } = useContentContainer();
 </script>
Options ​
PropertyTypeDescriptionDefault Value
tagStringCan be used to overwrite the tag.undefined
contentTagsArrayAvailable tags for the content structure.inject('semanticStructure_contentTags', ['article', 'section'])
rootTagsArrayAvailable tags for the root structure.inject('semanticStructure_rootTags', ['main'])
levelNumberCan be used to overwrite the level.undefined
Return ​
PropertyTypeDescription
currentTagStringGet current html tag.
parentLevelNumberGet parent level.
currentLevelNumberGet current level.
- + \ No newline at end of file diff --git a/composables/use-content-headline.html b/composables/use-content-headline.html index b176984..bb2909a 100644 --- a/composables/use-content-headline.html +++ b/composables/use-content-headline.html @@ -34,7 +34,7 @@ const { currentTag } = useContentHeadline(); </script>

Options ​

PropertyTypeDescriptionDefault Value
tagStringTag for the elementundefined

Return ​

PropertyTypeDescription
currentTagStringGet current html tag.
currentLevelNumberGet current level.
- + \ No newline at end of file diff --git a/hashmap.json b/hashmap.json index 3ed5752..2f51ba7 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"components_content-container.md":"C0gocDs-","components_content-headline.md":"CXw_6C-A","composables_use-content-container.md":"20aH28RX","composables_use-content-headline.md":"v7LChATU","index.md":"cwZC9SBd","introduction.md":"BiMdkVLd","setup.md":"CQaH6Dt3","usage.md":"CTpmMplF"} +{"components_content-container.md":"C0gocDs-","components_content-headline.md":"CXw_6C-A","composables_use-content-container.md":"20aH28RX","composables_use-content-headline.md":"v7LChATU","index.md":"cwZC9SBd","introduction.md":"BpzFD954","setup.md":"CRryCxb2","usage.md":"vy8U9M_X"} diff --git a/index.html b/index.html index a2a71a3..0c22db8 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

Appearance

Vue Semantic Structure

Helper for semantic HTML structure.

Introduction
Live Example
VitePress

Automated

Automatic heading levels (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`)

Standard

Standardize the headline structure on large projects.

HTML Structure

Easy way to build sematic html structure (`main`, `article`, `section`)

- + \ No newline at end of file diff --git a/introduction.html b/introduction.html index 04c8550..400319d 100644 --- a/introduction.html +++ b/introduction.html @@ -11,7 +11,7 @@ - + @@ -23,7 +23,7 @@ -

Appearance

Introduction ​

What does Vue Structural Headings do? ​

It provides two components and optionally compoasables to help you build semantic HTML structure.

ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline

ContentContainer ​

The ContentContainer is used to display the depth of the page structure.

With each nested ContentContainer, the page structure becomes one level deeper (level).

The appropriate HTML element for the page structure is determined based on the level.

ContentHeadline ​

The ContentHeadline is used to display the heading structure.

The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.

Example ​

vue
<template>
+    
Appearance
Introduction ​
What does Vue Structural Headings do? ​
It provides two components and optionally compoasables to help you build semantic HTML structure.
ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline
ContentContainer ​
The ContentContainer is used to display the depth of the page structure.
With each nested ContentContainer, the page structure becomes one level deeper (level).
The appropriate HTML element for the page structure is determined based on the level.
ContentHeadline ​
The ContentHeadline is used to display the heading structure.
The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.
Example ​
vue
<template>
   <div>
     <header>Header</header>
     <ContentContainer>
@@ -82,7 +82,7 @@
   </main>
   <footer>Footer</footer>
 </div>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/setup.html b/setup.html
index 5f0c2f1..997f77a 100644
--- a/setup.html
+++ b/setup.html
@@ -11,7 +11,7 @@
     
     
     
-    
+    
     
     
     
@@ -23,8 +23,8 @@
     
   
   
-    
Appearance
Setup ​
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure

-    
+    
Appearance
Setup ​
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure

+    
     
   
 
\ No newline at end of file
diff --git a/usage.html b/usage.html
index e9b3a49..3fc8aca 100644
--- a/usage.html
+++ b/usage.html
@@ -11,7 +11,7 @@
     
     
     
-    
+    
     
     
     
@@ -23,7 +23,7 @@
     
   
   
-    
Appearance
Usage ​
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
+    
Appearance
Usage ​
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
   <ContentContainer>
     <header class="hero">…</header>
     <ContentContainer class="text-image">…</ContentContainer>
@@ -45,7 +45,7 @@
 
 <script setup>
 import { ContentContainer } from 'vue-semantic-structure';
-</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
+</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
   <CustomContentContainer>
     <CustomContentContainer>
       <header class="hero">…</header>
@@ -64,7 +64,7 @@
     <section class="gallery">…</section>
   </article>
 </main>

-    
+    
     
   
 
\ No newline at end of file