From 6a60dae2cd56f86e8619667bfeca56d635d21cb0 Mon Sep 17 00:00:00 2001 From: codecalm Date: Thu, 26 Sep 2019 22:00:08 +0200 Subject: [PATCH] typography elements, dark mode fixes --- pages/_docs/typography.md | 33 ++++++++++++++ pages/_includes/layout/page-title.html | 5 +-- pages/_layouts/default.html | 2 +- scss/_dark.scss | 2 + scss/_variables.scss | 9 ++-- scss/layout/_page.scss | 3 +- scss/ui/_buttons.scss | 1 - scss/ui/_examples.scss | 2 +- scss/ui/_pagination.scss | 2 +- scss/ui/_typo.scss | 14 +----- scss/ui/typo/_hr.scss | 61 ++++++++++++++++++++++++++ 11 files changed, 109 insertions(+), 25 deletions(-) create mode 100644 scss/ui/typo/_hr.scss diff --git a/pages/_docs/typography.md b/pages/_docs/typography.md index 990f7bbd..43d39cc9 100644 --- a/pages/_docs/typography.md +++ b/pages/_docs/typography.md @@ -40,6 +40,39 @@ Text Superscripted sup
 x = y + 2 var
 {% endexample %} +### Horizontal rules + +{% example %} +
+{% endexample %} + +#### Horizontal rules with label + +{% example %} +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. +

+
+ Rule text +
+

+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

+
+ Rule text +
+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. +

+
+ Rule text +
+

+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

+{% endexample %} + + ### Optimized for Asian, African, and Middle Eastern alphabets {% example %} diff --git a/pages/_includes/layout/page-title.html b/pages/_includes/layout/page-title.html index 9b8767ad..6fe9009e 100644 --- a/pages/_includes/layout/page-title.html +++ b/pages/_includes/layout/page-title.html @@ -2,11 +2,9 @@

{{ page.page-title | default: layout.page-title }} - {% if page.done %} - {% include ui/icon.html icon="check" color="success" %} - {% endif %}

+ {% if page.page-right %}
{% if page.page-right == "date" %} @@ -36,5 +34,6 @@ {% endif %}
+ {% endif %}
{% endif %} diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html index 267dfb84..cfb0dd2b 100644 --- a/pages/_layouts/default.html +++ b/pages/_layouts/default.html @@ -17,7 +17,7 @@ layout: base
- + {% include layout/page-title.html %} {{ content }}
diff --git a/scss/_dark.scss b/scss/_dark.scss index 0c20008f..b13bf057 100644 --- a/scss/_dark.scss +++ b/scss/_dark.scss @@ -20,6 +20,8 @@ .topnav, .navbar, .form-control, + .form-select, + .form-switch .form-check-input, .selectgroup-button { background: rgba(0, 0, 0, .1); color: inherit; diff --git a/scss/_variables.scss b/scss/_variables.scss index 64e1494a..9f65ee6c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -43,9 +43,9 @@ $dark: #1c2c41 !default; $black: #000 !default; $white: #fff !default; -$body-bg: #f7fafc !default; +$body-bg: #f5f7fb !default; +$body-color: #343a40 !default; -$text-color: #495057 !default; $text-muted: #888e9a !default; $text-muted-light: #adb5bd !default; @@ -125,6 +125,9 @@ $h6-font-size: $font-size-base * .875 !default; $blockquote-font-size: $h4-font-size !default; $lead-font-size: $h3-font-size !default; +$hr-opacity: .1 !default; +$hr-margin-y: 1rem !default; + //Sizing $spacer: 1rem !default; $spacers: ( @@ -270,8 +273,6 @@ $card-border-color: $border-color !default; $list-group-border-color: $border-color !default; $list-group-action-color: inherit !default; -$body-color: $dark !default; - $input-disabled-bg: $gray-100 !default; $input-border-color: $border-color !default; $input-placeholder-color: $text-muted-light !default; diff --git a/scss/layout/_page.scss b/scss/layout/_page.scss index bcaba6fd..f728767f 100644 --- a/scss/layout/_page.scss +++ b/scss/layout/_page.scss @@ -2,8 +2,7 @@ display: flex; align-items: center; min-height: 2.5rem; - margin: 1rem 0; - color: $text-muted; + margin: .5rem 0 1.5rem; } .page-title { diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss index 1735c948..aba584f8 100644 --- a/scss/ui/_buttons.scss +++ b/scss/ui/_buttons.scss @@ -1,6 +1,5 @@ .btn { letter-spacing: .03em; - text-transform: uppercase; box-shadow: 0 1px 1px rgba(0, 0, 0, .03); .flag { diff --git a/scss/ui/_examples.scss b/scss/ui/_examples.scss index 00eeb102..3d3dab30 100644 --- a/scss/ui/_examples.scss +++ b/scss/ui/_examples.scss @@ -1,5 +1,5 @@ .example { - padding: 1.5rem; + padding: 2rem; margin: 1rem 0 0; border: 1px solid $border-color; border-radius: 3px 3px 0 0; diff --git a/scss/ui/_pagination.scss b/scss/ui/_pagination.scss index 482bc155..3d71f2fc 100644 --- a/scss/ui/_pagination.scss +++ b/scss/ui/_pagination.scss @@ -40,7 +40,7 @@ .page-item-title { font-size: $h3-font-size; font-weight: 400; - color: $text-color; + color: $body-color; .page-link:hover & { color: $link-color; diff --git a/scss/ui/_typo.scss b/scss/ui/_typo.scss index 1b6c346e..e59facd2 100644 --- a/scss/ui/_typo.scss +++ b/scss/ui/_typo.scss @@ -1,3 +1,5 @@ +@import 'typo/hr'; + .lead { line-height: 1.4; } @@ -62,19 +64,7 @@ code { } } -hr, -.hr { - margin: 2rem auto; - border-top-color: $border-color; -} -.hr-dash { - border-top-style: dashed; -} - -.hr-dot { - border-top-style: dotted; -} pre { padding: 1rem; diff --git a/scss/ui/typo/_hr.scss b/scss/ui/typo/_hr.scss new file mode 100644 index 00000000..77b12b26 --- /dev/null +++ b/scss/ui/typo/_hr.scss @@ -0,0 +1,61 @@ + +/** +Horizontal rules + */ +.hr { + @extend hr; +} + +/** +Hr text + */ +.hr-text { + margin: $hr-margin-y 0; + display: flex; + align-items: center; + font-size: $h6-font-size; + + &:after, + &:before { + height: $hr-height; + background-color: currentColor; + opacity: $hr-opacity; + flex: 1 1 auto; + } + + &:after { + content: ''; + } + + > *:first-child { + padding-left: 0; + padding-right: .5rem; + color: $text-muted; + } + + &.hr-text-center { + &:before { + content: ''; + } + + & > *:first-child { + padding-left: .5rem; + padding-right: .5rem; + } + } + + &.hr-text-right { + &:before { + content: ''; + } + + &:after { + content: none; + } + + & > *:first-child { + padding-left: .5rem; + padding-right: 0; + } + } +} -- GitLab