Rewrite style #19

qrac · Jul 7, 2020 · 9663e6f · 9663e6f
1 parent 5866a5b
commit 9663e6f
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 181 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Qroko は WordPress を headless CMS として使いやすくするためのテ
 - GraphQL（WPGraphQL プラグインが必要）
 - REST API（遅いし負荷も大きいので GraphQL 推奨）
 - 最低限のファイル構成
-- 最低限の投稿プレビュー（[new.css](https://newcss.net/) を日本語用にアレンジ）
+- 最低限の投稿プレビュー
 - 投稿プレビューの幅を変更する機能
 - 日本語パーマリンクの生成を防ぐ機能
 - ログインユーザー以外をリダイレクトする機能
@@ -75,7 +75,6 @@ Qroko は WordPress を headless CMS として使いやすくするためのテ
 ## License
 
 - Theme: Qroko - GNU General Public License v2.0 or late
-- Base CSS: [new.css](https://github.com/xz/new.css) - MIT
 - Image Fonts: [JetBrains Mono](https://www.jetbrains.com/lp/mono/) - Apache 2.0 license
 
 ## Credit

diff --git a/editor-style-dark.css b/editor-style-dark.css
diff --git a/editor-style.css b/editor-style.css
@@ -10,71 +10,33 @@ License: GPL-2.0-or-later
 License URI: LICENSE
 */
 
-/*
-Project: Qroko Editor Style
-Base: new.css v1.1.3 - MIT (https://github.com/xz/new.css)
-*/
-:root {
-  --qs-font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
-    "Noto Sans Japanese", Meiryo, "Yu Gothic Medium", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --qs-font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    Meiryo, monospace, serif;
-  --qs-site-width: 620px;
-  --qs-tx-1: #1a1a1a;
-  --qs-tx-2: #202020;
-  --qs-bg-1: #ffffff;
-  --qs-bg-2: #f6f8fa;
-  --qs-bg-3: #d1d8dc;
-  --qs-lk-1: #0070f3;
-  --qs-lk-2: #0366d6;
-  --qs-lk-tx: #ffffff;
-  --qs-ac-1: #79ffe1;
-  --qs-ac-tx: #0c4047;
-}
-
 html,
 input,
 select,
 button {
-  font-family: var(--qs-font-sans);
+  font-family: var(--font-sans);
 }
 
 body {
-  background: var(--qs-bg-1);
-  color: var(--qs-tx-2);
+  background: var(--bg-1);
+  color: var(--tx-2);
   font-size: 1rem;
   line-height: 1.5;
 }
 
-.wp-block {
-  max-width: var(--qs-site-width);
-}
-
-::selection {
-  background: var(--qs-ac-1);
-  color: var(--qs-ac-tx);
-}
-
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  padding-top: 1rem;
-  color: var(--qs-tx-1);
+  color: var(--tx-1);
   font-weight: 600;
   font-feature-settings: "palt";
   letter-spacing: 0.0125em;
   line-height: 1.25;
 }
 
-h2 {
-  padding-bottom: 0.25rem;
-  border-bottom: 1px solid var(--qs-bg-3);
-}
-
 h1 {
   font-size: 2rem;
 }
@@ -104,23 +66,15 @@ p {
   line-height: 1.75;
 }
 
-p:last-child {
-  margin-bottom: 0;
-}
-
 a {
-  color: var(--qs-lk-1);
-}
-
-a:hover {
-  color: var(--qs-lk-2);
+  color: var(--lk-1);
 }
 
 code,
 pre,
 kbd,
 samp {
-  font-family: var(--qs-font-mono);
+  font-family: var(--font-mono);
 }
 
 ul,
@@ -129,16 +83,20 @@ ol {
   padding-left: 0;
 }
 
+.wp-block {
+  max-width: var(--site-width);
+}
+
 .block-editor-default-block-appender
   textarea.block-editor-default-block-appender__content {
-  font-family: var(--qs-font-sans);
+  font-family: var(--font-sans);
 }
 
 .editor-post-title__block .editor-post-title__input {
-  color: var(--qs-tx-1);
+  color: var(--tx-1);
   font-size: 2rem;
   font-weight: 600;
-  font-family: var(--qs-font-sans);
+  font-family: var(--font-sans);
   font-feature-settings: "palt";
   letter-spacing: 0.0125em;
   line-height: 1.25;
@@ -147,31 +105,31 @@ ol {
 
 .wp-block-quote {
   padding: 1.5rem;
-  background: var(--qs-bg-2);
-  border-left: 5px solid var(--qs-bg-3);
+  background: var(--bg-2);
+  border-left: 5px solid var(--bg-3);
 }
 
 .wp-block-quote .wp-block-quote__citation {
-  color: var(--qs-tx-2);
+  color: var(--tx-2);
   font-size: 0.875rem;
   opacity: 0.65;
 }
 
 .block-editor-rich-text__editable code {
-  background: var(--qs-bg-2);
-  border: 1px solid var(--qs-bg-3);
+  background: var(--bg-2);
+  border: 1px solid var(--bg-3);
   border-radius: 4px;
   padding: 3px 6px;
   font-size: 0.9rem;
 }
 
 .wp-block-code,
 .wp-block-code textarea {
-  background: var(--qs-bg-2);
+  background: var(--bg-2);
 }
 
 .wp-block-code textarea {
-  color: var(--qs-tx-2);
+  color: var(--tx-2);
   font-size: 0.9rem;
 }
 
@@ -180,31 +138,30 @@ ol {
 }
 
 .wp-block-table table th {
-  background: var(--qs-bg-2);
+  background: var(--bg-2);
 }
 
 .wp-block-table table td,
 .wp-block-table table th {
   padding: 0.5rem;
-  border: 1px solid var(--qs-bg-3);
+  border: 1px solid var(--bg-3);
 }
 
 .wp-block-table table tfoot {
-  border-top: 2px solid var(--qs-bg-3);
+  border-top: 2px solid var(--bg-3);
 }
 
 .wp-block-table figcaption {
   margin-top: 0.5rem;
   margin-bottom: 1rem;
-  color: var(--qs-tx-2);
+  color: var(--tx-2);
   font-size: 0.875rem;
   opacity: 0.65;
 }
 
 .wp-block-image figcaption {
   margin-top: 0.5rem;
-  margin-bottom: 1rem;
-  color: var(--qs-tx-2);
+  color: var(--tx-2);
   font-size: 0.875rem;
   opacity: 0.65;
 }

diff --git a/functions/gutenberg.php b/functions/gutenberg.php
@@ -12,26 +12,31 @@
 // Add editor style
 add_editor_style( 'editor-style.css' );
 
+// Admin Dark Mode CSS
+function admin_variable_css( $wp_admin_bar ) {
+    wp_enqueue_style( 'block-variable', get_template_directory_uri() . '/variable.css' );
+}
+add_action( 'enqueue_block_editor_assets', 'admin_variable_css' );
+
+// Admin Dark Mode CSS
+function admin_variable_dark_css( $wp_admin_bar ) {
+  $dark_mode_css = get_option('active_admin_dark_mode_css');
+  if ($dark_mode_css) {
+    wp_enqueue_style( 'block-variable-dark', get_template_directory_uri() . '/variable-dark.css' );
+  }
+}
+add_action( 'enqueue_block_editor_assets', 'admin_variable_dark_css' );
+
 // Admin Head Custom Body Max Width
 function admin_head_custom_body_max_width() {
   $body_max_width = get_option('preview_body_max_width');
 
   if($body_max_width != 620 && $body_max_width != null && $body_max_width > 0) {
     echo '<style>' .
-      ':root .editor-styles-wrapper { --qs-site-width: ' .
+      ':root .editor-styles-wrapper { --site-width: ' .
       $body_max_width .
       'px; }' .
       '</style>';
   }
 }
-add_action('admin_head', 'admin_head_custom_body_max_width');
-
-// Admin Dark Mode CSS
-function admin_dark_mode_css( $wp_admin_bar ) {
-  $dark_mode_css = get_option('active_admin_dark_mode_css');
-
-  if ($dark_mode_css) {
-    wp_enqueue_style( 'editor-style-dark', get_template_directory_uri() . '/editor-style-dark.css' );
-  }
-}
-add_action( 'enqueue_block_editor_assets', 'admin_dark_mode_css' );
+add_action('admin_head', 'admin_head_custom_body_max_width');
diff --git a/functions/import.php b/functions/import.php
@@ -6,6 +6,8 @@
 // Add files
 function add_files() {
   if ( !is_admin() ) {
+    wp_enqueue_style( 'variable', get_template_directory_uri() . '/variable.css' );
+    wp_enqueue_style( 'variable-dark', get_template_directory_uri() . '/variable-dark.css' );
     wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
   }
 }

diff --git a/functions/meta.php b/functions/meta.php
@@ -33,7 +33,7 @@ function wp_head_custom_body_max_width() {
 
   if($body_max_width != 620 && $body_max_width != null && $body_max_width > 0) {
     echo '<style>' .
-      ':root body { --qs-site-width: ' .
+      ':root body { --site-width: ' .
       $body_max_width .
       'px; }' .
       '</style>';