LI WENHAO / TFT

Go to a project
Toggle navigation Toggle navigation pinning
서준혁
44c6af6d 1 parent e1fe1466

Fill articles

Inline Side-by-side
Showing 12 changed files with 361 additions and 114 deletions
......@@ -151,7 +151,7 @@ module.exports = exports;
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, "nav.svelte-5hxnoh{background-color:#edeff2;font-family:\"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;height:70px;top:0}.inner.svelte-5hxnoh{max-width:600px;padding-left:10px;padding-right:10px;margin:auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;height:100%}.logo.svelte-5hxnoh{display:flex;align-items:center;color:black;width:50px;margin-right:350px}.navbar-list.svelte-5hxnoh{display:flex;padding:0;width:400px;justify-content:space-around;margin:0;margin-left:200px}", ""]);
exports.push([module.i, "nav.svelte-1yis6jl.svelte-1yis6jl{background-color:#edeff2;font-family:\"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;height:70px;top:0}.inner.svelte-1yis6jl.svelte-1yis6jl{max-width:700px;padding-left:10px;padding-right:10px;margin:auto;box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:100%}.logo.svelte-1yis6jl img.svelte-1yis6jl{display:flex;width:120px;left:20px;top:15px;margin-right:400px}.navbar-list.svelte-1yis6jl.svelte-1yis6jl{display:flex;padding:0;width:100%;justify-content:space-between;margin:0}", ""]);
// Exports
module.exports = exports;
......@@ -169,7 +169,7 @@ module.exports = exports;
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, "li.svelte-nmdqg6{list-style-type:none;position:relative;margin-left:50px}li.svelte-nmdqg6:before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px}a.svelte-nmdqg6{color:#000000;text-decoration:none;display:inline-flex;height:45px;align-items:center;padding:0 10px;font-size:20px}@media only screen and (max-width: 767px){a.svelte-nmdqg6{display:none}}.onmouse.svelte-nmdqg6{color:#ffffff}", ""]);
exports.push([module.i, "li.svelte-1tp05za{display:flex;list-style-type:none;position:relative;margin-left:50px;height:45px;white-space:nowrap;align-items:center}li.svelte-1tp05za:before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px}a.svelte-1tp05za{color:#000000;text-decoration:none;display:inline-flex;padding:0 10px;font-size:20px}@media only screen and (max-width: 767px){a.svelte-1tp05za{display:none}}.onmouse.svelte-1tp05za{text-decoration:underline}", ""]);
// Exports
module.exports = exports;
......@@ -230,6 +230,24 @@ module.exports = exports;
/***/ }),
/***/ "./node_modules/css-loader/dist/cjs.js!./src/SideItems/Info.svelte.css":
/*!*****************************************************************************!*\
!*** ./node_modules/css-loader/dist/cjs.js!./src/SideItems/Info.svelte.css ***!
\*****************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, ".title.svelte-15ku9d2.svelte-15ku9d2{font-size:18pt;font-weight:bold;text-align:center}.content.svelte-15ku9d2.svelte-15ku9d2{padding:0.5rem 0.5rem 0.5rem;text-align:center}.info.svelte-15ku9d2 img.svelte-15ku9d2{max-height:20rem}", ""]);
// Exports
module.exports = exports;
/***/ }),
/***/ "./node_modules/css-loader/dist/cjs.js!./src/SideItems/SideBar.svelte.css":
/*!********************************************************************************!*\
!*** ./node_modules/css-loader/dist/cjs.js!./src/SideItems/SideBar.svelte.css ***!
......@@ -241,7 +259,7 @@ module.exports = exports;
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, ".nav.svelte-198fel3{overflow-y:auto;overflow-x:hidden}.left.svelte-198fel3{position:fixed;top:0;left:0;height:100%;border-right:1px solid #aaa;background:#fff;overflow-y:auto;width:330px;z-index:900;white-space:pre-line}.right.svelte-198fel3{position:fixed;top:0;right:0;height:100%;border-left:1px solid #aaa;background:#fff;overflow-y:auto;width:330px;z-index:900}.navtop.svelte-198fel3{display:flex;width:100%;height:60px;background-color:white;font-size:30pt;color:#AAAAAA;justify-content:right;padding:5px 5px 5px;border-bottom:#999999 solid 1px}.navitems.svelte-198fel3{display:flex;padding:2rem 1rem 0.6rem;flex-direction:column\r\n }", ""]);
exports.push([module.i, ".nav.svelte-8dqk19.svelte-8dqk19{overflow-y:auto;overflow-x:hidden}.left.svelte-8dqk19.svelte-8dqk19{position:fixed;top:0;left:0;height:100%;border-right:1px solid #aaa;background:#fff;overflow-y:auto;width:330px;z-index:900;white-space:pre-line}.right.svelte-8dqk19.svelte-8dqk19{position:fixed;top:0;right:0;height:100%;border-left:1px solid #aaa;background:#fff;overflow-y:auto;width:560px;z-index:900}.navtop.svelte-8dqk19.svelte-8dqk19{display:flex;width:100%;height:60px;background-color:white;font-size:30pt;color:#AAAAAA;justify-content:right;padding:5px 5px 5px;border-bottom:#999999 solid 1px}.bg.svelte-8dqk19.svelte-8dqk19{position:fixed;display:block;width:100vw;height:100vw;left:0;top:0;background-color:rgba(0, 0, 0, 10%);z-index:800}.navitems.svelte-8dqk19.svelte-8dqk19{display:flex;flex-direction:column\r\n }.left.svelte-8dqk19 .navitems.svelte-8dqk19{padding:2rem 1rem 0.6rem}", ""]);
// Exports
module.exports = exports;
......@@ -13949,49 +13967,52 @@ __webpack_require__.r(__webpack_exports__);
function create_fragment(ctx) {
let div2;
let t2;
let t4;
let div5;
let t5;
let t9;
let div8;
let t8;
let t14;
let div11;
return {
c() {
div2 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
div2.innerHTML = `<div class="contents svelte-1q2xp92"><img src="https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/574/a90016a30d614a19fe6987d94edb5e29.jpeg" alt=":)" class="svelte-1q2xp92">
<div class="text svelte-1q2xp92">
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
div2.innerHTML = `<div class="contents svelte-1q2xp92"><img src="./public/TFTlogo.png" alt=":)" class="svelte-1q2xp92">
<div class="text svelte-1q2xp92"><h3>TFT에 오신 걸 환영합니다!</h3>
Travel &amp; Festival with Temperature<br>
각종 행사 정보와 날씨 정보를 한눈에 알 수 있는 서비스입니다.
</div></div>`;
t2 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
t4 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
div5 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
div5.innerHTML = `<div class="contents svelte-1q2xp92"><div class="text svelte-1q2xp92">
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
div5.innerHTML = `<div class="contents svelte-1q2xp92"><div class="text svelte-1q2xp92"><h3>손쉬운 행사 탐색</h3>
TFT를 통해 전국에서 개최중인 행사와 축제를<br>
한 눈에 확인할 수 있습니다.
</div>
<img src="https://www.pinclipart.com/picdir/big/550-5506338_pepe-the-frog-transparent-png-transparent-pepe-png.png" alt=";(" class="svelte-1q2xp92"></div>`;
<img src="./public/exploremap.png" alt=";(" class="svelte-1q2xp92"></div>`;
t5 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
t9 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
div8 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
div8.innerHTML = `<div class="contents svelte-1q2xp92"><img src="https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/574/a90016a30d614a19fe6987d94edb5e29.jpeg" alt=":)" class="svelte-1q2xp92">
<div class="text svelte-1q2xp92">
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
div8.innerHTML = `<div class="contents svelte-1q2xp92"><img src="./public/infofesta.png" alt=":)" class="svelte-1q2xp92">
<div class="text svelte-1q2xp92"><h3>행사 정보 확인</h3>
지도에 표시된 마커를 클릭하여<br>
행사 정보를 확인할 수 있습니다.
</div></div>`;
t8 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
t14 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
div11 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
div11.innerHTML = `<div class="contents svelte-1q2xp92"><div class="text svelte-1q2xp92">
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
사용된 기술 스택은 다음과 같습니다.<br><br>
WEB : NodeJS / Express / Svelte<br>
Database : MongoDB<br>
API Handler : NodeJS / RequestJS<br>
Docker
</div>
<img src="https://www.pinclipart.com/picdir/big/550-5506338_pepe-the-frog-transparent-png-transparent-pepe-png.png" alt=";(" class="svelte-1q2xp92"></div>`;
<img src="./public/stacks.png" alt=";(" class="svelte-1q2xp92"></div>`;
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div2, "class", "article wbg svelte-1q2xp92");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div2, "id", "article1");
......@@ -14004,11 +14025,11 @@ function create_fragment(ctx) {
},
m(target, anchor) {
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, div2, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, t2, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, t4, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, div5, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, t5, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, t9, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, div8, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, t8, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, t14, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, div11, anchor);
},
p: svelte_internal__WEBPACK_IMPORTED_MODULE_0__["noop"],
......@@ -14016,11 +14037,11 @@ function create_fragment(ctx) {
o: svelte_internal__WEBPACK_IMPORTED_MODULE_0__["noop"],
d(detaching) {
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(div2);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(t2);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(t4);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(div5);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(t5);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(t9);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(div8);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(t8);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(t14);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(div11);
}
};
......@@ -14822,7 +14843,7 @@ function get_each_context(ctx, list, i) {
return child_ctx;
}
// (56:8) {#each navItems as item}
// (55:8) {#each navItems as item}
function create_each_block(ctx) {
let current;
const menuitems = new _Menuitems_svelte__WEBPACK_IMPORTED_MODULE_1__["default"]({ props: { item: /*item*/ ctx[1] } });
......@@ -14855,7 +14876,7 @@ function create_fragment(ctx) {
let nav;
let div1;
let div0;
let t1;
let t;
let ul;
let current;
let each_value = /*navItems*/ ctx[0];
......@@ -14874,25 +14895,25 @@ function create_fragment(ctx) {
nav = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("nav");
div1 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
div0 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
div0.textContent = "Logo";
t1 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
div0.innerHTML = `<img alt="Logo" src="./public/TFTlogo.png" class="svelte-1yis6jl">`;
t = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
ul = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("ul");
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div0, "class", "logo svelte-5hxnoh");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(ul, "class", "navbar-list svelte-5hxnoh");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div1, "class", "inner svelte-5hxnoh");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div0, "class", "logo svelte-1yis6jl");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(ul, "class", "navbar-list svelte-1yis6jl");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div1, "class", "inner svelte-1yis6jl");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(nav, "id", "nav");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(nav, "class", "svelte-5hxnoh");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(nav, "class", "svelte-1yis6jl");
},
m(target, anchor) {
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, nav, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(nav, div1);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div1, div0);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div1, t1);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div1, t);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div1, ul);
for (let i = 0; i < each_blocks.length; i += 1) {
......@@ -14956,10 +14977,10 @@ function create_fragment(ctx) {
function instance($$self) {
const navItems = [
{ label: "Article1", href: "#article1" },
{ label: "Article2", href: "#article2" },
{ label: "Article3", href: "#article3" },
{ label: "Article4", href: "#article4" }
{ label: "TFT 소개", href: "#article1" },
{ label: "행사 탐색", href: "#article2" },
{ label: "행사 정보", href: "#article3" },
{ label: "기술 스택", href: "#article4" }
];
return [navItems];
......@@ -15042,9 +15063,9 @@ function create_fragment(ctx) {
a = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("a");
t = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["text"])(t_value);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(a, "href", a_href_value = /*item*/ ctx[0].href);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(a, "class", "svelte-nmdqg6");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(a, "class", "svelte-1tp05za");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["toggle_class"])(a, "onmouse", /*onmouse*/ ctx[1]);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(li, "class", "svelte-nmdqg6");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(li, "class", "svelte-1tp05za");
},
m(target, anchor, remount) {
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, li, anchor);
......@@ -16396,6 +16417,8 @@ module.exports = exported;
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var svelte_internal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! svelte/internal */ "./node_modules/svelte/internal/index.mjs");
/* harmony import */ var _SideBar_svelte__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SideBar.svelte */ "./src/SideItems/SideBar.svelte");
/* harmony import */ var D_Library_TFT_src_SideItems_Info_svelte_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./src/SideItems/Info.svelte.css */ "./src/SideItems/Info.svelte.css");
/* harmony import */ var D_Library_TFT_src_SideItems_Info_svelte_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(D_Library_TFT_src_SideItems_Info_svelte_css__WEBPACK_IMPORTED_MODULE_2__);
/* src\SideItems\Info.svelte generated by Svelte v3.20.1 */
......@@ -16403,21 +16426,76 @@ const { window: window_1 } = svelte_internal__WEBPACK_IMPORTED_MODULE_0__["globa
function create_default_slot(ctx) {
let t_value = /*festa*/ ctx[1].title + "";
let t;
let div2;
let div0;
let t0_value = /*festa*/ ctx[1].title + "";
let t0;
let t1;
let img;
let img_src_value;
let br0;
let t2;
let div1;
let t3;
let t4_value = /*festa*/ ctx[1].addr1 + "";
let t4;
let br1;
let t5;
let t6_value = /*festa*/ ctx[1].tel + "";
let t6;
let br2;
return {
c() {
t = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["text"])(t_value);
div2 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
div0 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
t0 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["text"])(t0_value);
t1 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
img = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("img");
br0 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("br");
t2 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
div1 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
t3 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["text"])("개최지 : ");
t4 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["text"])(t4_value);
br1 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("br");
t5 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["text"])("\r\n 전화번호 : ");
t6 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["text"])(t6_value);
br2 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("br");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div0, "class", "title svelte-15ku9d2");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(img, "alt", "festaImg");
if (img.src !== (img_src_value = /*festa*/ ctx[1].firstimage)) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(img, "src", img_src_value);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(img, "class", "svelte-15ku9d2");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div1, "class", "content svelte-15ku9d2");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div2, "class", "info svelte-15ku9d2");
},
m(target, anchor) {
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, t, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, div2, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div2, div0);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div0, t0);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div2, t1);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div2, img);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div2, br0);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div2, t2);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div2, div1);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div1, t3);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div1, t4);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div1, br1);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div1, t5);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div1, t6);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div1, br2);
},
p(ctx, dirty) {
if (dirty & /*festa*/ 2 && t_value !== (t_value = /*festa*/ ctx[1].title + "")) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_data"])(t, t_value);
if (dirty & /*festa*/ 2 && t0_value !== (t0_value = /*festa*/ ctx[1].title + "")) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_data"])(t0, t0_value);
if (dirty & /*festa*/ 2 && img.src !== (img_src_value = /*festa*/ ctx[1].firstimage)) {
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(img, "src", img_src_value);
}
if (dirty & /*festa*/ 2 && t4_value !== (t4_value = /*festa*/ ctx[1].addr1 + "")) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_data"])(t4, t4_value);
if (dirty & /*festa*/ 2 && t6_value !== (t6_value = /*festa*/ ctx[1].tel + "")) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_data"])(t6, t6_value);
},
d(detaching) {
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(t);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(div2);
}
};
}
......@@ -16523,6 +16601,39 @@ if (false) {}
/* harmony default export */ __webpack_exports__["default"] = (Info);
/***/ }),
/***/ "./src/SideItems/Info.svelte.css":
/*!***************************************!*\
!*** ./src/SideItems/Info.svelte.css ***!
\***************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var api = __webpack_require__(/*! ../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
var content = __webpack_require__(/*! !../../node_modules/css-loader/dist/cjs.js!./Info.svelte.css */ "./node_modules/css-loader/dist/cjs.js!./src/SideItems/Info.svelte.css");
content = content.__esModule ? content.default : content;
if (typeof content === 'string') {
content = [[module.i, content, '']];
}
var options = {};
options.insert = "head";
options.singleton = false;
var update = api(content, options);
var exported = content.locals ? content.locals : {};
module.exports = exported;
/***/ }),
/***/ "./src/SideItems/SideBar.svelte":
......@@ -16544,54 +16655,70 @@ __webpack_require__.r(__webpack_exports__);
function create_if_block(ctx) {
let nav;
let div0;
let t0_value = (/*side*/ ctx[1] == "left" ? "＜" : "＞") + "";
let t0;
let nav;
let t1;
let div1;
let div;
let nav_class_value;
let nav_transition;
let current;
let dispose;
let if_block0 = /*side*/ ctx[1] == "right" && create_if_block_2(ctx);
let if_block1 = /*side*/ ctx[1] == "left" && create_if_block_1(ctx);
const default_slot_template = /*$$slots*/ ctx[3].default;
const default_slot = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["create_slot"])(default_slot_template, ctx, /*$$scope*/ ctx[2], null);
const default_slot_or_fallback = default_slot || fallback_block(ctx);
return {
c() {
if (if_block0) if_block0.c();
t0 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
nav = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("nav");
div0 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
t0 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["text"])(t0_value);
if (if_block1) if_block1.c();
t1 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["space"])();
div1 = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
div = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
if (default_slot_or_fallback) default_slot_or_fallback.c();
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div0, "class", "navtop svelte-198fel3");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_style"])(div0, "justify-content", /*side*/ ctx[1] == "left" ? "right" : "left");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_style"])(div0, "cursor", "pointer");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div1, "class", "navitems svelte-198fel3");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(nav, "class", nav_class_value = "" + (Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["null_to_empty"])("nav " + /*side*/ ctx[1]) + " svelte-198fel3"));
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div, "class", "navitems svelte-8dqk19");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(nav, "class", nav_class_value = "" + (Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["null_to_empty"])("nav " + /*side*/ ctx[1]) + " svelte-8dqk19"));
},
m(target, anchor, remount) {
m(target, anchor) {
if (if_block0) if_block0.m(target, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, t0, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, nav, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(nav, div0);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div0, t0);
if (if_block1) if_block1.m(nav, null);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(nav, t1);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(nav, div1);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(nav, div);
if (default_slot_or_fallback) {
default_slot_or_fallback.m(div1, null);
default_slot_or_fallback.m(div, null);
}
current = true;
if (remount) dispose();
dispose = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["listen"])(div0, "click", /*click_handler*/ ctx[4]);
},
p(ctx, dirty) {
if ((!current || dirty & /*side*/ 2) && t0_value !== (t0_value = (/*side*/ ctx[1] == "left" ? "＜" : "＞") + "")) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_data"])(t0, t0_value);
if (/*side*/ ctx[1] == "right") {
if (if_block0) {
if_block0.p(ctx, dirty);
} else {
if_block0 = create_if_block_2(ctx);
if_block0.c();
if_block0.m(t0.parentNode, t0);
}
} else if (if_block0) {
if_block0.d(1);
if_block0 = null;
}
if (!current || dirty & /*side*/ 2) {
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_style"])(div0, "justify-content", /*side*/ ctx[1] == "left" ? "right" : "left");
if (/*side*/ ctx[1] == "left") {
if (if_block1) {
if_block1.p(ctx, dirty);
} else {
if_block1 = create_if_block_1(ctx);
if_block1.c();
if_block1.m(nav, t1);
}
} else if (if_block1) {
if_block1.d(1);
if_block1 = null;
}
if (default_slot) {
......@@ -16600,7 +16727,7 @@ function create_if_block(ctx) {
}
}
if (!current || dirty & /*side*/ 2 && nav_class_value !== (nav_class_value = "" + (Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["null_to_empty"])("nav " + /*side*/ ctx[1]) + " svelte-198fel3"))) {
if (!current || dirty & /*side*/ 2 && nav_class_value !== (nav_class_value = "" + (Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["null_to_empty"])("nav " + /*side*/ ctx[1]) + " svelte-8dqk19"))) {
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(nav, "class", nav_class_value);
}
},
......@@ -16613,7 +16740,7 @@ function create_if_block(ctx) {
nav,
svelte_transition__WEBPACK_IMPORTED_MODULE_1__["fly"],
{
x: /*side*/ ctx[1] == "left" ? -400 : 400,
x: /*side*/ ctx[1] == "left" ? -400 : 600,
opacity: 1,
duration: 800
},
......@@ -16632,7 +16759,7 @@ function create_if_block(ctx) {
nav,
svelte_transition__WEBPACK_IMPORTED_MODULE_1__["fly"],
{
x: /*side*/ ctx[1] == "left" ? -400 : 400,
x: /*side*/ ctx[1] == "left" ? -400 : 600,
opacity: 1,
duration: 800
},
......@@ -16643,15 +16770,75 @@ function create_if_block(ctx) {
current = false;
},
d(detaching) {
if (if_block0) if_block0.d(detaching);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(t0);
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(nav);
if (if_block1) if_block1.d();
if (default_slot_or_fallback) default_slot_or_fallback.d(detaching);
if (detaching && nav_transition) nav_transition.end();
}
};
}
// (73:4) {#if side == "right"}
function create_if_block_2(ctx) {
let div;
let dispose;
return {
c() {
div = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div, "class", "bg svelte-8dqk19");
},
m(target, anchor, remount) {
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, div, anchor);
if (remount) dispose();
dispose = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["listen"])(div, "click", /*click_handler*/ ctx[4]);
},
p: svelte_internal__WEBPACK_IMPORTED_MODULE_0__["noop"],
d(detaching) {
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(div);
dispose();
}
};
}
// (77:8) {#if side == "left"}
function create_if_block_1(ctx) {
let div;
let t_value = (/*side*/ ctx[1] == "left" ? "＜" : "＞") + "";
let t;
let dispose;
return {
c() {
div = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["element"])("div");
t = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["text"])(t_value);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["attr"])(div, "class", "navtop svelte-8dqk19");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_style"])(div, "justify-content", /*side*/ ctx[1] == "left" ? "right" : "left");
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_style"])(div, "cursor", "pointer");
},
m(target, anchor, remount) {
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["insert"])(target, div, anchor);
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["append"])(div, t);
if (remount) dispose();
dispose = Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["listen"])(div, "click", /*click_handler_1*/ ctx[5]);
},
p(ctx, dirty) {
if (dirty & /*side*/ 2 && t_value !== (t_value = (/*side*/ ctx[1] == "left" ? "＜" : "＞") + "")) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_data"])(t, t_value);
if (dirty & /*side*/ 2) {
Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["set_style"])(div, "justify-content", /*side*/ ctx[1] == "left" ? "right" : "left");
}
},
d(detaching) {
if (detaching) Object(svelte_internal__WEBPACK_IMPORTED_MODULE_0__["detach"])(div);
dispose();
}
};
}
// (66:18)
// (84:18)
function fallback_block(ctx) {
return { c: svelte_internal__WEBPACK_IMPORTED_MODULE_0__["noop"], m: svelte_internal__WEBPACK_IMPORTED_MODULE_0__["noop"], d: svelte_internal__WEBPACK_IMPORTED_MODULE_0__["noop"] };
}
......@@ -16717,13 +16904,17 @@ function instance($$self, $$props, $$invalidate) {
$$invalidate(0, show = false);
};
const click_handler_1 = () => {
$$invalidate(0, show = false);
};
$$self.$set = $$props => {
if ("show" in $$props) $$invalidate(0, show = $$props.show);
if ("side" in $$props) $$invalidate(1, side = $$props.side);
if ("$$scope" in $$props) $$invalidate(2, $$scope = $$props.$$scope);
};
return [show, side, $$scope, $$slots, click_handler];
return [show, side, $$scope, $$slots, click_handler, click_handler_1];
}
class SideBar extends svelte_internal__WEBPACK_IMPORTED_MODULE_0__["SvelteComponent"] {
......
This diff could not be displayed because it is too large.
......@@ -9,7 +9,7 @@ body {
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-family: '맑은 고딕 Semilight', "AppleSDGothicNeo-Regular", 'Malgun Gothic', '맑은 고딕', "dotum", '돋움', sans-serif;
}
a {
......
......@@ -38,37 +38,43 @@
<div class="article wbg" id="article1">
<div class="contents">
<img src="https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/574/a90016a30d614a19fe6987d94edb5e29.jpeg" alt=":)">
<img src="./public/TFTlogo.png" alt=":)">
<div class="text">
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
<h3>TFT에 오신 걸 환영합니다!</h3>
Travel & Festival with Temperature<br>
각종 행사 정보와 날씨 정보를 한눈에 알 수 있는 서비스입니다.
</div>
</div>
</div>
<div class="article gbg" id="article2">
<div class="contents">
<div class="text">
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
<h3>손쉬운 행사 탐색</h3>
TFT를 통해 전국에서 개최중인 행사와 축제를<br>
한 눈에 확인할 수 있습니다.
</div>
<img src="https://www.pinclipart.com/picdir/big/550-5506338_pepe-the-frog-transparent-png-transparent-pepe-png.png" alt=";(">
<img src="./public/exploremap.png" alt=";(">
</div>
</div>
<div class="article wbg" id="article3">
<div class="contents">
<img src="https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/574/a90016a30d614a19fe6987d94edb5e29.jpeg" alt=":)">
<img src="./public/infofesta.png" alt=":)">
<div class="text">
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
<h3>행사 정보 확인</h3>
지도에 표시된 마커를 클릭하여<br>
행사 정보를 확인할 수 있습니다.
</div>
</div>
</div>
<div class="article gbg" id="article4">
<div class="contents">
<div class="text">
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
사용된 기술 스택은 다음과 같습니다.<br><br>
WEB : NodeJS / Express / Svelte<br>
Database : MongoDB<br>
API Handler : NodeJS / RequestJS<br>
Docker
</div>
<img src="https://www.pinclipart.com/picdir/big/550-5506338_pepe-the-frog-transparent-png-transparent-pepe-png.png" alt=";(">
<img src="./public/stacks.png" alt=";(">
</div>
</div>
\ No newline at end of file
......
......@@ -3,10 +3,10 @@
// 메뉴 바 항목들
const navItems = [
{ label: "Article1", href: "#article1" },
{ label: "Article2", href: "#article2" },
{ label: "Article3", href: "#article3" },
{ label: "Article4", href: "#article4" }
{ label: "TFT 소개", href: "#article1" },
{ label: "행사 탐색", href: "#article2" },
{ label: "행사 정보", href: "#article3" },
{ label: "기술 스택", href: "#article4" }
];
</script>
......@@ -20,38 +20,37 @@
}
.inner {
max-width: 600px;
max-width: 700px;
padding-left: 10px;
padding-right: 10px;
margin: auto;
box-sizing: content-box;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.logo {
.logo img{
display: flex;
align-items: center;
color: black;
width: 50px;
margin-right: 350px;
width: 120px;
left: 20px;
top: 15px;
margin-right: 400px;
}
.navbar-list {
display: flex;
padding: 0;
width: 400px;
justify-content: space-around;
width: 100%;
justify-content: space-between;
margin: 0;
margin-left: 200px;
}
</style>
<nav id="nav">
<div class="inner">
<div class="logo">Logo</div>
<div class="logo"><img alt="Logo" src="./public/TFTlogo.png"></div>
<ul class='navbar-list'>
{#each navItems as item}
<Menuitems {item}/>
......
<style>
li {
display: flex;
list-style-type: none;
position: relative;
margin-left: 50px;
height: 45px;
white-space: nowrap;
align-items: center;
}
li:before {
......@@ -18,8 +22,6 @@
color: #000000;
text-decoration: none;
display: inline-flex;
height: 45px;
align-items: center;
padding: 0 10px;
font-size: 20px;
}
......@@ -31,7 +33,7 @@
}
.onmouse {
color: #ffffff;
text-decoration: underline;
}
</style>
......
......@@ -12,7 +12,38 @@
}
</script>
<style>
.title {
font-size: 18pt;
font-weight: bold;
text-align: center;
}
.content {
padding: 0.5rem 0.5rem 0.5rem;
text-align: center;
}
.info img {
max-height: 20rem;
}
</style>
<svelte:window on:scroll={hide}></svelte:window>
<SideBar bind:show={sidebar_show} {side}>
{festa.title}
<div class="info">
<div class="title">{festa.title}</div>
<img alt="festaImg" src={festa.firstimage}><br>
<div class="content">
개최지 : {festa.addr1}<br>
전화번호 : {festa.tel}<br>
<!-- 행사 시작일 : {festa.startdate}<br>
행사 시작일 : {festa.enddate}<br>
날씨 : {festa.weather 어쩌구} -->
</div>
</div>
</SideBar>
......
......@@ -32,7 +32,7 @@
border-left: 1px solid #aaa;
background: #fff;
overflow-y: auto;
width: 330px;
width: 560px;
z-index: 900;
}
......@@ -47,21 +47,39 @@
padding: 5px 5px 5px;
border-bottom: #999999 solid 1px;
}
.bg {
position: fixed;
display: block;
width: 100vw;
height: 100vw;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 10%);
z-index: 800;
}
.navitems {
display: flex;
padding: 2rem 1rem 0.6rem;
flex-direction: column
}
.left .navitems {
padding: 2rem 1rem 0.6rem;
}
</style>
{#if show}
<nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 400), opacity: 1, duration: 800}}>
{#if side == "right"}
<div class="bg" on:click={() => {show = false;}}></div>
{/if}
<nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 600), opacity: 1, duration: 800}}>
{#if side == "left"}
<div class="navtop" on:click={() => {show = false;}}
style="justify-content:{side == "left" ? "right" : "left"}; cursor:pointer;">
{ side == "left" ? "＜" : "＞" }
</div>
{/if}
<div class="navitems">
<slot>
......