diff --git a/package-lock.json b/package-lock.json index 5e4c84a..ad93894 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "next": "12.1.6", "react": "18.1.0", - "react-dom": "18.1.0" + "react-dom": "18.1.0", + "sass": "^1.52.2" }, "devDependencies": { "@types/node": "17.0.40", @@ -527,6 +528,18 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "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/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -637,6 +650,14 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "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/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -651,7 +672,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" }, @@ -712,6 +732,43 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "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/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1407,7 +1464,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" }, @@ -1452,6 +1508,19 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", "dev": true }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -1666,6 +1735,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", @@ -1733,6 +1807,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "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-boolean-object": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", @@ -1792,7 +1877,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -1801,7 +1885,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" }, @@ -1825,7 +1908,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" } @@ -2157,6 +2239,14 @@ } } }, + "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/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -2385,7 +2475,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" }, @@ -2488,6 +2577,17 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "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/regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", @@ -2597,6 +2697,22 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/sass": { + "version": "1.52.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.52.2.tgz", + "integrity": "sha512-mfHB2VSeFS7sZlPv9YohB9GB7yWIgQNTGniQwfQ04EoQN0wsQEv7SwpCwy/x48Af+Z3vDeFXz+iuXM3HK/phZQ==", + "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/scheduler": { "version": "0.22.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz", @@ -2805,7 +2921,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" }, @@ -3275,6 +3390,15 @@ "color-convert": "^2.0.1" } }, + "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" + } + }, "argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -3358,6 +3482,11 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -3372,7 +3501,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" } @@ -3408,6 +3536,31 @@ "supports-color": "^7.1.0" } }, + "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" + } + } + } + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3956,7 +4109,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" } @@ -3992,6 +4144,12 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", "dev": true }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "optional": true + }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -4140,6 +4298,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", @@ -4192,6 +4355,14 @@ "has-bigints": "^1.0.1" } }, + "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-boolean-object": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", @@ -4229,14 +4400,12 @@ "is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==" }, "is-glob": { "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" } @@ -4250,8 +4419,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-number-object": { "version": "1.0.7", @@ -4488,6 +4656,11 @@ "styled-jsx": "5.0.2" } }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" + }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -4655,8 +4828,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==" }, "postcss": { "version": "8.4.5", @@ -4720,6 +4892,14 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "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" + } + }, "regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", @@ -4784,6 +4964,16 @@ "queue-microtask": "^1.2.2" } }, + "sass": { + "version": "1.52.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.52.2.tgz", + "integrity": "sha512-mfHB2VSeFS7sZlPv9YohB9GB7yWIgQNTGniQwfQ04EoQN0wsQEv7SwpCwy/x48Af+Z3vDeFXz+iuXM3HK/phZQ==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "scheduler": { "version": "0.22.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz", @@ -4928,7 +5118,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" } diff --git a/package.json b/package.json index 411e6eb..cb58bb1 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "dependencies": { "next": "12.1.6", "react": "18.1.0", - "react-dom": "18.1.0" + "react-dom": "18.1.0", + "sass": "^1.52.2" }, "devDependencies": { "@types/node": "17.0.40", diff --git a/pages/_app.tsx b/pages/_app.tsx index 3f5c9d5..6f08a02 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,8 +1,8 @@ -import '../styles/globals.css' -import type { AppProps } from 'next/app' +import '../styles/globals.scss'; +import type { AppProps } from 'next/app'; function MyApp({ Component, pageProps }: AppProps) { - return + return ; } -export default MyApp +export default MyApp; diff --git a/pages/components/Footer.tsx b/pages/components/Footer.tsx new file mode 100644 index 0000000..9daff5b --- /dev/null +++ b/pages/components/Footer.tsx @@ -0,0 +1,43 @@ +import Link from 'next/link'; +import React from 'react'; +import styles from '../../styles/Footer.module.scss'; + +export const Footer = () => { + return ( + + ); +}; diff --git a/pages/components/Header.tsx b/pages/components/Header.tsx new file mode 100644 index 0000000..6eb5e8e --- /dev/null +++ b/pages/components/Header.tsx @@ -0,0 +1,29 @@ +import Link from 'next/link'; +import React from 'react'; +import styles from '../../styles/Header.module.scss'; + +export const Header = () => { + return ( +
+ +

+ Runosaari 2022 +

+ +
+ ); +}; diff --git a/pages/index.tsx b/pages/index.tsx index 86b5b3b..4a08a88 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,72 +1,67 @@ -import type { NextPage } from 'next' -import Head from 'next/head' -import Image from 'next/image' -import styles from '../styles/Home.module.css' +import type { NextPage } from 'next'; +import { Footer } from './components/Footer'; +import { Header } from './components/Header'; +import styles from '../styles/Home.module.scss'; const Home: NextPage = () => { return ( -
- - Create Next App - - - + <> +
+
+
+ Runosaari logo +
+
@Sanna Hukkanen
+
+
-
-

- Welcome to Next.js! -

- -

- Get started by editing{' '} - pages/index.tsx -

- - +
+

Runosaari 2022

+

+ + ~ 20.-23.7. Livonsaari & Velkuanmaa ~ + +
+ Eksymisretki omaan luontoosi, metsänpeiton suojaan! +

+

+ 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? +

+

+ 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. +

+

+ Runosaari-festivaaliin osallistuu toistakymmentä maamme eturivin + runoilijaa, muusikoita, työpajan vetäjiä ja muita esiintyjiä ke + 20.7.– la 23.7.2022. +

+

+ 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. +

+

+ [Ohjelmaa päivitetään] +

+
+
- ) -} - -export default Home +export default Home; diff --git a/public/favicon.ico b/public/favicon.ico index 718d6fe..4b5493e 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/runosaari-logo.jpg b/public/runosaari-logo.jpg new file mode 100644 index 0000000..e7479ed Binary files /dev/null and b/public/runosaari-logo.jpg differ diff --git a/public/runosaari-logo_small.jpg b/public/runosaari-logo_small.jpg new file mode 100644 index 0000000..b53773d Binary files /dev/null and b/public/runosaari-logo_small.jpg differ diff --git a/public/small-logo.png b/public/small-logo.png new file mode 100644 index 0000000..4b5493e Binary files /dev/null and b/public/small-logo.png differ diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index fbf0e25..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/styles/Footer.module.scss b/styles/Footer.module.scss new file mode 100644 index 0000000..a7ec4ed --- /dev/null +++ b/styles/Footer.module.scss @@ -0,0 +1,56 @@ +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; + } + } + + .mobileMiddle { + 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; + } + } +} diff --git a/styles/Header.module.scss b/styles/Header.module.scss new file mode 100644 index 0000000..7b677a9 --- /dev/null +++ b/styles/Header.module.scss @@ -0,0 +1,71 @@ +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; + } + } + + &.mobileMainNavBar { + visibility: hidden; + height: 0px; + } + + @media screen and (max-width: 600px) { + &.mobileMainNavBar { + height: auto; + display: flex; + visibility: visible; + flex-direction: column; + align-items: center; + background-color: #d5caf2; + width: 80%; + margin-bottom: 30px; + } + + &.mainNavBar { + visibility: hidden; + height: 0px; + } + } + } + + .mobileMainTitle { + visibility: hidden; + height: 0px; + margin: 0px; + } + + @media screen and (max-width: 600px) { + .mobileMainTitle { + visibility: visible !important; + height: 100% !important; + margin-top: 30px !important; + margin-bottom: 30px !important; + text-align: center; + } + } +} diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100644 index 32a57d5..0000000 --- a/styles/Home.module.css +++ /dev/null @@ -1,116 +0,0 @@ -.container { - padding: 0 2rem; -} - -.main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/styles/Home.module.scss b/styles/Home.module.scss new file mode 100644 index 0000000..20f106c --- /dev/null +++ b/styles/Home.module.scss @@ -0,0 +1,61 @@ +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) { + .timeAndPlace { + font-size: 1.1rem; + } +} diff --git a/styles/globals.css b/styles/globals.css deleted file mode 100644 index e5e2dcc..0000000 --- a/styles/globals.css +++ /dev/null @@ -1,16 +0,0 @@ -html, -body { - padding: 0; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; -} - -a { - color: inherit; - text-decoration: none; -} - -* { - box-sizing: border-box; -} diff --git a/styles/globals.scss b/styles/globals.scss new file mode 100644 index 0000000..fdfbfff --- /dev/null +++ b/styles/globals.scss @@ -0,0 +1,109 @@ +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; + } +} + +main { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + min-height: 500px; +} + +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; +}