diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/sass/_class.scss | 85 | ||||
| -rw-r--r-- | assets/sass/_content.scss | 137 | ||||
| -rw-r--r-- | assets/sass/_header.scss | 20 | ||||
| -rw-r--r-- | assets/sass/_markdown.scss | 56 | ||||
| -rw-r--r-- | assets/sass/_primer.scss | 18 | ||||
| -rw-r--r-- | assets/sass/_sidebar.scss | 70 | ||||
| -rw-r--r-- | assets/sass/_var.scss | 53 | ||||
| -rw-r--r-- | assets/sass/main.scss | 32 | ||||
| -rw-r--r-- | assets/sass/modules/_archive.scss | 31 | ||||
| -rw-r--r-- | assets/sass/modules/_component.scss | 28 | ||||
| -rw-r--r-- | assets/sass/modules/_content.scss | 90 | ||||
| -rw-r--r-- | assets/sass/modules/_footer.scss (renamed from assets/sass/_footer.scss) | 4 | ||||
| -rw-r--r-- | assets/sass/modules/_header.scss | 18 | ||||
| -rw-r--r-- | assets/sass/modules/_pagination.scss (renamed from assets/sass/_pagination.scss) | 9 | ||||
| -rw-r--r-- | assets/sass/modules/_sidebar.scss | 39 |
15 files changed, 325 insertions, 365 deletions
diff --git a/assets/sass/_class.scss b/assets/sass/_class.scss new file mode 100644 index 0000000..f0fb73b --- /dev/null +++ b/assets/sass/_class.scss @@ -0,0 +1,85 @@ +body { + a { + color: $color-primary; + } + + a:hover { + color: $color-secondary; + text-decoration: none; + } +} + +// main title style +.main-title { + font-family: 'Product Sans', -apple-system, BlinkMacSystemFont, Arial, monospace; + font-weight: 700; + font-size: $font-size-logo; + white-space: nowrap; + display: block; +} + +.link-alter { + a { + color: $color-secondary; + } + + a:hover { + color: $color-primary-dark; + text-decoration: none; + } +} + +.markdown-body { + a { + color: $color-secondary; + } + + a:hover { + color: $color-primary-dark; + text-decoration: none; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $color-primary; + } + + h1 { + font-size: $font-size-l1; + border-bottom: $spliter; + margin-top: 1.5rem; + } + + h2 { + font-size: $font-size-l2; + border-bottom: $spliter; + margin-top: 1.25rem; + } + + h3 { + font-size: $font-size-l3; + } + + h4, + h5, + h6 { + font-size: $font-size-l4; + } + + hr { + background-color: $color-spliter; + } + + ul { + list-style-type: circle; + } + + img { + border: 2px solid $color-secondary; + border-radius: 1px; + } +}
\ No newline at end of file diff --git a/assets/sass/_content.scss b/assets/sass/_content.scss deleted file mode 100644 index 00fc162..0000000 --- a/assets/sass/_content.scss +++ /dev/null @@ -1,137 +0,0 @@ -#content { - padding: 0 1em 0 1em; - - // different padding when screen size below width-md(768px) - @media screen and (max-width: $width-md) { - padding: 0 1.5em 0 1.5em; - } -} - -#post { - padding: 1.5em 0 1.5em 0; -} - -// different padding of first & last child in archives page -#post-archive { - &:not(:first-child):not(:last-child) { - padding: 0.5em 0 0.5em 0; - } - - &:first-child { - padding: 1.5em 0 0.5em 0; - } - - &:last-child { - padding: 0.5em 0 1.5em 0; - } -} - -// spliter between two posts -#post+#post, -#post-archive+#post-archive { - border-top: $spliter; -} - -// post title font & color -#post-title { - font-size: $font-size-l1; - - @include link-primary(); -} - -#post-title-archive { - font-size: $font-size-l2; - - @include link-primary(); -} - -// post meta data style -#post-meta { - color: $color-mute; - padding: 0.5em 0 1em 0; - white-space: nowrap; - overflow-x: scroll; - - &::-webkit-scrollbar { - display: none; // WebKit - } - - scrollbar-width: none; // Firefox - -ms-overflow-style: none; // Microsoft - - @include link-secondary(); -} - -#post-meta-archive { - color: $color-mute; - padding: 0; - white-space: nowrap; - overflow-x: scroll; - - &::-webkit-scrollbar { - display: none; // WebKit - } - - scrollbar-width: none; // Firefox - -ms-overflow-style: none; // Microsoft - - @include link-secondary(); -} - -#post-aplayer { - font-family: inherit; - margin: 0 2px 1.5em 2px; -} - -// read more link style -#post-exlink { - margin: 0.5em 0 0 0; - - @include link-secondary(); -} - -// current tag indicator style in tags page -#page-info { - padding: 1.5em 0 1.5em 0; - font-size: $font-size-l3; - border-bottom: $spliter; -} - -// markdown article style -article { - padding-top: 1.5em; - padding-bottom: 1.5em; -} - -// in-post license style -#license { - @include link-secondary(); - - margin-bottom: 1.5em; -} - -// comment loading indicator style -#post-loading { - border-top: $spliter; - margin: 0 0 1.5em 0; - padding-top: 1.5em; - text-align: center; - - i { - font-size: 1.5em; - color: $color-primary; - } - - p { - margin: 0.5em 0 0 0; - } -} - -// spliter between comment & post will not show while iframe not loaded -#post-comment .utterances-frame { - border-top: $spliter; -} - -#post-comment #disqus_thread { - border-top: $spliter; -}
\ No newline at end of file diff --git a/assets/sass/_header.scss b/assets/sass/_header.scss deleted file mode 100644 index 08b279e..0000000 --- a/assets/sass/_header.scss +++ /dev/null @@ -1,20 +0,0 @@ -header { - padding: 1em 0 1em 0; - - #main-title { - @include pdsans-title(); - - &:hover { - text-decoration: none; - color: $color-secondary; - } - } - - #sub-title { - font-size: $font-size-l3; - display: block; - color: $color-mute; - } - - border-bottom: $spliter; -}
\ No newline at end of file diff --git a/assets/sass/_markdown.scss b/assets/sass/_markdown.scss deleted file mode 100644 index 4241caf..0000000 --- a/assets/sass/_markdown.scss +++ /dev/null @@ -1,56 +0,0 @@ -// primer CSS markdown color remap -@mixin markdown-remap { - h1, h2, h3, h4, h5, h6 { - color: $color-primary; - } - - h1 { - font-size: $font-size-l1; - border-bottom: $spliter; - } - - h2 { - font-size: $font-size-l2; - border-bottom: $spliter; - } - - h3 { - font-size: $font-size-l3; - } - - h4, h5, h6 { - font-size: $font-size-l4; - } - - hr { - background-color: $color-spliter; - } - - ul { - list-style-type: circle; - } - - @include link-secondary(); - - img { - border: 2px solid $color-secondary; - border-radius: 1px; - } -} - -#post-content { - &.markdown-body { - @include markdown-remap(); - } -} - -#post-summary { - &.markdown-body { - @include markdown-remap(); - - // do not show heads in summary - h1, h2, h3, h4, h5, h6 { - display: none; - } - } -}
\ No newline at end of file diff --git a/assets/sass/_primer.scss b/assets/sass/_primer.scss index cfea983..de96f52 100644 --- a/assets/sass/_primer.scss +++ b/assets/sass/_primer.scss @@ -1,21 +1,3 @@ -@font-face { - font-family: "Product Sans"; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local("Product Sans Bold"), local("ProductSans-Bold"), - url("https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/product-sans/product-sans-bold.woff2") format("woff2"); -} - -@font-face { - font-family: "Cascadia Code"; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local("Cascadia Code"), local("Cascadia Mono"), - url("https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/cascadia-code/cascadia.woff2") format("woff2"), -} - // @primer/css/support/variables/layout.scss // fixed-width container variables $container-width: 900px !default; diff --git a/assets/sass/_sidebar.scss b/assets/sass/_sidebar.scss deleted file mode 100644 index 9cadddf..0000000 --- a/assets/sass/_sidebar.scss +++ /dev/null @@ -1,70 +0,0 @@ -#sidebar { - ul { - list-style-type: none; - } - - padding: 1.5em 1em 1.5em 1em; - - // different padding when screen size below width-md(768px) - @media screen and (max-width: $width-md) { - border-top: $spliter; - padding: 1.5em 1.5em 1.5em 1.5em; - } - - h5 { - font-size: $font-size-l3; - } - - @include link-secondary(); - - #widget-toc, - #widget-pages, - #widget-tags, - #widget-links { - - div, - ul { - margin: 0.5em 0em 0.5em 0em; - } - } - - #widget-bgm img { - margin: 0.5em 0em 0.5em 0em; - width: 100%; - border-radius: 2px; - filter: grayscale(50%); - - @media screen and (max-width: $width-md) { - width: 50%; - } - } -} - -#aplayer { - font-family: inherit; -} - -#scroll-top { - cursor: pointer; - position: fixed; - width: 2.5em; - height: 2.5em; - right: 1em; - bottom: 1em; - color: $color-primary; - background-color: $color-spliter; - border-radius: 100%; - line-height: 2.5em; - text-align: center; - vertical-align: middle; - display: inline-block; - - &:hover { - color: $color-secondary; - } - - i { - font-size: 1.5em; - line-height: inherit; - } -}
\ No newline at end of file diff --git a/assets/sass/_var.scss b/assets/sass/_var.scss index a7a792f..5164e82 100644 --- a/assets/sass/_var.scss +++ b/assets/sass/_var.scss @@ -6,44 +6,29 @@ $color-mute: #9EA1A3 !default; // https://irocore.com/suzu-iro/ $color-spliter: #E5E2E4 !default; // https://irocore.com/komachinezu/ // font size list -$font-size-logo: 2.5em !default; // Logo Only -$font-size-l1: 1.75em !default; // Primer CSS H1 -$font-size-l2: 1.5em !default; // Primer CSS H2 -$font-size-l3: 1.25em !default; // Primer CSS H3 -$font-size-l4: 1em !default; // Primer CSS H4 & Normal Text +$font-size-logo: 2.5rem !default; // Logo Only +$font-size-l1: 1.75rem !default; // Primer CSS H1 +$font-size-l2: 1.5rem !default; // Primer CSS H2 +$font-size-l3: 1.25rem !default; // Primer CSS H3 +$font-size-l4: 1rem !default; // Primer CSS H4 & Normal Text // divider css $spliter: 1px solid $color-spliter !default; -// link color mixin -@mixin link-primary { - a { - color: $color-primary; - } - - a:hover { - color: $color-secondary; - text-decoration: none; - } -} - -@mixin link-secondary { - a { - color: $color-secondary; - } - - a:hover { - color: $color-primary-dark; - text-decoration: none; - } +@font-face { + font-family: "Product Sans"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local("Product Sans Bold"), local("ProductSans-Bold"), + url("https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/product-sans/product-sans-bold.woff2") format("woff2"); } -// title css which also used in 404 -@mixin pdsans-title { - font-family: 'Product Sans', -apple-system, BlinkMacSystemFont, Arial, monospace; - font-weight: 700; - font-size: $font-size-logo; - white-space: nowrap; - display: block; - color: $color-primary; +@font-face { + font-family: "Cascadia Code"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("Cascadia Code"), local("Cascadia Mono"), + url("https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/cascadia-code/cascadia.woff2") format("woff2"), }
\ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 8a6120d..95154d0 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,12 +1,10 @@ // custom variables @import "custom"; - -//variables +// variables @import "_var"; // cover primer variables @import "_primer.scss"; - // include only used part of @primer/css/core @import "@primer/css/base/index.scss"; @import "@primer/css/layout/index.scss"; @@ -14,23 +12,13 @@ // utilities always go last so that they can override components @import "@primer/css/utilities/index.scss"; -@import "_header"; - -// list page & single page content part style -@import "_content"; - -// sidebar, progress indicator and global aplayer style -@import "_sidebar"; - -// markdown style cover in summary & in-post content -@import "_markdown"; - -@import "_pagination"; - -@import "_footer"; +// global classes +@import "_class"; -// for 404 page -#not-found { - @include pdsans-title(); - padding-top: 1em; -}
\ No newline at end of file +@import "modules/_header"; +@import "modules/_content"; +@import "modules/_archive"; +@import "modules/_sidebar"; +@import "modules/_component"; +@import "modules/_footer"; +@import "modules/_pagination";
\ No newline at end of file diff --git a/assets/sass/modules/_archive.scss b/assets/sass/modules/_archive.scss new file mode 100644 index 0000000..88b2993 --- /dev/null +++ b/assets/sass/modules/_archive.scss @@ -0,0 +1,31 @@ +.post-archive { + &:not(:last-child) { + padding: 0.5rem 0; + } + + &:last-child { + padding: 0.5rem 0 1rem 0; + } +} + +.post-archive+.post-archive { + border-top: $spliter; +} + +.post-title-archive { + font-size: $font-size-l2; +} + +.post-meta-archive { + color: $color-mute; + padding: 0; + white-space: nowrap; + overflow-x: scroll; + + &::-webkit-scrollbar { + display: none; // WebKit + } + + scrollbar-width: none; // Firefox + -ms-overflow-style: none; // Microsoft +}
\ No newline at end of file diff --git a/assets/sass/modules/_component.scss b/assets/sass/modules/_component.scss new file mode 100644 index 0000000..9e64add --- /dev/null +++ b/assets/sass/modules/_component.scss @@ -0,0 +1,28 @@ +#aplayer { + font-family: inherit; +} + +#scroll-top { + cursor: pointer; + position: fixed; + width: 2.5rem; + height: 2.5rem; + right: 1rem; + bottom: 1rem; + color: $color-primary; + background-color: $color-spliter; + border-radius: 100%; + line-height: 2.5rem; + text-align: center; + vertical-align: middle; + display: inline-block; + + &:hover { + color: $color-secondary; + } + + i { + font-size: 1.5rem; + line-height: inherit; + } +}
\ No newline at end of file diff --git a/assets/sass/modules/_content.scss b/assets/sass/modules/_content.scss new file mode 100644 index 0000000..a88671c --- /dev/null +++ b/assets/sass/modules/_content.scss @@ -0,0 +1,90 @@ +#content { + padding: 0 1rem; + + // different padding when screen size below width-md(768px) + @media screen and (max-width: $width-md) { + padding: 0 1.5rem; + } +} + +article { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.post { + padding: 1.25rem 0 1.5rem 0; +} + +.post+.post { + border-top: $spliter; +} + +.post-title { + font-size: $font-size-l1; +} + +.post-meta { + color: $color-mute; + padding: 0.5rem 0 1rem 0; + white-space: nowrap; + overflow-x: scroll; + + &::-webkit-scrollbar { + display: none; // WebKit + } + + scrollbar-width: none; // Firefox + -ms-overflow-style: none; // Microsoft +} + +.post-summary { + + h1, + h2, + h3, + h4, + h5, + h6 { + display: none; + } +} + +#post-aplayer { + font-family: inherit; + margin: 0 2px 1.5rem 2px; +} + +.license { + margin-bottom: 1.5rem; +} + +.post-loading { + border-top: $spliter; + margin: 0 0 1.5rem 0; + padding-top: 1.5rem; + text-align: center; + + i { + font-size: 1.5rem; + color: $color-primary; + } + + p { + margin: 0.5rem 0 0 0; + } +} + +.post-comment .utterances-frame { + border-top: $spliter; +} + +.post-comment #disqus_thread { + border-top: $spliter; +} + +.page-info { + padding: 1rem 0; + font-size: $font-size-l3; + border-bottom: $spliter; +}
\ No newline at end of file diff --git a/assets/sass/_footer.scss b/assets/sass/modules/_footer.scss index 4be7f36..1d106dd 100644 --- a/assets/sass/_footer.scss +++ b/assets/sass/modules/_footer.scss @@ -3,8 +3,6 @@ footer { margin-top: auto; p { - margin: 2em 0 2em 0; + margin: 2rem 0; } - - @include link-secondary(); }
\ No newline at end of file diff --git a/assets/sass/modules/_header.scss b/assets/sass/modules/_header.scss new file mode 100644 index 0000000..b204921 --- /dev/null +++ b/assets/sass/modules/_header.scss @@ -0,0 +1,18 @@ +header { + &>div { + padding: 2rem 1rem; + + // different padding when screen size below width-md(768px) + @media screen and (max-width: $width-md) { + padding: 2rem 1.5rem; + } + } + + .sub-title { + font-size: $font-size-l3; + display: block; + color: $color-mute; + } + + border-bottom: $spliter; +}
\ No newline at end of file diff --git a/assets/sass/_pagination.scss b/assets/sass/modules/_pagination.scss index 992fe5a..e2e9fbf 100644 --- a/assets/sass/_pagination.scss +++ b/assets/sass/modules/_pagination.scss @@ -1,15 +1,14 @@ -#pagination { +.pagination { text-align: center; // spliter between pagination and last post block border-top: $spliter; - padding: 1em 0 1em 0; + padding: 1rem 0; li { display: inline; - @include link-primary(); &.pag-item { - padding: 0em 0.25em; + padding: 0 0.25rem; a { vertical-align: middle; @@ -23,7 +22,7 @@ } i { - padding: 0em 0.25em; + padding: 0 0.25rem; vertical-align: middle; } }
\ No newline at end of file diff --git a/assets/sass/modules/_sidebar.scss b/assets/sass/modules/_sidebar.scss new file mode 100644 index 0000000..e7cfa49 --- /dev/null +++ b/assets/sass/modules/_sidebar.scss @@ -0,0 +1,39 @@ +#sidebar { + ul { + list-style-type: none; + } + + padding: 1.5rem 1rem; + + // different padding when screen size below width-md(768px) + @media screen and (max-width: $width-md) { + border-top: $spliter; + padding: 1.5rem; + } + + h5 { + font-size: $font-size-l3; + } + + .widget-toc, + .widget-pages, + .widget-tags, + .widget-links { + + div, + ul { + margin: 0.5rem 0; + } + } + + .widget-bgm img { + margin: 0.5rem 0; + width: 100%; + border-radius: 2px; + filter: grayscale(50%); + + @media screen and (max-width: $width-md) { + width: 50%; + } + } +}
\ No newline at end of file |