Original app written in Vue
This commit is contained in:
codevictory
parent
78d33e5487
commit
ede231e623
31 changed files with 1241 additions and 521 deletions
15
index.html
15
index.html
|
|
@ -1,13 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" href="/small-logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Crimson+Text" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
206
package-lock.json
generated
206
package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"pinia": "^2.0.13",
|
||||
"sass": "^1.52.1",
|
||||
"vue": "^3.2.33",
|
||||
"vue-router": "^4.0.14"
|
||||
},
|
||||
|
|
@ -1440,6 +1441,18 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/anymatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
|
||||
"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
|
||||
"dependencies": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/arch": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
|
||||
|
|
@ -1591,6 +1604,14 @@
|
|||
"tweetnacl": "^0.14.3"
|
||||
}
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/blob-util": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
|
||||
|
|
@ -1623,7 +1644,6 @@
|
|||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fill-range": "^7.0.1"
|
||||
},
|
||||
|
|
@ -1801,6 +1821,43 @@
|
|||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar/node_modules/glob-parent": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dependencies": {
|
||||
"is-glob": "^4.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/ci-info": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.1.tgz",
|
||||
|
|
@ -3380,7 +3437,6 @@
|
|||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
},
|
||||
|
|
@ -3481,7 +3537,6 @@
|
|||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -3778,6 +3833,11 @@
|
|||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
|
||||
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
|
|
@ -3837,6 +3897,17 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/is-binary-path": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
|
||||
"dependencies": {
|
||||
"binary-extensions": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-ci": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
|
||||
|
|
@ -3865,7 +3936,6 @@
|
|||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -3883,7 +3953,6 @@
|
|||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-extglob": "^2.1.1"
|
||||
},
|
||||
|
|
@ -3911,7 +3980,6 @@
|
|||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
|
|
@ -4555,6 +4623,14 @@
|
|||
"integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/normalize-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/npm-run-path": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
|
||||
|
|
@ -4737,7 +4813,6 @@
|
|||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
},
|
||||
|
|
@ -4963,6 +5038,17 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/regexpp": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
|
||||
|
|
@ -5113,6 +5199,22 @@
|
|||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.52.1",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.52.1.tgz",
|
||||
"integrity": "sha512-fSzYTbr7z8oQnVJ3Acp9hV80dM1fkMN7mSD/25mpcct9F7FPBMOI8krEYALgU1aZoqGhQNhTPsuSmxjnIvAm4Q==",
|
||||
"dependencies": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"sass": "sass.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/saxes": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
|
||||
|
|
@ -5512,7 +5614,6 @@
|
|||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-number": "^7.0.0"
|
||||
},
|
||||
|
|
@ -7174,6 +7275,15 @@
|
|||
"color-convert": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"anymatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
|
||||
"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
|
||||
"requires": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
}
|
||||
},
|
||||
"arch": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
|
||||
|
|
@ -7279,6 +7389,11 @@
|
|||
"tweetnacl": "^0.14.3"
|
||||
}
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
|
||||
},
|
||||
"blob-util": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
|
||||
|
|
@ -7311,7 +7426,6 @@
|
|||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fill-range": "^7.0.1"
|
||||
}
|
||||
|
|
@ -7419,6 +7533,31 @@
|
|||
"integrity": "sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==",
|
||||
"dev": true
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
|
||||
"requires": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"fsevents": "~2.3.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"glob-parent": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"requires": {
|
||||
"is-glob": "^4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ci-info": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.1.tgz",
|
||||
|
|
@ -8523,7 +8662,6 @@
|
|||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
|
|
@ -8595,7 +8733,6 @@
|
|||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"function-bind": {
|
||||
|
|
@ -8802,6 +8939,11 @@
|
|||
"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
|
||||
"dev": true
|
||||
},
|
||||
"immutable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
|
||||
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
|
||||
},
|
||||
"import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
|
|
@ -8846,6 +8988,14 @@
|
|||
"integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
|
||||
"dev": true
|
||||
},
|
||||
"is-binary-path": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
|
||||
"requires": {
|
||||
"binary-extensions": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"is-ci": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
|
||||
|
|
@ -8867,8 +9017,7 @@
|
|||
"is-extglob": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
|
||||
"dev": true
|
||||
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
|
||||
},
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "3.0.0",
|
||||
|
|
@ -8880,7 +9029,6 @@
|
|||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-extglob": "^2.1.1"
|
||||
}
|
||||
|
|
@ -8898,8 +9046,7 @@
|
|||
"is-number": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
|
||||
},
|
||||
"is-path-inside": {
|
||||
"version": "3.0.3",
|
||||
|
|
@ -9390,6 +9537,11 @@
|
|||
"integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==",
|
||||
"dev": true
|
||||
},
|
||||
"normalize-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
|
||||
},
|
||||
"npm-run-path": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
|
||||
|
|
@ -9535,8 +9687,7 @@
|
|||
"picomatch": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
|
||||
},
|
||||
"pify": {
|
||||
"version": "2.3.0",
|
||||
|
|
@ -9657,6 +9808,14 @@
|
|||
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
|
||||
"dev": true
|
||||
},
|
||||
"readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"requires": {
|
||||
"picomatch": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"regexpp": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
|
||||
|
|
@ -9759,6 +9918,16 @@
|
|||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"dev": true
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.52.1",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.52.1.tgz",
|
||||
"integrity": "sha512-fSzYTbr7z8oQnVJ3Acp9hV80dM1fkMN7mSD/25mpcct9F7FPBMOI8krEYALgU1aZoqGhQNhTPsuSmxjnIvAm4Q==",
|
||||
"requires": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
}
|
||||
},
|
||||
"saxes": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
|
||||
|
|
@ -10051,7 +10220,6 @@
|
|||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-number": "^7.0.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"pinia": "^2.0.13",
|
||||
"sass": "^1.52.1",
|
||||
"vue": "^3.2.33",
|
||||
"vue-router": "^4.0.14"
|
||||
},
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
BIN
public/runosaari-logo.jpg
Normal file
BIN
public/runosaari-logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
public/runosaari-logo_small.jpg
Normal file
BIN
public/runosaari-logo_small.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
public/small-logo.png
Normal file
BIN
public/small-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
210
src/App.vue
210
src/App.vue
|
|
@ -1,125 +1,129 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from "vue-router";
|
||||
import HelloWorld from "@/components/HelloWorld.vue";
|
||||
import { RouterView } from "vue-router";
|
||||
import Header from '@/components/Header.vue';
|
||||
import Footer from '@/components/Footer.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img
|
||||
alt="Vue logo"
|
||||
class="logo"
|
||||
src="@/assets/logo.svg"
|
||||
width="125"
|
||||
height="125"
|
||||
/>
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Header />
|
||||
<main>
|
||||
<RouterView />
|
||||
</main>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@import "@/assets/base.css";
|
||||
<style land='scss'>
|
||||
@import "@/assets/base.scss";
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
|
||||
font-weight: normal;
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
body {
|
||||
font-family: 'Crimson Text', sans-serif;
|
||||
color: #2f273e;
|
||||
font-size: 1.1rem;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@media screen and (max-width: 600px) {
|
||||
body {
|
||||
background-color: #d5caf2;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
a {
|
||||
color: #2f273e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
ul {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
max-width: 44%;
|
||||
}
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
@media screen and (max-width: 600px) {
|
||||
ul {
|
||||
max-width: 90% !important;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
text-shadow: 3px 3px 3px #ababab;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
section.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2);
|
||||
text-align: center;
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
|
||||
p {
|
||||
padding: 0px 20px;
|
||||
max-width: 56%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
p {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.link-back {
|
||||
font-weight: bolder;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
section.logo~section.main {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.generic-link {
|
||||
color: #2222ed;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.foot-note {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,74 +0,0 @@
|
|||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
275
src/assets/base.scss
Normal file
275
src/assets/base.scss
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
/* Alerts and form errors */
|
||||
.alert {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 15px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.alert-info {
|
||||
color: #31708f;
|
||||
background-color: #d9edf7;
|
||||
border-color: #bce8f1;
|
||||
}
|
||||
.alert-warning {
|
||||
color: #8a6d3b;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #faebcc;
|
||||
}
|
||||
.alert-danger {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
.alert p {
|
||||
text-align: center;
|
||||
margin: 0px;
|
||||
}
|
||||
.alert:empty {
|
||||
display: none;
|
||||
}
|
||||
.invalid-feedback {
|
||||
color: #a94442;
|
||||
display: block;
|
||||
margin: -1rem 0 2rem;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Crimson Text', sans-serif;
|
||||
color: #2f273e;
|
||||
font-size: 1.1rem;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
body {
|
||||
background-color: #d5caf2;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
padding: 15px;
|
||||
color: #2f273e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #d5caf2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
a {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile-main-nav-bar {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
&.mobile-main-nav-bar {
|
||||
height: auto;
|
||||
display: flex;
|
||||
visibility: visible;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #d5caf2;
|
||||
width: 80%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&.main-nav-bar {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-main-title {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.mobile-main-title {
|
||||
visibility: visible !important;
|
||||
height: 100% !important;
|
||||
margin-top: 30px !important;
|
||||
margin-bottom: 30px !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
align-items: start;
|
||||
|
||||
.middle img {
|
||||
max-width: 55px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-middle {
|
||||
visibility: hidden;
|
||||
|
||||
img {
|
||||
max-width: 55px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
footer {
|
||||
.container {
|
||||
width: 95% !important;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
div {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.middle {
|
||||
visibility: hidden;
|
||||
max-height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-middle {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2f273e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-align: left;
|
||||
max-width: 44%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
ul {
|
||||
max-width: 90% !important;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
text-shadow: 3px 3px 3px #ababab;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
section.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2);
|
||||
text-align: center;
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
|
||||
p {
|
||||
padding: 0px 20px;
|
||||
max-width: 56%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
p {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.link-back {
|
||||
font-weight: bolder;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
section.logo ~ section.main {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.generic-link {
|
||||
color: #2222ed;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.foot-note {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
Before Width: | Height: | Size: 308 B |
82
src/components/Footer.vue
Normal file
82
src/components/Footer.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<footer>
|
||||
<div class="mobile-middle">
|
||||
<a href="/#nav-bar"><img src="small-logo.png" alt="small logo" /></a>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
Livonsaari & Palva & Velkuanmaa<br />
|
||||
Naantalin saaristo<br />
|
||||
</div>
|
||||
<div class="middle">
|
||||
<a href="/#nav-bar"><img src="small-logo.png" alt="small logo" /></a>
|
||||
</div>
|
||||
<div class="right">
|
||||
Katariina Vuorinen <br />
|
||||
<a class="generic-link" href="mailto:runosaari@gmail.com">runosaari@gmail.com</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a class="generic-link" href="https://github.com/codevictory/runosaari.net">lähdekoodi</a>
|
||||
by codevictory
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
align-items: start;
|
||||
|
||||
.middle img {
|
||||
max-width: 55px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-middle {
|
||||
visibility: hidden;
|
||||
|
||||
img {
|
||||
max-width: 55px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
footer {
|
||||
.container {
|
||||
width: 95% !important;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
div {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.middle {
|
||||
visibility: hidden;
|
||||
max-height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-middle {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
src/components/Header.vue
Normal file
101
src/components/Header.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterLink } from "vue-router";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<nav class="main-nav-bar">
|
||||
<RouterLink to="/">Etusivu</RouterLink>
|
||||
<RouterLink to="/program">Ohjelma</RouterLink>
|
||||
<RouterLink to="/performers">Esiintyjät</RouterLink>
|
||||
<RouterLink to="/info">Info</RouterLink>
|
||||
<RouterLink to="/safety">Turvallisuus</RouterLink>
|
||||
<RouterLink to="/archive">Arkisto</RouterLink>
|
||||
</nav>
|
||||
<h1 class="mobile-main-title">
|
||||
<RouterLink to="/">Runosaari 2022</RouterLink>
|
||||
</h1>
|
||||
<nav class="mobile-main-nav-bar" id="nav-bar">
|
||||
<RouterLink to="/#logo-start">Etusivu</RouterLink>
|
||||
<RouterLink to="/program#program-start">Ohjelma</RouterLink>
|
||||
<RouterLink to="/performers#performers-start">Esiintyjät</RouterLink>
|
||||
<RouterLink to="/info#contact-start">Info</RouterLink>
|
||||
<RouterLink to="/safety#safety-start">Turvallisuus</RouterLink>
|
||||
<RouterLink to="/archive#archive-start">Arkisto</RouterLink>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
padding: 15px;
|
||||
color: #2f273e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #d5caf2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
a {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile-main-nav-bar {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
&.mobile-main-nav-bar {
|
||||
height: auto;
|
||||
display: flex;
|
||||
visibility: visible;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #d5caf2;
|
||||
width: 80%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&.main-nav-bar {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-main-title {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.mobile-main-title {
|
||||
visibility: visible !important;
|
||||
height: 100% !important;
|
||||
margin-top: 30px !important;
|
||||
margin-bottom: 30px !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
msg: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a target="_blank" href="https://vitejs.dev/">Vite</a> +
|
||||
<a target="_blank" href="https://vuejs.org/">Vue 3</a>. What's next?
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import WelcomeItem from "./WelcomeItem.vue";
|
||||
import DocumentationIcon from "./icons/IconDocumentation.vue";
|
||||
import ToolingIcon from "./icons/IconTooling.vue";
|
||||
import EcosystemIcon from "./icons/IconEcosystem.vue";
|
||||
import CommunityIcon from "./icons/IconCommunity.vue";
|
||||
import SupportIcon from "./icons/IconSupport.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a target="_blank" href="https://vuejs.org/">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>.
|
||||
The recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>.
|
||||
If you need to test your components and web pages, check out
|
||||
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and
|
||||
<a
|
||||
href="https://docs.cypress.io/guides/component-testing/introduction"
|
||||
target="_blank"
|
||||
>Cypress Component Testing</a
|
||||
>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in <code>README.md</code>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
|
||||
<a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
|
||||
<a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>,
|
||||
and
|
||||
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a
|
||||
>. If you need more resources, we suggest paying
|
||||
<a target="_blank" href="https://github.com/vuejs/awesome-vue"
|
||||
>Awesome Vue</a
|
||||
>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official
|
||||
Discord server, or
|
||||
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js"
|
||||
>StackOverflow</a
|
||||
>. You should also subscribe to
|
||||
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> and
|
||||
follow the official
|
||||
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
|
||||
twitter account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its
|
||||
sustainability. You can help us by
|
||||
<a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: " ";
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: " ";
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="17"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
13
src/data/performers/2021.ts
Normal file
13
src/data/performers/2021.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import type Performer from '@/types/Performer';
|
||||
|
||||
const Performers: Array<Performer> = [
|
||||
{ name: "asd", paragraphs: ["asd"], imagePath: "asd"},
|
||||
{ name: "sadad", paragraphs: ["sad", "asd"], imagePath: "wqewqe"},
|
||||
{ name: "sadad", paragraphs: ["sad", "asd"], imagePath: "wqewqe"},
|
||||
{ name: "sadad", paragraphs: ["sad", "asd"], imagePath: "wqewqe"},
|
||||
{ name: "sadad", paragraphs: ["sad", "asd"], imagePath: "wqewqe"},
|
||||
{ name: "sadad", paragraphs: ["sad", "asd"], imagePath: "wqewqe"},
|
||||
{ name: "sadad", paragraphs: ["sad", "asd"], imagePath: "wqewqe"}
|
||||
];
|
||||
|
||||
export default Performers;
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import HomeView from "@/views/HomeView.vue";
|
||||
import InfoView from '@/views/InfoView.vue';
|
||||
import ProgramView from '@/views/ProgramView.vue';
|
||||
import PerformersView from '@/views/PerformersView.vue';
|
||||
import SafetyView from '@/views/SafetyView.vue';
|
||||
import ArchiveView from '@/views/ArchiveView.vue';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
|
@ -10,12 +15,29 @@ const router = createRouter({
|
|||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
name: "about",
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import("../views/AboutView.vue"),
|
||||
path: "/info",
|
||||
name: "info",
|
||||
component: InfoView,
|
||||
},
|
||||
{
|
||||
path: "/program",
|
||||
name: "program",
|
||||
component: ProgramView,
|
||||
},
|
||||
{
|
||||
path: "/performers",
|
||||
name: "performers",
|
||||
component: PerformersView,
|
||||
},
|
||||
{
|
||||
path: "/safety",
|
||||
name: "safety",
|
||||
component: SafetyView,
|
||||
},
|
||||
{
|
||||
path: "/archive",
|
||||
name: "archive",
|
||||
component: ArchiveView,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
|
|||
7
src/types/Performer.ts
Normal file
7
src/types/Performer.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
type Performer = {
|
||||
name: String,
|
||||
paragraphs: Array<String>,
|
||||
imagePath: String
|
||||
}
|
||||
|
||||
export default Performer;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
src/views/ArchiveView.vue
Normal file
88
src/views/ArchiveView.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<script context="module" lang="ts">
|
||||
import Performers2021 from '@/data/performers/2021';
|
||||
import type Performer from '@/types/Performer';
|
||||
|
||||
export default {
|
||||
data(): { performers2021: Array<Performer> } {
|
||||
return {
|
||||
performers2021: Performers2021
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="main">
|
||||
<h1 id="archive-start">Arkisto</h1>
|
||||
|
||||
<p v-if="pageIsVisible">ASDsa</p>
|
||||
<div v-else="!pageIsVisible">
|
||||
<h2>2021</h2>
|
||||
<div class="performers-container">
|
||||
<div class="performer-name" v-for="p in performers2021" :key="p.name">
|
||||
<span class="fa fa-chevron-right" />
|
||||
<a>{{ p.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.performer-img {
|
||||
max-width: 57%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.performer-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.performer-paragraph {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.performers-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 80%;
|
||||
justify-content: space-evenly;
|
||||
font-size: 1.2em;
|
||||
|
||||
.performer-name {
|
||||
width: 40%;
|
||||
margin-bottom: 4%;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2f273e;
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.performers-container {
|
||||
.performer-name {
|
||||
width: 100%;
|
||||
margin-bottom: 10%;
|
||||
text-align: left;
|
||||
padding-left: 5%;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.performer-link {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,114 @@
|
|||
<script setup lang="ts">
|
||||
import TheWelcome from "@/components/TheWelcome.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<TheWelcome />
|
||||
</main>
|
||||
<section class="logo" id="logo-start">
|
||||
<picture>
|
||||
<source srcset="runosaari-logo_small.jpg" media="(max-width: 600px)" alt="Runosaari logo" />
|
||||
<source srcset="runosaari-logo.jpg" alt="Runosaari logo" />
|
||||
<img src="runosaari-logo.jpg" alt="Runosaari logo" />
|
||||
</picture>
|
||||
<div id="logo-credits">
|
||||
<div>@Sanna Hukkanen</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
<h1 id="main-title">Runosaari 2022</h1>
|
||||
<h2>
|
||||
<span class="time-and-place">~ 20.-23.7. Livonsaari & Velkuanmaa ~</span><br />
|
||||
Eksymisretki omaan luontoosi, metsänpeiton suojaan!
|
||||
</h2>
|
||||
<p>
|
||||
Lumi ja jää vähenee, vedenpinta nousee ja pandemian aallot viistävät meidänkin rantojamme.
|
||||
Peurojen kurittaman monimuotoisuuden keskelle nousee RUNOSAARI täynnä ihmetystä ja kysymyksiä:
|
||||
onko tulevaisuudella tulevaisuutta? Kuinka luontoon lomittuminen voi olla mahdollista? Jos
|
||||
eksymme metsänpeittoon, voimmeko löytää jonnekin?
|
||||
</p>
|
||||
<p>
|
||||
Uusi poikkitaiteellinen runofestivaali järjestetään toista kertaa Livonsaaressa, Palvassa ja
|
||||
Velkuanmaassa 20.-23.7.2022! Ohjelmassa runous yhdistyy elävään musiikkiin ja erilaisiin
|
||||
taiteellisiin työpajoihin. Livonsaaren perinteinen Seurantalo pikniknurmikkoineen ja
|
||||
lähimetsineen tarjoaa puitteet lavaesiintyjille, työpajoille ja elävälle musiikille. Cafe
|
||||
Laiturissa runous kohtaa yleisön meren äärellä. Velkuanmaan pastoraali-idylli kahden lossin
|
||||
takana viettelee saaristoluonnon syvyyksiin, ja runoiltapäivässä saamme nauttia soitosta ja
|
||||
runoudesta Saaristohotelli Vaihelan leppoisalla terassilla.
|
||||
</p>
|
||||
<p>
|
||||
Runosaari-festivaaliin osallistuu toistakymmentä maamme eturivin runoilijaa, muusikoita,
|
||||
työpajan vetäjiä ja muita esiintyjiä ke 20.7.– la 23.7.2022.
|
||||
</p>
|
||||
<p>
|
||||
Tapahtuman järjestää Runosaari-työryhmä. Yhteistyössä: Runoviikko ry, Kirjan talo – Bokens hus
|
||||
ry, Livonsaaren kyläyhdistys ry, Velkuan saaristolaisyhdistys ry, Aviador Kustannus, Enostone
|
||||
Kustannus, Cafe Laituri ja Saaristohotelli Vaihela.
|
||||
</p>
|
||||
<p>
|
||||
<i>[Ohjelmaa päivitetään]</i>
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
section.logo {
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
background-color: #d5caf2;
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
padding-top: 3px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#logo-credits {
|
||||
font-size: 90%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
background-color: #d5caf2;
|
||||
max-width: 990px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
section.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2);
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
padding: 0px 20px;
|
||||
max-width: 56%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
p {
|
||||
max-width: 90% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
section.text {
|
||||
width: 90% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#main-title {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.time-and-place {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
39
src/views/InfoView.vue
Normal file
39
src/views/InfoView.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<section class="main">
|
||||
<h1 id="contact-start">Info</h1>
|
||||
<i>[Tietoja päivitetään]</i>
|
||||
<p>Tapahtuman järjestää Runosaari-työryhmä.</p>
|
||||
<p>Tapahtumaa tukee Varsinais-Suomen rahasto ja Pro Sinervo</p>
|
||||
<p>
|
||||
Yhteistyössä: Runoviikko ry, Kirjan talo – Bokens hus ry, Livonsaaren kyläyhdistys ry, Velkuan
|
||||
saaristolaisyhdistys ry, Aviador Kustannus, Enostone Kustannus, Cafe Laituri ja Saaristohotelli
|
||||
Vaihela.
|
||||
</p>
|
||||
<p>Tapahtumapaikat:</p>
|
||||
<p>Livonsaarelle tulee silta tietä myöten, ajoaika Turusta n. 40 min (37 km).</p>
|
||||
<p>
|
||||
Torstaina Palvan saareen kuljetaan yhdellä lossilla. Livonsaaresta Teersaloon on matkaa noin
|
||||
7km. Teersalosta lähtee lossi puolen tunnin välein. Cafe Laituriin on Palvan saaren
|
||||
lossirannasta 1,5 km matka ja viitta perille.
|
||||
</p>
|
||||
<p>Lauantaina Livonsaaresta Velkuanmaalle kuljetaan kahdella lossilla.</p>
|
||||
<p>
|
||||
Palvan saari ylitetään tietä myöten suoraan saariston syvyyksiin Velkuanmaalle vievään lossiin.
|
||||
</p>
|
||||
<p>
|
||||
Lossirannasta etäisyys Vaihelaan 2 km. (Esim: lähtö Seurantalolta klo 12:50, lossi Teersalosta
|
||||
Palvaan 13:00, lossi Palvasta Velkuanmaahan 13:15.)
|
||||
</p>
|
||||
<p>Tapahtuma tuo korkeatasoista kotimaista runoutta saaristoon. Esitykset striimataan.</p>
|
||||
<p>Ota yhteyttä: Katariina Vuorinen, runosaari@gmail.com</p>
|
||||
<p>Tapahtuman</p>
|
||||
<h2>SURVIVAL-ohjeet saariston syrjäseudulle</h2>
|
||||
<ul>
|
||||
<li>
|
||||
Perjantain 22.7. tapahtumapaikka: Livonsaaren Seurantalo, Velkuantie 987. Livonsaareen tulee
|
||||
silta tietä myöten ja Seurantalon pihassa on pysäköintitilaa. Info:
|
||||
<a href="https://https://www.livonsaari.fi/" class="generic-link">www.livonsaari.fi/</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
66
src/views/PerformersView.vue
Normal file
66
src/views/PerformersView.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<section class="main">
|
||||
<h1 id="performers-start">Esiintyjät</h1>
|
||||
|
||||
<i>Lisätietoja tulossa myöhemmin!</i>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.performer-img {
|
||||
max-width: 57%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.performer-img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.performer-paragraph {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.performers-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 80%;
|
||||
justify-content: space-evenly;
|
||||
font-size: 1.2em;
|
||||
|
||||
.performer-name {
|
||||
width: 40%;
|
||||
margin-bottom: 4%;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2f273e;
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.performers-container {
|
||||
.performer-name {
|
||||
width: 100%;
|
||||
margin-bottom: 10%;
|
||||
text-align: left;
|
||||
padding-left: 5%;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.performer-link {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
72
src/views/ProgramView.vue
Normal file
72
src/views/ProgramView.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<section class="main">
|
||||
<h1 id="program-start">Ohjelma</h1>
|
||||
<i>OHJELMA PÄIVITTYY KEVÄÄN MITTAAN, PYSYKÄÄ KUULOLLA!</i>
|
||||
<h2>Keskiviikko 20.7.</h2>
|
||||
<p class="performance-paragraph">
|
||||
18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu rakastettuja runoja Irja ja Veikko
|
||||
Aro-Heinilän kotipihalla (sateella sisällä).
|
||||
</p>
|
||||
<p class="performance-paragraph">Sydämellisesti tervetuloa!</p>
|
||||
<p class="performance-paragraph">Paikka: Huhtakarintie 24, Livonsaari</p>
|
||||
<h2>Torstai 21.7.</h2>
|
||||
<p class="performance-paragraph">
|
||||
14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen kokoonpanon, joka on saanut
|
||||
kolmannen kiinnityksen kiertopalkintoon Willi Kansa -katselmuksessa marraskuussa 2021 Irja ja
|
||||
Veikko Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää kuullaan Irja Aro-Heinilän ja Arto
|
||||
Juurakon tekstejä Ainojen ja Laurin esittäminä.
|
||||
</p>
|
||||
<p class="performance-paragraph">
|
||||
17-19 Runollinen, musiikillinen ja merellinen matinea Cafe Laiturissa. Esiintymässä mm. Anja
|
||||
Erämaja.
|
||||
</p>
|
||||
<p class="performance-paragraph">
|
||||
Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri, Voiponlahdentie 37, Palva
|
||||
</p>
|
||||
<h2>Perjantai 22.7.</h2>
|
||||
<p class="performance-paragraph">
|
||||
11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho.
|
||||
</p>
|
||||
<p class="performance-paragraph">
|
||||
Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja viestintäkonsultti Laura Rantanen.
|
||||
</p>
|
||||
<p class="performance-paragraph">
|
||||
14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä puutarhalavalla tai myrskyn sattuessa
|
||||
Seurantalon salissa.
|
||||
</p>
|
||||
<p class="performance-paragraph">
|
||||
Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina Vuorinen, Aki Salmela, Heidi Iivari
|
||||
ja Laura Laakso.
|
||||
</p>
|
||||
<p class="performance-paragraph">
|
||||
Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä Äyräs-kokoonpano: Olga Välimaa
|
||||
(laulu), Kauko Röyhkä (laulu, kitara, basso), Ilkka Turta (kitara), Kimmo Laine (basso,
|
||||
koskettimet), Roberto Lanz (rummut).
|
||||
</p>
|
||||
<p class="performance-paragraph">
|
||||
Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen tori.
|
||||
</p>
|
||||
<p class="performance-paragraph">Paikka: Sinervon talo, Sauniementie 5, Teersalo</p>
|
||||
<h2>Lauantai 23.7.</h2>
|
||||
<p class="performance-paragraph">
|
||||
13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen äärelle.
|
||||
</p>
|
||||
<p class="performance-paragraph">
|
||||
Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat luomiinsa maailmoihin yhdessä
|
||||
muusikoiden kanssa. Samalla ehtii myös nauttimaan lounasta, juttelemaan muiden festarikävijöiden
|
||||
kanssa ja ihailemaan ympäröivää luontoa.
|
||||
</p>
|
||||
<p class="performance-paragraph">
|
||||
Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen (luuttu).
|
||||
</p>
|
||||
<p class="performance-paragraph">
|
||||
Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.workshop-paragraph {
|
||||
text-align: center !important;
|
||||
margin: 12px;
|
||||
}
|
||||
</style>
|
||||
48
src/views/SafetyView.vue
Normal file
48
src/views/SafetyView.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<section class="main">
|
||||
<h1 id="safety-start">Turvallisemman tilan periaatteet</h1>
|
||||
<p>
|
||||
Runosaaren tapahtumissa noudatetaan turvallisemman tilan periaatteita. Pyrimme tapahtumissamme
|
||||
turvaamaan näiden periaatteiden toteutumisen omalla toiminnallamme, tilojen suunnittelulla sekä
|
||||
henkilökunnan, esiintyjien ja yleisön informoinnilla.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<b>Kunnioitus.</b> Jokaisella ihmisellä on oikeus tulla kunnioitetuksi omana itsenään. Kunnioitathan
|
||||
muiden ihmisten fyysistä ja psyykkistä koskemattomuutta, mielipiteitä sekä ihmisarvoa. Jokaisella
|
||||
on oikeus poistua epämukavaksi kokemastaan tilanteesta tai keskustelusta. Ethän myöskään ota ihmisistä
|
||||
kuvia kysymättä ensin.
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<b>Olettaminen.</b> Ethän oleta kenenkään sukupuolta, kansallisuutta, seksuaalista suuntautumista,
|
||||
kulttuuria, kieltä, uskontoa, arvoja, terveydentilaa tai toimintakykyä. Ethän tee johtopäätelmiä
|
||||
kenenkään ulkonäön, käytöksen tai oletetun sosioekonomisen aseman perusteella.
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<b>Kommunikointi.</b> Pyrithän luomaan ympärillesi ystävällistä ja turvallista ilmapiiriä. Ole
|
||||
avoin muita ihmisiä kohtaan, kuuntele ja käytä kunnioittavaa kieltä. Ethän oleta puheessasi kenenkään
|
||||
sukupuolta tai muita ominaisuuksia. Ethän käytä stereotypisoivaa, toiseuttavaa tai halventaa kieltä.
|
||||
Jos kuitenkin vahingossa loukkaat sanoillasi jotakuta, pyydäthän anteeksi.
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<b>Toimiminen.</b> Mikäli havaitset epäasiallista käytöstä tai koet olosi uhatuksi, älä epäröi
|
||||
pyytää apua Runosaaren ja tapahtumapaikkojen työntekijöiltä. Jos koet, että olet kohdannut häirintää
|
||||
tapahtumissamme ja siihen ei ole onnistuttu puuttumaan voit olla yhteydessä Runosaaren tuotantokoordinaattoriin
|
||||
Katariina Vuoriseen: runosaari@gmail.com.
|
||||
</li>
|
||||
</ul>
|
||||
<h1 id="covid-start">Covid-19-lauseke</h1>
|
||||
<p>
|
||||
Järjestämme tilaisuuden voimassa olevien säädösten ja ohjeiden mukaan. Jotta yleisömäärää
|
||||
voidaan tarpeen vaatiessa rajata, koko tapahtumaan pyydetään ilmoittautumaan etukäteen.
|
||||
Työpajoihin ilmoittaudutaan erikseen. Tarkistamme koronatilanteen kesäkuun alussa, jolloin
|
||||
päätämme, missä muodossa tapahtuma järjestetään. Varaudumme siihen, että ohjelmaan voi tulla
|
||||
myös viime hetken peruutuksia. Tapahtuman konsepti mahdollistaa joka tapauksessa sen
|
||||
järjestämisen ulkotiloissa, pienissä ryhmissä ja turvavälein: työpajat pidetään ulkona tai
|
||||
ilmastoiduissa tiloissa ja lavaesityksiä voi seurata myös etälähetyksenä.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue