記事部分の修正

25 files changed, 236 insertions, 50 deletions

diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index 1f89bf9..18cbad0 100755
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -1,17 +1,17 @@
-<article>
+<article class="c-article p-list-article">
   <header>
-    <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
-    <p>
+    <h2 class="c-article__title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+    <p class="c-article__meta">
       Posted on
       <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
         {{ .Date.Format "Jan 2, 2006" }}
       </time>
     </p>
   </header>
-  <div>
+  <div class="c-article__summary">
     {{ .Summary }}
   </div>
   {{ if .Truncated }}
-  <a href="{{ .Permalink }}">Read more</a></li>
+  <a href="{{ .Permalink }}" class="c-article__btn p-list-article__btn">Read more</a></li>
   {{ end }}
 </article>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index d1b1f91..963d1e7 100755
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,6 +1,6 @@
 {{ partial "header.html" . }}
 <section>
-  <h2>{{ .Title }}</h2>
+  <h2 class="tag-title">{{ .Title }}</h2>
   {{ range .Data.Pages }}
   {{ .Render "li" }}
   {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 4c5df09..edb26fd 100755
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -3,7 +3,7 @@
 <article>
   <header>
     <h1>{{ .Title }}</h1>
-    <div>
+    <div class="">
       <div>
         Posted on
         <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
diff --git a/layouts/index.html b/layouts/index.html
index 1bc1ca6..9eb8336 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,11 +1,9 @@
 {{ partial "header.html" . }}
-<div>
-  {{ range $index, $page := .Paginator.Pages }}
-  {{ if ne $index 0 }}
-  {{ end }}
-  {{ .Render "li" }}
-  {{ end }}
-</div>
+{{ range $index, $page := .Paginator.Pages }}
+{{ if ne $index 0 }}
+{{ end }}
+{{ .Render "li" }}
+{{ end }}
 {{ partial "pagination.html" .Paginator }}
 {{ partial "siteinfo.html" . }}
 {{ partial "footer.html" . }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index e5e45b8..568128e 100755
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,6 +1,8 @@
   </main>
-  <footer>
-    <p>
+  <footer class="l-footer">
+    {{ partial "link.html" . }}
+
+    <p class="copyright">
       {{ if .Site.Params.author }}
         {{ if .Site.Params.authorwebsite }}
           <a href="{{ .Site.Params.authorwebsite }}">{{ .Site.Params.author }}</a>
@@ -17,7 +19,6 @@
         <a href="{{ "" | absLangURL }}">{{ .Site.Title }}</a>
       {{ end }}
     </p>
-    {{ partial "link.html" . }}
   </footer>
 
   {{ with .Site.Params.ga_api_key }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 4006fa5..c8241e8 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -38,7 +38,7 @@
   {{ end }}
   <!-- Hugo Version number -->
   {{ .Hugo.Generator -}}
-
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
   <link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css" />
   <link rel="shortcut icon" href="{{ .Site.BaseURL }}images/favicon.ico" />
   {{ if eq .URL "/" }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 88e5c46..98cc25e 100755
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -5,12 +5,12 @@
   {{ partial "svgpack-sprite.html" . }}
   <header class="l-header">
     {{ if .IsPage }}
-    <p class="p-title"><a href="{{ .Site.BaseURL }}" class="p-title__link">{{ .Site.Title }}</a></p>
+    <p class="title"><a href="{{ .Site.BaseURL }}" class="title__link">{{ .Site.Title }}</a></p>
     {{ else }}
-    <h1 class="p-title"><a href="{{ .Site.BaseURL }}" class="p-title__link">{{ .Site.Title }}</a></h1>
+    <h1 class="title"><a href="{{ .Site.BaseURL }}" class="title__link">{{ .Site.Title }}</a></h1>
     {{ end }}
     {{ with .Site.Params.subtitle }}
-    <p class="p-subtitle">
+    <p class="subtitle">
       {{ . }}
     </p>
     {{ end }}
@@ -21,4 +21,4 @@
     </a>
     {{ end }}
   </header>
-  <main>
+  <main class="l-main">
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";
diff --git a/static/css/style.css b/static/css/style.css
index b82a588..e6f605f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1 +1 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}body{font-size:62.5%;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Roboto,Arial,Hiragino Sans,Hiragino Kaku Gothic ProN,Meiryo,sans-serif}a{color:#337ab7;text-decoration:none}ul,ol{margin:0;padding:0}li{list-style:none}.l-header{display:block;padding:20px 0;text-align:center;background:#111}.c-links{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:8px}.c-links a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:30px;height:30px;border:1px solid #ccc;border-radius:50%;color:#ccc}.c-links__item{margin:16px 8px 0}.c-links__icon{width:16px;height:16px;fill:currentColor}.p-title{margin:0;font-size:2.0rem}.p-title__link{color:#fff;font-weight:400}.p-subtitle{margin:12px 0 0;color:#fff;font-size:1.2rem}.icon{width:32px;height:32px}
\ No newline at end of file
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}html{font-size:62.5%}body{color:#555;font-size:1.0rem;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Roboto,Arial,Hiragino Sans,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;line-height:1.57}h1,h2,h3,h4,h5,h6{font-weight:400}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:#337ab7;text-decoration:none}a:hover{color:#175081}ul li{list-style:disc}ol li{list-style:decimal}li{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:400}del{color:#999}blockquote{margin:0;padding:8px 12px;border-left:3px solid #ccc}blockquote *{margin:0}.l-header{display:block;padding:20px 0;text-align:center}.l-main{width:96%;max-width:720px;margin:40px auto 0}.l-footer{padding:24px 0}.c-links{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:8px 0 0;padding:0}.c-links a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:30px;height:30px;border:1px solid;border-color:#555;border-radius:50%;color:#555}.c-links__item{margin:8px 8px 0;list-style:none}.c-links__icon{width:16px;height:16px;fill:currentColor}.c-article__title{font-size:2.4rem;font-weight:300;font-family:Open Sans,sans-serif}.c-article__title a{color:#555}.c-article__title a:hover{color:#175081}.c-article__meta{font-size:1.4rem;line-height:1}.c-article__summary{font-size:1.4rem;color:#999;line-height:1.57}.c-article__summary p{margin:0}.c-article__btn{display:inline-block;padding-bottom:4px;font-size:1.4rem}.c-article__btn:after{content:"";display:inline-block;margin-left:3px;width:5px;height:5px;border:solid currentColor;border-width:1px 1px 0 0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.p-list-article{margin-top:40px}.p-list-article:first-child{margin-top:0}.p-list-article__btn{margin-top:16px}.title{margin:0;font-size:4.0rem}.title__link{color:#555;font-weight:300;font-family:Open Sans,sans-serif}.subtitle{margin:12px 0 0;color:#555;font-size:1.2rem;font-weight:300;font-family:Open Sans,sans-serif}.tag-title{display:inline-block;margin:0;padding-bottom:8px;border-bottom:1px solid currentColor;color:#555;font-weight:300;font-size:2.4rem;font-family:Open Sans,sans-serif}.tag-title:before{content:"#";display:inline-block;margin-right:4px}.icon{width:32px;height:32px}.copyright{margin:24px 0 0;text-align:center;font-size:1.2rem}
\ No newline at end of file