From 20a83cfb4a9f7841944b62c914250d8938274585 Mon Sep 17 00:00:00 2001 From: Valentin Popov Date: Thu, 23 Jan 2020 11:54:12 +0400 Subject: [PATCH] Updated site styles Signed-off-by: Valentin Popov --- _scss/base/_main.scss | 1 - _scss/base/_sakura.scss | 4 +-- _scss/components/_avatar.scss | 9 ------- _scss/components/_core.scss | 38 +--------------------------- _scss/normalize/_main.scss | 30 +++++++++++----------- _scss/sakura/_main.scss | 13 +++++----- _scss/utilities/_textsizeadjust.scss | 7 ++--- 7 files changed, 29 insertions(+), 73 deletions(-) delete mode 100644 _scss/components/_avatar.scss diff --git a/_scss/base/_main.scss b/_scss/base/_main.scss index e617f45..8e9bc80 100644 --- a/_scss/base/_main.scss +++ b/_scss/base/_main.scss @@ -1,3 +1,2 @@ -@import 'components/avatar'; @import 'components/core'; @import 'components/header'; diff --git a/_scss/base/_sakura.scss b/_scss/base/_sakura.scss index cdc2fe4..0bcce6e 100644 --- a/_scss/base/_sakura.scss +++ b/_scss/base/_sakura.scss @@ -1,8 +1,8 @@ $color-bg-alt: rgba(0, 0, 0, .09); $color-bg: rgb(255, 255, 255); -$color-blossom:rgb(0, 51, 153); +$color-blossom: rgb(0, 51, 153); $color-fade: rgb(51, 102, 204); -$color-html:rgb(255, 255, 255); +$color-html: rgb(255, 255, 255); $color-text: rgb(0, 0, 0); $font-family-sans-serif: '-apple-system', BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif; diff --git a/_scss/components/_avatar.scss b/_scss/components/_avatar.scss deleted file mode 100644 index e4b133f..0000000 --- a/_scss/components/_avatar.scss +++ /dev/null @@ -1,9 +0,0 @@ -.avatar { - margin: auto; - max-width: 148px; - text-align: center; - - img { - border-radius: 10px; - } -} diff --git a/_scss/components/_core.scss b/_scss/components/_core.scss index f3a28f1..46740ac 100644 --- a/_scss/components/_core.scss +++ b/_scss/components/_core.scss @@ -4,47 +4,11 @@ *::after, *::before { @include text-size-adjust(100%); + box-sizing: border-box; } html { background-color: $color-html; - height: 100%; overflow-y: scroll; } - -body { - display: flex; - flex-direction: row; - min-height: 100%; -} - -.container { - flex: 75%; - padding-right: 16px; -} - -.sidebar { - border-left: 1px solid $color-bg-alt; - flex: 25%; - height: 100%; - padding-left: 16px; -} - -@media (max-width: 684px) { - body { - flex-direction: column; - } - - .container { - flex: 100%; - padding-right: 0; - } - - .sidebar { - border: 0; - display: none; - flex: 100%; - padding-left: 0; - } -} diff --git a/_scss/normalize/_main.scss b/_scss/normalize/_main.scss index 3931bbb..791ed81 100644 --- a/_scss/normalize/_main.scss +++ b/_scss/normalize/_main.scss @@ -93,24 +93,24 @@ select { } button, -[type="button"], -[type="reset"], -[type="submit"] { +[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 { +[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 { +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } @@ -135,23 +135,23 @@ textarea { overflow: auto; } -[type="checkbox"], -[type="radio"] { +[type='checkbox'], +[type='radio'] { box-sizing: border-box; padding: 0; } -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { height: auto; } -[type="search"] { +[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } -[type="search"]::-webkit-search-decoration { +[type='search']::-webkit-search-decoration { -webkit-appearance: none; } diff --git a/_scss/sakura/_main.scss b/_scss/sakura/_main.scss index 8e15541..2f22dbc 100644 --- a/_scss/sakura/_main.scss +++ b/_scss/sakura/_main.scss @@ -26,7 +26,7 @@ body { } } -@mixin word-wrap() { +@mixin word-wrap { hyphens: auto; overflow-wrap: break-word; word-break: break-word; @@ -40,6 +40,7 @@ h4, h5, h6 { @include word-wrap; + font-weight: 700; line-height: 1.1; } @@ -126,7 +127,7 @@ code { white-space: pre-wrap; } -pre>code { +pre > code { background-color: transparent; padding: 0; white-space: pre; @@ -159,9 +160,9 @@ textarea { .button, button, -input[type="submit"], -input[type="reset"], -input[type="button"] { +input[type='submit'], +input[type='reset'], +input[type='button'] { background-color: $color-blossom; border: 1px solid $color-blossom; border-radius: 1px; @@ -206,7 +207,7 @@ input[type] { } } -input[type="checkbox"]:focus { +input[type='checkbox']:focus { outline: 1px dotted $color-blossom; } diff --git a/_scss/utilities/_textsizeadjust.scss b/_scss/utilities/_textsizeadjust.scss index 49edd0b..8a01d4d 100644 --- a/_scss/utilities/_textsizeadjust.scss +++ b/_scss/utilities/_textsizeadjust.scss @@ -1,13 +1,14 @@ // Text Size Adjust // -// The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property. +// The text-size-adjust CSS property controls the text inflation algorithm used +// on some smartphones and tablets. Other browsers will ignore this property. // // Values: none | auto | // Default: none // // https://drafts.csswg.org/css-size-adjust/#adjustment-control @mixin text-size-adjust($value: none) { + -moz-text-size-adjust: $value; + -ms-text-size-adjust: $value; -webkit-text-size-adjust: $value; - -moz-text-size-adjust: $value; - -ms-text-size-adjust: $value; }