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
//----------------
@ -149,6 +148,7 @@
.collections-list {
@include xy-grid;
width:100vw;
header,main{
@include xy-cell(12);
@include flex;
@ -181,12 +181,26 @@
}
}
.accordion-content {
@include xy-grid(12);
section {
@include xy-grid;
@include breakpoint(small){
figure {
@include xy-cell(4);
@include xy-cell(12);
}
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 content
// omeka specific styles
#user-bar {
width: 100%;
}
//end omeka specific styles

View File

@ -17,10 +17,12 @@
</ul>
</a>
<aside class="accordion-content" data-tab-content>
<section>
<figure>
</figure>
<p>
</p>
</section>
</aside>
</li>
<li class="accordion-item" data-accordion-item>
@ -33,9 +35,13 @@
</ul>
</a>
<aside class="accordion-content" data-tab-content>
<section>
<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>
</li>
@ -49,12 +55,18 @@
</ul>
</a>
<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">
<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>
<button class="go_to_site_button" onclick="window.location.href = '/s/modules'">
View
</button>
</p>
</section>
</aside>
</li>
<li class="accordion-item" data-accordion-item>
@ -67,14 +79,18 @@
</ul>
</a>
<aside class="accordion-content" data-tab-content>
<section>
<figure>
</figure>
<p>
Here, some footnotes of structural imagination <br>
<button class="go_to_site_button" onclick="window.location.href = '/s/trees-and-cells'">
View
</button>
</p>
</section>
</aside>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<ul class="">
@ -85,6 +101,7 @@
</ul>
</a>
<aside class="accordion-content" data-tab-content>
<section>
<figure>
</figure>
<p>
@ -92,6 +109,7 @@
View
</button>
</p>
</section>
</aside>
</li>
<li class="accordion-item" data-accordion-item>
@ -104,6 +122,7 @@
</ul>
</a>
<aside class="accordion-content" data-tab-content>
<section>
<figure>
<img src="https://dev-archive.hangar.org/files/large/89/scary-werewolf.jpg">
</figure>
@ -113,6 +132,7 @@
View
</button>
</p>
</section>
</aside>
</li>
</ul>