mirror/Gogh
1
0
Fork 0
mirror of https://github.com/Mayccoll/Gogh.git synced 2023-08-10 21:12:46 +03:00
Code Issues Projects Releases Wiki Activity
55b3e25b2c
Gogh/gh-pages/sass/main.scss
Mayccoll f6804f5c4e update landing page
2021-05-01 13:13:34 -05:00

512 lines
13 KiB
SCSS
Raw Blame History

@charset "UTF-8";
@import './_base.scss';
@import './terminal.scss';
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· General
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.btn {
display : inline-block;
padding : 0.8rem 2.5rem 0.85rem;
outline : none;
border : 1px solid #0d1926;
border-radius : 0;
background-color: transparent;
color : #0d1926;
text-align : center;
text-decoration : none;
text-transform : uppercase;
font-size : 1.6rem;
cursor : pointer;
transition : all 0.3s ease;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {
font-size : 1.4rem;
padding: 0.57rem 1.5rem 0.55rem;
}
@include m768 {
padding: 1.3rem 2.5rem 0.85rem;
}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
.btn:hover {
background-color: #0d1926;
color : #ffffff;
}
.btn:active {
position: relative;
top : 1px;
}
.btn:focus {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Header
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.gogh-header {
display : flex;
background-color: #0d1926;
align-items : center;
justify-content : center;
h1 {
width : 500px;
text-align : center;
font-size : 1rem;
line-height: 1;
span {
display : block;
overflow : hidden;
color : #fff;
text-indent: 100%;
white-space: nowrap;
}
img {
width : 100%;
height: auto;
}
}
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Content
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.gogh-content {
padding : 50px 0;
min-height : 200vh;
background-color: #e7e7e7;
color : #595647;
h2 {
margin : 0 0 25px;
color : #595647;
text-align : center;
font-weight: 700;
font-size : 2.0rem;
line-height: 1.2;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {}
@include m768 {
text-align : left;
font-weight: 400;
font-size : 2.8rem;
line-height: 1;
}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
h3 {
@include m360 {}
@include m450 {
font-size: 2.8rem;
}
@include m576 {}
@include m650 {
font-size: 3.2rem;
}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
h4 {
font-size: 1.8rem;
@include m360 {}
@include m450 {
font-size: 2.2rem;
}
@include m576 {}
@include m650 {
font-size: 2.8rem;
}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
span {
font-weight: 300;
font-size : 1.4rem;
}
}
p {
margin : 0 0 40px;
color : #595647;
font-size : 1.6rem;
line-height: 1.4;
}
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Code
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.code-wrap {
position: relative;
margin : 0 0 40px;
.language-bash {
padding: 0.8rem 0.8rem 1.5rem;
@include m360 {}
@include m450 {
padding: 1.5rem 1.2rem;
}
@include m576 {}
@include m650 {}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
.code-holder {
position: relative;
}
.btn-copy {
position : absolute;
right : 0;
bottom : 0;
display : inline-flex;
padding : 5px 10px;
height : 100%;
background-color: #F5F2F0;
cursor : pointer;
transition : all 0.3s ease;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {
max-width: 50px;
}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
svg {
width : 100%;
height : auto;
transition: all 0.3s ease;
fill : #363636;
}
&:hover {
svg {
animation-name : anim-gogh;
animation-duration: 8s;
fill : #FF0883;
}
}
}
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Github
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.github-int {
margin : 0 0 40px;
text-align: center;
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Filters
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.filters {
display : flex;
margin : 0 0 40px;
justify-content: center;
flex-direction: column;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {
flex-direction: row;
}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
.btn {
position: relative;
margin : 0 0 20px 0;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {
margin : 0 15px;
}
@include m768 {
}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
&:hover {
&::before {
position : absolute;
right : 0;
bottom : -10px;
left : 0;
margin : 0 auto;
width : 100%;
height : 1px;
background-color : #0d1926;
content : " ";
opacity : 1;
animation-name : anim-gogh-bg;
animation-duration: 8s;
}
}
&::before {
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {}
@include m768 {
position : absolute;
right : 0;
bottom : -10px;
left : 0;
margin : 0 auto;
width : 0;
height : 1px;
background-color: #0d1926;
content : " ";
opacity : 0;
transition : all 0.3s ease;
}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
&.active {
background-color: #0d1926;
color : #e7e7e7;
}
&.active::before {
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {}
@include m768 {
position : absolute;
right : 0;
bottom : -10px;
left : 0;
width : 100%;
height : 1px;
background-color: #0d1926;
content : " ";
opacity : 1;
}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {}
@include m1800 {}
@include m2200 {}
}
}
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Filters Bg
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.filter-background {
margin: 0 0 70px;
border: 1px solid #ffffff;
.btn--filter-bg {
position : relative;
padding : 0;
width : 5%;
height : 40px;
border : none;
cursor : pointer;
transition: all 0.3s ease, border-radius 0.9s ease;
span {
position : absolute;
bottom : -12px;
display : none;
padding : 1px 3px;
width : 100%;
border-radius : 1px;
background : #0d1926;
color : #ffffff;
text-align : center;
text-transform: none;
font-size : 0.6rem;
transition : all 0.3s ease;
}
&:hover {
z-index : 20;
height : 40px;
border : 1px solid #414141;
border-radius: 1px;
transform : scale(1.6);
span {
display: block;
}
}
}
.btn--filter-bg.active {
z-index : 10;
border : 1px solid #414141;
border-radius: 1px;
transform : scale(1.6);
span {
display: block;
}
}
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Main Content
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.gogh-terminal {
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {
margin : 0 auto;
max-width: 96%;
}
@include m1800 {
max-width: 84%;
}
@include m2200 {
max-width: 74%;
}
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Animations
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
@keyframes anim-gogh {
25% {
fill: #83FF08;
}
37.5% {
fill: #FF8308;
}
50% {
fill: #0883FF;
}
62.5% {
fill: #8308FF;
}
75% {
fill: #08FF83;
}
87.5% {
fill: #363636;
}
100% {
fill: #FF0883;
}
}
@keyframes anim-gogh-bg {
25% {
background-color: #FF0883;
}
37.5% {
background-color: #FF8308;
}
50% {
background-color: #0883FF;
}
62.5% {
background-color: #8308FF;
}
75% {
background-color: #3dba98;
}
87.5% {
background-color: #363636;
}
100% {
background-color: #47af32;
}
}
Reference in New Issue View Git Blame Copy Permalink