From c41effaf502063ef5df8cc6dd961b44bc849f8eb Mon Sep 17 00:00:00 2001 From: chinacomx Date: Wed, 3 Jul 2024 14:42:21 +0200 Subject: [PATCH] fixes added analytics and basic mobile responsiveness (but needs more work) --- _includes/google-analytics.html | 11 ++ _includes/header.html | 17 ++- _layouts/default.html | 5 +- assets/css/style.css | 210 ++++++++++++++++++++++++++++++++ 4 files changed, 241 insertions(+), 2 deletions(-) create mode 100644 _includes/google-analytics.html diff --git a/_includes/google-analytics.html b/_includes/google-analytics.html new file mode 100644 index 0000000..f174998 --- /dev/null +++ b/_includes/google-analytics.html @@ -0,0 +1,11 @@ + + + + + diff --git a/_includes/header.html b/_includes/header.html index bd0c9f8..ab4830f 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,10 +1,13 @@ + + + diff --git a/_layouts/default.html b/_layouts/default.html index a925d43..de75636 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -13,7 +13,9 @@ - + + {% include google-analytics.html %} + {% include header.html %}
@@ -37,3 +39,4 @@

{{ page.title }}

+ diff --git a/assets/css/style.css b/assets/css/style.css index 7773a38..91c0e0a 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -111,6 +111,107 @@ header .logos-right { margin-left: auto; /* Ensure logos are at the far right */ } +/* Navbar Styles */ +.navbar { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + background-color: #fff; + box-shadow: 0 2px 1px -1px gray; +} + +.navbar-brand img { + max-height: 50px; +} + +.nav-logo { + max-height: 50px; + margin-left: 10px; +} + +.navbar-nav { + display: flex; + justify-content: center; + align-items: center; + list-style: none; + margin: 0; + padding: 0; +} + +.nav-item { + margin: 0 10px; +} + +.nav-link { + color: #000; + text-decoration: none; + padding: 10px; +} + +.nav-link:hover { + color: #555; +} + +.navbar-toggler { + display: none; + background: none; + border: none; + font-size: 24px; + cursor: pointer; + padding: 10px; +} + +.collapse { + display: flex; + flex-grow: 1; +} + +@media (max-width: 768px) { + .navbar-toggler { + display: block; + } + + .collapse { + display: none; + flex-direction: column; + width: 100%; + background-color: #fff; + padding: 10px; + position: absolute; + top: 60px; /* Adjust based on the height of your navbar */ + left: 0; + box-shadow: 0 2px 1px -1px gray; + z-index: 1000; /* Ensure it is above other content */ + } + + .collapse.show { + display: flex; + } + + .navbar-nav { + flex-direction: column; + width: 100%; + align-items: center; + } + + .nav-item { + text-align: center; + width: 100%; + } + + .nav-link { + padding: 10px 0; + border-bottom: 1px solid #ddd; + width: 100%; + } + + .logos-right { + display: none; + } +} + /* General Navbar */ .navbar { display: flex; @@ -156,6 +257,115 @@ header .logos-right { color: #555; } +/* Global Styles */ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; +} + +/* Navbar Styles */ +.navbar { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + background-color: #fff; + box-shadow: 0 2px 1px -1px gray; +} + +.navbar-brand img { + max-height: 50px; +} + +.nav-logo { + max-height: 50px; + margin-left: 10px; +} + +.navbar-nav { + display: flex; + justify-content: center; + align-items: center; + list-style: none; + margin: 0; + padding: 0; +} + +.nav-item { + margin: 0 10px; +} + +.nav-link { + color: #000; + text-decoration: none; + padding: 10px; +} + +.nav-link:hover { + color: #555; +} + +.navbar-toggler { + display: none; + background: none; + border: none; + font-size: 24px; + cursor: pointer; + padding: 10px; +} + +.collapse { + display: flex; + flex-grow: 1; +} + +@media (max-width: 768px) { + .navbar-toggler { + display: block; + } + + .collapse { + display: none; + flex-direction: column; + width: 100%; + background-color: #fff; + padding: 10px; + position: absolute; + top: 60px; /* Adjust based on the height of your navbar */ + left: 0; + box-shadow: 0 2px 1px -1px gray; + z-index: 1000; /* Ensure it is above other content */ + } + + .collapse.show { + display: flex; + } + + .navbar-nav { + flex-direction: column; + width: 100%; + align-items: center; + } + + .nav-item { + text-align: center; + width: 100%; + } + + .nav-link { + padding: 10px 0; + border-bottom: 1px solid #ddd; + width: 100%; + } + + .logos-right { + display: none; + } +} + /* Splash Page Styles */ .splash { background: url('/assets/images/splash-image.png') no-repeat center center/cover;