feat: Responsiveness for lists

- New style for lists
- Change index list layout

source/screens/demo/index.liquid

@@ -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,8 +42,10 @@ tags:
 				{% endfor %}
 			</ul>
 		</nav>
+		<div class="responsive">
+			<section>
 				<h3>Page</h3>
-		<ul class="list_link">
+				<ul class="block list_link">
 					{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
 
 					{% for link in pagesByTitle %}
@@ -52,14 +54,18 @@ tags:
 						</li>
 					{% endfor %}
 				</ul>
+			</section>
+			<section>
 				<h3>Example</h3>
-		<ul class="list_link">
+				<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 %}

source/style/hippie-style

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

source/style/modules/demo/_demo_module.scss

@@ -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;
+			}
 		}
 	}
 }