From 4364cdb555d07c3b5a87de886491ef21bfd68fad Mon Sep 17 00:00:00 2001 From: DanielKorban <74277609+daniel99korban@users.noreply.github.com> Date: Fri, 27 Dec 2024 10:51:39 -0300 Subject: [PATCH] feat: included a menu for display on mobile (#87) --- _includes/css/main.css | 34 +++++++++++++++++++++++++++++++++- index.html | 16 +++++++++++++--- 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/_includes/css/main.css b/_includes/css/main.css index c3223ea..adfb3f4 100644 --- a/_includes/css/main.css +++ b/_includes/css/main.css @@ -72,7 +72,7 @@ a:hover { color: #fff !important; margin: 0 -.25rem; padding: 0 .25rem; - box-shadow: inset 500px 0 0 0 #1A5FB4; + box-shadow: inset 100px 0 0 0 #1A5FB4; transition: color 1s ease-in-out, box-shadow 1s ease-in-out; } @@ -189,6 +189,38 @@ nav ul li:hover, nav ul li.active { padding-top: 0; } +/* Mobile Styles */ + +.menu-toggle { + display: none; +} + +@media (max-width: 400px) { + nav ul { + display: none; + flex-direction: column; + text-align: center; + } + + nav ul.show { + display: flex; + } + + nav ul li { + display: block; + width: 100%; + border: none; + } + + .menu-toggle { + display: block; + cursor: pointer; + color: #fff; + font-size: 25px; + padding: 15px; + } + +} /* ----- sections/articles ----- */ diff --git a/index.html b/index.html index e0d4140..ec97a06 100755 --- a/index.html +++ b/index.html @@ -19,12 +19,15 @@