@d-zero/scaffold 5.0.0-alpha.10

package/__assets/_libs/component/_c-nav-sitemap.scss

@@ -0,0 +1,140 @@
+@use '../style/theme' as *;
+
+.c-nav-sitemap {
+	padding-block: 2em;
+	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;
+		color: inherit;
+		text-decoration: none;
+
+		@media (--xs-lte) {
+			padding-block: 1em;
+			padding-inline: 2em;
+		}
+	}
+
+	&__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;
+
+		@media (--xs) {
+			column-count: 1;
+		}
+
+		@media (--sm) {
+			column-count: 2;
+		}
+
+		@media (--md) {
+			column-count: 3;
+		}
+	}
+
+	li[data-sitemap-level='1'] {
+		@extend %item;
+		display: inline-block; // 💉 for columns item technic
+		inline-size: 100%; // 💉 for columns item technic
+		margin-block: 0 1em;
+		margin-inline: 0;
+		break-inside: avoid-column;
+
+		a {
+			@media (--xs-lte) {
+				margin: 0;
+				border-block-end: 2px solid var(--border-color);
+
+				::before {
+					display: none;
+					margin: 0;
+				}
+			}
+		}
+	}
+
+	ul[data-sitemap-level='2'] {
+		@extend %list;
+		padding-inline-start: 1em;
+
+		@media (--xs-lte) {
+			padding: 0;
+		}
+	}
+
+	li[data-sitemap-level='2'] {
+		@extend %item;
+		margin-block: 0 0.5em;
+		margin-inline: 0;
+
+		@media (--xs-lte) {
+			margin: 0;
+		}
+
+		a {
+			@media (--xs-lte) {
+				padding-block: 1em;
+				padding-inline: 2em;
+				border-block-end: 1px solid var(--border-color);
+			}
+
+			&::before {
+				@media (--xs-lte) {
+					display: none;
+					margin: 0;
+				}
+			}
+		}
+	}
+
+	ul[data-sitemap-level='3'] {
+		@extend %list;
+		padding-inline-start: 1em;
+
+		@media (--xs-lte) {
+			padding: 0;
+		}
+	}
+
+	li[data-sitemap-level='3'] {
+		@extend %item;
+
+		a {
+			&::before {
+				border: 1px solid var(--border-color);
+
+				@media (--xs-lte) {
+					display: none;
+					margin: 0;
+				}
+			}
+		}
+	}
+}

package/__assets/_libs/component/_c-page-home.scss

@@ -0,0 +1,45 @@
+@use '../style/theme' as *;
+
+.c-page-home {
+	inline-size: 100%;
+	block-size: 100%;
+
+	&__base {
+		display: grid;
+		grid-template:
+			'header' auto
+			'nav-global' auto
+			'main' 1fr
+			'nav-sitemap' auto
+			'footer' auto
+			/ 1fr;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	&__header {
+		grid-area: header;
+	}
+
+	&__nav-global {
+		grid-area: nav-global;
+	}
+
+	&__main {
+		grid-area: main;
+
+		> * {
+			inline-size: var(--content-width);
+			padding-inline: 1rem;
+			margin-inline: auto;
+		}
+	}
+
+	&__nav-sitemap {
+		grid-area: nav-sitemap;
+	}
+
+	&__footer {
+		grid-area: footer;
+	}
+}

package/__assets/_libs/component/_c-page-sub.scss

@@ -0,0 +1,65 @@
+@use '../style/theme' as *;
+
+.c-page-sub {
+	inline-size: 100%;
+	block-size: 100%;
+
+	&__base {
+		display: grid;
+		grid-template:
+			'header' auto
+			'nav-global' auto
+			'main' 1fr
+			'nav-sitemap' auto
+			'footer' auto / 1fr;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	&__header {
+		grid-area: header;
+	}
+
+	&__nav-global {
+		grid-area: nav-global;
+	}
+
+	&__main {
+		grid-area: main;
+	}
+
+	&__nav-sitemap {
+		grid-area: nav-sitemap;
+	}
+
+	&__footer {
+		grid-area: footer;
+	}
+
+	&__content {
+		padding-inline: 2em;
+	}
+
+	&__title-page {
+		max-inline-size: var(--wide-layout-width);
+		margin-block-end: 1em;
+		margin-inline: auto;
+	}
+
+	&__nav-breadcrumb {
+		max-inline-size: var(--wide-layout-width);
+		margin-block-end: 2em;
+		margin-inline: auto;
+	}
+
+	&__content-index {
+		max-inline-size: var(--content-width);
+		padding-block-end: calc(60 / 17 * 1em);
+		margin-inline: auto;
+	}
+
+	&__content-main {
+		max-inline-size: var(--content-width);
+		margin-inline: auto;
+	}
+}

package/__assets/_libs/component/_c-pagination.pug

@@ -0,0 +1,14 @@
+nav.c-pagination(aria-label="ページ番号")
+	.c-pagination__prev
+		a(data-disabled="true") prev
+	.c-pagination__next
+		a(href="___NEXT_PAGE___" rel="next") next
+	ol.c-pagination__numbers
+		li.c-pagination__number
+			a(aria-current="page") 1
+		li.c-pagination__number
+			a(href="___NEXT_PAGE___") 2
+		li.c-pagination__number
+			a(href="___NEXT_PAGE___") 3
+		li.c-pagination__number
+			a(href="___NEXT_PAGE___") 4

package/__assets/_libs/component/_c-pagination.scss

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

package/__assets/_libs/component/_c-title-page.pug

@@ -0,0 +1,2 @@
+.c-title-page
+	h1 ページタイトル

package/__assets/_libs/component/_c-title-page.scss

@@ -0,0 +1,11 @@
+@use '../style/theme' as *;
+
+.c-title-page {
+	h1 {
+		margin: 0;
+		font-size: var(--font-size-h1);
+		text-align: start;
+		border: 1px solid transparent;
+		border-radius: 5px;
+	}
+}

package/__assets/_libs/data/.markuplintrc

@@ -0,0 +1,3 @@
+{
+	// Disable All
+}