diff --git a/.gitignore b/.gitignore index 3879e4f..fb035d9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,7 @@ .DS_Store Thumbs.db *.log -node_modules \ No newline at end of file +node_modules +vendor +build +dist \ No newline at end of file diff --git a/README.md b/README.md index 4485859..0fafe1b 100644 --- a/README.md +++ b/README.md @@ -16,12 +16,11 @@ Qroko は WordPress を headless CMS として使いやすくするためのテ - Gutenberg - GraphQL（WPGraphQL プラグインが必要） -- REST API（遅いし負荷も大きいので GraphQL 推奨） - 最低限のファイル構成 - 最低限の投稿プレビュー - 投稿プレビューの幅を変更する機能 -- 日本語パーマリンクの生成を防ぐ機能 -- ログインユーザー以外をリダイレクトする機能 +- ~~日本語パーマリンクの生成を防ぐ機能~~（別プラグイン化を予定） +- ~~ログインユーザー以外をリダイレクトする機能~~（別プラグイン化を予定） ## Install @@ -33,8 +32,9 @@ Qroko は WordPress を headless CMS として使いやすくするためのテ ### Qroko -- Qroko Blocks ([site](https://wordpress.org/plugins/qroko-blocks/)/[repo](https://github.com/qrac/qroko-blocks)) +- Qroko Functions ([repo](https://github.com/qrac/qroko-functions)) - Qroko My Functions ([repo](https://github.com/qrac/qroko-my-functions)/[download](https://github.com/qrac/qroko-my-functions/archive/master.zip)) +- Qroko Blocks ([site](https://wordpress.org/plugins/qroko-blocks/)/[repo](https://github.com/qrac/qroko-blocks)) ### WPGraphQL diff --git a/assets/css/comment.css b/assets/css/comment.css new file mode 100644 index 0000000..7690fae --- /dev/null +++ b/assets/css/comment.css @@ -0,0 +1,165 @@ +/*---------------------------------------------------- +// Comment +----------------------------------------------------*/ + +.app-comments { + padding-top: 1.5rem; + border-top: 1px solid var(--theme-bg-3); +} + +.app-comments > *:not(:first-child) { + margin-top: 1rem; +} + +.comment-respond { + padding-top: 0.5rem; +} + +.comment-respond > *:not(:first-child), +.comment-form > *:not(:first-child) { + margin-top: 0.5rem; +} + +.app-comments-list .comment { + padding-top: 1rem; + padding-bottom: 0.5rem; + border-top: 1px solid var(--theme-bg-3); +} + +.comment-author { + font-size: 0.875rem; +} + +.comment-author .avatar { + width: 32px; + height: 32px; + border-radius: 999em; + vertical-align: bottom; +} + +.comment-metadata { + font-size: 0.75rem; +} + +.comment-reply-link { + font-size: 0.875rem; +} + +.comments-pagination { + padding-top: 1rem; + border-top: 1px solid var(--theme-bg-3); + color: var(--theme-tx-3); + font-size: 0.875rem; +} + +.comment-form-comment label, +.comment-form-comment textarea { + display: block; + max-width: 100%; + width: 100%; +} + +/*---------------------------------------------------- +// Comment Content +----------------------------------------------------*/ + +.comment-content > * { + margin-top: 0.75rem; +} + +.comment-content blockquote { + padding: 1.5rem; + background: var(--theme-bg-2); + border-left: 5px solid var(--theme-bg-3); +} + +.comment-content table { + border-collapse: collapse; + width: 100%; +} + +.comment-content table thead { + border-bottom: none; +} + +.comment-content table thead th { + text-align: center; +} + +.comment-content table td, +.comment-content table th { + padding: 0.5rem; + border: 1px solid var(--theme-bg-3); +} + +.comment-content table th { + background: var(--theme-bg-2); +} + +.comment-content table caption { + margin-bottom: 0.5rem; + font-weight: bold; +} + +.comment-content table tfoot { + border-top: 2px solid var(--theme-bg-3); +} + +.comment-content figcaption { + margin-top: 0.5rem; + margin-bottom: 1rem; + color: var(--theme-tx-2); + font-size: 0.875rem; + opacity: 0.65; +} + +.comment-content dl { + width: 100%; + border: 1px solid var(--theme-bg-3); + border-top: none; +} + +@media (min-width: 767px) { + .comment-content dl { + display: flex; + flex-wrap: wrap; + } +} + +.comment-content dt { + width: 100%; + padding: 0.75rem 1rem; + background: var(--theme-bg-2); + border-top: 1px solid var(--theme-bg-3); +} + +@media (min-width: 767px) { + .comment-content dt { + width: 30%; + } +} + +.comment-content dd { + width: 100%; + padding: 0.75rem 1rem; + border-top: 1px solid var(--theme-bg-3); +} + +@media (min-width: 767px) { + .comment-content dd { + width: 70%; + border-left: 1px solid var(--theme-bg-3); + } +} + +.comment-content pre { + width: 100%; + padding: 1rem; + background-color: var(--theme-bg-2); + border: 1px solid var(--theme-bg-3); + border-radius: 2px; + white-space: pre; + overflow: hidden; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} diff --git a/assets/css/editor.css b/assets/css/editor.css index f03c228..9f7ed52 100644 --- a/assets/css/editor.css +++ b/assets/css/editor.css @@ -183,17 +183,13 @@ ol { } /*---------------------------------------------------- -// Blocks: Snow Monkey Blocks +// Theme Support: Align Wide ----------------------------------------------------*/ -.smb-testimonial .components-button { - height: 48px; +.wp-block[data-align="wide"] { + max-width: max(70%, var(--theme-site-width)); } -.smb-balloon .components-button { - height: 54px; -} - -.smb-panels__item__link { - word-break: break-all; +.wp-block[data-align="full"] { + max-width: none; } diff --git a/assets/css/front.css b/assets/css/front.css index 0818e69..d3124ee 100644 --- a/assets/css/front.css +++ b/assets/css/front.css @@ -40,6 +40,12 @@ a:hover { text-decoration: none; } +figure, +.wp-caption, +.gallery-caption { + max-width: 100%; +} + img { max-width: 100%; height: auto; @@ -126,7 +132,6 @@ input[type="button"] { background: var(--theme-lk-1); border: 0; border-radius: 4px; - box-sizing: border-box; font-size: 1rem; color: var(--theme-lk-tx); text-align: center; @@ -160,30 +165,29 @@ input[type="button"]:hover { textarea, select, input { - padding: 6px 12px; + padding: 5px 12px; background: var(--theme-bg-2); border: 1px solid var(--theme-bg-3); border-radius: 4px; box-shadow: none; - box-sizing: border-box; color: var(--theme-tx-2); -} - -time { - font-size: 0.875rem; - opacity: 0.5; + font-size: 1rem; } code, -pre { - font-family: var(--theme-font-mono); -} - pre, pre.wp-block-code { + font-family: var(--theme-font-mono); color: var(--theme-tx-2); } +:not(pre) > code { + padding: 0.2rem 0.5rem; + background-color: var(--theme-bg-2); + border-radius: 2px; + font-size: 0.875rem; +} + hr { border: 0; border-bottom: 1px solid var(--theme-bg-3); @@ -248,13 +252,6 @@ hr { z-index: 100; } -@media (min-width: 992px) { - .app-nav { - position: sticky; - top: 0; - } -} - .app-nav:after { content: ""; position: absolute; @@ -328,36 +325,74 @@ hr { .app-main { position: relative; display: block; - padding-top: 16px; + padding-top: 32px; padding-bottom: 40vh; + overflow: hidden; } -@media (min-width: 992px) { - .app-main { - padding-top: 32px; - } -} +/*---------------------------------------------------- +// App Contents +----------------------------------------------------*/ -.app-main > .page-contents { +.app-contents { max-width: calc(var(--theme-site-width) + 16px * 2); - margin: 0 auto; - padding: 0 16px; + margin-right: auto; + margin-left: auto; + padding-right: 16px; + padding-left: 16px; +} + +.article-contents:after { + content: ""; + display: table; + clear: both; +} + +.app-contents > *:not(:first-child) { + margin-top: 2rem; +} + +.app-contents ol, +.app-contents ul { + padding-left: 2rem; +} + +.app-contents li { + margin-top: 0.4rem; + line-height: 1.6875; } /*---------------------------------------------------- -// Page Contents +// App Widget ----------------------------------------------------*/ -.page-contents > *:not(:first-child) { - margin-top: 2rem; +.app-widget { + margin-top: 32px; + padding-top: 32px; + border-top: 1px solid var(--theme-bg-3); } -.page-contents ol, -.page-contents ul { +.app-widget-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 32px; + max-width: calc(var(--theme-site-width) + 16px * 2); + margin-right: auto; + margin-left: auto; + padding-right: 16px; + padding-left: 16px; +} + +.app-widget-column > *:not(:first-child) { + margin-top: 1rem; +} + +.app-widget-column ol, +.app-widget-column ul { padding-left: 2rem; } -.page-contents li { +.app-widget-column li { margin-top: 0.4rem; line-height: 1.6875; } @@ -374,14 +409,16 @@ hr { margin-top: 0.5rem; } -.article-cover { - margin-bottom: 2rem; +.article-meta { + color: var(--theme-tx-3); + font-size: 0.875rem; } -@media (min-width: 992px) { - .article-cover { - margin-bottom: 3rem; - } +.article-date, +.article-category, +.article-tag { + display: inline-block; + margin-right: 0.5rem; } .article-contents > *:not(:first-child) { @@ -389,20 +426,61 @@ hr { } /*---------------------------------------------------- -// Pager & Pagination +// Pager & Pagination & Post Navigation ----------------------------------------------------*/ .pager, -.pagination { +.pagination, +.post-navigation { padding-top: 1rem; border-top: 1px solid var(--theme-bg-3); + color: var(--theme-tx-3); + font-size: 0.875rem; +} + +.post-navigation .nav-links { + display: flex; + align-items: center; +} + +.post-navigation .nav-links .nav-previous, +.post-navigation .nav-links .nav-next { + flex: 1 0 0; + display: flex; + align-items: center; + padding: 0 0.25rem; +} + +.post-navigation .nav-links .nav-next { + justify-content: flex-end; + text-align: right; +} + +.post-navigation .nav-links .nav-previous:before, +.post-navigation .nav-links .nav-next:after { + content: ""; + width: 0.5rem; + height: 0.5rem; + border-top: 1px solid var(--theme-tx-3); + border-right: 1px solid var(--theme-tx-3); +} + +.post-navigation .nav-links .nav-previous:before { + margin-right: 0.25rem; + transform: rotate(-135deg); +} + +.post-navigation .nav-links .nav-next:after { + margin-left: 0.25rem; + transform: rotate(45deg); } /*---------------------------------------------------- // Blocks: Core Image ----------------------------------------------------*/ -.wp-block-image figcaption { +.wp-block-image figcaption, +.wp-caption-text { margin-top: 0.5rem; margin-bottom: 1rem; color: var(--theme-tx-2); @@ -410,6 +488,48 @@ hr { opacity: 0.65; } +/*---------------------------------------------------- +// Blocks: Core Gallery +----------------------------------------------------*/ + +.app-contents .blocks-gallery-grid, +.app-contents .wp-block-gallery { + padding-left: 0; +} + +/*---------------------------------------------------- +// Blocks: Core Embed +----------------------------------------------------*/ + +.wp-block-embed.alignwide iframe, +.wp-block-embed.alignfull iframe { + width: 100%; +} + +.wp-block-embed.alignwide .twitter-tweet, +.wp-block-embed.alignfull .twitter-tweet { + margin-left: auto; + margin-right: auto; +} + +.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper { + position: relative; +} + +.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before { + content: ""; + display: block; + padding-top: 56.25%; +} + +.wp-block-embed.wp-has-aspect-ratio iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + /*---------------------------------------------------- // Blocks: Core Table ----------------------------------------------------*/ @@ -455,7 +575,7 @@ hr { } /*---------------------------------------------------- -// Blocks: Core Table +// Blocks: Core Code ----------------------------------------------------*/ .wp-block-code { @@ -469,14 +589,81 @@ hr { } /*---------------------------------------------------- -// Blocks: Snow Monkey Blocks +// Theme Support: Align Wide ----------------------------------------------------*/ -.smb-btn--theme-full, -.smb-balloon__body { - box-sizing: border-box; +.alignwide { + max-width: max(70vw, calc(100% + 16px)); + width: max(70vw, calc(100% + 16px)); + margin-left: 50%; + transform: translateX(-50%); +} + +.alignfull { + max-width: calc(100vw - var(--scrollbar-width, 0px)); + width: calc(100vw - var(--scrollbar-width, 0px)); + margin-left: 50%; + transform: translateX(-50%); +} + +/*---------------------------------------------------- +// Theme Support: Required CSS +----------------------------------------------------*/ + +.sticky { + position: relative; } -.smb-panels__item__figure > img { +.bypostauthor { + padding: 2px; + border: 1px solid var(--theme-tx-2); +} + +.alignleft { + float: left; + display: inline; + margin-right: 1.5em; +} + +.alignright { + float: right; + display: inline; + margin-left: 1.5em; +} + +.aligncenter { + clear: both; + display: block; + margin-left: auto; + margin-right: auto; +} + +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; +} + +.screen-reader-text:focus { + background-color: #eee; + clip: auto !important; + clip-path: none; + color: #444; + display: block; + font-size: 1em; height: auto; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; } diff --git a/assets/css/theme-dark.css b/assets/css/theme-dark.css index e9a2a0c..a91e201 100644 --- a/assets/css/theme-dark.css +++ b/assets/css/theme-dark.css @@ -10,6 +10,7 @@ body.theme-dark { --theme-bg-2: #111111; --theme-bg-3: #222222; --theme-lk-1: #3291ff; + --theme-lk-2: #2e84e6; --theme-lk-tx: #ffffff; --theme-ac-1: #7928ca; } diff --git a/assets/css/theme-light.css b/assets/css/theme-light.css index 812d9a2..b477bc0 100644 --- a/assets/css/theme-light.css +++ b/assets/css/theme-light.css @@ -10,6 +10,7 @@ --theme-bg-2: #f2f2f2; --theme-bg-3: #e4e4e4; --theme-lk-1: #0070f3; + --theme-lk-2: #0165d6; --theme-lk-tx: #ffffff; - --theme-ac-1: #79ffe1; + --theme-ac-1: #2ce7d2; } diff --git a/comments.php b/comments.php new file mode 100644 index 0000000..f4b2205 --- /dev/null +++ b/comments.php @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/components/app-comments.php b/components/app-comments.php new file mode 100644 index 0000000..f34cb62 --- /dev/null +++ b/components/app-comments.php @@ -0,0 +1,24 @@ + + + + + + \ No newline at end of file diff --git a/components/app-head.php b/components/app-head.php index b226be5..dbe992f 100644 --- a/components/app-head.php +++ b/components/app-head.php @@ -8,5 +8,6 @@ + \ No newline at end of file diff --git a/components/app-nav.php b/components/app-nav.php index 84e4dc4..460b26b 100644 --- a/components/app-nav.php +++ b/components/app-nav.php @@ -3,7 +3,7 @@ // App Nav //---------------------------------------------------- ?> - +