@d-zero/scaffold 5.0.0-alpha.9 → 5.0.0-beta.1

package/__assets/_libs/component/{_c-nav-sitemap.scss → c-nav-sitemap.css}

@@ -1,26 +1,14 @@
-@use '../style/theme' as *;
-
 .c-nav-sitemap {
-	padding-block: 2em;
+	padding-block: 2rem;
 	padding-inline: 0;
 
 	@media (--xs-lte) {
 		padding: 0;
 	}
 
-	%list {
-		margin: 0;
-	}
-
-	%item {
-		display: block;
-		padding: 0;
-		margin: 0;
-	}
-
 	a {
 		display: block;
-		padding-inline-start: 2em;
+		padding-inline-start: 2rem;
 		color: inherit;
 		text-decoration: none;
 
@@ -30,21 +18,10 @@
 		}
 	}
 
-	&__body {
-		max-inline-size: var(--wide-layout-width);
-		margin-block: 0;
-		margin-inline: auto;
-		overflow: hidden;
-
-		@media (--md-lte) {
-			max-inline-size: 100%;
-		}
-	}
-
 	ul[data-sitemap-level='1'] {
-		@extend %list;
-		column-count: 4;
 		padding: 0;
+		margin: 0;
+		column-count: 4;
 
 		@media (--xs) {
 			column-count: 1;
@@ -60,9 +37,10 @@
 	}
 
 	li[data-sitemap-level='1'] {
-		@extend %item;
-		display: inline-block; // 💉 for columns item technic
-		inline-size: 100%; // 💉 for columns item technic
+		display: inline-block; /* 💉 for columns item technic */
+		inline-size: 100%; /* 💉 for columns item technic */
+		padding: 0;
+		margin: 0;
 		margin-block: 0 1em;
 		margin-inline: 0;
 		break-inside: avoid-column;
@@ -81,8 +59,8 @@
 	}
 
 	ul[data-sitemap-level='2'] {
-		@extend %list;
 		padding-inline-start: 1em;
+		margin: 0;
 
 		@media (--xs-lte) {
 			padding: 0;
@@ -90,7 +68,9 @@
 	}
 
 	li[data-sitemap-level='2'] {
-		@extend %item;
+		display: block;
+		padding: 0;
+		margin: 0;
 		margin-block: 0 0.5em;
 		margin-inline: 0;
 
@@ -115,8 +95,8 @@
 	}
 
 	ul[data-sitemap-level='3'] {
-		@extend %list;
 		padding-inline-start: 1em;
+		margin: 0;
 
 		@media (--xs-lte) {
 			padding: 0;
@@ -124,7 +104,9 @@
 	}
 
 	li[data-sitemap-level='3'] {
-		@extend %item;
+		display: block;
+		padding: 0;
+		margin: 0;
 
 		a {
 			&::before {
@@ -138,3 +120,14 @@
 		}
 	}
 }
+
+.c-nav-sitemap__body {
+	max-inline-size: var(--wide-layout-width);
+	margin-block: 0;
+	margin-inline: auto;
+	overflow: hidden;
+
+	@media (--md-lte) {
+		max-inline-size: 100%;
+	}
+}

package/__assets/_libs/component/c-page-home.css

@@ -0,0 +1,43 @@
+.c-page-home {
+	inline-size: 100%;
+	block-size: 100%;
+}
+
+.c-page-home__base {
+	display: grid;
+	grid-template:
+		'header' auto
+		'nav-global' auto
+		'main' 1fr
+		'nav-sitemap' auto
+		'footer' auto
+		/ 1fr;
+	inline-size: 100%;
+	block-size: 100%;
+}
+
+.c-page-home__header {
+	grid-area: header;
+}
+
+.c-page-home__nav-global {
+	grid-area: nav-global;
+}
+
+.c-page-home__main {
+	grid-area: main;
+
+	> * {
+		inline-size: var(--content-width);
+		padding-inline: 1rem;
+		margin-inline: auto;
+	}
+}
+
+.c-page-home__nav-sitemap {
+	grid-area: nav-sitemap;
+}
+
+.c-page-home__footer {
+	grid-area: footer;
+}

package/__assets/_libs/component/c-page-sub.css

@@ -0,0 +1,63 @@
+.c-page-sub {
+	inline-size: 100%;
+	block-size: 100%;
+}
+
+.c-page-sub__base {
+	display: grid;
+	grid-template:
+		'header' auto
+		'nav-global' auto
+		'main' 1fr
+		'nav-sitemap' auto
+		'footer' auto / 1fr;
+	inline-size: 100%;
+	block-size: 100%;
+}
+
+.c-page-sub__header {
+	grid-area: header;
+}
+
+.c-page-sub__nav-global {
+	grid-area: nav-global;
+}
+
+.c-page-sub__main {
+	grid-area: main;
+}
+
+.c-page-sub__nav-sitemap {
+	grid-area: nav-sitemap;
+}
+
+.c-page-sub__footer {
+	grid-area: footer;
+}
+
+.c-page-sub__content {
+	padding-inline: 2em;
+}
+
+.c-page-sub__title-page {
+	max-inline-size: var(--wide-layout-width);
+	margin-block-end: 1em;
+	margin-inline: auto;
+}
+
+.c-page-sub__nav-breadcrumb {
+	max-inline-size: var(--wide-layout-width);
+	margin-block-end: 2em;
+	margin-inline: auto;
+}
+
+.c-page-sub__content-index {
+	max-inline-size: var(--content-width);
+	padding-block-end: calc(60 / 17 * 1em);
+	margin-inline: auto;
+}
+
+.c-page-sub__content-main {
+	max-inline-size: var(--content-width);
+	margin-inline: auto;
+}

package/__assets/_libs/component/c-pagination.css

@@ -0,0 +1,98 @@
+.c-pagination {
+	clear: both;
+	display: flex;
+	justify-content: center;
+	margin-block-start: 1rem;
+	overflow: hidden;
+	text-align: center;
+
+	@media (--xs) {
+		justify-content: space-between;
+	}
+
+	a {
+		color: currentcolor;
+		text-decoration: none;
+		background: none;
+	}
+}
+
+.c-pagination__prev,
+.c-pagination__next {
+	a {
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding-inline: 1rem;
+		border: 1px solid var(--border-color);
+
+		&[data-disabled='true'] {
+			pointer-events: none;
+			opacity: 0.3;
+		}
+	}
+}
+
+.c-pagination__prev {
+	order: 1;
+
+	::before {
+		content: '<';
+	}
+}
+
+.c-pagination__next {
+	order: 3;
+
+	::after {
+		content: '＞';
+	}
+}
+
+.c-pagination__numbers {
+	display: flex;
+	order: 2;
+	padding: 0;
+	margin-block: 0;
+	margin-inline: 2rem;
+	font-weight: bold;
+	list-style: none;
+
+	@media (--xs) {
+		display: none;
+	}
+}
+
+.c-pagination__number {
+	display: block;
+	margin-block: 0;
+	margin-inline: 0.5rem;
+	list-style: none;
+
+	&:hover {
+		padding-block-end: 2px;
+		border-block-end: 2px solid var(--border-color);
+	}
+
+	a {
+		display: block;
+		padding-block: 0;
+		padding-inline: 0.3rem;
+		text-align: center;
+
+		&::after {
+			display: none;
+		}
+	}
+}
+
+/* 🐲 baserCMSの仕様上 マルチクラスでしかカレントを定義できない */
+/* stylelint-disable selector-class-pattern */
+.c-pagination__number--current {
+	border-block-end: 2px solid var(--border-color);
+
+	&:hover {
+		padding-block-end: 0;
+	}
+}
+/* stylelint-enable selector-class-pattern */

package/__assets/_libs/component/{_c-title-page.scss → c-title-page.css}

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-title-page {
 	h1 {
 		margin: 0;