記事部分の修正

17 files changed, 214 insertions, 27 deletions

diff --git a/src/css/foundation/base/base.css b/src/css/foundation/base/base.css
index 5246d21..458fc0a 100644
--- a/src/css/foundation/base/base.css
+++ b/src/css/foundation/base/base.css
@@ -1,19 +1,116 @@
-body {
+html {
   font-size: 62.5%;
+}
+
+body {
+  color: var(--color-text);
+  font-size: 1.0rem;
   font-family: var(--SanFrancisco);
+  line-height: 1.57;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  font-weight: normal;
+}
+
+h1 {
+  font-size: 3.2rem;
+}
+
+h2 {
+  font-size: 2.8rem;
+}
+
+h3 {
+  font-size: 2.4rem;
+}
+
+h4 {
+  font-size: 2.0rem;
+}
+
+h5 {
+  font-size: 1.8rem;
+}
+
+h6 {
+  font-size: 1.6rem;
+}
+
+p {
+  font-size: 1.4rem;
 }
 
 a {
   color: var(--link-color);
   text-decoration: none;
+  &:hover {
+    color: var(--link-hover);
+  }
+}
+
+ul {
+  & li {
+    list-style: disc;
+  }
 }
 
-ul,
 ol {
-  margin: 0;
-  padding: 0;
+  & li {
+    list-style: decimal;
+  }
 }
 
 li {
-  list-style: none;
+  font-size: 1.4rem;
+}
+
+dt {
+  margin-top: 16px;
+  font-size: 1.4rem;
+}
+
+dd {
+  margin: 8px 0 0 20px;
+  font-size: 1.4rem;
+}
+
+pre {
+  display: block;
+  width: 96%;
+  padding: 12px;
+  border-radius: 3px;
+  background-color: #f8f8f8;
+  font-size: 1.2rem;
+  word-wrap: break-word;
+  overflow: auto;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: 1.4rem;
+}
+
+th, td {
+  padding: 8px;
+  border: 1px solid #eee;
+}
+
+th {
+  background-color: #fafafa;
+  font-weight: normal;
+}
+
+del {
+  color: #999;
+}
+
+blockquote {
+  margin: 0;
+  padding: 8px 12px;
+  border-left: 3px solid #ccc;
+  & * {
+    margin: 0;
+  }
 }
diff --git a/src/css/foundation/variable/color.css b/src/css/foundation/variable/color.css
index d6f447f..30dfe5d 100644
--- a/src/css/foundation/variable/color.css
+++ b/src/css/foundation/variable/color.css
@@ -2,5 +2,5 @@
   --bg-color: #fff;
   --color-text: #555;
   --link-color: #337ab7;
-  --link-hover: #137b75;
+  --link-hover: #175081;
 }
diff --git a/src/css/foundation/variable/font-family.css b/src/css/foundation/variable/font-family.css
index 7091c1c..6cc6eca 100644
--- a/src/css/foundation/variable/font-family.css
+++ b/src/css/foundation/variable/font-family.css
@@ -1,3 +1,4 @@
 :root {
   --SanFrancisco: -apple-system, 'BlinkMacSystemFont', "Helvetica Neue", Helvetica, "Roboto", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
+  --OpenSans: 'Open Sans', sans-serif;
 }
diff --git a/src/css/layout/footer.css b/src/css/layout/footer.css
new file mode 100644
index 0000000..d92ebb7
--- /dev/null
+++ b/src/css/layout/footer.css
@@ -0,0 +1,3 @@
+.l-footer {
+  padding: 24px 0;
+}
diff --git a/src/css/layout/header.css b/src/css/layout/header.css
index c13f710..0a09239 100644
--- a/src/css/layout/header.css
+++ b/src/css/layout/header.css
@@ -2,5 +2,4 @@
   display: block;
   padding: 20px 0;
   text-align: center;
-  background: #111;
 }
diff --git a/src/css/layout/main.css b/src/css/layout/main.css
new file mode 100644
index 0000000..7ce1aa7
--- /dev/null
+++ b/src/css/layout/main.css
@@ -0,0 +1,5 @@
+.l-main {
+  width: 96%;
+  max-width: 720px;
+  margin: 40px auto 0;
+}
diff --git a/src/css/object/component/article.css b/src/css/object/component/article.css
new file mode 100644
index 0000000..8ed51a6
--- /dev/null
+++ b/src/css/object/component/article.css
@@ -0,0 +1,40 @@
+.c-article {
+  &__title {
+    font-size: 2.4rem;
+    font-weight: 300;
+    font-family: var(--OpenSans);
+    & a {
+      color: var(--color-text);
+      &:hover {
+        color: var(--link-hover);
+      }
+    }
+  }
+  &__meta {
+    font-size: 1.4rem;
+    line-height: 1;
+  }
+  &__summary {
+    font-size: 1.4rem;
+    color: #999;
+    line-height: 1.57;
+    & p {
+      margin: 0;
+    }
+  }
+  &__btn {
+    display: inline-block;
+    padding-bottom: 4px;
+    font-size: 1.4rem;
+    &::after {
+      content: "";
+      display: inline-block;
+      margin-left: 3px;
+      width: 5px;
+      height: 5px;
+      border: solid currentColor;
+      border-width: 1px 1px 0 0;
+      transform: rotate(45deg);
+    }
+  }
+}
diff --git a/src/css/object/component/links.css b/src/css/object/component/links.css
index 154d2c7..434ba06 100644
--- a/src/css/object/component/links.css
+++ b/src/css/object/component/links.css
@@ -2,19 +2,22 @@
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  margin-top: 8px;
+  margin: 8px 0 0;
+  padding: 0;
   & a {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 30px;
     height: 30px;
-    border: 1px solid #ccc;
+    border: 1px solid;
+    border-color: var(--color-text);
     border-radius: 50%;
-    color: #ccc;
+    color: var(--color-text);
   }
   &__item {
-    margin: 16px 8px 0;
+    margin: 8px 8px 0;
+    list-style: none;
   }
   &__icon {
     width: 16px;
diff --git a/src/css/object/project/list-article.css b/src/css/object/project/list-article.css
new file mode 100644
index 0000000..e3f1135
--- /dev/null
+++ b/src/css/object/project/list-article.css
@@ -0,0 +1,9 @@
+.p-list-article {
+  margin-top: 40px;
+  &:first-child {
+    margin-top: 0;
+  }
+  &__btn {
+    margin-top: 16px;
+  }
+}
diff --git a/src/css/object/project/subtitle.css b/src/css/object/project/subtitle.css
deleted file mode 100644
index e8a8139..0000000
--- a/src/css/object/project/subtitle.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.p-subtitle {
-  margin: 12px 0 0 0;
-  color: #fff;
-  font-size: 1.2rem;
-}
diff --git a/src/css/object/project/title.css b/src/css/object/project/title.css
deleted file mode 100644
index d841f26..0000000
--- a/src/css/object/project/title.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.p-title {
-  margin: 0;
-  font-size: 2.0rem;
-  &__link {
-    color: #fff;
-    font-weight: normal;
-  }
-}
diff --git a/src/css/object/utility/copyright.css b/src/css/object/utility/copyright.css
new file mode 100644
index 0000000..93ef8ed
--- /dev/null
+++ b/src/css/object/utility/copyright.css
@@ -0,0 +1,5 @@
+.copyright {
+  margin: 24px 0 0;
+  text-align: center;
+  font-size: 1.2rem;
+}
diff --git a/src/css/object/project/icon.css b/src/css/object/utility/icon.css
index c3d8809..c3d8809 100644
--- a/src/css/object/project/icon.css
+++ b/src/css/object/utility/icon.css
diff --git a/src/css/object/utility/subtitle.css b/src/css/object/utility/subtitle.css
new file mode 100644
index 0000000..095ef8f
--- /dev/null
+++ b/src/css/object/utility/subtitle.css
@@ -0,0 +1,7 @@
+.subtitle {
+  margin: 12px 0 0 0;
+  color: var(--color-text);
+  font-size: 1.2rem;
+  font-weight: 300;
+  font-family: var(--OpenSans);
+}
diff --git a/src/css/object/utility/tag-title.css b/src/css/object/utility/tag-title.css
new file mode 100644
index 0000000..727346f
--- /dev/null
+++ b/src/css/object/utility/tag-title.css
@@ -0,0 +1,15 @@
+.tag-title {
+  display: inline-block;
+  margin: 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid currentColor;
+  color: var(--color-text);
+  font-weight: 300;
+  font-size: 2.4rem;
+  font-family: var(--OpenSans);
+  &::before {
+    content: "#";
+    display: inline-block;
+    margin-right: 4px;
+  }
+}
diff --git a/src/css/object/utility/title.css b/src/css/object/utility/title.css
new file mode 100644
index 0000000..e91eef5
--- /dev/null
+++ b/src/css/object/utility/title.css
@@ -0,0 +1,9 @@
+.title {
+  margin: 0;
+  font-size: 4.0rem;
+  &__link {
+    color: var(--color-text);
+    font-weight: 300;
+    font-family: var(--OpenSans);
+  }
+}
diff --git a/src/css/style.css b/src/css/style.css
index 85c0365..5245795 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -7,10 +7,17 @@
 
 /* layout */
 @import "layout/header.css";
+@import "layout/main.css";
+@import "layout/footer.css";
 
 /* object */
 @import "object/component/links.css";
+@import "object/component/article.css";
 
-@import "object/project/title.css";
-@import "object/project/subtitle.css";
-@import "object/project/icon.css";
+@import "object/project/list-article.css";
+
+@import "object/utility/title.css";
+@import "object/utility/subtitle.css";
+@import "object/utility/tag-title.css";
+@import "object/utility/icon.css";
+@import "object/utility/copyright.css";