Use structured sass compilation

This commit is contained in:
Ferit Yiğit BALABAN
2022-08-11 19:54:12 +03:00
parent 04b83f08dd
commit 4d1e95f585
14 changed files with 14 additions and 531 deletions

View File

@@ -0,0 +1 @@
@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Oswald:wght@600&display=swap";#footer{display:flex;justify-content:space-between;background-color:#000;font:16px "Montserrat",sans-serif;padding-top:50px;padding-bottom:50px}#footer .footer-columns{display:flex}#footer .footer-columns .footer-column{margin:0 20px 20px 20px}#footer .footer-columns .footer-column h1{margin:0 0 16px 0;font:700 18px "Montserrat",sans-serif;color:#f5ffff}@media screen and (max-width: 400px){#footer .footer-columns .footer-column h1{font-size:14px}}#footer .footer-columns .footer-column a{text-decoration:none;color:#abb3b3}#footer .footer-columns .footer-column a:hover{font-size:17px;color:#b3d1ff}@media screen and (max-width: 400px){#footer .footer-columns .footer-column a:hover{font-size:13px}}#footer .footer-columns .footer-column ul{margin:0;padding:0;list-style-type:none}@media screen and (max-width: 400px){#footer{font-size:12px}}#footer-stateless{display:flex;justify-content:space-between;align-items:center;background-color:#1d60b5;color:#fff;font:14px "Montserrat",sans-serif}#footer-stateless a{color:#fff;text-decoration:none}#footer-stateless a:hover{font-style:italic}#footer-stateless .smaller{font-weight:200;font-size:12px}@media screen and (max-width: 400px){#footer-stateless .smaller{font-size:8px}}@media screen and (max-width: 400px){#footer-stateless{font-size:10px}}/*# sourceMappingURL=footer.css.map */

View File

@@ -0,0 +1 @@
@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Oswald:wght@600&display=swap";#header{background:#fdffff;padding:0 150px;position:sticky;display:flex;flex-direction:row;justify-content:space-between;align-items:center}@media screen and (max-width: 850px){#header{padding:0 50px}}@media screen and (max-width: 360px){#header{padding:0 25px}}#header #logo{display:flex;align-items:center;height:56px}@media screen and (max-width: 850px){#header #logo{height:36px}}#header .bounce-animation span{font:600 56px "Oswald",sans-serif;display:inline-block;color:#1d60b5;animation:bounce 2500ms infinite;animation-delay:calc(.1s*var(--i))}@media screen and (max-width: 850px){#header .bounce-animation span{font-size:36px}}@keyframes bounce{0%,40%,100%{transform:translateY(0)}20%{transform:translateY(-5px)}}#header .navbar{display:flex}#header .navbar .nav-item{margin-right:1vw;font:18px "Montserrat",sans-serif;font-weight:600;color:#706fff;text-decoration:none}#header .navbar .nav-item:hover{color:#01003b}#header .navbar .nav-item:last-of-type{margin-right:0}@media screen and (max-width: 1200px){#header .navbar .nav-item{display:none}}#header #toggle{display:none}#header #toggle-label{margin:0;width:36px;height:36px;position:relative;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#header #toggle-label .bar{padding:0;width:36px;height:4px;background-color:#1d60b5;display:block;border-radius:4px;transition:all .4s ease-in-out;position:absolute}#header #toggle-label .bar1{transform-origin:5%}#header #toggle-label .bar4{transform-origin:5%}@media screen and (max-width: 850px){#header #toggle-label{width:28px;height:28px}#header #toggle-label .bar{width:28px}}#header .bar1{top:0}#header .bar2,#header .bar3{top:16px}@media screen and (max-width: 850px){#header .bar2,#header .bar3{top:12px}}#header .bar3{right:0}#header .bar4{bottom:0}#header #toggle:checked+#toggle-label>.bar1{transform:rotate(45deg);height:3px;width:50px}@media screen and (max-width: 850px){#header #toggle:checked+#toggle-label>.bar1{width:39px}}#header #toggle:checked+#toggle-label>.bar3{transform:rotate(45deg);height:3px;background-color:rgba(0,0,0,0)}#header #toggle:checked+#toggle-label>.bar2{transform:rotate(-45deg);height:3px;background-color:rgba(0,0,0,0)}#header #toggle:checked+#toggle-label>.bar4{transform:rotate(-45deg);height:3px;width:50px}@media screen and (max-width: 850px){#header #toggle:checked+#toggle-label>.bar4{width:39px}}#header #toggle-label{display:none}@media screen and (max-width: 1200px){#header #toggle-label{display:block}}/*# sourceMappingURL=header.css.map */