valentineus/popov.link
0
Fork 0
mirror of https://github.com/valentineus/popov.link.git synced 2025-07-04 08:30:27 +03:00
Code Issues Releases Activity

Have added new structure sites

Browse Source 
Signed-off-by: Valentin Popov <info@valentineus.link>
This commit is contained in:
Valentin Popov
2019-05-03 04:02:31 +04:00
parent 515a3ed0a7
commit 5668edea38
15 changed files with 65 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
_scss/components/_background.scss
View File

@ -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;
}

28
_scss/components/_core.scss
View File

@ -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%;
}
}

150
_scss/components/_navigation.scss
View File

@ -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;
}
}
}