diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/scss/_component.scss | 5 | ||||
-rw-r--r-- | src/scss/_project.scss | 11 | ||||
-rw-r--r-- | src/scss/_variable.scss | 24 | ||||
-rw-r--r-- | src/scss/foundation/_element.scss | 226 |
4 files changed, 110 insertions, 156 deletions
diff --git a/src/scss/_component.scss b/src/scss/_component.scss index fd1e3dd..07242b0 100644 --- a/src/scss/_component.scss +++ b/src/scss/_component.scss @@ -62,11 +62,12 @@ figure > figcaption { } .panel { - padding: $default-padding; + padding: $default-layout-padding; } .panel-primary { border: 1px solid $default-border-color; } + .panel-notice { color: #fff; background: #4ba0e1; @@ -137,7 +138,7 @@ figure > figcaption { } .notification { - padding: .2rem $default-padding; + padding: .2rem $default-layout-padding; text-align: center; background: $sidebar-active-color; } diff --git a/src/scss/_project.scss b/src/scss/_project.scss index 42b3a88..8408499 100644 --- a/src/scss/_project.scss +++ b/src/scss/_project.scss @@ -1,7 +1,7 @@ header { color: var(--custom-font-color, #fff); background: var(--custom-background-color, #000); - padding: .5rem $default-padding; + padding: .5rem $default-layout-padding; h1 { font-size: 140%; @@ -25,7 +25,7 @@ header { .global-menu { color: var(--custom-font-color, #fff); background: var(--custom-background-color, #000); - padding: .2rem $default-padding; + padding: .2rem $default-layout-padding; ul { list-style: none; @@ -47,7 +47,7 @@ header { z-index: 99999; li { - padding: .2rem $default-padding; + padding: .2rem $default-layout-padding; background: var(--custom-background-color, #000); width: 140px; font-size: 80%; @@ -120,6 +120,7 @@ main { .sidebar { font-size: 90%; + line-height: 1.8; background: $sidebar-background-color; border-right: 1px solid $sidebar-active-color; @@ -149,7 +150,7 @@ main { padding-left: 2rem; } nav > ul ul > li li a { - padding-left: 3rem; + padding-left: 2rem * 1 * 1.5; } @media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { @@ -185,7 +186,7 @@ main { } .sidebar-footer { - padding: $default-padding; + padding: $default-layout-padding; } footer { diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss index f87e369..fc6ea3f 100644 --- a/src/scss/_variable.scss +++ b/src/scss/_variable.scss @@ -1,33 +1,33 @@ $default-layout-width: 1024px; -$default-layout-margin: 2%; $default-font-size: 100%; +$default-line-space: 8px; +$default-line-height: line-height($default-line-space, $default-font-size); +$default-stack: stack($default-line-height, $default-font-size) * 4; + +$default-layout-margin: 0; +$default-layout-padding: $default-stack; + $default-font-color: #000; $default-font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -$default-line-height: 1.8; -$default-margin: 2rem; -$default-padding: 1.2rem; -$default-stack: 1.8rem; - // color $default-background-color: #fafafa; +$default-border-color: #f0f0f0; + +$default-link-text-color: #2e7eb3; +$default-link-text-hover-color: #38a0e4; $sidebar-background-color: #f9f9f9; $sidebar-hover-color: #eee; $sidebar-active-color: #eee; -$default-link-text-color: #2e7eb3; -$default-link-hover-text-color: #38a0e4; - -$default-border-color: #f0f0f0; - // code $code-font-size: .95rem; -$code-font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace; $code-block-background-color: #f4f6f8; $code-border-color: #f0f0f0; $code-inline-background-color: #f0f0f0; +$code-font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace; // breakpoint $default-breakpoints: ( diff --git a/src/scss/foundation/_element.scss b/src/scss/foundation/_element.scss index 4c68f6f..669318c 100644 --- a/src/scss/foundation/_element.scss +++ b/src/scss/foundation/_element.scss @@ -1,9 +1,21 @@ -body { - font-family: $default-font-family; +/*-----------------------* + Element v1.0.0-custom +*-----------------------*/ +* { + box-sizing: border-box; +} + +:root { + font-size: $default-font-size; + line-height: line-height($default-line-space, $default-font-size); + color: $default-font-color; + font-family: var(--custom-font-family-base, $default-font-family); font-feature-settings : 'pwid'; - line-height: $default-line-height; - background: $default-background-color; - margin: 0; +} + +body { + background-color: $default-background-color; + margin: $default-layout-margin; } h1, @@ -12,6 +24,7 @@ h3, h4, h5, h6 { + font-family: var(--custom-font-family-headings, $default-font-family); font-weight: bold; line-height: $default-line-height; @@ -22,28 +35,40 @@ h6 { } h1 { - font-size: 220%; - line-height: 1.2; + font-size: 240%; + line-height: line-height($default-line-space, 240%); } h2 { - font-size: 160%; - line-height: 1.4; + font-size: 200%; + line-height: line-height($default-line-space, 200%); } h3 { - font-size: 140%; + font-size: 160%; + line-height: line-height($default-line-space, 160%); } h4 { - font-size: 120%; + font-size: 140%; + line-height: line-height($default-line-space, 140%); } h5 { - font-size: 100%; + font-size: 120%; + line-height: line-height($default-line-space, 120%); } h6 { - font-size: 80%; + font-size: 100%; + line-height: line-height($default-line-space, 100%); } -p { - font-size: $default-font-size; +a { + color: var(--custom-link-text-color, $default-link-text-color); + text-decoration: none; + + &:focus, + &:active, + &:hover { + color: var(--custom-link-text-hover-color, $default-link-text-hover-color); + text-decoration: underline; + } } hr { @@ -52,6 +77,21 @@ hr { border: 0; } +p { + font-size: $default-font-size; +} + +img { + display: inline-block; + line-height: 0; +} + +img, +video { + height: auto; + max-width: 100%; +} + table { border-collapse: collapse; border: 1px solid $default-border-color; @@ -61,88 +101,73 @@ th, td { border-top: 1px solid $default-border-color; border-right: 1px solid $default-border-color; - padding: .4rem; - tr:nth-child(even) & { background: #f8f8f8; } + padding: .6rem; } th { background: #eee; font-weight: bold; + text-align: left; } -ul, -ol { - font-size: $default-font-size; - margin: 0; - margin-left: 1.5rem; +ul { + list-style-type: disc; } + ul { - &.unstyled { - list-style: none; - } - &.inline { - list-style: none; - } &.inline li { display: inline; + list-style: disc; padding-right: 2rem; } } -ul ul, -ol ol, -ul ol, -ol ul { - font-size: 100%; -} -li li { - font-size: 100%; -} -dl { - font-size: $default-font-size; - margin: 0 $default-margin; -} + dt { font-weight: bold; } dd { - margin: 0 0 .8rem $default-margin; -} -strong { - font-weight: bold; + margin-left: 2rem; } + blockquote { - background: #f9f9f9; - color: #959595; - margin-left: 0; - padding: .1rem .8rem; + color: #999; + padding: $default-layout-padding; + background-color: #f4f4f4; border-left: 4px solid $default-border-color; - - p:last-child { - margin: 0; - } + border-radius: .2rem; } code, pre, kbd { font-family: Menlo, Monaco, "Courier New", monospace; - font-size: 100%; } + +code, +kbd { + padding: .2rem; + border-radius: .2rem; +} +code { + background-color: #f4f4f4; +} +kbd { + color: #fff; + background-color: #333; +} + pre { + background-color: #f4f4f4; + padding: $default-layout-padding; overflow: auto; - padding: 1rem; - background: $code-block-background-color; white-space: pre-wrap; - border: 1px solid $code-border-color; border-radius: .2rem; code { - color: inherit; - background-color: transparent; padding: 0; - border: 0; + background-color: unset; } &.wrap { @@ -155,83 +180,10 @@ pre { max-height: 240px; overflow-y: scroll; } - &.prettyprint {} - -} -code { - font-family: $code-font-family; - font-size: $code-font-size; - background: $code-inline-background-color; - padding: .2rem; - border-radius: .2rem; -} -kbd { - padding: .2rem; - color: #fff; - background-color: #333; - border-radius: .2rem; -} -abbr, -acronym, -dfn { - border-bottom: 1px dotted #666; - cursor: help; -} -address { - display: block; - margin: 0 0 $default-margin; } -ins { - text-decoration: none; -} -sup, -sub { - font-size: $default-font-size; - height: 0; - line-height: 1; - position: relative; - vertical-align: baseline; -} -sup { - bottom: .5ex; -} -sub { - top: .5ex; -} -figure { - img { - display: block; - } - figcaption { - color: #333; - font-size: $default-font-size; - } -} - -/* Links */ -a { - color: $default-link-text-color; - text-decoration: underline; - &:focus, - &:active, - &:hover { - color: $default-link-hover-text-color; - } -} - -img { - max-width: 100%; - height: auto; -} - -input, -textarea { - color: $default-font-color; - font-size: 100%; - font-weight: normal; - line-height: 1.225; -} -textarea { - line-height: $default-line-height; +figcaption { + color: #333; + font-size: $default-font-size; + line-height: line-height($default-line-space, $default-font-size); } |