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

Build index.html, create nav-component, add colors and handlebar-plugin to config

Browse Source
This commit is contained in:
Tobias Hilfiker
2022-12-07 15:49:40 +01:00
parent 2cd94aceac
commit a4f4be4761
15 changed files with 2300 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
Webauftritt/eportfolio/examles.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beispiele</title>
</head>
<body class="bg-primary">
{{> nav examplesActive=true}}
<h1 class="flex justify-center">Beispiele</h1> <!--todo refine the positioning of text on page-->
<script type="module" src="/main.js"></script>
</body>
</html>

15
Webauftritt/eportfolio/howto.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Play</title>
</head>
<body class="bg-primary">
{{> nav howtoActive=true}}
<h1 class="flex justify-center">How To Play</h1> <!--todo refine the positioning of text on page-->
<script type="module" src="/main.js"></script>
</body>
</html>

50
Webauftritt/eportfolio/index.html
View File

@@ -1,14 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<h1>Hallo Tobias</h1>
<head>
<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">
<script type="module" src="/main.js"></script>
</body>
</html>
{{> nav homeActive=true }}
<h1 class="flex justify-center">Welcome to the world of Curling!</h1> <!--todo refine the positioning of text on page-->
<!--
todo -> bind to bottom of page
-->
<div class="h-40 bg-banner flex justify-between items-center px-40 mb-14 mt-auto">
<a href="rules.html" class="flex flex-col align-middle">
<img src="./public/rules.svg" alt="Regeln" class="w-20 h-20"/>
<p class="text-center">Regeln</p>
</a>
<a href="howto.html" class="flex flex-col align-middle">
<img src="./public/question.svg" alt="How to Play" class="w-20 h-20"/>
<p class="text-center">How to play</p>
</a>
<a href="spiritofcurling.html" class="flex flex-col align-middle">
<img src="./public/rules.svg" alt="Spirit of Curling" class="w-20 h-20"/>
<!--todo replace icon with actual icon-->
<p class="text-center">Spirit of Curling</p>
</a>
<a href="examles.html" class="flex flex-col align-middle">
<img src="./public/extension.svg" alt="Beispiele" class="w-20 h-20"/>
<p class="text-center">Beispiele</p>
</a>
</div>
<!--TODO: links to pages with icons-->
<script type="module" src="/main.js"></script>
</body>
</html>

2164
Webauftritt/eportfolio/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
Webauftritt/eportfolio/package.json
View File

@@ -13,6 +13,7 @@
"postcss": "^8.4.19",
"sass": "^1.56.1",
"tailwindcss": "^3.2.4",
"vite": "^3.2.3"
"vite": "^3.2.3",
"vite-plugin-handlebars": "^1.6.0"
}
}

10
Webauftritt/eportfolio/partials/nav.hbs Normal file
View File

@@ -0,0 +1,10 @@
<nav class="bg-navbackground h-32 text-right flex flex-row justify-between items-center px-20">
<img src="./public/curling_logo.png" alt="Logo" class="h-28"/>
<div class="flex justify-between w-1/2 text-textcolor">
<a href="index.html" class="nav-item {{#if homeActive}}font-bold{{/if}}">Home</a>
<a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
<a href="howto.html" class="{{#if howtoActive}}font-bold{{/if}}">How to Play</a>
<a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a>
<a href="examles.html" class="{{#if examplesActive}}font-bold{{/if}}">Beispiele</a>
</div>
</nav>

BIN
Webauftritt/eportfolio/public/curling_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB

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

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M17.8 42H9q-1.2 0-2.1-.9Q6 40.2 6 39v-8.8q2.2-.25 3.775-1.725Q11.35 27 11.35 24.85t-1.575-3.625Q8.2 19.75 6 19.5v-8.8q0-1.2.9-2.1.9-.9 2.1-.9h8.85q.55-2 1.975-3.35T23.25 3q2 0 3.425 1.35Q28.1 5.7 28.65 7.7h8.65q1.2 0 2.1.9.9.9.9 2.1v8.65q2 .55 3.275 2.075 1.275 1.525 1.275 3.525t-1.275 3.35Q42.3 29.65 40.3 30.2V39q0 1.2-.9 2.1-.9.9-2.1.9h-8.8q-.25-2.4-1.775-3.875T23.15 36.65q-2.05 0-3.575 1.475Q18.05 39.6 17.8 42ZM9 39h6.5q1.25-3.05 3.5-4.2 2.25-1.15 4.15-1.15 1.9 0 4.15 1.15 2.25 1.15 3.5 4.2h6.5V27.25h2.25q1 0 1.65-.65.65-.65.65-1.65 0-1-.65-1.65-.65-.65-1.65-.65H37.3V10.7H25.55V8.3q0-1-.65-1.65Q24.25 6 23.25 6q-1 0-1.65.65-.65.65-.65 1.65v2.4H9v6.5q2.4.9 3.875 3t1.475 4.65q0 2.55-1.475 4.65Q11.4 31.6 9 32.5Zm16.45-16.5Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 813 B

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

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M24.2 35.65q.8 0 1.35-.55t.55-1.35q0-.8-.55-1.35t-1.35-.55q-.8 0-1.35.55t-.55 1.35q0 .8.55 1.35t1.35.55Zm-1.75-7.3h2.95q0-1.3.325-2.375T27.75 23.5q1.55-1.3 2.2-2.55.65-1.25.65-2.75 0-2.65-1.725-4.25t-4.575-1.6q-2.45 0-4.325 1.225T17.25 16.95l2.65 1q.55-1.4 1.65-2.175 1.1-.775 2.6-.775 1.7 0 2.75.925t1.05 2.375q0 1.1-.65 2.075-.65.975-1.9 2.025-1.5 1.3-2.225 2.575-.725 1.275-.725 3.375ZM24 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: 898 B

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

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M8 42v-3h24v3Zm11.1-10.6L8 20.3l3.5-3.6 11.2 11.1Zm12.7-12.7L20.7 7.5 24.3 4l11.1 11.1ZM41.9 40 15.1 13.2l2.1-2.1L44 37.9Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 203 B

1
Webauftritt/eportfolio/public/vite.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

15
Webauftritt/eportfolio/rules.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rules</title>
</head>
<body class="bg-primary">
{{> nav rulesActive=true }}
<h1 class="flex justify-center">Regeln</h1> <!--todo refine the positioning of text on page-->
<script type="module" src="/main.js"></script>
</body>
</html>

15
Webauftritt/eportfolio/spiritofcurling.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spirit of Curling</title>
</head>
<body class="bg-primary">
{{> nav spiritActive=true}}
<h1 class="flex justify-center">Spirit of Curling</h1> <!--todo refine the positioning of text on page-->
<script type="module" src="/main.js"></script>
</body>
</html>

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

@@ -1,17 +1,19 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {
colors: {
primary: '#003249',
secondary: '#007EA7'
},
fontSize: {
's-h1': '50px',
h1: '56px'
}
content: ["./*.{html,js}"],
theme: {
extend: {
colors: {
textcolor: '#CCDBDC',
navbackground: '#003249',
primary: '#9AD1D4',
banner: '#007EA7'
},
fontSize: {
's-h1': '50px',
h1: '56px'
}
},
},
},
plugins: [],
plugins: [],
}

8
Webauftritt/eportfolio/vite.config.js Normal file
View File

@@ -0,0 +1,8 @@
import { resolve } from 'path';
import handlebars from 'vite-plugin-handlebars';
export default {
plugins: [handlebars({
partialDirectory: resolve(__dirname, 'partials'),
})],
};