From 5668edea38da9fd1cad629db9c768ff19e62e094 Mon Sep 17 00:00:00 2001 From: Valentin Popov Date: Fri, 3 May 2019 04:02:31 +0400 Subject: Have added new structure sites Signed-off-by: Valentin Popov --- _scss/components/_background.scss | 10 --- _scss/components/_core.scss | 28 ++++++- _scss/components/_navigation.scss | 150 -------------------------------------- 3 files changed, 26 insertions(+), 162 deletions(-) delete mode 100644 _scss/components/_background.scss delete mode 100644 _scss/components/_navigation.scss (limited to '_scss/components') diff --git a/_scss/components/_background.scss b/_scss/components/_background.scss deleted file mode 100644 index f91231d..0000000 --- a/_scss/components/_background.scss +++ /dev/null @@ -1,10 +0,0 @@ -$background-image: '/assets/background.svg'; - -html { - background: $color-bg url($background-image) repeat fixed; -} - -body { - border-left: 1px solid $color-bg-alt; - border-right: 1px solid $color-bg-alt; -} diff --git a/_scss/components/_core.scss b/_scss/components/_core.scss index 56cbba4..1278e65 100644 --- a/_scss/components/_core.scss +++ b/_scss/components/_core.scss @@ -13,7 +13,31 @@ html { } body { + display: flex; + flex-direction: row; min-height: 100%; - padding-bottom: 20px; - padding-top: 100px; +} + +.container { + flex: 75%; + padding-right: 32px; +} + +.sidebar { + flex: 25%; +} + +@media (max-width: 684px) { + body { + flex-direction: column; + } + + .container { + flex: 100%; + padding-right: 0; + } + + .sidebar { + flex: 100%; + } } diff --git a/_scss/components/_navigation.scss b/_scss/components/_navigation.scss deleted file mode 100644 index 128ae0b..0000000 --- a/_scss/components/_navigation.scss +++ /dev/null @@ -1,150 +0,0 @@ -.navigation-container { - background: $color-bg; - border-left: 1px solid $color-bg-alt; - border-right: 1px solid $color-bg-alt; - height: 100px; - left: 0; - margin: auto; - max-width: 52em; - padding: 0; - position: fixed; - right: 0; - top: 0; - width: 100%; - z-index: 128; -} - -.navigation { - background: $color-bg; - border-left: 1px solid $color-bg-alt; - border-right: 1px solid $color-bg-alt; - height: 100%; - left: 0; - margin: auto; - max-width: 52em; - padding: 0; - position: fixed; - right: 0; - top: 100px; - transform: scale(.1, 0); - transform-origin: 100% 0%; - transition: none; - width: 100%; -} - -.navigation-header { - height: 100px; - margin: auto; - overflow: hidden; - padding-bottom: 32px; - padding-left: 32px; - padding-right: 100px; - padding-top: 32px; - position: absolute; - text-overflow: ellipsis; - text-transform: uppercase; - white-space: nowrap; - width: 100%; -} - -.navigation-footer { - bottom: 0; - list-style-type: none; - margin: auto; - max-width: 52em; - padding: 20px; - position: fixed; - text-align: center; - width: 100%; - - li { - border-right: 1px solid; - display: inline; - padding: 0 20px; - - @media (max-width: 684px) { - padding: 0 10px; - } - } - - li:last-child { - border-right: 0; - } -} - -.navigation-pills { - height: 100%; - list-style-type: none; - margin: 0; - padding: 0; - text-align: center; - width: 100%; -} - -.navigation-item { - padding-bottom: 5px; - - &:last-child { - padding-bottom: 0; - } - - a { - text-decoration: none; - text-transform: uppercase; - } -} - -.toggle-button { - display: none; - - &:checked ~ .navigation { - transform: none; - transition: all .1s; - } - - &:checked ~ .toggle-label { - span { - opacity: 0; - top: 50%; - } - - span:first-child { - opacity: 1; - transform: rotate(405deg); - } - - span:last-child { - opacity: 1; - transform: rotate(-405deg); - } - } -} - -.toggle-label { - float: right; - height: 20px; - margin: 40px; - position: relative; - width: 15px; - - &:hover { - cursor: pointer; - } - - span { - background: $color-text; - height: 2px; - position: absolute; - top: 50%; - transition: .5s; - width: 100%; - - &:first-child { - top: 3px; - } - - &:last-child { - top: 16px; - } - } -} -- cgit v1.2.3