diff options
author | Valentin Popov <info@valentineus.link> | 2019-05-03 03:02:31 +0300 |
---|---|---|
committer | Valentin Popov <info@valentineus.link> | 2019-05-03 03:02:31 +0300 |
commit | 5668edea38da9fd1cad629db9c768ff19e62e094 (patch) | |
tree | 80f9ecfb2ad32304c61d1f7aecae955d7cf4ecf2 /_scss/components | |
parent | 515a3ed0a74bdc10861c12f3798b19c3c9ff44f9 (diff) | |
download | popov.link-5668edea38da9fd1cad629db9c768ff19e62e094.tar.xz popov.link-5668edea38da9fd1cad629db9c768ff19e62e094.zip |
Have added new structure sites
Signed-off-by: Valentin Popov <info@valentineus.link>
Diffstat (limited to '_scss/components')
-rw-r--r-- | _scss/components/_background.scss | 10 | ||||
-rw-r--r-- | _scss/components/_core.scss | 28 | ||||
-rw-r--r-- | _scss/components/_navigation.scss | 150 |
3 files changed, 26 insertions, 162 deletions
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; - } - } -} |