@d-zero/scaffold 5.0.0-alpha.10

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

@@ -0,0 +1,43 @@
+@use '../style/theme' as *;
+
+.c-footer {
+	padding-block-end: 2em;
+
+	&__body {
+		margin-block: 0;
+		margin-inline: auto;
+	}
+
+	&__links {
+		ul {
+			display: flex;
+			justify-content: center;
+			padding: 0;
+			margin-block: 0 1em;
+			margin-inline: 0;
+
+			@media (--sm-lte) {
+				display: block;
+			}
+		}
+
+		li {
+			display: block;
+			padding: 0;
+			margin-block: 0;
+			margin-inline: 1em;
+		}
+
+		a {
+			display: block;
+			padding: 1em;
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+
+	&__copyright {
+		display: block;
+		text-align: center;
+	}
+}

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

@@ -0,0 +1,20 @@
+header.c-header
+	.c-header__body
+		.c-header__title
+			.c-header__site-name
+				if isHome
+					h1
+						a(href="__URL__"): span サイトタイトル
+				else
+					div
+						a(href="__URL__"): span サイトタイトル
+			p.c-header__description
+				//- spell-checker:disable-next-line
+				| Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+		.c-header__info
+			ul.c-header__links
+				li: a(href="__URL__"): span 会社概要
+				li: a(href="__URL__"): span 新着情報
+				li: a(href="__URL__"): span サイトマップ
+			.c-header__tel
+				a(href="tel:0000000000"): span 00-0000-0000

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

@@ -0,0 +1,96 @@
+@use '../style/theme' as *;
+
+.c-header {
+	padding-block: 1.5em 1.7em;
+	padding-inline: 2em;
+	border-block-end: 1px solid var(--border-color);
+
+	&__body {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-block: 0;
+		margin-inline: auto;
+
+		@media (--md-lte) {
+			display: block;
+		}
+	}
+
+	&__title {
+		flex: 0 1 auto;
+
+		@media (--md-lte) {
+			margin-block-end: 2em;
+			text-align: center;
+		}
+	}
+
+	&__site-name {
+		margin: 0;
+
+		> a {
+			display: block;
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+
+	&__description {
+		margin: 0;
+	}
+
+	&__info {
+		display: flex;
+		flex: 0 1 auto;
+		flex-direction: column;
+	}
+
+	&__links {
+		display: flex;
+		flex: 0 1 auto;
+		padding: 0;
+		margin: 0;
+
+		@media (--md-lte) {
+			margin-block: 0 1em;
+			margin-inline: auto;
+		}
+
+		> li {
+			display: block;
+			flex: 0 1 auto;
+
+			> a {
+				display: block;
+				padding-block: 0.5em;
+				padding-inline: 1em;
+				color: inherit;
+				text-decoration: none;
+			}
+		}
+	}
+
+	&__tel {
+		flex: 0 1 auto;
+		text-align: end;
+
+		> a {
+			inline-size: 100%;
+			padding-block: 0.5em;
+			padding-inline: 1em;
+			color: inherit;
+			text-align: center;
+			text-decoration: none;
+			border-radius: 5px;
+
+			@media (--md-lte) {
+				display: block;
+				inline-size: calc(80 / 100 * 100%);
+				margin-block: 0;
+				margin-inline: auto;
+				text-align: center;
+			}
+		}
+	}
+}

package/__assets/_libs/component/_c-media-list.scss

@@ -0,0 +1,7 @@
+@use '../style/theme' as *;
+
+.c-media-list {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 0.5em;
+}

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

@@ -0,0 +1,23 @@
+.c-media
+	a(href=article.url)
+		.c-media__img
+			img(src=article.img alt height="300" decoding="async" width="400")
+		.c-media__header
+			.c-media__meta
+				if article.cat
+					.c-media__category(data-category=article.cat.id)
+						span= article.cat.name
+				if article.time
+					.c-media__time(data-datetime=filters.date(article.time, "YYYY-MM-DD"))
+						span= filters.date(article.time, "YYYY.MM.DD")
+				if article.tag
+					.c-media__tags
+						ul
+							each tag in article.tag
+								li.c-media__tag-item(data-tag=tag)
+									span= tag
+			.c-media__title
+				span= article.title
+		.c-media__body
+			.c-media__description
+				p= article.desc

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

@@ -0,0 +1,115 @@
+@use '../style/theme' as *;
+
+.c-media {
+	position: relative;
+	block-size: 100%;
+	overflow: hidden;
+	border: 1px solid var(--border-color);
+	outline: 2px solid transparent;
+	transition: outline 300ms;
+
+	&:has(a:hover) {
+		border: 1px solid var(--border-color);
+		outline: 2px solid var(--border-color);
+	}
+
+	> a {
+		display: grid;
+		grid-template:
+			'img header' auto
+			'img body' auto
+			/ calc(1 / 3 * 100%) calc(2 / 3 * 100%);
+		block-size: 100%;
+		color: currentcolor;
+		text-decoration: none;
+	}
+
+	&__img {
+		grid-area: img;
+
+		img {
+			inset-block-start: 0;
+			inset-inline-start: 0;
+			display: block;
+			inline-size: 100%;
+			block-size: 100%;
+			aspect-ratio: 4 / 3;
+			object-fit: cover;
+			object-position: center top;
+		}
+	}
+
+	&__header {
+		flex: 0 1 auto;
+		grid-area: header;
+		padding-block: 0;
+		padding-inline: 1.5em;
+	}
+
+	&__body {
+		flex: 0 1 100%;
+		grid-area: body;
+		padding-block: 0.5em 2em;
+		padding-inline: 1.5em;
+	}
+
+	&__title {
+		padding: 0;
+		margin-block: 0;
+		margin-inline: auto;
+	}
+
+	// ブログのみ
+	&__meta {
+		//
+	}
+
+	// ブログのみ
+	&__time {
+		display: none;
+	}
+
+	// ブログのみ
+	&__category {
+		//
+	}
+
+	// ブログのみ
+	&__tags {
+		ul {
+			padding: 0;
+			margin-block: 0;
+			margin-inline: auto;
+			list-style: none;
+		}
+	}
+
+	// ブログのみ
+	&__tag-item {
+		display: inline-block;
+		padding: 0;
+		margin: 0;
+		list-style: none;
+
+		span {
+			display: block;
+			padding-block: 0.2em;
+			padding-inline: 1em;
+		}
+	}
+
+	// ブログのみ
+	&__author {
+		display: none;
+	}
+
+	&__description {
+		padding: 0;
+		margin: 0;
+
+		p {
+			padding: 0;
+			margin: 0;
+		}
+	}
+}

package/__assets/_libs/component/_c-nav-breadcrumb.pug

@@ -0,0 +1,42 @@
+.c-nav-breadcrumb
+	ol(itemscope itemtype="https://schema.org/BreadcrumbList")
+		li.c-nav-breadcrumb__item(
+			itemscope
+			itemprop="itemListElement"
+			itemtype="https://schema.org/ListItem"
+			data-breadcrumb="home")
+			a(
+				href="/"
+				itemscope
+				itemprop="item"
+				itemtype="https://schema.org/WebPage"
+				itemid="/")
+				span(itemprop="name") Home
+			meta(itemprop="position" content="1")
+			span.c-nav-breadcrumb__separetor
+		li.c-nav-breadcrumb__item(
+			itemscope
+			itemprop="itemListElement"
+			itemtype="https://schema.org/ListItem")
+			a(
+				href="/first/"
+				itemscope
+				itemprop="item"
+				itemtype="https://schema.org/WebPage"
+				itemid="/first/")
+				span(itemprop="name") Parent
+			meta(itemprop="position" content="2")
+			span.c-nav-breadcrumb__separetor
+		li.c-nav-breadcrumb__item(
+			itemscope
+			itemprop="itemListElement"
+			itemtype="https://schema.org/ListItem"
+			data-breadcrumb="current")
+			a(
+				href="/first/about"
+				itemscope
+				itemprop="item"
+				itemtype="https://schema.org/WebPage"
+				itemid="/first/about")
+				span(itemprop="name") Current
+			meta(itemprop="position" content="3")

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

@@ -0,0 +1,47 @@
+@use '../style/theme' as *;
+
+.c-nav-breadcrumb {
+	@media (--md-lte) {
+		display: none;
+	}
+
+	ol {
+		display: flex;
+		justify-content: flex-start;
+		padding: 0;
+		margin: 0;
+
+		> li {
+			list-style: none;
+
+			&:last-child a {
+				::after {
+					display: none;
+				}
+			}
+		}
+	}
+
+	a {
+		display: inline-block;
+		color: inherit;
+		text-decoration: underline;
+
+		::after {
+			display: inline-block;
+			content: ' > ';
+		}
+	}
+
+	&__item {
+		display: inline-block;
+		padding: 0;
+		margin: 0;
+	}
+
+	&__item[data-breadcrumb='current'] {
+		a {
+			text-decoration: none;
+		}
+	}
+}

package/__assets/_libs/component/_c-nav-global.pug

@@ -0,0 +1,9 @@
+nav.c-nav-global(aria-label="メインメニュー")
+	.c-nav-global__body
+		ul.c-nav-global__list
+			li.c-nav-global__item: a(href="__URL__"): span コンテンツ
+			li.c-nav-global__item: a(href="__URL__"): span コンテンツ
+			li.c-nav-global__item: a(href="__URL__"): span コンテンツ
+			li.c-nav-global__item: a(href="__URL__"): span コンテンツ
+			li.c-nav-global__item: a(href="__URL__"): span コンテンツ
+			li.c-nav-global__item: a(href="__URL__"): span コンテンツ

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

@@ -0,0 +1,117 @@
+@use '../style/theme' as *;
+
+.c-nav-global {
+	position: relative;
+	margin-block-end: 1em;
+	border-block-end: 1px solid var(--border-color);
+
+	&__body {
+		margin-block: 0;
+		margin-inline: auto;
+	}
+
+	&__list {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: stretch;
+		justify-content: space-between;
+		padding: 0;
+		margin: 0;
+
+		@media (--md-lte) {
+			flex-wrap: wrap;
+		}
+
+		@media (--md-lte) {
+			display: block;
+		}
+	}
+
+	&__item {
+		display: block;
+		flex: 1 1 auto;
+
+		> a {
+			display: block;
+			color: inherit;
+			text-align: center;
+			text-decoration: none;
+
+			@media (--md-lte) {
+				border-block-end: 1px solid var(--border-color);
+			}
+
+			> span {
+				display: block;
+				padding-block: 1em;
+				padding-inline: 2em;
+				border-inline-start: 1px solid var(--border-color);
+
+				@media (--md-lte) {
+					border-inline-start: none;
+				}
+			}
+		}
+
+		&:first-child {
+			> a {
+				> span {
+					border: none;
+				}
+			}
+		}
+
+		&:last-child {
+			> a {
+				@media (--md-lte) {
+					border: none;
+				}
+			}
+		}
+	}
+
+	&__sub-nav {
+		position: absolute;
+		inset-inline-start: 0;
+		inline-size: 100%;
+
+		@media (--md-lte) {
+			position: static;
+		}
+
+		> ul {
+			display: flex;
+			flex-wrap: nowrap;
+			justify-content: space-around;
+
+			@media (--md-lte) {
+				display: block;
+				padding: 0;
+			}
+
+			> li {
+				list-style: none;
+
+				@media (--md-lte) {
+					border-block-end: 1px solid var(--border-color);
+				}
+
+				> a {
+					display: block;
+					inline-size: 100%;
+					padding: 1em;
+					color: inherit;
+					text-decoration: none;
+
+					@media (--md-lte) {
+						text-align: center;
+					}
+
+					&:hover {
+						opacity: 0.7;
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,115 @@
+nav.c-nav-sitemap(aria-label="ページ一覧")
+	.c-nav-sitemap__body
+		ul(data-sitemap-level="1")
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_カテゴリインデックス
+				ul(data-sitemap-level="2")
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_サブカテゴリインデックス
+						ul(data-sitemap-level="3")
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_カテゴリインデックス
+				ul(data-sitemap-level="2")
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_サブカテゴリインデックス
+						ul(data-sitemap-level="3")
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_カテゴリインデックス
+				ul(data-sitemap-level="2")
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_サブカテゴリインデックス
+						ul(data-sitemap-level="3")
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_カテゴリインデックス
+				ul(data-sitemap-level="2")
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_サブカテゴリインデックス
+						ul(data-sitemap-level="3")
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_カテゴリインデックス
+				ul(data-sitemap-level="2")
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_サブカテゴリインデックス
+						ul(data-sitemap-level="3")
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+			li(data-sitemap-level="1")
+				a(href="__URL__") Lv.1_カテゴリインデックス
+				ul(data-sitemap-level="2")
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_ページタイトル
+					li(data-sitemap-level="2")
+						a(href="__URL__") Lv.2_サブカテゴリインデックス
+						ul(data-sitemap-level="3")
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル
+							li(data-sitemap-level="3")
+								a(href="__URL__") Lv.3_ページタイトル