tobias-hilfiker/Modul_152
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

make nav responsive and fix styling

Browse Source
This commit is contained in:
Tobias Hilfiker
2022-12-22 20:04:03 +01:00
parent a6067fc0e2
commit 644671d1ab
8 changed files with 75 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Webauftritt/eportfolio/impressions.html
View File

@@ -1,8 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beispiele</title>
<meta charset="UTF-8"/>
<link rel="icon" type="image/png" href="/curling_logo.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Curling E-Portfolio</title>
</head>
<body class="bg-primary flex flex-col min-h-screen">

4
Webauftritt/eportfolio/main.js
View File

@@ -1,2 +1,6 @@
import './style.scss';
function Menu(e) {
let list = document.querySelector('ul');
e.name === 'menu' ? (e.name = "close", list.classList.add('top-[80px]') , list.classList.add('opacity-100')) : (e.name = "menu" , list.classList.remove('top-[80px]'), list.classList.remove('opacity-100'))
}

61
Webauftritt/eportfolio/partials/nav.hbs
View File

@@ -1,9 +1,56 @@
<nav class="bg-navbackground h-32 text-right flex flex-row justify-between items-center px-20">
<a href="index.html"> <img src="/curling_logo.png" alt="Logo" class="h-28"/></a>
<div class="flex justify-between w-1/3 text-textcolor">
<a href="index.html" class="{{#if homeActive}}font-bold{{/if}}">Home</a>
<a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
<a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a>
<a href="impressions.html" class="{{#if impressionsActive}}font-bold{{/if}}">Impressionen</a>
<nav class="p-5 bg-navbackground shadow md:flex md:items-center md:justify-between">
<div class="flex justify-between items-center ">
<a href="index.html"> <img src="/curling_logo.png" alt="Logo" class="h-28"/></a>
<span class="text-3xl cursor-pointer mx-2 md:hidden block">
<img src="/menu.svg" onclick="function Menu(e){
let element = document.getElementById('menu-mobile');
element.classList.remove('opacity-0');
element.classList.remove('pointer-events-none');
}
Menu(this)"/>
</span>
</div>
<ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute text-textcolor w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500">
<li class="mx-4 my-6 md:my-0">
<a href="index.html" class="{{#if homeActive}}font-bold{{/if}}">Home</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="impressions.html" class="{{#if impressionsActive}}font-bold{{/if}}">Impressionen</a>
</li>
</ul>
<ul id="menu-mobile"
class="pointer-events-none opacity-0 fixed backdrop-blur top-0 left-0 right-0 bottom-0 md:hidden flex flex-col items-center content-center text-textcolor">
<li class="mx-4 mb-6 mt-10 md:my-0">
<img src="/close.svg" class="top-10" onclick="function Menu(e){
let element = document.getElementById('menu-mobile');
element.classList.add('opacity-0');
element.classList.add('pointer-events-none');
}
Menu(this)"/>
</li>
<li class="mx-4 my-6 md:my-0">
<img src="/curling_logo.png" alt="Logo" class="h-28"/>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="index.html" class="{{#if homeActive}}font-bold{{/if}}">Home</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a>
</li>
<li class="mx-4 my-6 md:my-0">
<a href="impressions.html" class="{{#if impressionsActive}}font-bold{{/if}}">Impressionen</a>
</li>
</ul>
</nav>

1
Webauftritt/eportfolio/public/close.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m16.5 33.6 7.5-7.5 7.5 7.5 2.1-2.1-7.5-7.5 7.5-7.5-2.1-2.1-7.5 7.5-7.5-7.5-2.1 2.1 7.5 7.5-7.5 7.5ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Zm0-3q7.1 0 12.05-4.975Q41 31.05 41 24q0-7.1-4.95-12.05Q31.1 7 24 7q-7.05 0-12.025 4.95Q7 16.9 7 24q0 7.05 4.975 12.025Q16.95 41 24 41Zm0-17Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 609 B

1
Webauftritt/eportfolio/public/menu.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 125 B

10
Webauftritt/eportfolio/rules.html
View File

@@ -1,8 +1,10 @@
<!DOCTYPE html>
<html lang="de">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rules</title>
<meta charset="UTF-8"/>
<link rel="icon" type="image/png" href="/curling_logo.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Curling E-Portfolio</title>
</head>
<body class="bg-primary flex flex-col min-h-screen">
@@ -12,7 +14,7 @@
<h1 class="flex justify-center">Regeln</h1>
<div class="h-full grid grid-cols-3 gap-0.5 content-start p-16">
<div class="h-full grid grid-cols-1 md:grid-cols-3 gap-0.5 content-start p-16">
{{> ruleitem
image="/rules/fgz.svg"
imageAlt="Free Guard Zone"

6
Webauftritt/eportfolio/spiritofcurling.html
View File

@@ -1,8 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spirit of Curling</title>
<meta charset="UTF-8"/>
<link rel="icon" type="image/png" href="/curling_logo.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Curling E-Portfolio</title>
</head>
<body class="bg-primary flex flex-col min-h-screen">

4
Webauftritt/eportfolio/tailwind.config.cjs
View File

@@ -12,9 +12,7 @@ module.exports = {
},
fontSize: {
's-h1': '50px',
h1: '56px',
's-h2': '60px',
h2: '60px'
h1: '56px'
}
},
},