interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Responsiveness for lists

Browse source 
- New style for lists
- Change index list layout
This commit is contained in:
sthag 2026-03-08 14:42:16 +01:00
parent dd8b461034
commit 3ae1cebdd6
3 changed files with 37 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

42
source/screens/demo/index.liquid
View file

@ -34,7 +34,7 @@ tags:
<h3>Overview</h3>
</div>
<nav>
<ul class="list_link">
<ul class="block list_link">
{% for link in collections.demoIndex %}
<li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
@ -42,24 +42,30 @@ tags:
{% endfor %}
</ul>
</nav>
<h3>Page</h3>
<ul class="list_link">
{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
<div class="responsive">
<section>
<h3>Page</h3>
<ul class="block list_link">
{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
{% for link in pagesByTitle %}
<li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li>
{% endfor %}
</ul>
<h3>Example</h3>
<ul class="list_link">
{% for link in collections.demoExample %}
<li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li>
{% endfor %}
</ul>
{% for link in pagesByTitle %}
<li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li>
{% endfor %}
</ul>
</section>
<section>
<h3>Example</h3>
<ul class="block list_link">
{% for link in collections.demoExample %}
<li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li>
{% endfor %}
</ul>
</section>
</div>
</div>
</div>
{% endblock %}

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit ddedf3bbf2d6580dfeae297367fd673abaa11a96
Subproject commit 45bb274db110db9d111207940c4e6e341da1e90c

15
source/style/modules/demo/_demo_module.scss
View file

@ -281,10 +281,19 @@
.hello {
flex: 0 1 auto;
width: 80%;
}
ul {
padding: 1em 5em;
background-color: hippie.$color_darker;
.responsive {
@include hippie.forTabletPortraitUp {
display: flex;
flex-flow: row wrap;
align-items: stretch;
justify-content: space-between;
gap: hippie.$space_half hippie.$space_basic;
& > * {
flex: auto;
}
}
}
}