aboutsummaryrefslogtreecommitdiff
path: root/_scss/components
diff options
context:
space:
mode:
authorValentin Popov <info@valentineus.link>2019-05-03 03:02:31 +0300
committerValentin Popov <info@valentineus.link>2019-05-03 03:02:31 +0300
commit5668edea38da9fd1cad629db9c768ff19e62e094 (patch)
tree80f9ecfb2ad32304c61d1f7aecae955d7cf4ecf2 /_scss/components
parent515a3ed0a74bdc10861c12f3798b19c3c9ff44f9 (diff)
downloadpopov.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.scss10
-rw-r--r--_scss/components/_core.scss28
-rw-r--r--_scss/components/_navigation.scss150
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;
- }
- }
-}