👍 説明要素を追加

css/nes.css

@@ -117,6 +117,14 @@ a {
   }
 }
 
+._dark {
+  color: #f7f7f7;
+}
+
+._right {
+  text-align: right;
+}
+
 .title {
   font-weight: 700;
   word-break: break-word;
@@ -348,6 +356,7 @@ a {
 .container {
   position: relative;
   padding: 1.5rem 2rem;
+  margin: auto;
 }
 
 .container::before, .container::after {
@@ -404,15 +413,19 @@ a {
   background-color: #f7f7f7;
 }
 
-.container.-dark {
+.container._dark {
   color: #f7f7f7;
 }
 
-.container.-dark::before {
+.container._dark::before {
   background-color: #333;
 }
 
-.container.-dark > .title {
+.container._dark::after {
+  border-color: #f7f7f7;
+}
+
+.container._dark > .title {
   color: #f7f7f7;
   background-color: #333;
 }
@@ -440,4 +453,22 @@ a {
 .checkbox[type="checkbox"]:checked::before {
   box-shadow: 6px 6px 0 #333, 8px 6px 0 #333, 10px 6px 0 #333, 12px 6px 0 #333, 14px 6px 0 #333, 16px 6px 0 #333, 18px 6px 0 #333, 22px 6px 0 #333, 24px 6px 0 #333, 6px 8px 0 #333, 20px 8px 0 #333, 22px 8px 0 #333, 24px 8px 0 #333, 6px 10px 0 #333, 18px 10px 0 #333, 20px 10px 0 #333, 6px 12px 0 #333, 8px 12px 0 #333, 16px 12px 0 #333, 18px 12px 0 #333, 6px 14px 0 #333, 8px 14px 0 #333, 10px 14px 0 #333, 14px 14px 0 #333, 16px 14px 0 #333, 20px 14px 0 #333, 6px 16px 0 #333, 10px 16px 0 #333, 12px 16px 0 #333, 14px 16px 0 #333, 20px 16px 0 #333, 6px 18px 0 #333, 12px 18px 0 #333, 20px 18px 0 #333, 6px 20px 0 #333, 8px 20px 0 #333, 10px 20px 0 #333, 12px 20px 0 #333, 14px 20px 0 #333, 16px 20px 0 #333, 18px 20px 0 #333, 20px 20px 0 #333;
 }
+
+.description {
+  width: 100%;
+}
+
+.description > dt {
+  position: relative;
+  float: left;
+  margin-right: 1.5rem;
+}
+
+.description > dt.-colon::after {
+  position: absolute;
+  top: 0;
+  right: -1.5rem;
+  z-index: -1;
+  content: ":";
+}
 /*# sourceMappingURL=nes.css.map */

index.html

@@ -76,22 +76,39 @@
       </section>
 
       <h3 class="title -is-4">dark theme</h3>
-      <section class="container -dark">
+      <section class="container _dark">
         <p>Good morning. Thou hast had a good night's sleep I hope.</p>
       </section>
 
       <h3 class="title -is-4">with title</h3>
-      <section class="container -dark -with-title">
+      <section class="container _dark -with-title">
         <label class="title">Command</label>
         <p>Good morning. Thou hast had a good night's sleep I hope.</p>
       </section>
 
       <h3 class="title -is-4">align <code>(-center, -right)</code></h3>
-      <section class="container -dark -with-title -center">
+      <section class="container _dark -with-title -center">
         <label class="title">Command</label>
         <p>Good morning. Thou hast had a good night's sleep I hope.</p>
       </section>
     </section>
+
+    <section class="container">
+      <h2 class="title -is-3">Description</h2>
+      <section class="container -with-title -center _dark" style="width: 170px; margin: 0;">
+        <label class="title">ENlX</label>
+        <dl class="description">
+          <dt class="-colon">LV</dt>
+          <dd class="_right">19</dd>
+          <dt class="-colon">HP</dt>
+          <dd class="_right">62</dd>
+          <dt class="-colon">MP</dt>
+          <dd class="_right">11</dd>
+          <dt class="">G</dt>
+          <dd class="_right">6871</dd>
+        </dl>
+      </section>
+    </section>
   </main>
 </body>
 

scss/base/_index.scss

@@ -4,3 +4,4 @@
 @import "variables.scss";
 @import "generic.scss";
 @import "animation.scss";
+@import "helper.scss";

scss/base/helper.scss

@@ -0,0 +1,7 @@
+._dark {
+  color: $white;
+}
+
+._right {
+  text-align: right;
+}

scss/elements/_index.scss

@@ -5,3 +5,4 @@
 @import "radio.scss";
 @import "container.scss";
 @import "checkbox.scss";
+@import "description.scss";

scss/elements/container.scss

@@ -1,6 +1,7 @@
 .container {
   position: relative;
   padding: 1.5rem 2rem;
+  margin: auto;
 
   &::before,
   &::after {
@@ -57,13 +58,17 @@
     }
   }
 
-  &.-dark {
+  &._dark {
     color: $white;
 
     &::before {
       background-color: $black;
     }
 
+    &::after {
+      border-color: $white;
+    }
+
     > .title {
       color: $white;
       background-color: $black;

scss/elements/description.scss

@@ -0,0 +1,17 @@
+.description {
+  width: 100%;
+
+  > dt {
+    position: relative;
+    float: left;
+    margin-right: 1.5rem;
+
+    &.-colon::after {
+      position: absolute;
+      top: 0;
+      right: -1.5rem;
+      z-index: -1;
+      content: ":";
+    }
+  }
+}