ordered content in aside for accordions

This commit is contained in:
jorge 2021-07-06 11:07:07 +02:00
parent 11876929d2
commit 7500b4bf28
2 changed files with 371 additions and 332 deletions

View File

@ -1,4 +1,3 @@
//content {
// general styles // general styles
//---------------- //----------------
@ -149,6 +148,7 @@
.collections-list { .collections-list {
@include xy-grid; @include xy-grid;
width:100vw;
header,main{ header,main{
@include xy-cell(12); @include xy-cell(12);
@include flex; @include flex;
@ -181,12 +181,26 @@
} }
} }
.accordion-content { .accordion-content {
@include xy-grid(12); section {
@include xy-grid;
@include breakpoint(small){
figure { figure {
@include xy-cell(4); @include xy-cell(12);
} }
p { p {
@include xy-cell(6); @include xy-cell(12);
}
}
@include breakpoint(medium){
figure {
@include xy-cell(3);
}
p {
@include xy-cell(9);
}
}
@include breakpoint(large){
}
} }
} }
} }
@ -357,5 +371,10 @@
} }
//end hero //end hero
//} // omeka specific styles
// end content #user-bar {
width: 100%;
}
//end omeka specific styles

View File

@ -17,10 +17,12 @@
</ul> </ul>
</a> </a>
<aside class="accordion-content" data-tab-content> <aside class="accordion-content" data-tab-content>
<section>
<figure> <figure>
</figure> </figure>
<p> <p>
</p> </p>
</section>
</aside> </aside>
</li> </li>
<li class="accordion-item" data-accordion-item> <li class="accordion-item" data-accordion-item>
@ -33,9 +35,13 @@
</ul> </ul>
</a> </a>
<aside class="accordion-content" data-tab-content> <aside class="accordion-content" data-tab-content>
<section>
<figure> <figure>
</figure> </figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p> <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?
</p>
</section>
</aside> </aside>
</li> </li>
@ -49,12 +55,18 @@
</ul> </ul>
</a> </a>
<aside class="accordion-content" data-tab-content> <aside class="accordion-content" data-tab-content>
<section>
<figure>
<img src="https://dev-archive.hangar.org/files/large/81/3D-Panoramic-Landscape-Image-768x288.jpg"> <img src="https://dev-archive.hangar.org/files/large/81/3D-Panoramic-Landscape-Image-768x288.jpg">
<p>You can extend the functionality of Omeka S by writing an add-on component called a module. Zend Framework provides a substantial framework for writing modules, but Omeka S provides extra structure that makes the modules installable, upgradeable, and integratable. You can extend the functionality of Omeka S by writing an add-on component called a module. Zend Framework provides a substantial framework for writing modules, but Omeka S provides extra structure that makes the modules installable, upgradeable, and integratable.</p> </figure>
<p>
You can extend the functionality of Omeka S by writing an add-on component called a module. Zend Framework provides a substantial framework for writing modules, but Omeka S provides extra structure that makes the modules installable, upgradeable, and integratable. You can extend the functionality of Omeka S by writing an add-on component called a module. Zend Framework provides a substantial framework for writing modules, but Omeka S provides extra structure that makes the modules installable, upgradeable, and integratable.
<br> <br>
<button class="go_to_site_button" onclick="window.location.href = '/s/modules'"> <button class="go_to_site_button" onclick="window.location.href = '/s/modules'">
View View
</button> </button>
</p>
</section>
</aside> </aside>
</li> </li>
<li class="accordion-item" data-accordion-item> <li class="accordion-item" data-accordion-item>
@ -67,14 +79,18 @@
</ul> </ul>
</a> </a>
<aside class="accordion-content" data-tab-content> <aside class="accordion-content" data-tab-content>
<section>
<figure>
</figure>
<p>
Here, some footnotes of structural imagination <br> Here, some footnotes of structural imagination <br>
<button class="go_to_site_button" onclick="window.location.href = '/s/trees-and-cells'"> <button class="go_to_site_button" onclick="window.location.href = '/s/trees-and-cells'">
View View
</button> </button>
</p>
</section>
</aside> </aside>
</li> </li>
<li class="accordion-item" data-accordion-item> <li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title"> <a href="#" class="accordion-title">
<ul class=""> <ul class="">
@ -85,6 +101,7 @@
</ul> </ul>
</a> </a>
<aside class="accordion-content" data-tab-content> <aside class="accordion-content" data-tab-content>
<section>
<figure> <figure>
</figure> </figure>
<p> <p>
@ -92,6 +109,7 @@
View View
</button> </button>
</p> </p>
</section>
</aside> </aside>
</li> </li>
<li class="accordion-item" data-accordion-item> <li class="accordion-item" data-accordion-item>
@ -104,6 +122,7 @@
</ul> </ul>
</a> </a>
<aside class="accordion-content" data-tab-content> <aside class="accordion-content" data-tab-content>
<section>
<figure> <figure>
<img src="https://dev-archive.hangar.org/files/large/89/scary-werewolf.jpg"> <img src="https://dev-archive.hangar.org/files/large/89/scary-werewolf.jpg">
</figure> </figure>
@ -113,6 +132,7 @@
View View
</button> </button>
</p> </p>
</section>
</aside> </aside>
</li> </li>
</ul> </ul>