forked from devsinnepal/devsinnepal.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.css
1 lines (1 loc) · 3.27 KB
/
app.css
1
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.p-0{padding:0}.content,.footer,.header{padding-left:24px;padding-right:24px}.block{display:block}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body{font-family:Open Sans,sans-serif;font-size:16px}.container{max-width:1280px;margin:0 auto}.header{padding-top:24px;padding-bottom:32px;height:200px;position:relative;background:#00356b;z-index:99;overflow:hidden}@media (max-width:576px){.header{height:120px}}.header__title{color:#ff1493;font-size:20px;line-height:1.2;display:flex}.header__title-bold-text{font-size:32px}.header__title svg{margin-right:12px}.nav{margin-top:32px}@media (max-width:576px){.nav{display:none}}.nav__list{display:flex}.nav__list li{margin-right:40px;list-style:none}@media (max-width:576px){.nav__list li{margin-right:0}}.nav__link{padding:12px 0;font-size:14px;text-decoration:none;color:#fff;display:flex;align-items:center}.nav__link:hover{color:#ff33a0;border-bottom:2px solid #ff33a0}.nav__link svg{margin-right:8px;width:28px;height:28px;fill:currentColor}.is-active .nav__link{color:#ff33a0;border-bottom:2px solid #ff33a0}.nav--mobile{overflow:hidden;position:fixed;width:100vw;height:100vh;top:0;left:0;transform:translateX(-100%);will-change:height;transition:.4s;z-index:999;background:#00356b}.nav--mobile .burger{top:32px;right:32px;bottom:auto}.nav--mobile .nav__list{margin:auto;display:block}.nav--mobile li{margin-bottom:32px}.nav--mobile .nav__link{font-size:24px}.nav--mobile .nav__link svg{width:30px;height:30px}.menu--open{overflow:hidden}.menu--open .nav--mobile{display:flex;transform:translateX(0)}.particles-js-canvas-el{height:auto!important;position:absolute;top:0;left:0;pointer-events:none}.burger{display:none;position:absolute;bottom:24px;right:24px;width:28px;height:20px;background:transparent;border:none;cursor:pointer}@media (max-width:576px){.burger{display:block}}.burger span{height:2px;width:100%;background:#fff;transition:.2s;position:absolute;left:0;top:0}.burger span:nth-child(2){top:9px}.burger span:last-child{top:18px}.nav--mobile .burger span:first-child{transform:rotate(45deg);top:11px}.nav--mobile .burger span:nth-child(2){visibility:hidden;opacity:0}.nav--mobile .burger span:last-child{transform:rotate(-45deg);top:11px}.content{margin:0}.sidebar{width:300px}@media (max-width:768px){.sidebar{width:100%}}.sidbar__title{display:flex;align-items:center;padding:12px 0;margin:12px 16px 0 0;border-top:1px solid #ccc}.sidbar__title svg{margin-right:12px}.sidebar__list{padding:24px 0;list-style:none}.sidebar__item{margin:0 32px 8px 0}.sidebar__link{display:block;text-decoration:none;color:#333;padding:12px 0}.sidebar__link:hover{text-decoration:underline}.sidebar__link.is-active{color:#ff1493}.sidebar__title{border-bottom:1px solid #ddd}.tab__content{flex:1;padding:24px}@media (max-width:576px){.tab__content{padding:0;width:100%}}.tab__content-item{display:none}.tab__content-item.is-active{display:block;padding:32px}@media (max-width:768px){.tab__content-item.is-active{padding:0}}.tab-pane{display:none;padding:32px}@media (max-width:768px){.tab-pane{padding:0}}.tab-pane.homepage{padding:32px 0}.tab-pane.is-active{display:block}.iframe__wrapper{max-width:900px}.footer{padding-top:40px;padding-bottom:40px;background:#00356b}