mirror of
https://github.com/Mayccoll/Gogh.git
synced 2023-08-10 21:12:46 +03:00
2 lines
7.8 KiB
CSS
2 lines
7.8 KiB
CSS
:root{--color-blue: #65d8ee;--color-green: #A6E22E;--color-yellow: #E6DB74;--color-orange: #FD971F;--color-red: #F92672;--color-purple: #AE81FF;--color-cyan: #0F94CF;--color-grey-light: #E9E9E9;--color-grey-medium: #7E868C;--color-grey-dark: #333E47;--color-black: #000000;--color-white: #FFFFFF;--color-primary: var(--color-blue);--color-success: var(--color-green);--color-info: var(--color-yellow);--color-warning: var(--color-orange);--color-danger: var(--color-red)}body,html{height:100%;font-size:10px}body{color:var(--color-black);font-size:1.6rem;font-family:"Roboto",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}p{color:var(--color-black);font-weight:400;font-style:normal;font-variant:normal;font-size:1.6rem;line-height:1.4}h1{margin:0;color:var(--color-blue);font-size:4rem;line-height:1}h2{margin:0;font-size:3.1rem;line-height:1}h3{margin:0;font-size:2.5rem;line-height:1}h4{margin:0;font-size:2.2rem;line-height:1}h5{margin:0;font-size:1.9rem;line-height:1}h6{margin:0;font-size:1.6rem;line-height:1}strong{font-weight:900}small{font-size:-1.4rem}em{font-style:italic}blockquote>p{margin:1.6rem;padding:0;border-color:#ccc;border-color:rgba(0,0,0,0.2);border-top:2px solid;border-bottom:2px solid;border-radius:0.25em;color:#888;letter-spacing:0.05em;font-style:italic;font-size:4.6rem}ol{padding:0}ol li{margin-left:1.6rem;padding:0}ul{padding:0}ul li{margin-left:1.6rem;padding:0}.center{text-align:center}.black{color:var(--color-black)}.white{color:var(--color-white)}.red{color:var(--color-red)}.yellow{color:var(--color-yellow)}.green{color:var(--color-green)}.blue{color:var(--color-blue)}.purple{color:var(--color-purple)}.orange{color:var(--color-orange)}.cyan{color:var(--color-cyan)}.grey-light{color:var(--color-grey-light)}.grey-medium{color:var(--color-grey-medium)}.grey-dark{color:var(--color-grey-dark)}.bg-black{background-color:var(--color-black)}.bg-white{background-color:var(--color-white)}.bg-red{background-color:var(--color-red)}.bg-yellow{background-color:var(--color-yellow)}.bg-green{background-color:var(--color-green)}.bg-blue{background-color:var(--color-blue)}.bg-purple{background-color:var(--color-purple)}.bg-orange{background-color:var(--color-orange)}.bg-cyan{background-color:var(--color-cyan)}.bg-grey-light{background-color:var(--color-grey-light)}.bg-grey-medium{background-color:var(--color-grey-medium)}.bg-grey-dark{background-color:var(--color-grey-dark)}.terminal{box-sizing:border-box;margin:0 0 50px;box-shadow:5px 5px 11px #737373, -5px -5px 11px #b1b1b1;animation:slideIn ease 0.4s forwards}.terminal .btn--terminal{display:inline-block;width:10px;height:10px;margin:0 4px;cursor:pointer;border-radius:100px;background-color:#000000}.terminal .btn--min{border:1px solid #6d6d6d;background-color:#868686}.terminal .btn--max{border:1px solid #4c4c4c;background-color:#656565}.terminal .btn--close{border:1px solid #000;background-color:#171717}.terminal .cmd__cursor{animation:1s blink step-end infinite}.terminal .bar{position:relative;width:100%;height:25px;text-align:center;border-radius:5px 5px 0 0;background-color:#D9D9D9;font-size:0}.terminal .bar .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}.terminal .bar .bar__btns{position:absolute;top:7px;right:10px}.terminal .body{box-sizing:border-box;padding:30px;border:1px solid #D9D9D9;border-radius:0 0 5px 5px}.terminal .body .body__txt{margin:0 0 30px}.terminal .body .body__txt p{margin:0;padding:0;font-size:20px;line-height:1.1}@media (min-width: 768px){.terminal .body .body__txt p{font-size:14px}}@media (min-width: 992px){.terminal .body .body__txt p{font-size:20px}}@media (min-width: 1200px){.terminal .body .body__txt p{font-size:18px}}.terminal .body .body__txt p span{letter-spacing:2px;font-size:16px}@media (min-width: 768px){.terminal .body .body__txt p span{letter-spacing:1px;font-size:12px}}@media (min-width: 992px){.terminal .body .body__txt p span{letter-spacing:1.5px;font-size:15px}}@media (min-width: 1200px){.terminal .body .body__txt p span{font-size:10px}}.terminal .body .body__bar{font-size:0}.terminal .body .body__bar span{display:inline-block;width:12.5%;height:30px}.terminal .body .body__bar--bottom{margin:0 0 30px}@keyframes "blink"{from,to{opacity:0}50%{opacity:1}}@keyframes slideIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.btn{display:inline-block;padding:0.5rem 2.5rem 0.55rem;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:16px;cursor:pointer;transition:all 0.3s ease}.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)}.gogh-header{display:flex;align-items:center;justify-content:center;background-color:#0d1926}.gogh-header h1{width:500px;text-align:center;font-size:1rem;line-height:1}.gogh-header h1 span{display:block;overflow:hidden;color:#fff;text-indent:100%;white-space:nowrap}.gogh-header h1 img{width:100%;height:auto}.gogh-content{padding:50px 0;min-height:200vh;background-color:#e7e7e7;color:#595647}.gogh-content h2{margin:0 0 25px;color:#595647;font-weight:400;font-size:2.8rem}.gogh-content p{margin:0 0 40px;color:#595647;font-size:1.6rem;line-height:1.4}.code-wrap{position:relative;margin:0 0 40px}.code-wrap .btn-copy{position:absolute;right:10px;bottom:14px;display:inline-block;width:25px;cursor:pointer;transition:all 0.3s ease}.code-wrap .btn-copy svg{width:100%;height:auto;transition:all 0.3s ease;fill:#363636}.code-wrap .btn-copy:hover svg{animation-name:anim-gogh;animation-duration:8s;fill:#FF0883}.github-int{margin:0 0 40px;text-align:center}.filters{display:flex;justify-content:center;margin:0 0 40px}.filters .btn{position:relative;margin:0 15px}.filters .btn: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}.filters .btn::before{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}.filters .btn.active{background-color:#0d1926;color:#e7e7e7}.filters .btn.active::before{position:absolute;right:0;bottom:-10px;left:0;width:100%;height:1px;background-color:#0d1926;content:" ";opacity:1}.filter-background{margin:0 0 70px;border:1px solid #ffffff}.filter-background .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}.filter-background .btn--filter-bg 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}.filter-background .btn--filter-bg:hover{z-index:20;height:40px;border:1px solid #414141;border-radius:1px;transform:scale(1.6)}.filter-background .btn--filter-bg:hover span{display:block}.filter-background .btn--filter-bg.active{z-index:10;border:1px solid #414141;border-radius:1px;transform:scale(1.6)}.filter-background .btn--filter-bg.active span{display:block}@media (min-width: 1400px){.gogh-terminal{margin:0 auto;max-width:96%}}@media (min-width: 1800px){.gogh-terminal{max-width:84%}}@media (min-width: 2200px){.gogh-terminal{max-width:74%}}@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}}
|