From 3647ff37c565c77ebd1e68fce1552201c35b5cb3 Mon Sep 17 00:00:00 2001 From: Valentin Popov Date: Tue, 15 May 2018 15:28:17 +0400 Subject: Complete redesign of site styles Signed-off-by: Valentin Popov --- _scss/components/_core.scss | 18 +++++++ _scss/components/_image.scss | 4 ++ _scss/components/_variables.scss | 7 --- _scss/components/core/_basis.scss | 27 ---------- _scss/components/core/_grid.scss | 31 ----------- _scss/components/elements/_comments.scss | 3 -- _scss/components/elements/_content.scss | 4 -- _scss/components/elements/_footer.scss | 16 ------ _scss/components/elements/_listposts.scss | 5 -- _scss/components/elements/_navigation.scss | 17 ------ _scss/components/elements/_sociallinks.scss | 3 -- _scss/components/theme/_background.scss | 15 ------ _scss/components/theme/_blockquote.scss | 10 ---- _scss/components/theme/_buttons.scss | 84 ----------------------------- _scss/components/theme/_code.scss | 25 --------- _scss/components/theme/_divider.scss | 5 -- _scss/components/theme/_form.scss | 69 ------------------------ _scss/components/theme/_image.scss | 29 ---------- _scss/components/theme/_link.scss | 9 ---- _scss/components/theme/_list.scss | 22 -------- _scss/components/theme/_spacing.scss | 26 --------- _scss/components/theme/_table.scss | 19 ------- _scss/components/theme/_typography.scss | 51 ------------------ 23 files changed, 22 insertions(+), 477 deletions(-) create mode 100644 _scss/components/_core.scss create mode 100644 _scss/components/_image.scss delete mode 100644 _scss/components/_variables.scss delete mode 100644 _scss/components/core/_basis.scss delete mode 100644 _scss/components/core/_grid.scss delete mode 100644 _scss/components/elements/_comments.scss delete mode 100644 _scss/components/elements/_content.scss delete mode 100644 _scss/components/elements/_footer.scss delete mode 100644 _scss/components/elements/_listposts.scss delete mode 100644 _scss/components/elements/_navigation.scss delete mode 100644 _scss/components/elements/_sociallinks.scss delete mode 100644 _scss/components/theme/_background.scss delete mode 100644 _scss/components/theme/_blockquote.scss delete mode 100644 _scss/components/theme/_buttons.scss delete mode 100644 _scss/components/theme/_code.scss delete mode 100644 _scss/components/theme/_divider.scss delete mode 100644 _scss/components/theme/_form.scss delete mode 100644 _scss/components/theme/_image.scss delete mode 100644 _scss/components/theme/_link.scss delete mode 100644 _scss/components/theme/_list.scss delete mode 100644 _scss/components/theme/_spacing.scss delete mode 100644 _scss/components/theme/_table.scss delete mode 100644 _scss/components/theme/_typography.scss (limited to '_scss/components') diff --git a/_scss/components/_core.scss b/_scss/components/_core.scss new file mode 100644 index 0000000..ae17c9e --- /dev/null +++ b/_scss/components/_core.scss @@ -0,0 +1,18 @@ +@import 'utilities/boxsizing'; +@import 'utilities/textsizeadjust'; + +*, +*::after, +*::before { + @include box-sizing(border-box); + @include text-size-adjust(100%); +} + +html { + overflow-y: scroll; +} + +body { + padding-bottom: 20px; + padding-top: 20px; +} diff --git a/_scss/components/_image.scss b/_scss/components/_image.scss new file mode 100644 index 0000000..c2f15eb --- /dev/null +++ b/_scss/components/_image.scss @@ -0,0 +1,4 @@ +img { + max-width: 100%; + width: auto; +} diff --git a/_scss/components/_variables.scss b/_scss/components/_variables.scss deleted file mode 100644 index eb9a801..0000000 --- a/_scss/components/_variables.scss +++ /dev/null @@ -1,7 +0,0 @@ -// ... -$color-initial: #fff; -$color-primary: #9b4dca; -$color-quaternary: #d1d1d1; -$color-quinary: #e1e1e1; -$color-secondary: #606c76; -$color-tertiary: #f4f5f6; diff --git a/_scss/components/core/_basis.scss b/_scss/components/core/_basis.scss deleted file mode 100644 index 7803126..0000000 --- a/_scss/components/core/_basis.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import 'utilities/boxsizing'; -@import 'utilities/textsizeadjust'; - -*, -*::after, -*::before { - @include box-sizing(border-box); - @include text-size-adjust(100%); -} - -html { - font-size: 62.5%; - overflow-y: scroll; -} - -body { - color: $color-secondary; - font-family: -apple-system, BlinkMacSystemFont, Roboto, Cantarell, 'Droid Sans', 'Fira Sans', Helvetica, 'Helvetica Neue', 'Helvetica Neue', Oxygen, 'Segoe UI', Ubuntu, sans-serif; - font-size: 16px; - letter-spacing: .01em; - line-height: 1.6; - margin: 0 auto; - max-width: 128rem; - min-height: 100vh; - padding: 2rem; - width: 100%; -} diff --git a/_scss/components/core/_grid.scss b/_scss/components/core/_grid.scss deleted file mode 100644 index 5d0b65c..0000000 --- a/_scss/components/core/_grid.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import 'utilities/flexbox'; - -body { - @include flexbox(); - @include flex-basis(auto); - @include flex-direction(column); -} - -main { - @include flexbox(); - @include flex-basis(auto); - @include flex-grow(1); -} - -.navigation { - @include flexbox(); - @include flex-shrink(0); - @include justify-content(flex-end); -} - -.content { - @include flexbox(); - @include flex-basis(auto); - @include flex-direction(column); -} - -.footer { - @include flexbox(); - @include flex-shrink(0); - @include justify-content(center); -} diff --git a/_scss/components/elements/_comments.scss b/_scss/components/elements/_comments.scss deleted file mode 100644 index c0f696d..0000000 --- a/_scss/components/elements/_comments.scss +++ /dev/null @@ -1,3 +0,0 @@ -.comments { - border-top: .1rem solid $color-tertiary; -} diff --git a/_scss/components/elements/_content.scss b/_scss/components/elements/_content.scss deleted file mode 100644 index bcaeba0..0000000 --- a/_scss/components/elements/_content.scss +++ /dev/null @@ -1,4 +0,0 @@ -.content { - min-width: 0; - width: 100%; -} diff --git a/_scss/components/elements/_footer.scss b/_scss/components/elements/_footer.scss deleted file mode 100644 index 46048a0..0000000 --- a/_scss/components/elements/_footer.scss +++ /dev/null @@ -1,16 +0,0 @@ -.footer { - padding-top: 1rem; - text-align: center; - - a { - padding: 0 .5rem; - - &:first-child { - padding-left: 0; - } - - &:last-child { - padding-right: 0; - } - } -} diff --git a/_scss/components/elements/_listposts.scss b/_scss/components/elements/_listposts.scss deleted file mode 100644 index 58ae109..0000000 --- a/_scss/components/elements/_listposts.scss +++ /dev/null @@ -1,5 +0,0 @@ -.post-item { - border-left: .3rem solid $color-primary; - margin-bottom: 4rem; - padding-left: 1rem; -} diff --git a/_scss/components/elements/_navigation.scss b/_scss/components/elements/_navigation.scss deleted file mode 100644 index 6f10634..0000000 --- a/_scss/components/elements/_navigation.scss +++ /dev/null @@ -1,17 +0,0 @@ -.navigation { - padding: 0 .5rem 1rem; - text-align: right; - width: 100%; - - a { - padding: 0 .5rem; - - &:first-child { - padding-left: 0; - } - - &:last-child { - padding-right: 0; - } - } -} diff --git a/_scss/components/elements/_sociallinks.scss b/_scss/components/elements/_sociallinks.scss deleted file mode 100644 index 972c25c..0000000 --- a/_scss/components/elements/_sociallinks.scss +++ /dev/null @@ -1,3 +0,0 @@ -.social-links { - padding-bottom: 4rem; -} diff --git a/_scss/components/theme/_background.scss b/_scss/components/theme/_background.scss deleted file mode 100644 index 5b45f0c..0000000 --- a/_scss/components/theme/_background.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import 'utilities/boxshadow'; - -$background-image: 'data:image/svg+xml;utf8,'; - -html { - background: $color-tertiary url($background-image) repeat fixed; -} - -body { - background: $color-initial; - border-left: 1px solid rgba(0, 0, 0, .09); - border-right: 1px solid rgba(0, 0, 0, .09); - - @include box-shadow(0 1px 4px rgba(0, 0, 0, .04)); -} diff --git a/_scss/components/theme/_blockquote.scss b/_scss/components/theme/_blockquote.scss deleted file mode 100644 index c0ad531..0000000 --- a/_scss/components/theme/_blockquote.scss +++ /dev/null @@ -1,10 +0,0 @@ -blockquote { - border-left: .3rem solid $color-quaternary; - margin-left: 0; - margin-right: 0; - padding: 1rem 1.5rem; - - &:last-child { - margin-bottom: 0; - } -} diff --git a/_scss/components/theme/_buttons.scss b/_scss/components/theme/_buttons.scss deleted file mode 100644 index 3ddc463..0000000 --- a/_scss/components/theme/_buttons.scss +++ /dev/null @@ -1,84 +0,0 @@ -@import 'utilities/borderradius'; - -.button, -button, -input[type='button'], -input[type='reset'], -input[type='submit'] { - background-color: $color-primary; - border: .1rem solid $color-primary; - color: $color-initial; - cursor: pointer; - display: inline-block; - font-size: 1.1rem; - font-weight: 700; - height: 3.8rem; - letter-spacing: .1rem; - line-height: 3.8rem; - padding: 0 3rem; - text-align: center; - text-decoration: none; - text-transform: uppercase; - white-space: nowrap; - - @include border-radius(.4rem); - - &:focus, - &:hover { - background-color: $color-secondary; - border-color: $color-secondary; - color: $color-initial; - outline: 0; - } - - &[disabled] { - cursor: default; - opacity: .5; - - &:focus, - &:hover { - background-color: $color-primary; - border-color: $color-primary; - } - } - - &.button-outline { - background-color: transparent; - color: $color-primary; - - &:focus, - &:hover { - background-color: transparent; - border-color: $color-secondary; - color: $color-secondary; - } - - &[disabled] { - &:focus, - &:hover { - border-color: inherit; - color: $color-primary; - } - } - } - - &.button-clear { - background-color: transparent; - border-color: transparent; - color: $color-primary; - - &:focus, - &:hover { - background-color: transparent; - border-color: transparent; - color: $color-secondary; - } - - &[disabled] { - &:focus, - &:hover { - color: $color-primary; - } - } - } -} diff --git a/_scss/components/theme/_code.scss b/_scss/components/theme/_code.scss deleted file mode 100644 index d825933..0000000 --- a/_scss/components/theme/_code.scss +++ /dev/null @@ -1,25 +0,0 @@ -@import 'utilities/borderradius'; - -code { - background: $color-tertiary; - font-size: 86%; - margin: 0 .2rem; - padding: .2rem .5rem; - white-space: nowrap; - - @include border-radius(.4rem); -} - -pre { - background: $color-tertiary; - border-left: .3rem solid $color-primary; - overflow-x: auto; - - & > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; - - @include border-radius(0); - } -} diff --git a/_scss/components/theme/_divider.scss b/_scss/components/theme/_divider.scss deleted file mode 100644 index 45ec578..0000000 --- a/_scss/components/theme/_divider.scss +++ /dev/null @@ -1,5 +0,0 @@ -hr { - border: 0; - border-top: .1rem solid $color-tertiary; - margin: 3rem 0; -} diff --git a/_scss/components/theme/_form.scss b/_scss/components/theme/_form.scss deleted file mode 100644 index 211383c..0000000 --- a/_scss/components/theme/_form.scss +++ /dev/null @@ -1,69 +0,0 @@ -@import 'utilities/appearance'; -@import 'utilities/borderradius'; -@import 'utilities/boxshadow'; -@import 'utilities/boxsizing'; - -input:not([type]), -input[type='color'], -input[type='date'], -input[type='datetime'], -input[type='datetime-local'], -input[type='email'], -input[type='month'], -input[type='number'], -input[type='password'], -input[type='search'], -input[type='tel'], -input[type='text'], -input[type='url'], -input[type='week'], -select, -textarea { - background-color: transparent; - border: .1rem solid $color-quaternary; - height: 3.8rem; - padding: .6rem 1rem; - width: 100%; - - @include appearance(none); - @include border-radius(.4rem); - @include box-shadow(none); - @include box-sizing(inherit); - - &:focus { - border-color: $color-primary; - outline: 0; - } -} - -select { - padding-right: 3rem; -} - -textarea { - min-height: 6.5rem; -} - -label, -legend { - display: block; - font-size: 1.6rem; - font-weight: 700; - margin-bottom: .5rem; -} - -fieldset { - border-width: 0; - padding: 0; -} - -input[type='checkbox'], -input[type='radio'] { - display: inline; -} - -.label-inline { - display: inline-block; - font-weight: normal; - margin-left: .5rem; -} diff --git a/_scss/components/theme/_image.scss b/_scss/components/theme/_image.scss deleted file mode 100644 index dfb2513..0000000 --- a/_scss/components/theme/_image.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import 'utilities/boxshadow'; - -img { - max-width: 100%; - width: auto; - - &:hover { - @include box-shadow(0 0 10px rgba(0, 0, 0, .5)); - } -} - -.fullscreen { - background: rgba(0, 0, 0, .5); - display: none; - height: 100%; - left: 0; - position: fixed; - text-align: center; - top: 0; - width: 100%; - - &:target { - display: block; - } - - img { - margin-top: 10rem; - } -} diff --git a/_scss/components/theme/_link.scss b/_scss/components/theme/_link.scss deleted file mode 100644 index 6dac3e1..0000000 --- a/_scss/components/theme/_link.scss +++ /dev/null @@ -1,9 +0,0 @@ -a { - color: $color-primary; - text-decoration: none; - - &:focus, - &:hover { - color: $color-secondary; - } -} diff --git a/_scss/components/theme/_list.scss b/_scss/components/theme/_list.scss deleted file mode 100644 index 3d68e16..0000000 --- a/_scss/components/theme/_list.scss +++ /dev/null @@ -1,22 +0,0 @@ -dl, -ol, -ul { - list-style: none; - margin-top: 0; - padding-left: 0; - - dl, - ol, - ul { - font-size: 90%; - margin: 1.5rem 0 1.5rem 3rem; - } -} - -ol { - list-style: decimal inside; -} - -ul { - list-style: circle inside; -} diff --git a/_scss/components/theme/_spacing.scss b/_scss/components/theme/_spacing.scss deleted file mode 100644 index eff2d24..0000000 --- a/_scss/components/theme/_spacing.scss +++ /dev/null @@ -1,26 +0,0 @@ -.button, -button, -dd, -dt, -li { - margin-bottom: 1rem; -} - -fieldset, -input, -select, -textarea { - margin-bottom: 1.5rem; -} - -blockquote, -dl, -figure, -form, -ol, -p, -pre, -table, -ul { - margin-bottom: 2.5rem; -} diff --git a/_scss/components/theme/_table.scss b/_scss/components/theme/_table.scss deleted file mode 100644 index 7af38d5..0000000 --- a/_scss/components/theme/_table.scss +++ /dev/null @@ -1,19 +0,0 @@ -table { - border-spacing: 0; - width: 100%; -} - -td, -th { - border-bottom: .1rem solid $color-quinary; - padding: 1.2rem 1.5rem; - text-align: left; - - &:first-child { - padding-left: 0; - } - - &:last-child { - padding-right: 0; - } -} diff --git a/_scss/components/theme/_typography.scss b/_scss/components/theme/_typography.scss deleted file mode 100644 index 0f35937..0000000 --- a/_scss/components/theme/_typography.scss +++ /dev/null @@ -1,51 +0,0 @@ -b, -strong { - font-weight: bold; -} - -p { - margin-top: 0; -} - - -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: 300; - letter-spacing: .01em; - margin-bottom: 2rem; - margin-top: 0; -} - -h1 { - font-size: 4.6rem; - line-height: 1.2; -} - -h2 { - font-size: 3.6rem; - line-height: 1.25; -} - -h3 { - font-size: 2.8rem; - line-height: 1.3; -} - -h4 { - font-size: 2.2rem; - line-height: 1.35; -} - -h5 { - font-size: 1.8rem; - line-height: 1.5; -} - -h6 { - font-size: 1.6rem; - line-height: 1.4; -} -- cgit v1.2.3