From 4280528c33fcdda5429a90d1d0a35438f7651484 Mon Sep 17 00:00:00 2001 From: Antonia Gaete Date: Wed, 28 Aug 2024 08:45:32 -0700 Subject: [PATCH] Menu and carousel responsive to smaller screens --- themes/osuosl/assets/css/style.css | 121 ++++++++++++++++++- themes/osuosl/layouts/_default/list.html | 1 + themes/osuosl/layouts/_default/single.html | 1 + themes/osuosl/layouts/blog/list.html | 1 + themes/osuosl/layouts/partials/carousel.html | 7 ++ themes/osuosl/layouts/partials/footer.html | 55 +++++---- themes/osuosl/layouts/partials/head.html | 1 + themes/osuosl/layouts/partials/header.html | 3 + themes/osuosl/layouts/partials/menu.html | 27 ++++- themes/osuosl/static/js/mobile-menu.js | 7 ++ 10 files changed, 194 insertions(+), 30 deletions(-) create mode 100644 themes/osuosl/static/js/mobile-menu.js diff --git a/themes/osuosl/assets/css/style.css b/themes/osuosl/assets/css/style.css index bb14bad..c09f3ef 100644 --- a/themes/osuosl/assets/css/style.css +++ b/themes/osuosl/assets/css/style.css @@ -77,6 +77,10 @@ textarea { height: auto; } +.mobile-menu-container { + display: none; +} + .header { display: block; } @@ -129,9 +133,9 @@ textarea { .search { border-radius: 12px 0 0 12px; border: medium none; - padding: 8px; + padding: 6px; margin: 0; - width: 200px; + width: 100px; } .submit-search { @@ -153,6 +157,10 @@ textarea { Main menu source: Hugo mainroad theme */ +.mobile-menu { + display: none; +} + .no-js .menu__btn { display: none; } @@ -358,6 +366,10 @@ button:not(:-moz-focusring):focus>.menu__btn-title { Carousel Source: https://hugocodex.org/add-ons/slider-carousel/ */ +.mobile-carousel { + display: none; +} + .carousel { position: relative; border-bottom: none; @@ -705,7 +717,6 @@ textarea { .footer_headers { display: flex; flex-direction: row; - justify-content: space-between; margin: auto; margin-top: 20px; } @@ -741,4 +752,108 @@ textarea { .footer_map_container { margin-bottom: 10px; +} + +.footer_menu_container { + display: flex; + flex-direction: row; +} + +@media (max-width: 979px) { + main, + .footer__container { + width: 90vw; + margin-left: auto; + margin-right: auto; + } + + .carousel { + display: none; + } + + .mobile-carousel { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 90%; + height: auto; + margin-left: auto; + margin-right: auto; + } + + .mobile-carousel img { + width: 100%; + height: auto; + max-height: 470px; + vertical-align: middle; + } + + .footer_headers { + flex-direction: column; + } + + .footer_menu_container { + display: flex; + flex-direction: row; + } +} + +@media (max-width: 767px) { + body { + width: 100%; + } + + .mobile-carousel { + padding-top: 20px; + } + + .main-menu { + display: none; + } + + .mobile-menu.show { + display: block; + } + + .search-container { + display: none; + } + + .mobile-menu-container { + display: block; + } + + .toggle-mobile-menu { + padding: 11px 13px 9px; + position: absolute; + right: 5px; + top: 5px; + } + + a.toggle-mobile-menu { + color: white; + } + + .toggle-mobile-menu:hover { + background-color: #373737; + cursor: pointer; + } + + .menu__list { + flex-direction: column; + margin: 0; + } + + .menu__text { + text-transform: capitalize; + color: white; + } + + .menu__item { + background-color: rgba(0, 0, 0, 0.7); + margin: 0; + padding-top: 5px; + padding-bottom: 5px; + } } \ No newline at end of file diff --git a/themes/osuosl/layouts/_default/list.html b/themes/osuosl/layouts/_default/list.html index 7a83936..1345fc5 100644 --- a/themes/osuosl/layouts/_default/list.html +++ b/themes/osuosl/layouts/_default/list.html @@ -1,5 +1,6 @@ {{ define "main" }}
+ {{- partial "menu.html" . -}}

{{ .Title }}

{{ .Content }} diff --git a/themes/osuosl/layouts/_default/single.html b/themes/osuosl/layouts/_default/single.html index 7a83936..1345fc5 100644 --- a/themes/osuosl/layouts/_default/single.html +++ b/themes/osuosl/layouts/_default/single.html @@ -1,5 +1,6 @@ {{ define "main" }}
+ {{- partial "menu.html" . -}}

{{ .Title }}

{{ .Content }} diff --git a/themes/osuosl/layouts/blog/list.html b/themes/osuosl/layouts/blog/list.html index 3ff2cde..798c4fd 100644 --- a/themes/osuosl/layouts/blog/list.html +++ b/themes/osuosl/layouts/blog/list.html @@ -1,5 +1,6 @@ {{ define "main" }}
+ {{- partial "menu.html" . -}}

OSU Open Source Lab

{{ .Content }} diff --git a/themes/osuosl/layouts/partials/carousel.html b/themes/osuosl/layouts/partials/carousel.html index 808c877..98beb51 100644 --- a/themes/osuosl/layouts/partials/carousel.html +++ b/themes/osuosl/layouts/partials/carousel.html @@ -26,4 +26,11 @@

{{ $slide.title }} +

+ +
+ {{ with index .context.Site.Data.carousel.images 0 }} +

{{ .title }}

+ + {{ end }}
\ No newline at end of file diff --git a/themes/osuosl/layouts/partials/footer.html b/themes/osuosl/layouts/partials/footer.html index 8a5cc1a..05d74e5 100644 --- a/themes/osuosl/layouts/partials/footer.html +++ b/themes/osuosl/layouts/partials/footer.html @@ -28,36 +28,39 @@
-
HOME
-
- ABOUT -
- About OSL - FAQ - Contact Us - Staff - Logos - Donate +
+
HOME
+
+ ABOUT +
+ About OSL + FAQ + Contact Us + Staff + Logos + Donate +
-
-
- SERVICES -
- Hosting - AARCH64 Development Hosting - POWERLinux/OpnePOWER Development Hosting - IBM Z Development Hosting +
+ SERVICES +
+ Hosting + AARCH64 Development Hosting + POWERLinux/OpnePOWER Development Hosting + IBM Z Development Hosting +
-
-
- STUDENT EXPERIENCE -
- Employement - Education - Student Stories +
+ STUDENT EXPERIENCE +
+ Employement + Education + Student Stories +
+
BLOG
-
BLOG
+
\ No newline at end of file diff --git a/themes/osuosl/layouts/partials/head.html b/themes/osuosl/layouts/partials/head.html index cc5eb64..c8a606c 100644 --- a/themes/osuosl/layouts/partials/head.html +++ b/themes/osuosl/layouts/partials/head.html @@ -7,4 +7,5 @@ + \ No newline at end of file diff --git a/themes/osuosl/layouts/partials/header.html b/themes/osuosl/layouts/partials/header.html index 3cc0a41..2b8d6bc 100644 --- a/themes/osuosl/layouts/partials/header.html +++ b/themes/osuosl/layouts/partials/header.html @@ -11,6 +11,9 @@
+
+ +
Center for Applied Systems & Software diff --git a/themes/osuosl/layouts/partials/menu.html b/themes/osuosl/layouts/partials/menu.html index fb23418..1f1a04e 100644 --- a/themes/osuosl/layouts/partials/menu.html +++ b/themes/osuosl/layouts/partials/menu.html @@ -1,5 +1,5 @@ {{- if .Site.Menus.main }} -
+
@@ -68,4 +68,29 @@ {{- end }}
+ +
+ +
{{- end }} \ No newline at end of file diff --git a/themes/osuosl/static/js/mobile-menu.js b/themes/osuosl/static/js/mobile-menu.js new file mode 100644 index 0000000..65837ea --- /dev/null +++ b/themes/osuosl/static/js/mobile-menu.js @@ -0,0 +1,7 @@ +document.addEventListener('DOMContentLoaded', function () { + var button = document.getElementById("toggle-mobile-menu"); + var menu = document.querySelector(".mobile-menu"); + button.addEventListener("click", function () { + menu.classList.toggle("show"); + }) +}); \ No newline at end of file