This is an automated email from the ASF dual-hosted git repository.
rbowen pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/comdev-events-site.git
The following commit(s) were added to refs/heads/main by this push:
new e906eec Makes the site a little more mobile friendly.
e906eec is described below
commit e906eec946a76bd7dd95b963dec2ac9b0617cbf5
Author: Rich Bowen <[email protected]>
AuthorDate: Thu May 7 15:24:06 2026 -0400
Makes the site a little more mobile friendly.
---
layouts/_default/baseof.html | 10 ++++++++
static/style/screen.css | 59 ++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 69 insertions(+)
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a2a4343..c4f54b3 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -19,6 +19,7 @@
<html lang="en">
<head>
<meta name="description" content="Apache Events">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="apache, apache events, apache community,
opensource">
<title>{{ .Title }}</title>
@@ -31,6 +32,8 @@
<body>
{{ partial "banner.html" . }}
+ <button id="nav-toggle" aria-label="Toggle navigation">☰ Menu</button>
+
<div id="navigation">
<ul>
<li><a href="/index.html">Home</a></li>
@@ -67,5 +70,12 @@
</div>
{{ partial "footer.html" . }}
+
+ <script>
+ document.getElementById('nav-toggle').addEventListener('click', function()
{
+ var nav = document.getElementById('navigation');
+ nav.classList.toggle('open');
+ });
+ </script>
</body>
</html>
diff --git a/static/style/screen.css b/static/style/screen.css
index 744f945..4a61ecf 100644
--- a/static/style/screen.css
+++ b/static/style/screen.css
@@ -220,3 +220,62 @@ th, td {
border-radius: 12%;
}
+/* Mobile responsive */
+#nav-toggle {
+ display: none;
+ background: #f5f8fa;
+ border: 1px solid #e6ebed;
+ padding: 8px 16px;
+ font-size: 1em;
+ cursor: pointer;
+ margin: 10px;
+ border-radius: 5px;
+}
+
+@media (max-width: 768px) {
+ #nav-toggle {
+ display: block;
+ }
+
+ #navigation {
+ float: none;
+ width: auto;
+ margin: 0;
+ padding: 10px 15px;
+ border-radius: 0;
+ border: none;
+ border-bottom: 1px solid #e6ebed;
+ display: none !important;
+ overflow: hidden;
+ }
+
+ #navigation.open {
+ display: block !important;
+ }
+
+ #content {
+ margin: 20px 15px;
+ padding: 0 8px 20px;
+ }
+
+ #footer {
+ margin: 20px 15px;
+ }
+
+ body {
+ background-image: none;
+ }
+
+ .pull-left, .pull-right {
+ float: none;
+ width: 100%;
+ max-width: 100%;
+ margin: 1rem 0;
+ }
+
+ table {
+ display: block;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+}
