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,22 +1,21 @@
//content {
// general styles // general styles
//---------------- //----------------
// //
// mods on fonts and typography // mods on fonts and typography
// not in foundation variables // not in foundation variables
// ----------------------------- // -----------------------------
h1,h2,h3,h4,h5,h6, h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6, .h1,.h2,.h3,.h4,.h5,.h6,
button,.button, button,.button,
header nav { header nav {
font-variant:all-small-caps; font-variant:all-small-caps;
a { a {
color: $body-font-color; color: $body-font-color;
} }
} }
.excerpt,.post-excerpt{ .excerpt,.post-excerpt{
a { a {
color: $body-font-color; color: $body-font-color;
&:hover { &:hover {
@ -25,14 +24,14 @@
} }
} }
} }
} }
// //
// main block // main block
//-------------- //--------------
main { main {
article { article {
@include xy-grid; @include xy-grid;
header { header {
@ -63,14 +62,14 @@
} }
} }
} }
} }
// //
// news category // news category
//-------------- //--------------
.news,.news-category { .news,.news-category {
@include xy-grid; @include xy-grid;
header,main,aside { header,main,aside {
@include breakpoint(small){ @include breakpoint(small){
@ -139,16 +138,17 @@
} }
} }
} }
// end news category // end news category
// //
// collections category // collections category
//-------------- //--------------
.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,20 +181,34 @@
} }
} }
.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){
} }
} }
} }
// end collections category }
// end collections category
// partners // partners
// for big announcemnts // for big announcemnts
//--------------------- //---------------------
.partners { .partners {
.entry-content { .entry-content {
@ -221,15 +235,15 @@
margin: 0; margin: 0;
} }
} }
} }
// //
// hero // hero
// for big announcemnts // for big announcemnts
//--------------------- //---------------------
.hero { .hero {
border-top: 2px solid $primary-color; border-top: 2px solid $primary-color;
.slides { .slides {
@include xy-grid(); @include xy-grid();
@ -354,8 +368,13 @@
} }
} }
} }
} }
//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>