From 0d1de7879913dfada9b2685b1f86e4f503faadaa Mon Sep 17 00:00:00 2001 From: Tim <37934567+tfwmedia@users.noreply.github.com> Date: Thu, 22 May 2025 13:13:53 +0200 Subject: [PATCH] Fix/64 logo navi fehlt bei mobile ansicht auf ipad bspw quer (#3) * Update .gitignore to include custom.css.map Added a reference to custom.css.map to prevent it from being tracked by Git. This helps avoid committing autogenerated files and keeps the repository clean. * Fix layout issues for iPad and tablet landscape view Updated responsive styles to ensure proper visibility and alignment of header elements and navigation on devices with widths between 768px and 1220px. Adjusted logo, spacing, font sizes, and layout to improve usability and appearance. Disabled the hamburger menu to avoid conflicts in this viewport range. * Fix layout issues for iPad and tablet landscape view Updated responsive styles to ensure proper visibility and alignment of header elements and navigation on devices with widths between 768px and 1220px. Adjusted logo, spacing, font sizes, and layout to improve usability and appearance. Disabled the hamburger menu to avoid conflicts in this viewport range. * Add workflow_dispatch trigger to preview workflows Enable manual execution for preview deployment workflows by adding the `workflow_dispatch` trigger. This allows users to start the workflows manually when necessary, improving flexibility and control. * Set default font to "Assistant" in base.scss Removed an unnecessary comment and ensured the root uses "Assistant" as the default font. This improves code clarity while maintaining consistent styling. --------- Co-authored-by: Tim Friedrich Weber --- .github/workflows/deploy-preview-fix.yml | 1 + .github/workflows/deploy-preview.yml | 1 + .gitignore | 3 +- overrides/assets/css/modules/base.scss | 1 - overrides/assets/css/responsive/medium.scss | 72 ++++++++++++++++++++- 5 files changed, 75 insertions(+), 3 deletions(-) diff --git a/.github/workflows/deploy-preview-fix.yml b/.github/workflows/deploy-preview-fix.yml index 84c6e19..a5b84c1 100644 --- a/.github/workflows/deploy-preview-fix.yml +++ b/.github/workflows/deploy-preview-fix.yml @@ -1,6 +1,7 @@ name: Preview Deployment (Fix) on: + workflow_dispatch: # Ermöglicht manuelles Starten push: branches: - 'blog/**' diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml index a9764f5..69ece0f 100644 --- a/.github/workflows/deploy-preview.yml +++ b/.github/workflows/deploy-preview.yml @@ -1,6 +1,7 @@ name: Preview Deployment on: + workflow_dispatch: # Ermöglicht manuelles Starten push: branches: - 'feature/**' # Triggers only on pushes to branches containing '/' diff --git a/.gitignore b/.gitignore index fa8f6c7..df2cc75 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ /docs/assets/css/custom.css /package-lock.json # Add readme.md to ensure case sensitivity is enforced -# This commit includes an attempt to delete readme.md \ No newline at end of file +# This commit includes an attempt to delete readme.md +/docs/assets/css/custom.css.map diff --git a/overrides/assets/css/modules/base.scss b/overrides/assets/css/modules/base.scss index ce4ec8a..8dc2831 100644 --- a/overrides/assets/css/modules/base.scss +++ b/overrides/assets/css/modules/base.scss @@ -4,7 +4,6 @@ html { font-size: 100% !important; } -// Schriftart auf "Assistant" setzen :root { --md-text-font: "Assistant"; --md-code-font: "Assistant"; diff --git a/overrides/assets/css/responsive/medium.scss b/overrides/assets/css/responsive/medium.scss index b6ac8d4..b046306 100644 --- a/overrides/assets/css/responsive/medium.scss +++ b/overrides/assets/css/responsive/medium.scss @@ -50,7 +50,7 @@ } &:after { content: "\f002"; - font-family: 'Font Awesome 6 Pro'; + font-family: 'Font Awesome 6 Pro', sans-serif; font-weight: 100; font-size: 1rem; } @@ -94,3 +94,73 @@ } + + +// Fix for iPad and tablet devices in landscape orientation +@media (min-width: 768px) and (max-width: 1220px) { + // Ensure logo is visible + .md-header__button.md-logo { + display: block !important; + visibility: visible !important; + } + + .md-header__mobile-logo{ + display: none !important; + } + + // Make sure navigation elements remain visible + .md-header-nav, + .md-header__inner, + .md-tabs, + .md-header__title, + .md-tabs__list { + display: flex !important; + visibility: visible !important; + } + + .md-header{ + .md-grid{ + padding: 0 6rem !important; + width: 100% !important; + } + } + + // Ensure proper layout and spacing + .md-header__inner { + justify-content: space-between; + padding: 0 0.2rem; + max-width: 1200px; + margin: 0 auto; + width: 100%; + } + + // Make navigation width match content width + .md-tabs { + max-width: 1200px; + margin: 0 auto; + width: 100%; + } + + // Adjust font sizes for better fit in this viewport range + .md-header__title { + font-size: 0.9rem; + } + + .md-tabs__link { + font-size: 0.7rem; + padding: 0.5rem 0.5rem 0.5rem 0; + } + + .md-header__button.md-logo { + padding: 2.2rem 0; + } + + // Hide hamburger menu for this range to prevent conflicts + .md-header__button[for="__drawer"] { + display: none !important; + } + + body .md-grid .md-content { + padding: 0 4rem; + } +}