diff --git a/docs/css/style.css b/docs/css/style.css index 626107e..4d1e44b 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -73,18 +73,22 @@ body { } /* Navbar */ -.navbar .container { - position: sticky; +.navbar { + position: fixed; top: 0; left: 0; right: 0; + z-index: 20; + background: var(--bg-primary); +} + +.navbar .container { display: flex; align-items: center; justify-content: space-between; z-index: 20; height: 80px; width: 100%; - margin-top: 0.5rem; } .navbar .nav-menu { @@ -115,6 +119,7 @@ body { /* hamburger */ .hamburger { + margin-bottom: 0.1rem; display: none; } @@ -154,7 +159,7 @@ body { #projects .btn { align-self: center; - margin: 2rem; + margin: 2rem 0; } .project { @@ -239,6 +244,9 @@ body { } } +@media (max-width: 768px) { +} + @media (max-width: 670px) { .navbar .nav-menu { position: fixed; @@ -300,6 +308,7 @@ body { transform: translateY(-8px) rotate(-45deg); } } + @media (max-width: 600px) { .project { display: grid; diff --git a/docs/css/utilities.css b/docs/css/utilities.css index dc830c3..15b9ff9 100644 --- a/docs/css/utilities.css +++ b/docs/css/utilities.css @@ -11,6 +11,12 @@ padding: 1rem 2rem; } +h1::selection, +h2::selection { + color: #111; + background: var(--primary-color); +} + /* Buttons */ .btn { display: inline-block; @@ -68,7 +74,7 @@ flex-direction: column; align-items: center; justify-content: center; - margin-top: 1.5rem; + margin-top: 8rem; padding: 1rem; } @@ -78,16 +84,21 @@ .content-text { text-align: center; + margin: 1.5rem 0; } .content-text h2 { font-size: 3rem; line-height: 1.2; - padding: 12px; + transition: 0.2s ease-in-out; } -.content-text p{ - padding: 9px; + +.content-text p { + padding: 0.5rem; + margin: 0 auto; + max-width: 700px; } + /* Project cards */ .card { padding: 1rem; @@ -148,3 +159,14 @@ .card:nth-child(6) { background: url(../assets/project/project-six.png) center center/cover; } + +/* Media Queries */ +@media (max-width: 768px) { + .header-container { + margin-top: 7rem; + } + + .content-text h2 { + font-size: 2.5rem; + } +} diff --git a/docs/index.html b/docs/index.html index 496f391..cc41bef 100644 --- a/docs/index.html +++ b/docs/index.html @@ -109,8 +109,8 @@