diff options
Diffstat (limited to 'src/css')
-rw-r--r-- | src/css/foundation/base/base.css | 107 | ||||
-rw-r--r-- | src/css/foundation/variable/color.css | 2 | ||||
-rw-r--r-- | src/css/foundation/variable/font-family.css | 1 | ||||
-rw-r--r-- | src/css/layout/footer.css | 3 | ||||
-rw-r--r-- | src/css/layout/header.css | 1 | ||||
-rw-r--r-- | src/css/layout/main.css | 5 | ||||
-rw-r--r-- | src/css/object/component/article.css | 40 | ||||
-rw-r--r-- | src/css/object/component/links.css | 11 | ||||
-rw-r--r-- | src/css/object/project/list-article.css | 9 | ||||
-rw-r--r-- | src/css/object/project/subtitle.css | 5 | ||||
-rw-r--r-- | src/css/object/project/title.css | 8 | ||||
-rw-r--r-- | src/css/object/utility/copyright.css | 5 | ||||
-rw-r--r-- | src/css/object/utility/icon.css (renamed from src/css/object/project/icon.css) | 0 | ||||
-rw-r--r-- | src/css/object/utility/subtitle.css | 7 | ||||
-rw-r--r-- | src/css/object/utility/tag-title.css | 15 | ||||
-rw-r--r-- | src/css/object/utility/title.css | 9 | ||||
-rw-r--r-- | src/css/style.css | 13 |
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"; |