1
0
mirror of https://github.com/Mayccoll/Gogh.git synced 2023-08-10 21:12:46 +03:00
Gogh/gh-pages/sass/main.scss

1304 lines
21 KiB
SCSS

@mixin m360 {
@media (min-width: 359px) {
@content;
}
}
@mixin m450 {
@media (min-width: 449px) {
@content;
}
}
@mixin m576 {
@media (min-width: 575px) {
@content;
}
}
@mixin m600 {
@media (min-width: 599px) {
@content;
}
}
@mixin m768 {
@media (min-width: 767px) {
@content;
}
}
@mixin m900 {
@media (min-width: 889px) {
@content;
}
}
@mixin m992 {
@media (min-width: 991px) {
@content;
}
}
@mixin m1200 {
@media (min-width: 1199px) {
@content;
}
}
@mixin m1400 {
@media (min-width: 1399px) {
@content;
}
}
@mixin m1800 {
@media (min-width: 1799px) {
@content;
}
}
@mixin m2200 {
@media (min-width: 2199px) {
@content;
}
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
margin : 0;
padding : 0;
vertical-align: baseline;
border : 0;
font : inherit;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
display: block;
}
body {
background-color: #e7e7e7;
font-family : "Open Sans", sans-serif;
font-size : 1.6rem;
line-height : 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote {
&:after,
&:before {
content: "";
content: none;
}
}
q {
&:after,
&:before {
content: "";
content: none;
}
}
.cd-main-content:after,
.cd-tab-filter-wrapper:after {
display: table;
clear : both;
content: "";
}
table {
border-spacing : 0;
border-collapse: collapse;
}
*,
::after,
::before {
-webkit-box-sizing: border-box;
box-sizing : border-box;
}
html {
font-size: 62.5%;
* {
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
a {
text-decoration: none;
color : #41307c;
}
.cd-header {
position: relative;
height : 150px;
h1 {
color : #fff;
font-size : 2.4rem;
font-weight: 300;
}
}
@media only screen and (min-width: 1170px) {
.cd-header {
height: 180px;
h1 {
line-height: 180px;
}
}
}
.cd-main-content {
position : relative;
min-height: 100vh;
&.is-fixed {
.cd-tab-filter-wrapper {
position: fixed;
top : 0;
left : 0;
width : 100%;
}
.cd-gallery {
padding-top: 76px;
}
.cd-filter {
position: fixed;
overflow: hidden;
height : 100vh;
form {
overflow : auto;
-webkit-overflow-scrolling: touch;
height : 100vh;
}
}
.cd-filter-trigger {
position: fixed;
}
}
}
@media only screen and (min-width: 768px) {
.cd-main-content.is-fixed .cd-gallery {
padding-top: 90px;
}
}
@media only screen and (min-width: 1170px) {
.cd-main-content.is-fixed .cd-gallery {
padding-top: 75pt;
}
}
.cd-tab-filter-wrapper {
z-index : 1;
background-color : #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
box-shadow : 0 1px 1px rgba(0, 0, 0, 0.08);
}
.cd-tab-filter {
position: relative;
z-index : 1;
width : 140px;
height : 50px;
margin : 0 auto;
&::after {
position : absolute;
top : 50%;
right : 14px;
bottom : auto;
display : inline-block;
width : 1pc;
height : 1pc;
content : "";
-webkit-transition: all 0.3s;
transition : all 0.3s;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
pointer-events : none;
background : url("../img/cd-icon-arrow.svg") center center no-repeat;
}
ul {
position : absolute;
top : 0;
left : 0;
background-color : #fff;
-webkit-box-shadow: inset 0 -2px 0 #41307c;
box-shadow : inset 0 -2px 0 #41307c;
}
li {
display: none;
&:first-child {
display: inline-block;
}
}
a {
display : block;
width : 140px;
height : 50px;
padding-left: 14px;
line-height : 50px;
&.selected {
color : #fff;
background: #41307c;
}
}
&.is-open {
&::after {
-webkit-transform: translateY(-50%) rotate(-180deg);
transform : translateY(-50%) rotate(-180deg);
}
ul {
-webkit-box-shadow: inset 0 -2px 0 #41307c, 0 2px 10px rgba(0, 0, 0, 0.2);
box-shadow : inset 0 -2px 0 #41307c, 0 2px 10px rgba(0, 0, 0, 0.2);
li {
display: block;
}
}
.placeholder a {
opacity: 0.4;
}
}
}
@media only screen and (min-width: 768px) {
.cd-tab-filter {
width : auto;
cursor: auto;
&::after {
display: none;
}
ul {
position : static;
text-align : center;
background : 0 0;
-webkit-box-shadow: none;
box-shadow : none;
}
li {
display: inline-block;
&.placeholder {
display: none !important;
}
}
&.is-open ul li,
a {
display: inline-block;
}
a {
width : auto;
padding : 0 1em;
text-transform: uppercase;
color : #9a9a9a;
font-size : 1.3rem;
font-weight : 700;
}
}
.no-touch .cd-tab-filter a:hover {
color: #41307c;
}
.cd-tab-filter a.selected {
color : #41307c;
background : 0 0;
-webkit-box-shadow: inset 0 -2px 0 #41307c;
box-shadow : inset 0 -2px 0 #41307c;
}
}
.cd-filter {
position: absolute;
z-index : 2;
top : 0;
left : 0;
&::before {
position: absolute;
z-index : 2;
top : 0;
left : 0;
}
}
@media only screen and (min-width: 1170px) {
.cd-tab-filter {
float : right;
width : 100%;
margin : 0;
-webkit-transition: width 0.3s;
transition : width 0.3s;
&.filter-is-visible {
width: 80%;
}
}
}
.cd-gallery {
width : 100%;
padding: 26px 5%;
li {
display : inline-block;
margin-right : 2em;
margin-bottom : 1.6em;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
box-shadow : 0 1px 4px rgba(0, 0, 0, 0.1);
&.gap {
display: inline-block;
height : 0;
opacity: 0;
}
}
img {
display: block;
width : 100%;
}
.cd-fail-message {
display : none;
text-align: center;
}
}
@media only screen and (min-width: 768px) {
.cd-gallery {
padding: 40px 3%;
ul {
text-align: justify;
&:after {
display: table;
clear : both;
content: "";
}
}
li {
width : 48%;
margin-bottom: 2em;
}
}
}
@media only screen and (min-width: 1170px) {
.cd-gallery {
float : right;
padding : 50px 2%;
-webkit-transition: width 0.3s;
transition : width 0.3s;
li {
width: 23%;
}
&.filter-is-visible {
width: 80%;
}
}
}
.cd-filter {
width : 280px;
height : 100%;
-webkit-transition : -webkit-transform 0.3s, box-shadow 0.3s;
-webkit-transition : -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
transition : -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
transition : transform 0.3s, box-shadow 0.3s;
transition : transform 0.3s, box-shadow 0.3s, -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
-webkit-transform : translateZ(0);
-webkit-transform : translateX(-100%);
transform : translateZ(0);
transform : translateX(-100%);
background : #fff;
-webkit-box-shadow : 4px 4px 20px transparent;
box-shadow : 4px 4px 20px transparent;
-webkit-backface-visibility: hidden;
backface-visibility : hidden;
&::before {
width : 100%;
height : 50px;
content: "";
}
.cd-close {
position : absolute;
z-index : 3;
top : 0;
height : 50px;
line-height: 50px;
}
}
.cd-filter-trigger {
position : absolute;
z-index : 3;
top : 0;
height : 50px;
line-height: 50px;
}
.cd-filter {
form {
padding: 70px 20px;
}
.cd-close {
right : 0;
width : 60px;
-webkit-transition: opacity 0.3s;
transition : opacity 0.3s;
text-align : center;
opacity : 0;
color : #fff;
font-size : 1.3rem;
}
}
.no-touch .cd-filter .cd-close:hover {
background: #32255f;
}
.cd-filter.filter-is-visible {
-webkit-transform : translateX(0);
transform : translateX(0);
-webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
box-shadow : 4px 4px 20px rgba(0, 0, 0, 0.2);
.cd-close {
opacity: 1;
}
}
@media only screen and (min-width: 1170px) {
.cd-filter {
width: 20%;
form {
padding: 70px 10%;
}
}
}
.cd-filter-trigger {
left : 0;
overflow : hidden;
width : 60px;
white-space: nowrap;
text-indent: 100%;
color : transparent;
background : url("../img/cd-icon-filter.svg") center center no-repeat;
}
.cd-filter-block {
.cd-select::after,
h4::before {
top : 50%;
content : "";
-webkit-transform: translateY(-50%);
-ms-transform : translateY(-50%);
}
}
.cd-filter-trigger.filter-is-visible {
pointer-events: none;
}
@media only screen and (min-width: 1170px) {
.cd-filter-trigger {
left : 2%;
width : auto;
padding-left : 24px;
-webkit-transition : color 0.3s;
transition : color 0.3s;
text-indent : 0;
text-transform : uppercase;
color : #9a9a9a;
background-position: left center;
font-size : 1.3rem;
font-weight : 700;
}
.no-touch .cd-filter-trigger:hover {
color: #41307c;
}
.cd-filter-trigger.filter-is-visible {
color: #fff;
&:hover {
color: #fff;
}
}
}
.cd-filter-block {
margin-bottom: 1.6em;
h4 {
position : relative;
margin-bottom : 0.2em;
padding : 10px 0 10px 20px;
cursor : pointer;
-webkit-user-select: none;
-moz-user-select : none;
-ms-user-select : none;
user-select : none;
text-transform : uppercase;
color : #9a9a9a;
font-size : 1.3rem;
font-weight : 700;
}
}
.no-touch .cd-filter-block h4:hover {
color: #41307c;
}
.cd-filter-block {
h4 {
&::before {
position : absolute;
left : 0;
width : 1pc;
height : 1pc;
-webkit-transition: -webkit-transform 0.3s;
transition : -webkit-transform 0.3s;
transition : transform 0.3s;
transition : transform 0.3s, -webkit-transform 0.3s;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
background : url("../img/cd-icon-arrow.svg") center center no-repeat;
}
&.closed::before {
-webkit-transform: translateY(-50%) rotate(-90deg);
transform : translateY(-50%) rotate(-90deg);
}
}
.checkbox-label::before,
.radio-label::before,
input,
select {
border : 2px solid #e6e6e6;
border-radius : 0;
background-color: #fff;
font-family : "Open Sans", sans-serif;
}
input {
&[type=search],
&[type=text] {
width : 100%;
padding : 0.8em;
-webkit-box-shadow: none;
box-shadow : none;
-webkit-appearance: none;
-moz-appearance : none;
-ms-appearance : none;
-o-appearance : none;
appearance : none;
}
}
select {
width : 100%;
padding : 0.8em;
-webkit-box-shadow: none;
box-shadow : none;
-webkit-appearance: none;
-moz-appearance : none;
-ms-appearance : none;
-o-appearance : none;
appearance : none;
}
input {
&[type=search]:focus,
&[type=text]:focus {
border-color : #41307c;
outline : 0;
background-color: #fff;
}
}
select:focus {
border-color : #41307c;
outline : 0;
background-color: #fff;
}
input[type=search] {
border-color : transparent;
background-color: #e6e6e6;
font-size : 1.6rem !important;
&::-webkit-search-cancel-button {
display: none;
}
}
.cd-select {
position: relative;
&::after {
position : absolute;
z-index : 1;
right : 14px;
display : block;
width : 1pc;
height : 1pc;
-webkit-transform: translateY(-50%);
transform : translateY(-50%);
pointer-events : none;
background : url("../img/cd-icon-arrow.svg") center center no-repeat;
}
}
select {
cursor : pointer;
font-size: 1.4rem;
&::-ms-expand {
display: none;
}
}
.list li {
position : relative;
margin-bottom: 0.8em;
&:last-of-type {
margin-bottom: 0;
}
}
input {
&[type=checkbox],
&[type=radio] {
position: absolute;
z-index : 2;
top : 0;
left : 0;
margin : 0;
padding : 0;
opacity : 0;
}
}
.checkbox-label,
.radio-label {
padding-left : 24px;
-webkit-user-select: none;
-moz-user-select : none;
-ms-user-select : none;
user-select : none;
font-size : 1.4rem;
}
.checkbox-label {
&::after,
&::before {
position : absolute;
top : 50%;
display : block;
content : "";
-webkit-transform: translateY(-50%);
transform : translateY(-50%);
}
}
.radio-label {
&::after,
&::before {
position : absolute;
top : 50%;
display : block;
content : "";
-webkit-transform: translateY(-50%);
transform : translateY(-50%);
}
}
.checkbox-label::before,
.radio-label::before {
left : 0;
width : 1pc;
height: 1pc;
}
.checkbox-label::after,
.radio-label::after {
display: none;
}
.checkbox-label::after {
width : 1pc;
height : 1pc;
background: url("../img/cd-icon-check.svg") center center no-repeat;
}
.radio-label {
&::after,
&::before {
border-radius: 50%;
}
&::after {
left : 5px;
width : 6px;
height : 6px;
background-color: #fff;
}
}
input {
&[type=checkbox]:checked + label::before,
&[type=radio]:checked + label::before {
border-color : #41307c;
background-color: #41307c;
}
&[type=checkbox]:checked + label::after,
&[type=radio]:checked + label::after {
display: block;
}
}
}
@-moz-document url-prefix() {
.cd-filter-block .cd-select::after {
display: none;
}
}
:active,
:focus {
outline: 0;
}
a {
outline: 0;
&:active,
&:focus {
outline: 0;
}
}
input::-moz-focus-inner {
border: 0;
}
code[class*=language-],
pre[class*=language-] {
font-size: 10px;
}
body {
color: #75715e;
}
.github-int {
margin-top: 30px;
}
.gogh-content {
width : 70%;
margin: 30px auto 40px;
h2 {
margin-bottom: 30px;
color : #595647;
font-size : 26px;
}
h3 {
margin : 30px 0 20px;
color : #595647;
font-size: 22px;
}
code[class*=language-],
pre[class*=language-] {
margin : 0;
font-size: 14px;
}
}
.cd-header h1 {
text-align : center;
line-height: 30px;
span {
display : block;
overflow : hidden;
white-space: nowrap;
text-indent: 100%;
color : #fff;
}
}
.cd-filter {
&::before {
background-color: #66d9ef;
}
.cd-close {
background: #f92672;
}
}
.cd-gallery h3 {
margin: 15px 0 15px 30px;
}
.cd-header {
text-align : center;
background-color: #fff;
}
@media only screen and (min-width: 768px) {
.cd-tab-filter a {
color: #f92672;
}
.no-touch .cd-tab-filter a:hover {
color: #75715e;
}
.cd-tab-filter a.selected {
color : #75715e;
-webkit-box-shadow: inset 0 -2px 0 #75715e;
box-shadow : inset 0 -2px 0 #75715e;
}
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· code
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.code-wrap {
position : relative;
margin-top: 15px;
pre {
padding: 20px 5px 0;
}
.btn-copy {
position : absolute;
top : 25px;
right : 3px;
display : inline-block;
padding : 3px 5px 2px 7px;
cursor : pointer;
border : 1px solid #d8d8d8;
border-radius : 3px;
background-color: #F5F2F0;
&:hover {
background-color: #d8d8d8;
}
&:active {
background-color: #ffffff;
}
img {
width: 15px;
}
}
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Terminal
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.terminal {
box-sizing: border-box;
margin : 0 0 50px;
box-shadow: 5px 5px 11px #737373, -5px -5px 11px #b1b1b1;
.bar {
position : relative;
width : 100%;
height : 25px;
text-align : center;
border-radius : 5px 5px 0 0;
background-color: #D9D9D9;
font-size : 0;
.bar__title {
position : absolute;
top : 4px;
right : 0;
left : 0;
margin : 0 auto;
color : #5e5e5e;
font-family: Arial;
font-size : 14px;
font-weight: 400;
line-height: 1.2;
}
.bar__btns {
position: absolute;
top : 7px;
right : 10px;
}
}
.body {
box-sizing : border-box;
padding : 30px;
border : 1px solid #D9D9D9;
border-radius: 0 0 5px 5px;
.body__txt {
margin: 0 0 30px;
p {
margin : 0;
padding : 0;
font-size : 20px;
line-height: 1.1;
@include m360 {}
@include m450 {}
@include m576 {}
@include m600 {}
@include m768 {
font-size: 14px;
}
@include m900 {}
@include m992 {
font-size: 20px;
}
@include m1200 {
font-size: 18px;
}
@include m1400 {}
@include m1800 {}
@include m2200 {}
span {
letter-spacing: 2px;
font-size : 16px;
@include m360 {}
@include m450 {}
@include m576 {}
@include m600 {}
@include m768 {
letter-spacing: 1px;
font-size : 12px;
}
@include m900 {}
@include m992 {
letter-spacing: 1.5px;
font-size : 15px;
}
@include m1200 {
font-size: 10px;
}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
}
}
.body__bar {
font-size: 0;
span {
display : inline-block;
width : 12.5%;
height: 30px;
}
}
.body__bar--bottom {
margin: 0 0 30px;
}
}
}
.btn {
display : inline-block;
width : 10px;
height : 10px;
margin : 0 4px;
cursor : pointer;
border-radius : 100px;
background-color: #000000;
}
.btn--min {
border : 1px solid darken(#868686, 10%);
background-color: #868686;
}
.btn--max {
border : 1px solid darken(#656565, 10%);
background-color: #656565;
}
.btn--close {
border : 1px solid darken(#171717, 10%);
background-color: #171717;
}
.cmd__cursor {
animation: 1s blink step-end infinite;
}
@keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}