Merge remote-tracking branch 'utelecon/202308-organize-styles'

package.json

@@ -21,6 +21,7 @@
     "astro-seo": "^0.7.6",
     "github-slugger": "^2.0.0",
     "mdast": "^3.0.0",
+    "normalize.css": "^8.0.1",
     "rehype-external-links": "^2.1.0",
     "sass": "^1.57.1",
     "unified": "^10.1.2",

src/layouts/Layout.astro

@@ -4,7 +4,7 @@ import { GoogleAnalytics } from "@astrolib/analytics";
 import Header from "./Header/index.astro";
 import Footer from "./Footer/index.astro";
 import Toc from "./Toc.astro";
-import "@styles/global.scss";
+import "@styles/layout.scss";
 import type { MDXLayoutProps, MarkdownHeading } from "astro";
 import Author, { Author as AuthorProps } from "./Author.astro";
 import Markdown from "@components/utils/Markdown.astro";
@@ -158,5 +158,14 @@ if (title) {
       }
     </main>
     <Footer lang={lang} support={support} />
-  </body>
+  </body><style>
+    .title {
+      margin-bottom: 2rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid $white-gray-dark;
+      font-size: 2rem;
+      font-weight: bold;
+      color: black;
+    }
+  </style>
 </html>

src/styles/README.md

@@ -0,0 +1,51 @@
+# @styles/README
+
+ここでは，このフォルダにあるCSSについて説明します．CSSを加筆する際は，まずこの説明を読んでから作成してください．
+
+このファイルの説明は，CSSに関する基礎知識を前提としています．
+
+このファイルは工事中です．
+
+## `@layouts`および`@components/utils`との棲み分けについて
+
+`@layouts`や`@components/utils`にある`.astro`ファイルには，そのコンポーネントだけに適用されるCSSを一緒に記述することができます．`@styles`にあるべきCSSと`@layouts`や`@components/utils`にあるべきCSSの棲み分けは，以下のようになります．
+
+- `@styles`：以下の2種類のCSSを書きます．
+  - グローバルに適用されるCSS：各ページのMarkdownの範囲に適用されるべきCSS
+  - 多くのMarkdownで利用されるCSS：`.box`や`img.medium`などのユーティリティクラス
+- `@layouts`：ヘッダーやフッターなど，各ページのMarkdownの範囲外でのみ利用されるCSSを書きます．
+- `@components/utils`：各コンポーネントの中でのみ利用されるCSSを書きます．
+
+## `components`以下で定義されているユーティリティクラスについて
+
+`@styles/components`にはユーティリティクラスが定義されています．これらのクラスはグローバルに適用されており，Markdown内で適用することができます．
+
+### `.box`系
+
+- `.box`
+- `.box--important`
+- `.box--alert`
+- `strong.box`, `b.box`
+
+### `.cards`
+
+- `.cards`
+- `.cards + h2`
+
+### `img`系
+
+- `img.large`, `img.medium`, `img.small`
+- `img.inline`
+- `img.logo`
+- `img.center`
+- `img.border`
+- `img.shadow`
+
+### `figure`系
+
+- `figure`
+- `figcaption`
+
+### `.gallery`
+
+

src/styles/color.scss

@@ -1,4 +1,4 @@
-@import "./components/cayman/variables.scss";
+@import "./cayman/variables.scss";
 
 $gray: #777777;
 $black-gray: #212121;

src/styles/components/box.scss

@@ -28,6 +28,7 @@
   }
 }
 
-strong.box, b.box {
+strong.box,
+b.box {
   @include box--bold;
 }

src/styles/components/card.scss

@@ -13,11 +13,13 @@
   padding: 0;
 
   & > li {
-    /* for IE11 */ display: block;
+    /* for IE11 */
+    display: block;
     display: contents;
   }
 
-  & > a, & > li > a {
+  & > a,
+  & > li > a {
     display: block;
     border: 1px solid $black-gray;
     border-left: 4px solid $heading-color;

src/styles/components/code.scss

@@ -1,6 +1,20 @@
 code {
-    padding: 0.2em 0.4em;
-    font-size: 0.9em;
-    color: black;
-    background-color: $white-gray-light;
+  padding: 0.2em 0.4em;
+  font-size: 0.9em;
+  color: black;
+  background-color: $white-gray-light;
+}
+
+code,
+pre {
+  &,
+  &:lang(en) {
+    hyphens: none;
+  }
+}
+
+code em {
+  font-style: normal;
+  font-weight: bold;
+  background-color: yellow;
 }

src/styles/components/footnotes.scss

@@ -0,0 +1,4 @@
+.footnotes {
+  padding-top: 0.5em;
+  border-top: 2px solid $gray;
+}

src/styles/components/link.scss

@@ -4,7 +4,8 @@
 :visited {
   color: $visited-color;
 }
-:link, :visited {
+:link,
+:visited {
   text-decoration: none;
   &:hover {
     text-decoration: underline;

src/styles/components/lists.scss

@@ -0,0 +1,38 @@
+@media (max-width: 640px) {
+  ul,
+  ol {
+    padding-left: 20px;
+  }
+}
+
+@counter-style decimal-bracket {
+  system: extends decimal;
+  prefix: "[";
+  suffix: "] ";
+}
+
+ol.bracket {
+  list-style: decimal-bracket;
+}
+
+// remove user agent stylesheet against <p> element inside <li>
+li > p,
+.box > p,
+.box--alert > p,
+details > p {
+  margin: 0;
+}
+
+ul.gap,
+ol.gap {
+  & > li {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  & > li:first-child {
+    margin-top: 0;
+  }
+  & > li:last-child {
+    margin-bottom: 0;
+  }
+}

src/styles/utils.scss → src/styles/components/mfa.scss

@@ -1,38 +1,3 @@
-.alert {
-color: $red;
-}
-
-.center {
-text-align: center;
-}
-
-.iframe-container {
-  position:relative;
-  width: 100%;
-  height: 0;
-  --aspect-ratio: 56.25%;
-  padding-bottom: var(--aspect-ratio);
-  > iframe {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-ul.gap, ol.gap {
-  &>li {
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-  &>li:first-child {
-    margin-top: 0;
-  }
-  &>li:last-child {
-    margin-bottom: 0;
-  }
-}
-
-// transported from mfa.scss
 ol.mfa-initial-procedure {
   & > li {
     counter-increment: mfa-initial-main;
@@ -57,13 +22,9 @@ ul.mfa-initial-procedure {
         list-style-position: inside;
         text-indent: -1em;
         &::marker {
-          content:
-            counters(mfa-initial-main, "-")
-            "-"
-            counters(mfa-initial-sub-headline, "-", upper-latin)
-            "-"
-            counters(mfa-initial-sub-procedure, "-")
-            ". ";
+          content: counters(mfa-initial-main, "-") "-"
+            counters(mfa-initial-sub-headline, "-", upper-latin) "-"
+            counters(mfa-initial-sub-procedure, "-") ". ";
         }
         ol {
           counter-reset: list-item;

src/styles/components/summary.scss

@@ -0,0 +1,7 @@
+summary {
+  cursor: pointer;
+  color: $link-color;
+  &:hover {
+    text-decoration: underline;
+  }
+}

src/styles/components/table.scss

@@ -0,0 +1,3 @@
+table {
+  border-collapse: collapse;
+}

src/styles/components/utils.scss

@@ -0,0 +1,20 @@
+.alert {
+  color: $red;
+}
+
+.center {
+  text-align: center;
+}
+
+.iframe-container {
+  position: relative;
+  width: 100%;
+  height: 0;
+  --aspect-ratio: 56.25%;
+  padding-bottom: var(--aspect-ratio);
+  > iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}

src/styles/layout.scss

@@ -1,4 +1,4 @@
-@import "normalize";
+@import "../../node_modules/normalize.css/normalize.css";
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
 
 * {
@@ -11,10 +11,5 @@ html {
   line-height: 1.5;
 }
 
-table {
-  border-collapse: collapse;
-}
-
-@import "components/cayman/jekyll-theme-cayman";
-@import "layout/main";
-@import "components/box";
+@import "cayman/jekyll-theme-cayman";
+@import "main";