t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

merge into: t510599:master
Branches Tags
t510599:master
t510599:dev2
...
pull from: t510599:dev2
Branches Tags
t510599:dev2
t510599:master

69 Commits
master ... dev2

Author SHA1 Message Date
Tony Yang
ee0c3d84f9
[Fix] bold text of vote introduction 2021-04-01 16:38:28 +08:00
Tony Yang
99b2b8785e
[Fix] event container RWD edge case 2021-04-01 16:29:51 +08:00
Tony Yang
dc35f001cf
[Update] Agenda event RWD 
Layout: mobile event block container
Style: event block font size and icon scale RWD
 2021-04-01 16:23:34 +08:00
Tony Yang
61efc4130d
[Fix] strange space before text in article 2021-04-01 15:56:39 +08:00
Tony Yang
dc25e51762
[Fix] remove duplicated content 
minor style fix
 2021-04-01 15:55:03 +08:00
Tony Yang
1bf265b28a
[Update] favorite vote content 
Style: bold article
Style: <li> margin for marker
Style: smaller padding for vote button on mobile
 2021-04-01 15:47:39 +08:00
mysper
6d04e70465 [update] update agenda content 2021-04-01 14:56:54 +08:00
mysper
94d8f27c42 [fix] fix router 2021-04-01 14:44:32 +08:00
mysper
2a33b7dece [optimize] sponsor page sample rwd 2021-04-01 14:38:08 +08:00
mysper
c3c9dc9d98 [add & optimize] add wip component & rwd 
agenda sample rwd
add wip component for work in process
fixed ts warning
 2021-04-01 14:11:24 +08:00
barrystone
318dab3d51 [Fix] adjust mobile header for RWD 2021-04-01 11:42:45 +08:00
mysper
2105d9b1fb [merge] merge agenda 2021-04-01 10:35:56 +08:00
barrystone
6cc0d12baf [Fix] header-apply fontsize in header 2021-04-01 10:23:25 +08:00
mysper
26e0965846 [merge] merge sponsor and fixed ts warning 2021-04-01 10:09:25 +08:00
mysper
e54901980d [add] add sponsor link 2021-04-01 10:02:05 +08:00
mysper
68015f9bd6 [merge] merge home page 2021-04-01 09:50:46 +08:00
mysper
93fa017792 [add] add code of conduct link 2021-04-01 09:30:01 +08:00
mysper
647b719401 [fix] fixed link and fixed ts warning 2021-04-01 09:20:59 +08:00
barrystone
5630c81ea6 [Update] apply RWD for home (max-width: 900,750,500,410,360) 2021-04-01 05:42:29 +08:00
barrystone
6c50b53760 [Update] apply RWD for header (min-width: 900,750,500,410,360) 2021-04-01 03:27:47 +08:00
Tony Yang
39d778ab43
[Add] vote introduction, rules and link 
Style: article text style
Style: vote button
Style: ordered list
 2021-04-01 01:55:24 +08:00
Tony Yang
49fb3065c7
[Component] Block Title 2021-04-01 01:51:38 +08:00
Tony Yang
25aab2b4a0
[Merge] dev2 -> agenda 2021-04-01 00:04:30 +08:00
Tony Yang
a95115f107
[Add] vuex-class & device type detection with vuex 2021-04-01 00:01:12 +08:00
Tony Yang
952cc64ef3
[Update] new arrow image 2021-03-31 23:24:56 +08:00
Tony Yang
608f1df845
[Merge] home -> agenda 2021-03-31 23:16:34 +08:00
barrystone
b8d6dfdd3e [Fix] fix merge problem in home 2021-03-31 17:45:34 +08:00
barrystone
897026676c [Merge] add apply link on header 2021-03-31 17:40:41 +08:00
barrystone
27b71b73c7 apply RWD for home and header (max-width: 1300, 1100),add mobile header 2021-03-31 17:34:12 +08:00
mysper
1547c730b3 [Add] add link 
- home page mailing list group
- home page sitcon 2021 hackmd
- header sitcon 2021 kktix
 2021-03-31 15:39:22 +08:00
mysper
add1f3bc82 [fixed] fixed footer in cfp color 2021-03-31 10:58:05 +08:00
mysper
c72aa26fff [optimize] sample rwd 
make button be wrap
body display well in smaller width
 2021-03-31 10:40:30 +08:00
hyperbola
cb4038fd83 Sponsor init 2021-03-30 23:51:43 +08:00
barrystone
acdd7ac920 [Fix] fix header(navbar) postion and space 2021-03-30 23:26:12 +08:00
barrystone
87af6ce6b3 [Fix] fix header(navbar) position to sticky 2021-03-30 23:02:23 +08:00
hyperbola
6511b51769 Merge branch 'home' into sponsor 2021-03-30 22:56:29 +08:00
hyperbola
f76f544e4f Update package-lock 2021-03-30 22:49:43 +08:00
barrystone
796c6b1c44 [Update] apply RWD for home and header (min-width: 1500, 1800) 2021-03-30 21:17:43 +08:00
barrystone
c11b12d78e [Fix] fix FooterPrimary style 2021-03-28 16:44:47 +08:00
barrystone
348e5a7638 [Add] add FooterPrimary and rename Footer(FooterSecondary) in App.vue 2021-03-28 16:39:08 +08:00
barrystone
87467524e1 [Update] complete home without RWD 2021-03-28 14:48:15 +08:00
barrystone
63c6980a58 [Add] import font style, and update tag structure in home 2021-03-28 12:55:40 +08:00
barrystone
05cc585797 [Update] add active style on header in home 2021-03-28 11:07:03 +08:00
Tony Yang
2befbab77f
[Fix] size of arrows become random on chrome 2021-03-26 18:55:16 +08:00
Tony Yang
77f140aec7
[Fix] unsupported css property for other browsers 2021-03-25 15:38:24 +08:00
Tony Yang
f3b42b5914
[Component] add EventBlock for Agenda 2021-03-25 15:09:48 +08:00
barrystone
62dc750910 [Update] apply header in app.vue, and update home 2021-03-24 21:50:02 +08:00
barrystone
315acddb6e [Add] add header in home 2021-03-23 21:49:45 +08:00
mysper
71358b34bd [Update] edit vue.config.js and router 2021-03-22 16:05:19 +08:00
mysper
3da70b4bf3 [Add] make click event to close navabr in moblie 2021-03-11 13:45:12 +08:00
barrystone
d0c4c4d96f [Fix] change first button image on header in cfp 2021-03-09 20:06:17 +08:00
mysper
feb066ba42 [Fix] fix ocfp-news page on device 2021-03-08 15:49:54 +08:00
mysper
1cbcff4185 [Update] update ocfp-new header 2021-03-07 12:02:16 +08:00
barrystone
3946e38c90 [Fix] apply RWD for two buttons on header on cfp 2021-03-06 19:56:19 +08:00
barrystone
3e6c105605 [Update] change second button image-text on header in cfp 2021-03-06 18:45:14 +08:00
barrystone
f91eedd495 [Add] add second button on header in cfp 2021-03-05 00:58:45 +08:00
mysper
00b045612f [Update] update the submit link and topic template 2021-03-04 10:20:48 +08:00
mysper
77f45bd6cb [Fix & Update] Fix ts warning and navbar activity 
update link in cfp root page
 2021-03-03 16:55:52 +08:00
mysper
d630fe7b4c [update] update header and nav information in ocfp 2021-03-03 15:14:33 +08:00
mysper
529b0fc9dc [Add] copy news to ocpf-news 
update the content in ocfp-news
 2021-03-03 14:59:23 +08:00
mysper
2e90998388 [Update] update page when call for page is overdue 2021-02-22 18:47:05 +08:00
Tony Yang
72bd1db4e6
[Fix] reduce title padding in mobile layout 2021-02-06 00:05:36 +08:00
Tony Yang
32608acdc3
[Style] navbar animation when changing fixed stat 2021-02-06 00:05:02 +08:00
Tony Yang
17a204f281
[Fix] clickable link of past sitcon official site 2021-02-05 16:50:12 +08:00
Tony Yang
b21bb266b1
[Fix] navbar error highlighting & mobile detection 
scroll to anchor after the page loaded
move mobile detection from mounted to created to detect earlier
 2021-02-05 01:23:40 +08:00
Tony Yang
0dfdd04a20
[Fix] scrollspy detection & default hightlight 2021-02-05 01:21:22 +08:00
Tony Yang
abf7c93f48
[Fix] open the contribution form in new tab 
Contributor can check the rule without opening new tab by themselves (?
 2021-02-05 01:20:07 +08:00
Tony Yang
e39c01d2a7
[Fix] navbar minor style fix 2021-02-05 01:16:58 +08:00
Tony Yang
8f010a555d
[Style] title font size adjustment 
Keep h1 font size of schedule similar to agenda at width 768 ~ 1063px
Fix the collapsing margin
 2021-02-05 01:15:48 +08:00
74 changed files with 5113 additions and 468 deletions
Show Stats Expand all files Collapse all files

451
package-lock.json generated
View File

@ -1670,122 +1670,6 @@
"tslint": "^5.20.1",
"webpack": "^4.0.0",
"yorkie": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"fork-ts-checker-webpack-plugin-v5": {
"version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
"integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
"dev": true,
"optional": true,
"requires": {
"@babel/code-frame": "^7.8.3",
"@types/json-schema": "^7.0.5",
"chalk": "^4.1.0",
"cosmiconfig": "^6.0.0",
"deepmerge": "^4.2.2",
"fs-extra": "^9.0.0",
"memfs": "^3.1.2",
"minimatch": "^3.0.4",
"schema-utils": "2.7.0",
"semver": "^7.3.2",
"tapable": "^1.0.0"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"dev": true,
"optional": true,
"requires": {
"yallist": "^4.0.0"
}
},
"schema-utils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
"dev": true,
"optional": true,
"requires": {
"@types/json-schema": "^7.0.4",
"ajv": "^6.12.2",
"ajv-keywords": "^3.4.1"
}
},
"semver": {
"version": "7.3.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
"integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
"dev": true,
"optional": true,
"requires": {
"lru-cache": "^6.0.0"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true,
"optional": true
}
}
},
"@vue/cli-plugin-vuex": {
@ -1864,16 +1748,6 @@
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cacache": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@ -1900,34 +1774,6 @@
"unique-filename": "^1.1.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"fs-extra": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
@ -1939,13 +1785,6 @@
"universalify": "^0.1.0"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@ -1955,18 +1794,6 @@
"graceful-fs": "^4.1.6"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -1983,16 +1810,6 @@
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@ -2015,18 +1832,6 @@
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
"dev": true
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.1.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
@ -2852,6 +2657,16 @@
"integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
"dev": true
},
"bindings": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
"dev": true,
"optional": true,
"requires": {
"file-uri-to-path": "1.0.0"
}
},
"block-stream": {
"version": "0.0.9",
"resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@ -5512,6 +5327,13 @@
"schema-utils": "^2.5.0"
}
},
"file-uri-to-path": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
"dev": true,
"optional": true
},
"filesize": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@ -5637,6 +5459,122 @@
"worker-rpc": "^0.1.0"
}
},
"fork-ts-checker-webpack-plugin-v5": {
"version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
"integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
"dev": true,
"optional": true,
"requires": {
"@babel/code-frame": "^7.8.3",
"@types/json-schema": "^7.0.5",
"chalk": "^4.1.0",
"cosmiconfig": "^6.0.0",
"deepmerge": "^4.2.2",
"fs-extra": "^9.0.0",
"memfs": "^3.1.2",
"minimatch": "^3.0.4",
"schema-utils": "2.7.0",
"semver": "^7.3.2",
"tapable": "^1.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"dev": true,
"optional": true,
"requires": {
"yallist": "^4.0.0"
}
},
"schema-utils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
"dev": true,
"optional": true,
"requires": {
"@types/json-schema": "^7.0.4",
"ajv": "^6.12.2",
"ajv-keywords": "^3.4.1"
}
},
"semver": {
"version": "7.3.5",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
"integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
"dev": true,
"optional": true,
"requires": {
"lru-cache": "^6.0.0"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true,
"optional": true
}
}
},
"form-data": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@ -5680,16 +5618,16 @@
}
},
"fs-extra": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
"integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
"dev": true,
"optional": true,
"requires": {
"at-least-node": "^1.0.0",
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
"universalify": "^1.0.0"
"universalify": "^2.0.0"
}
},
"fs-minipass": {
@ -7075,15 +7013,6 @@
"requires": {
"graceful-fs": "^4.1.6",
"universalify": "^2.0.0"
},
"dependencies": {
"universalify": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
"dev": true,
"optional": true
}
}
},
"jsprim": {
@ -7364,9 +7293,9 @@
"dev": true
},
"memfs": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.0.tgz",
"integrity": "sha512-f/xxz2TpdKv6uDn6GtHee8ivFyxwxmPuXatBb1FBwxYNuVpbM3k/Y1Z+vC0mH/dIXXrukYfe3qe5J32Dfjg93A==",
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.1.tgz",
"integrity": "sha512-Y5vcpQzWTime4fBTr/fEnxXUxEYUgKbDlty1WX0gaa4ae14I6KmvK1S8HtXOX0elKAE6ENZJctkGtbTFYcRIUw==",
"dev": true,
"optional": true,
"requires": {
@ -11489,9 +11418,9 @@
}
},
"universalify": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
"integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
"dev": true,
"optional": true
},
@ -11795,6 +11724,87 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-property-decorator": {
"version": "9.1.2",
"resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
@ -11851,6 +11861,11 @@
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",
"integrity": "sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ=="
},
"vuex-class": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/vuex-class/-/vuex-class-0.3.2.tgz",
"integrity": "sha512-m0w7/FMsNcwJgunJeM+wcNaHzK2KX1K1rw2WUQf7Q16ndXHo7pflRyOV/E8795JO/7fstyjH3EgqBI4h4n4qXQ=="
},
"watchpack": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@ -11931,6 +11946,7 @@
"dev": true,
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
},
@ -12253,6 +12269,7 @@
"dev": true,
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
},
@ -12633,9 +12650,9 @@
"dev": true
},
"yaml": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
"integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
"dev": true,
"optional": true
},

3
package.json
View File

@ -19,7 +19,8 @@
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
"vuex": "^3.4.0",
"vuex-class": "^0.3.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",

63
src/App.vue
View File

@ -1,22 +1,69 @@
<template>
<div id="app">
<router-view/>
<Footer/>
<Header v-if="isRoot()" v-bind:route="$route" />
<router-view />
<FooterPrimary v-if="isRoot()" v-bind:route="$route" />
<FooterSecondary v-if="!isRoot()" v-bind:route="$route" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Action, Getter } from 'vuex-class';
import { DeviceType } from '@/store/types/app';
// components
import Footer from '@/components/Footer.vue';
import Header from '@/components/Header.vue';
import FooterSecondary from '@/components/FooterSecondary.vue';
import FooterPrimary from '@/components/FooterPrimary.vue';
@Component({
components: {
Footer
Header,
FooterPrimary,
FooterSecondary
}
})
export default class App extends Vue {}
export default class App extends Vue {
@Action('toggleDevice', { namespace: 'app' }) private toggleDevice!: (device: DeviceType) => void;
@Getter('device', { namespace: 'app' }) private device!: DeviceType;
private deviceTypeMediaQuery: MediaQueryList = window.matchMedia('(min-width: 900px)');
public mounted () {
this.detectDeviceType(this.deviceTypeMediaQuery);
// add change listener instead of resize listener
if (this.deviceTypeMediaQuery.addEventListener) {
this.deviceTypeMediaQuery.addEventListener('change', this.detectDeviceType);
} else {
// sad safari
this.deviceTypeMediaQuery.addListener(this.detectDeviceType);
}
}
public isRoot (): boolean {
if (
this.$route.name === 'CFP' ||
this.$route.name === 'news' ||
this.$route.name === 'ocfp-news'
) {
return false;
} else {
return true;
}
}
private detectDeviceType (mq: (MediaQueryList | MediaQueryListEvent)): void {
const isDesktop: boolean = mq.matches;
if (isDesktop) {
this.toggleDevice(DeviceType.DESKTOP);
} else {
this.toggleDevice(DeviceType.MOBILE);
}
}
}
</script>
<style lang="scss">
@import "@/assets/scss/main.scss";
</style>
@import '@/assets/scss/main.scss';
</style>

BIN
src/assets/font/Letter Gothic Std Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/font/NotoSerifCJKtc-Black.otf Normal file
View File

Binary file not shown.

BIN
src/assets/font/NotoSerifCJKtc-Bold.otf Normal file
View File

Binary file not shown.

BIN
src/assets/font/NotoSerifCJKtc-SemiBold.otf Normal file
View File

Binary file not shown.

3
src/assets/images/arrow-left.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="74.204" height="98.826" viewBox="0 0 74.204 98.826">
<path fill="#2d477b" d="M146.837 161.345l22.812-22.812-19.928-19.928a6.763 6.763 0 0 0-9.559 0l-42.736 42.74a6.757 6.757 0 0 0 0 9.559l42.568 42.568a6.757 6.757 0 0 0 9.559 0l19.928-19.928-22.644-22.644a6.763 6.763 0 0 1 0-9.555z" transform="translate(-95.445 -116.627)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 384 B

3
src/assets/images/arrow-right.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="74.204" height="98.826" viewBox="0 0 74.204 98.826">
<path fill="#2d477b" d="M220.093 161.177l-42.568-42.572a6.763 6.763 0 0 0-9.559 0l-19.928 19.928 22.644 22.644a6.759 6.759 0 0 1 0 9.556l-22.812 22.812 19.93 19.927a6.757 6.757 0 0 0 9.559 0l42.736-42.74a6.753 6.753 0 0 0-.002-9.555z" transform="translate(-147.87 -116.627)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 388 B

17
src/assets/images/burnfont/btn-news1-desktop.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="260" height="133" viewBox="0 0 260 133" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M228.072 58.8798L197.913 28.953C197.303 28.3455 196.577 27.8637 195.778 27.5355C194.979 27.2072 194.123 27.0387 193.258 27.0399V27H66.7407V27.0399C65.8762 27.0389 65.02 27.2074 64.2213 27.5357C63.4226 27.8639 62.6971 28.3456 62.0866 28.953L31.9285 58.8798C31.3171 59.4864 30.8321 60.2066 30.5012 60.9992C30.1703 61.7918 30 62.6414 30 63.4994C30 64.3574 30.1703 65.2069 30.5012 65.9995C30.8321 66.7921 31.3171 67.5124 31.9285 68.1189L62.0866 98.0458C62.6972 98.6535 63.4228 99.1355 64.2217 99.4639C65.0206 99.7928 65.8771 99.9612 66.7419 99.9602V100H193.258V99.9602C194.123 99.9612 194.979 99.7928 195.778 99.4639C196.577 99.1355 197.303 98.6535 197.913 98.0458L228.072 68.1189C228.683 67.5124 229.168 66.7921 229.499 65.9995C229.83 65.2069 230 64.3574 230 63.4994C230 62.6414 229.83 61.7918 229.499 60.9992C229.168 60.2066 228.683 59.4864 228.072 58.8798Z" fill="white"/>
<path d="M69 57.283V67.7867H96.4011V57.283H69ZM109.064 49.0626H103.032L100.691 51.7036V61.0669H99.9737V67.8193H100.691V76.88H105.733V71.2379L106.633 72.5884H107.416V73.0686L106.516 74.239V76.88H112.878V50.5606H109.067L109.064 49.0626ZM127.041 54.2545V49.2127H114.376V54.2545H113.536V61.0395H118.788L120.288 59.2989V55.6676H121.099V59.2989L122.689 61.0395H128.211V54.2545H127.041ZM107.414 56.4453V58.0058L106.934 57.1955H105.733V56.4453H107.414ZM107.414 61.8172H105.733V59.9252L106.573 61.1556H107.414V61.8172ZM127.881 70.3689V61.6919H113.659V66.7337H121.879V67.394L120.829 68.3243L119.688 67.394H113.746V70.3689L114.976 71.3593L113.536 72.4097V76.88H118.578L120.738 75.1393L123.022 76.88H128.001V72.4084L126.681 71.358L127.881 70.3689ZM106.723 67.818H105.733V67.0678H107.414V68.5983L106.723 67.818ZM139.315 49H133.613V50.2004H131.932V56.9528H141.056V50.2004H139.315V49ZM158.642 73.0386L159.452 72.3209V69.4373H157.021L156.391 69.9475L155.971 69.3773V68.8371H159.542V65.1758H155.971V61.7245H159.302V58.3646H153.81V57.6731H159.122V54.9721H153.81V54.3119H159.302V50.5606H157.172L157.622 49.3601V49.03H151.139L150.629 50.5606H149.969L149.369 49.03H143.156V49.3601L143.637 50.5606H141.716V54.3119H146.609V54.9721H141.806V57.6731H146.608V58.3646H141.656V61.7259H150.449V65.5672H149.129V64.7256L149.912 64.4255V62.2947H141.776V64.9657H143.994V65.5659H141.626V69.2846H143.997V69.9149H141.626V73.6662H143.997V73.9063L141.806 74.8092V77H149.129V73.1586L149.879 72.9486V69.9175H149.129V69.2872H150.449V71.7481L151.079 72.5871L149.759 73.8789V76.8199H152.76L153.66 75.9196L154.411 76.88H159.63V74.3891L158.642 73.0386ZM132.053 61.9946H141.026V57.6431H132.053V61.9946ZM159.302 64.6656V62.2947H156.451V64.6656H159.302ZM132.053 66.8564H141.026V62.6849H132.053V66.8564ZM131.993 76.8199H141.026V67.6066H131.993V76.8199ZM135.984 71.7181H137.184V72.8272H135.984V71.7181ZM163.594 55.1522H165.364V56.2026H163.504V62.7749H165.154L163.234 65.5959V74.269H164.494L165.364 72.7985V76.8499H172.75V71.1779H174.01V65.1158L172.75 63.7653V62.7749H174.01V56.2026H172.75V55.0021L174.1 54.1618V49.3301H163.596L163.594 55.1522ZM190.904 49.3614H174.818V60.0452H190.904V49.3614ZM184.001 55.9638H181.51V54.7634H184.001V55.9638ZM189.643 65.6847L191.144 64.3642V60.8242H174.698V65.686H178.687V66.4688H174.818V70.7904H178.687V71.6281H174.458V76.9126H191.054V71.6281H186.552V70.7878H190.756V66.4662H186.555V65.6833L189.643 65.6847Z" fill="#226BB4"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="260" height="133" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="3"/>
<feGaussianBlur stdDeviation="15"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.470588 0 0 0 0 0.807843 0 0 0 0.561 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

17
src/assets/images/burnfont/btn-news2-desktop.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="281" height="133" viewBox="0 0 281 133" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M248.726 58.8798L215.423 28.953C214.749 28.3455 213.948 27.8638 213.065 27.5355C212.183 27.2072 211.238 27.0388 210.283 27.04V27H70.572V27.04C69.6173 27.0389 68.6719 27.2074 67.7899 27.5357C66.9079 27.864 66.1068 28.3456 65.4326 28.953L32.1296 58.8798C31.4544 59.4864 30.9189 60.2066 30.5535 60.9993C30.1881 61.7919 30 62.6415 30 63.4994C30 64.3574 30.1881 65.2069 30.5535 65.9996C30.9189 66.7922 31.4544 67.5124 32.1296 68.119L65.4326 98.0459C66.1068 98.6535 66.9081 99.1355 67.7903 99.464C68.6726 99.7925 69.6183 99.9611 70.5733 99.96V100H210.283V99.96C211.238 99.9611 212.183 99.7925 213.066 99.464C213.948 99.1355 214.749 98.6535 215.423 98.0459L248.726 68.119C249.401 67.5124 249.937 66.7922 250.302 65.9996C250.668 65.2069 250.856 64.3574 250.856 63.4994C250.856 62.6415 250.668 61.7919 250.302 60.9993C249.937 60.2066 249.401 59.4864 248.726 58.8798" fill="white"/>
</g>
<path d="M77.2278 62.0184V49.5338H64V76.8216H71.4908V62.0184H77.2278ZM78.0032 49.5338V62.0184H83.8591V72.7493L82.6998 73.5247V72.1548H83.2646V67.9635H82.6998V67.0123H83.2646V62.7021H72.0582V67.0123H72.8607V67.9635H72.0582V72.1548H72.7418L72.146 74.4733V76.1082H76.6048L77.1696 72.1548H78.2397V76.1082H80.4691V76.8191H91.2892V49.5338H78.0032ZM72.769 54.3195V55.095H70.4504V54.3195H72.769ZM85.0753 54.3195V55.095H82.6378V54.3195H85.0753ZM70.4504 58.4514V57.6759H72.769V58.4514H70.4504ZM82.6378 57.6759H85.0753V58.4514H82.6378V57.6759ZM77.1696 67.9635V67.0123H78.2397V67.9635H77.1696ZM106.033 49.1473H98.4233V50.5742H95.2724V58.0352H96.6397L95.4507 71.263V76.7919H101.544L101.901 66.0313H103.239V71.0847L102.406 72.0953V76.7919H109.689V59.3729H103.506V58.0352H109.719V50.5742H106.036L106.033 49.1473ZM121.163 67.6365L122.471 65.5855V50.3958H118.101V49.2365H112.424L110.492 51.6443V58.273H116.229V61.0375L114.772 59.0162H110.492V66.0313L111.859 67.7851L110.492 69.747V76.8514H114.98L116.407 74.5897L118.161 76.8514H122.591V69.747L121.163 67.6365ZM150.562 64.3667V59.2229H153.653V51.1971H152.791L152.434 49.4433H149.967V51.1971H149.135V49H140.306V51.1971H126.454V59.2229H141.258V66.5057L146.103 77H154.01V71.0252L150.562 64.3667ZM138.315 66.5961H140.277V60.1457H127.316V66.5961H129.219V69.9564H127.022V76.5244H141.02V69.9551H138.315V66.5961ZM164.918 49.2365H159.27V50.4255H157.606V57.1137H166.643V50.4255H164.918V49.2365ZM184.062 73.0465L184.865 72.3357V69.4795H182.457L181.833 69.9848L181.416 69.42V68.885H184.954V65.2585H181.416V61.8401H184.716V58.5121H179.276V57.8271H184.538V55.1519H179.276V54.4979H184.716V50.7822H182.605L183.051 49.5932V49.2662H176.631L176.125 50.7822H175.471L174.877 49.2662H168.724V49.5932L169.199 50.7822H167.297V54.4979H172.143V55.1519H167.386V57.8271H172.142V58.5121H167.237V61.8414H175.947V65.6462H174.639V64.8126L175.415 64.5153V62.4048H167.356V65.0504H169.553V65.6449H167.208V69.3283H169.556V69.9525H167.208V73.6682H169.556V73.906L167.386 74.8003V76.9703H174.639V73.1654L175.382 72.9574V69.9551H174.639V69.3309H175.947V71.7683L176.571 72.5994L175.263 73.8788V76.7919H178.236L179.128 75.9002L179.871 76.8514H185.04V74.3842L184.062 73.0465ZM157.725 62.1076H166.613V57.7974H157.725V62.1076ZM184.716 64.7532V62.4048H181.892V64.7532H184.716ZM157.725 66.9231H166.613V62.7913H157.725V66.9231ZM157.666 76.7919H166.613V67.6662H157.666V76.7919ZM161.622 71.7386H162.811V72.8372H161.622V71.7386ZM188.969 55.3302H190.721V56.3706H188.878V62.8805H190.512L188.61 65.6746V74.2653H189.861L190.721 72.8087V76.8216H198.033V71.2036H199.281V65.199L198.033 63.8614V62.8805H199.281V56.3706H198.033V55.1816L199.371 54.3493V49.5635H188.967L188.969 55.3302ZM216.019 49.5932H200.084V60.1754H216.017L216.019 49.5932ZM209.183 56.1328H206.715V54.9438H209.183V56.1328ZM214.771 65.7612L216.257 64.4533V60.9483H199.965V65.7638H203.919V66.5393H200.084V70.8197H203.919V71.6494H199.727V76.8837H216.165V71.6494H211.707V70.8171H215.868V66.5367H211.707V65.7612H214.771Z" fill="#226BB4"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="280.856" height="133" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="3"/>
<feGaussianBlur stdDeviation="15"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.470588 0 0 0 0 0.807843 0 0 0 0.561 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

1
src/assets/images/burnfont/ocfp_title.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="235.612" height="43.332" viewBox="0 0 235.612 43.332"><defs><style>.a{fill:#226bb4;}</style></defs><path class="a" d="M-97.2-19.274v-19.32h-20.47V3.634h11.592V-19.274Zm1.2-19.32v19.32h9.062V-2.668l-1.794,1.2V-3.588h.874v-6.486h-.874v-1.472h.874v-6.67H-105.2v6.67h1.242v1.472H-105.2v6.486h1.058L-105.064,0V2.53h6.9l.874-6.118h1.656V2.53h3.45v1.1H-75.44V-38.594Zm-8.1,7.406v1.2h-3.588v-1.2Zm19.044,0v1.2h-3.772v-1.2Zm-22.632,6.394v-1.2h3.588v1.2Zm18.86-1.2h3.772v1.2h-3.772ZM-97.29-10.074v-1.472h1.656v1.472Zm44.666-29.118H-64.4v2.208h-4.876v11.546h2.116L-69-4.968V3.588h9.43l.552-16.652h2.07v7.82L-58.236-3.68V3.588h11.27V-23.368h-9.568v-2.07h9.614V-36.984h-5.7ZM-29.21-10.58l2.024-3.174V-37.26h-6.762v-1.794h-8.786l-2.99,3.726V-25.07h8.878v4.278L-39.1-23.92h-6.624v10.856l2.116,2.714-2.116,3.036V3.68h6.946l2.208-3.5,2.714,3.5H-27V-7.314Zm45.494-5.06V-23.6h4.784v-12.42H19.734l-.552-2.714H15.364v2.714H14.076v-3.4H.414v3.4H-21.022V-23.6H1.886v11.27L9.384,3.91H21.62V-5.336ZM-2.668-12.19H.368v-9.982H-19.688v9.982h2.944v5.2h-3.4V3.174H1.518V-6.992H-2.668ZM38.5-39.054h-8.74v1.84H27.186v10.35H41.17v-10.35H38.5ZM68.126-2.208l1.242-1.1V-7.728H65.642l-.966.782-.644-.874v-.828h5.474V-14.26H64.032v-5.29h5.106V-24.7H60.72V-25.76h8.142V-29.9H60.72v-1.012h8.418v-5.75H65.872l.69-1.84v-.506H56.626l-.782,2.346H54.832l-.92-2.346H44.39v.506l.736,1.84H42.182v5.75h7.5V-29.9H42.32v4.14h7.36V-24.7H42.09v5.152H55.568v5.888H53.544V-14.95l1.2-.46v-3.266H42.274v4.094h3.4v.92H42.044v5.7h3.634v.966H42.044v5.75h3.634v.368L42.32.506V3.864H53.544V-2.024l1.15-.322V-6.992h-1.15v-.966h2.024v3.772L56.534-2.9,54.51-.92V3.588h4.6l1.38-1.38L61.64,3.68h8V-.138ZM27.37-19.136H41.124v-6.67H27.37Zm41.768,4.094v-3.634h-4.37v3.634ZM27.37-11.684H41.124v-6.394H27.37ZM27.278,3.588H41.124V-10.534H27.278ZM33.4-4.232h1.84v1.7H33.4Zm42.32-25.392H78.43v1.61H75.578V-17.94h2.53l-2.944,4.324V-.322H77.1L78.43-2.576v6.21H89.746V-5.06h1.932v-9.292l-1.932-2.07V-17.94h1.932V-28.014H89.746v-1.84l2.07-1.288v-7.406h-16.1Zm41.86-8.878H92.92v16.376h24.656ZM107-28.382h-3.818v-1.84H107Zm8.648,14.9,2.3-2.024V-20.93H92.736v7.452h6.118v1.2H92.92v6.624h5.934V-4.37H92.368v8.1h25.438v-8.1h-6.9V-5.658h6.44v-6.624h-6.44v-1.2Z" transform="translate(117.668 39.422)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

3
src/assets/images/event-block-bg.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="216.324" height="216.324" viewBox="0 0 216.324 216.324">
<path fill="#1060ff" d="M270.137 214.144l-49.566-49.566-43.62-43.62a14.8 14.8 0 0 0-20.924 0l-93.548 93.554a14.79 14.79 0 0 0 0 20.924l93.179 93.179a14.79 14.79 0 0 0 20.924 0l43.62-43.62 49.934-49.934a14.8 14.8 0 0 0 .001-20.917z" transform="translate(-58.143 -116.627)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 389 B

16
src/assets/images/group.svg Normal file
View File

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="105.871" height="92.748" viewBox="0 0 105.871 92.748">
<defs>
<style>
.cls-2{fill:#1060ff;stroke:#fff;stroke-width:3.5px}
</style>
</defs>
<g id="Group_540" opacity="0.3" transform="translate(-126.894 -400.496)">
<g id="Group_92" transform="translate(143.99 402.246)">
<path id="Path_383" d="M179.22 450.7c-8.739 0-17.086-2.021-23.505-5.693-7.839-4.482-12.335-11.238-12.335-18.534s4.5-14.052 12.335-18.534c6.419-3.67 14.766-5.691 23.505-5.691s17.085 2.021 23.5 5.691c7.839 4.482 12.335 11.238 12.335 18.534s-4.5 14.052-12.335 18.534c-6.42 3.67-14.762 5.693-23.5 5.693zm0-31.015c-12.484 0-18.4 5.445-18.4 6.788s5.918 6.789 18.4 6.789 18.4-5.445 18.4-6.789-5.92-6.79-18.4-6.79z" class="cls-2" transform="translate(-143.38 -402.246)"/>
</g>
<g id="Group_93" transform="translate(128.673 445.406)">
<path id="Path_384" d="M223.192 438.249c-3.057-3.235-5.611 1.516-8.116 4.88-3.321 4.46-11.068 9.493-18.615 10.916a37.429 37.429 0 0 1-13.794 0c1.529 8.213-2.845 11.857-2.845 11.857a39.3 39.3 0 0 0 15.22 15.176c5.919 3.215 9.737 2.471 12.973 1.048s2.544-6.977 2.544-6.977 4.594-.236 6.966-3.32-.711-8.062-.711-8.062 4.979-1.185 5.437-5.705-1.643-6.625-1.643-6.625 6.825-8.7 2.584-13.188z" class="cls-2" transform="translate(-122.266 -437.17)"/>
<path id="Path_385" d="M173.586 454.045a37.429 37.429 0 0 1-13.794 0c-7.547-1.423-15.294-6.455-18.615-10.916-2.505-3.364-5.059-8.115-8.115-4.88-4.243 4.489 2.585 13.188 2.585 13.188s-2.1 2.1-1.643 6.625 5.438 5.705 5.438 5.705-3.083 4.98-.712 8.062 6.966 3.32 6.966 3.32-.693 5.553 2.544 6.977 7.054 2.167 12.973-1.048a39.3 39.3 0 0 0 15.22-15.176s-4.376-3.644-2.847-11.857z" class="cls-2" transform="translate(-131.673 -437.17)"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

14
src/assets/images/guide-outline.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="73.621" height="94.167" viewBox="0 0 73.621 94.167">
<defs>
<style>
.cls-2{fill:none;stroke:#fff;stroke-width:3.5px}
</style>
</defs>
<g id="Guide_outline" opacity="0.3" transform="translate(-324.946 -220.658)">
<g id="Group_95" transform="translate(326.696 237.248)">
<path id="Rectangle_189" d="M0 0H10.423V75.826H0z" class="cls-2" transform="translate(56.632)"/>
<path id="Path_386" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5px" d="M335.075 259.877l56.632 22.208v-44.416z" transform="translate(-335.075 -236.451)"/>
</g>
<ellipse id="Ellipse_13" cx="8.278" cy="7.62" class="cls-2" rx="8.278" ry="7.62" transform="translate(380.262 222.408)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 845 B

25
src/assets/images/home/home-headerIcon.svg Normal file
View File

@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" width="187.166" height="44.017" viewBox="0 0 187.166 44.017">
<defs>
<style>
.cls-1{fill:#666}
</style>
</defs>
<g id="Group_689" transform="translate(-46.387 -20.491)">
<g id="Group_238" transform="translate(129.549 36.517)">
<path id="Path_354" d="M289.293 156.153a3.656 3.656 0 0 0-.96-.577 2.579 2.579 0 0 0-.931-.188 1.511 1.511 0 0 0-.935.271.841.841 0 0 0-.36.7.7.7 0 0 0 .182.5 1.545 1.545 0 0 0 .472.338 4.192 4.192 0 0 0 .66.246c.249.07.491.15.73.23a4.487 4.487 0 0 1 2.111 1.285 3.159 3.159 0 0 1 .67 2.1 4.107 4.107 0 0 1-.293 1.579 3.285 3.285 0 0 1-.858 1.209 3.934 3.934 0 0 1-1.381.781 5.789 5.789 0 0 1-1.856.281 6.831 6.831 0 0 1-3.984-1.279l1.263-2.376a5.109 5.109 0 0 0 1.308.874 3.167 3.167 0 0 0 1.276.284 1.522 1.522 0 0 0 1.075-.332 1 1 0 0 0 .354-.749 1.072 1.072 0 0 0-.089-.447 1 1 0 0 0-.3-.344 2.393 2.393 0 0 0-.545-.29c-.226-.093-.5-.191-.82-.3-.383-.118-.756-.252-1.119-.4a3.525 3.525 0 0 1-.979-.577 2.752 2.752 0 0 1-.692-.909 3.231 3.231 0 0 1-.261-1.391 4.034 4.034 0 0 1 .277-1.528 3.385 3.385 0 0 1 .781-1.171 3.455 3.455 0 0 1 1.234-.762 4.685 4.685 0 0 1 1.63-.268 7.085 7.085 0 0 1 1.757.233 7.828 7.828 0 0 1 1.76.683z" class="cls-1" transform="translate(-282.56 -152.938)"/>
<path id="Path_355" d="M290.832 153.037v11.332h-2.947v-11.332z" class="cls-1" transform="translate(-274.2 -152.721)"/>
<path id="Path_356" d="M296.708 155.531v8.838h-2.947v-8.838h-2.421v-2.494h7.785v2.494z" class="cls-1" transform="translate(-269.598 -152.721)"/>
<path id="Path_357" d="M304.791 157.043a3.143 3.143 0 0 0-2.523-1.25 3.085 3.085 0 0 0-1.225.242 2.918 2.918 0 0 0-.973.654 2.988 2.988 0 0 0-.638.986 3.207 3.207 0 0 0-.233 1.231 3.253 3.253 0 0 0 .233 1.247 3 3 0 0 0 .647.992 3.029 3.029 0 0 0 2.172.9 3.416 3.416 0 0 0 2.539-1.2v3.486l-.3.105a9.018 9.018 0 0 1-1.263.354 6.273 6.273 0 0 1-1.158.115 5.942 5.942 0 0 1-4.14-1.694 6.086 6.086 0 0 1-1.314-1.91 6.113 6.113 0 0 1-.009-4.81 6 6 0 0 1 1.308-1.879 6.079 6.079 0 0 1 1.9-1.231 5.927 5.927 0 0 1 2.271-.443 6.178 6.178 0 0 1 1.33.144 8.051 8.051 0 0 1 1.375.443z" class="cls-1" transform="translate(-262.61 -152.938)"/>
<path id="Path_358" d="M301.435 158.921a5.94 5.94 0 0 1 .466-2.354 5.821 5.821 0 0 1 3.272-3.17 7.186 7.186 0 0 1 5.055 0 5.939 5.939 0 0 1 1.993 1.269 5.773 5.773 0 0 1 1.3 1.9 6.134 6.134 0 0 1 0 4.7 5.771 5.771 0 0 1-1.3 1.9 5.938 5.938 0 0 1-1.993 1.269 7.138 7.138 0 0 1-5.055 0 5.821 5.821 0 0 1-3.272-3.17 5.935 5.935 0 0 1-.466-2.344zm3.084 0a3.023 3.023 0 0 0 .252 1.244 3.185 3.185 0 0 0 .692 1 3.133 3.133 0 0 0 1.014.654 3.345 3.345 0 0 0 2.453 0 3.267 3.267 0 0 0 1.021-.654 3.1 3.1 0 0 0 .7-1 3.132 3.132 0 0 0 0-2.491 3.1 3.1 0 0 0-.7-1 3.266 3.266 0 0 0-1.021-.654 3.345 3.345 0 0 0-2.453 0 3.132 3.132 0 0 0-1.014.654 3.185 3.185 0 0 0-.692 1 3.027 3.027 0 0 0-.252 1.247z" class="cls-1" transform="translate(-255.213 -152.938)"/>
<path id="Path_359" d="M308.075 164.369v-11.332h2.947l5.441 6.931v-6.931h2.931v11.332h-2.931l-5.441-6.931v6.931z" class="cls-1" transform="translate(-245.407 -152.721)"/>
<path id="Path_360" d="M316.235 153.037h2.571l-2.765 4.991H314.3z" class="cls-1" transform="translate(-235.146 -152.721)"/>
<path id="Path_361" d="M327.338 164.575h-9.125l2.81-2.915q1.114-1.158 1.744-1.962a10.423 10.423 0 0 0 .938-1.362 3.378 3.378 0 0 0 .383-.9 2.757 2.757 0 0 0 .077-.584 1.566 1.566 0 0 0-.083-.5 1.266 1.266 0 0 0-.246-.427 1.251 1.251 0 0 0-.4-.3 1.206 1.206 0 0 0-.545-.112 1.175 1.175 0 0 0-.941.389 1.437 1.437 0 0 0-.338.976 3.919 3.919 0 0 0 .045.482h-3.215a4.823 4.823 0 0 1 .322-1.805 4.07 4.07 0 0 1 .909-1.4 4.029 4.029 0 0 1 1.39-.9 4.8 4.8 0 0 1 1.767-.313 4.949 4.949 0 0 1 1.751.3 4.218 4.218 0 0 1 1.391.842 3.9 3.9 0 0 1 1.247 2.9 3.78 3.78 0 0 1-.4 1.722 6.064 6.064 0 0 1-1.269 1.617l-1.879 1.757h3.668z" class="cls-1" transform="translate(-233.246 -152.927)"/>
<path id="Path_362" d="M325.52 155.531h-1.652v-2.494h4.6v11.332h-2.948z" class="cls-1" transform="translate(-224.463 -152.721)"/>
</g>
<g id="Group_239" transform="translate(46.387 20.491)">
<path id="Path_363" fill="#1060ff" d="M302.68 135.71l10.16-10.161-8.875-8.876a3.011 3.011 0 0 0-4.257 0l-19.037 19.037a3.009 3.009 0 0 0 0 4.257l18.96 18.96a3.011 3.011 0 0 0 4.257 0l8.875-8.876-10.083-10.084a3.011 3.011 0 0 1 0-4.257z" transform="translate(-279.789 -115.792)"/>
<path id="Path_364" fill="blue" d="M336.064 135.633l-18.964-18.96a3.011 3.011 0 0 0-4.257 0l-8.875 8.876 10.085 10.085a3.009 3.009 0 0 1 0 4.257l-10.16 10.161 8.875 8.876a3.011 3.011 0 0 0 4.257 0l19.037-19.037a3.011 3.011 0 0 0 .002-4.258z" transform="translate(-270.919 -115.792)"/>
<path id="Path_365" fill="#fff" d="M317 133.009l-10.085-10.085-10.16 10.161a3.011 3.011 0 0 0 0 4.257l10.085 10.085L317 137.266a3.009 3.009 0 0 0 0-4.257z" transform="translate(-273.869 -113.167)"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

17
src/assets/images/home/home-icon-apple.svg Normal file
View File

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="169.115" height="195.406" viewBox="0 0 169.115 195.406">
<defs>
<style>
.cls-3{fill:#fff}
</style>
</defs>
<g id="Group_314" transform="translate(-1434.549 -1661)">
<path id="Path_1133" fill="blue" d="M60.221 163.407L84 139.629l20.923-20.929a7.1 7.1 0 0 1 10.037 0l44.875 44.879a7.1 7.1 0 0 1 0 10.037l-44.7 44.7a7.1 7.1 0 0 1-10.037 0l-20.924-20.922-23.953-23.954a7.1 7.1 0 0 1 0-10.033z" transform="translate(1441.749 1544.373)"/>
<path id="Path_1134" fill="#1060ff" d="M61.278 187.218l35.88-35.88 31.576-31.576a10.716 10.716 0 0 1 15.147 0l67.719 67.722a10.706 10.706 0 0 1 0 15.147l-67.451 67.451a10.707 10.707 0 0 1-15.147 0l-31.577-31.576-36.147-36.147a10.71 10.71 0 0 1 0-15.141z" transform="translate(1376.406 1583.186)"/>
<g id="Group_313" transform="translate(1295.506 1679.767)">
<path id="Path_1129" d="M221.016 50.52a14.962 14.962 0 0 1 11.6-2.558s-1.051 7.53-6.353 11.584-12.843 3.1-12.843 3.1a65.125 65.125 0 0 0 3.283-5.719c.959-1.891 2.358-4.912 4.313-6.407z" class="cls-3" transform="translate(8.445)"/>
<path id="Path_1130" d="M210.769 54.859a6.99 6.99 0 0 0-5.417-1.194 9.157 9.157 0 0 0 2.967 5.409 9.16 9.16 0 0 0 6 1.447 30.615 30.615 0 0 1-1.534-2.67 8.967 8.967 0 0 0-2.016-2.992z" class="cls-3" transform="translate(5.969 1.794)"/>
<path id="Path_1131" d="M210.519 70.922c.724 0 1.448.033 2.171.08-.646-3.853-.519-7.865 1.461-11.31-3.465 2.79-5.152 7.062-6.025 11.327.796-.058 1.594-.097 2.393-.097z" class="cls-3" transform="translate(6.82 3.682)"/>
<path id="Path_1132" d="M217.339 69.272a31.44 31.44 0 1 0 31.439 31.441 31.44 31.44 0 0 0-31.439-31.441zm12.846 44.286l-12.846-8.841-12.845 8.841 8.841-12.845-8.841-12.846 12.845 8.841 12.846-8.841-8.841 12.846z" class="cls-3" transform="translate(0 6.622)"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

6
src/assets/images/home/home-icon-square.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="169.115" height="195.406" viewBox="0 0 169.115 195.406">
<g>
<path fill="blue" d="M159.838 163.407l-23.777-23.777-20.925-20.93a7.1 7.1 0 0 0-10.037 0l-44.876 44.883a7.1 7.1 0 0 0 0 10.037l44.7 44.7a7.1 7.1 0 0 0 10.037 0l20.925-20.925 23.954-23.954a7.1 7.1 0 0 0-.001-10.034z" transform="translate(-233.549 -987.983) translate(175.406 871.355)"/>
<path fill="#1060ff" d="M211.6 187.218l-35.88-35.88-31.576-31.576a10.716 10.716 0 0 0-15.147 0l-67.715 67.722a10.706 10.706 0 0 0 0 15.147l67.451 67.451a10.707 10.707 0 0 0 15.147 0l31.576-31.576 36.144-36.147a10.71 10.71 0 0 0 0-15.141z" transform="translate(-233.549 -987.983) translate(187.927 910.168)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 739 B

BIN
src/assets/images/home/home-sponsors.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

53
src/assets/images/home/home-topic.svg Normal file
View File

@ -0,0 +1,53 @@
<svg xmlns="http://www.w3.org/2000/svg" width="656.122" height="273.72" viewBox="0 0 656.122 273.72">
<defs>
<style>
.cls-1{fill:#1060ff}.cls-2{fill:#00f}
</style>
</defs>
<g id="Group_242" transform="translate(-28.936 -216.312)">
<g id="Group_1" transform="translate(29.27 216.312)">
<path id="Path_1" d="M29.03 217.894h17.111c12.995 0 21.692 7.387 21.692 33.658 0 25.9-8.041 33.672-22.722 33.672H29.03zm7.014 61.437h8.595c9.731 0 16.181-2.713 16.181-27.78 0-25.812-7.384-27.776-16.362-27.776h-8.414z" transform="translate(-29.03 -212.276)"/>
<path id="Path_2" d="M81.782 223.775H53.814v23.94h20.112v5.892H53.814v25.723h28.625v5.892H46.8v-67.328h34.982z" transform="translate(16.318 -212.276)"/>
<path id="Path_3" d="M98.362 230.986c-4.113-3.654-8.786-7.582-14.59-7.582-5.984 0-10.843 4.127-10.843 10.3 0 3.548.654 6.73 9.731 12.242l5.331 3.275c12.334 7.586 15.7 11.134 15.7 18.993 0 12.061-8.041 19.263-19.828 19.263-8.7 0-15.14-4.219-20.378-10.949l5.423-4.294c3.274 5.238 8.513 9.351 14.955 9.351 7.021 0 12.821-5.242 12.821-12.444 0-5.42-.38-7.295-12.26-14.391l-6.077-3.654c-6.638-3.931-12.441-8.513-12.441-16.919 0-10.569 8.055-16.646 18.155-16.646 7 0 13.46 3.729 18.517 8.406z" transform="translate(58.884 -213.214)"/>
<path id="Path_4" d="M112.846 233.408c-.092-5.6-4.113-10-9.809-10-14.224 0-15.154 19.263-15.154 29.651 0 9.823 1.023 28.526 14.5 28.526 7 0 11.223-5.242 11.315-11.88h7c-.746 10.935-7.384 17.772-18.61 17.772-18.517 0-21.227-20.3-21.227-34.6 0-14.785 3.09-35.344 22.08-35.344 9.351 0 16.358 6.531 16.919 15.882z" transform="translate(103.226 -213.214)"/>
<path id="Path_5" d="M133.753 223.775h-27.961v23.94h20.1v5.892h-20.1v25.723h28.614v5.892H98.785v-67.328h34.968z" transform="translate(148.949 -212.276)"/>
<path id="Path_6" d="M116.071 217.894h8.129l20.485 50.3h.288v-50.3h7.007v67.986h-6.641l-22.065-54.338-.185.181v53.5h-7.021z" transform="translate(193.054 -212.276)"/>
<path id="Path_7" d="M132.991 217.894h17.1c13.006 0 21.7 7.387 21.7 33.658 0 25.9-8.041 33.672-22.722 33.672h-16.078zm7 61.437h8.609c9.731 0 16.188-2.713 16.188-27.78 0-25.812-7.4-27.776-16.369-27.776h-8.424z" transform="translate(236.225 -212.276)"/>
<path id="Path_8" d="M196.671 289.259H189.1l-5.988-19.828h-20.479l-5.984 19.828h-7.568l23.742-72.947zm-32.347-25.72h17.1l-8.605-27.215z" transform="translate(277.278 -216.312)"/>
<path id="Path_9" d="M168.052 217.894h8.133l20.481 50.3h.291v-50.3h7v67.986h-6.638l-22.069-54.338-.181.181v53.5h-7.021z" transform="translate(325.682 -212.276)"/>
<path id="Path_10" d="M229.088 223.775h-19.175v61.448h-7v-61.448H184.1v-5.881h44.987z" transform="translate(366.631 -212.276)"/>
<path id="Path_11" d="M236.977 230.986c-4.113-3.654-8.79-7.582-14.589-7.582-5.988 0-10.843 4.127-10.843 10.3 0 3.548.654 6.73 9.731 12.242l5.327 3.275c12.338 7.586 15.7 11.134 15.7 18.993 0 12.061-8.044 19.263-19.832 19.263-8.694 0-15.136-4.219-20.375-10.949l5.42-4.294c3.274 5.238 8.516 9.351 14.955 9.351 7.021 0 12.824-5.242 12.824-12.444 0-5.42-.38-7.295-12.26-14.391l-6.077-3.654c-6.641-3.931-12.441-8.513-12.441-16.919 0-10.569 8.055-16.646 18.152-16.646 7.007 0 13.464 3.729 18.521 8.406z" transform="translate(412.558 -213.214)"/>
</g>
<g id="Group_5" transform="translate(28.936 415.774)">
<g id="Group_2" transform="translate(0 4.311)">
<path id="Path_12" d="M49.6 273.689c19.64 0 20.677 22.431 20.677 34.964 0 8.985.653 34.982-20.677 34.982-20.755 0-20.666-25.446-20.666-34.982.002-28.142 9.353-34.964 20.666-34.964zm13.655 34.964c0-6.165.934-29.087-13.655-29.087-14.962 0-13.652 25.159-13.652 29.087 0 7.678-.373 29.09 13.652 29.09 7.016.001 13.658-4.677 13.658-29.09z" transform="translate(-28.936 -273.689)"/>
<path id="Path_13" d="M82.708 279.948h-29.08v23.39h21.785v5.881H53.628V341.4h-7.014v-67.347h36.094z" transform="translate(16.169 -272.76)"/>
</g>
<g id="Group_3" transform="translate(138.092 5.604)">
<path id="Path_14" d="M112.806 279.948H93.631V341.4h-7v-61.452H67.819v-5.9h44.987z" transform="translate(-67.819 -274.053)"/>
<path id="Path_15" d="M91.656 303.523h23.379v-29.47h7V341.4h-7v-31.985H91.656V341.4h-7.028v-67.347h7.028z" transform="translate(-24.931 -274.053)"/>
<path id="Path_16" d="M136.378 279.948h-27.961v23.941h20.1v5.892h-20.1V335.5h28.614v5.9H101.41v-67.347h34.968z" transform="translate(17.888 -274.053)"/>
</g>
<g id="Group_4" transform="translate(332.714)">
<path id="Path_17" d="M170.212 345.422h-7.572l-5.984-19.828h-20.481l-5.988 19.828h-7.568l23.742-72.947zM137.866 319.7h17.1l-8.605-27.215z" transform="translate(-122.619 -272.475)"/>
<path id="Path_18" d="M139.977 341.4v-67.347H154.1c7.764 0 21.135.945 21.135 17.029 0 6.457-3.363 11.4-8.879 14.5 7.66 3.747 11.787 8.786 11.787 17.484 0 9.82-7.11 18.333-18.9 18.333zM147 303.431h8.133c6.261 0 13.1-4.585 13.1-12.626 0-11.13-9.351-10.857-13.663-10.857H147zm11.771 32.069c6.183 0 12.352-3.654 12.352-12.061 0-7.494-4.677-14.117-15.335-14.117H147V335.5z" transform="translate(-78.33 -268.449)"/>
<path id="Path_19" d="M201.714 345.422h-7.568l-5.984-19.828h-20.486l-5.984 19.828h-7.568l23.742-72.947zM169.367 319.7h17.1l-8.605-27.215z" transform="translate(-42.235 -272.475)"/>
<path id="Path_20" d="M202.936 289.571c-.092-5.6-4.113-10-9.809-10-14.224 0-15.151 19.267-15.151 29.651 0 9.824 1.019 28.526 14.5 28.526 7.007 0 11.223-5.238 11.315-11.88h7.009c-.749 10.935-7.387 17.772-18.61 17.772-18.521 0-21.231-20.3-21.231-34.6 0-14.788 3.09-35.348 22.083-35.348 9.351 0 16.355 6.531 16.919 15.882z" transform="translate(.709 -269.378)"/>
<path id="Path_21" d="M224.339 274.053v49.664c0 12.718-9.536 18.99-18.61 18.99-7.295 0-18.7-4.113-18.7-22.722v-45.932h7.021v49.664c0 9.731 6.258 13.1 11.681 13.1 8.6 0 11.6-6.368 11.6-13.936v-48.828z" transform="translate(41.717 -268.449)"/>
<path id="Path_22" d="M237.237 287.153c-4.113-3.658-8.786-7.586-14.589-7.586-5.984 0-10.843 4.127-10.843 10.3 0 3.548.653 6.73 9.731 12.245l5.331 3.271c12.334 7.586 15.7 11.134 15.7 18.993 0 12.061-8.041 19.263-19.828 19.263-8.7 0-15.14-4.219-20.378-10.949l5.423-4.294c3.274 5.238 8.513 9.351 14.955 9.351 7.018 0 12.821-5.238 12.821-12.444 0-5.42-.38-7.295-12.26-14.4l-6.077-3.64c-6.638-3.928-12.441-8.513-12.441-16.919 0-10.569 8.055-16.646 18.152-16.646 7.007 0 13.464 3.729 18.521 8.406z" transform="translate(80.841 -269.378)"/>
</g>
</g>
<path id="Path_23" d="M41.311 255.151a38.916 38.916 0 0 1-11.517 10.619l-.764-.7c3.583-4.162 7.1-10.814 9.276-17.85l8.126 2.557a2.254 2.254 0 0 1-2.5 1.218l-1.342 2.3h8.889l2.944-3.779s3.321 2.628 5.306 4.606c-.192.707-.764 1.026-1.662 1.026zm38.381 33.135s3.9 3.068 6.332 5.37c-.192.7-.831 1.026-1.73 1.026H69.9v11.13c0 .511-2.625 1.467-4.734 1.467h-1.083v-12.6H51.1c-1.346 6.4-4.99 10.36-20.215 12.661l-.447-1.151c10.683-2.813 13.947-6.073 15.1-11.51H31.015l-.511-1.854h15.285c.192-1.73.256-3.647.32-5.761l7.739.9c-.124.771-.7 1.406-2.046 1.538-.128 1.151-.2 2.3-.387 3.328h12.668v-5.57l6.78.639v-1.79H45.534v1.6c0 .579-2.493 1.921-4.926 1.921h-.895v-28.4l6.268 2.688h24.243l1.73-1.921a3.187 3.187 0 0 1-.643-.32 8.634 8.634 0 0 0-3.136-4.99l.579-.515c8.122-.06 8.19 4.478 5.885 5.76l4.606 3.452a4.735 4.735 0 0 1-2.5 1.215v20.091c-.06.447-2.749 1.467-4.6 1.6-.259.7-.771 1.215-2.241 1.406v3.136h6.268zM43.744 256.17c11.191.447 7.291 8.7 2.873 5.824a10.583 10.583 0 0 0-3.576-5.377zm1.79 9.6v4.858h25.329v-4.858zm25.329 6.712H45.534v4.866h25.329zm0 11.773V279.2H45.534v5.054zM81.1 249.2s3.583 2.813 5.885 4.922c-.192.707-.835 1.026-1.73 1.026H65.813a32.493 32.493 0 0 1-9.34 7.675l-.771-.575a46.73 46.73 0 0 0 7.423-14.969l7.8 3.136c-.32.7-1.083 1.218-2.5 1.026-.38.632-.827 1.275-1.211 1.854h10.624z" transform="translate(.24 78.854)"/>
<path id="Path_24" d="M70.718 267.521c1.541-.064 3.647-.131 6.336-.323v-15.542l5.885 2.362H83c.263-1.723.522-4.28.71-6.009l7.8 1.215c-.252.962-1.023 1.474-2.429 1.6-.959.895-2.5 2.177-3.708 3.2h7.156l2.436-2.873 5.689 4.287a3.984 3.984 0 0 1-2.429 1.215v8.765l2.365-.263.128.9c3.52-3.324 3.779-7.224 3.779-10.683v-5.5l6.137 2.433h5.7l2.688-2.749 5.05 4.219a3.609 3.609 0 0 1-2.3.895v5.057c0 .636.188.827.824.827h1.342c.447 0 .97.064 1.282.064a4.845 4.845 0 0 0 .895-.128 9.693 9.693 0 0 0 1.094-.192h.575l.249.064c1.342.579 1.793.895 1.793 1.854 0 1.985-1.659 2.561-6.584 2.561h-.895l4.791 4.219c-.447.518-1.023.7-2.49.835a26.128 26.128 0 0 1-4.606 5.949c9.408 5.246 8.065 10.939 3.388 9.724a56.084 56.084 0 0 0-7.543-6.332c-4.8 3.328-11.074 5.5-18.677 6.78l-.447-1.026c6.521-1.854 11.834-4.475 15.928-8.058a96.438 96.438 0 0 0-9.919-5.885l.511-.764a69.979 69.979 0 0 1 12.469 3.512 26.074 26.074 0 0 0 2.948-4.539h-18.167l-.575-1.854h18.865l2.813-2.561h-.76c-3.583 0-4.031-1.151-4.031-4.031v-6.588h-7.167v1.215c0 3.392-.959 8.634-8.509 11.578l-.447-.7-2.493.579v13.176c0 3.132-.955 4.8-7.163 5.246a3.021 3.021 0 0 0-1.222-2.433 12.36 12.36 0 0 0-4.791-1.343v-.827s5.437.316 6.783.316c1.083 0 1.279-.387 1.279-1.215v-11.77c-2.561.572-5.437 1.215-8.573 1.854 10.168 3.839 5.118 11.642 2.042 8.126a18.076 18.076 0 0 0-2.813-7.678l.511-.384-2.365.508c-.384 6.148-2.177 12.8-9.532 17.338l-.632-.771c3.832-4.411 4.926-9.909 5.174-15.6l-2.749.572a2.6 2.6 0 0 1-1.73 1.406zm55.782 31.793s3.072 2.873 4.866 4.919c-.135.7-.771 1.026-1.669 1.026H72.064l-.575-1.854h6.336v-19.256l6.655 2.621h32.3l2.813-2.937 5.626 4.28a3.167 3.167 0 0 1-1.978 1.026v14.266h.572zm-44.461-32.5c3.4-.256 7.107-.579 11.074-.959v-9.98H82.04zm1.605 36.587h7.419v-14.77h-7.418zm.771-46.631c10.8 3.456 5.75 11.45 2.614 7.927-.447-1.978-1.342-5.242-3.26-7.352zm12.21 31.857v14.774h7.614v-14.77zm13.176 0v14.774h7.49v-14.77z" transform="translate(106.606 80.874)"/>
<path id="Path_25" d="M211.458 285.323c-.447.639-1.094.764-2.625.9a39.088 39.088 0 0 1-10.04 11.255 80.808 80.808 0 0 0 16.312 3.839l-.064.7c-2.749.639-4.478 2.688-5.125 5.761a56.475 56.475 0 0 1-16.624-6.844 64.8 64.8 0 0 1-20.979 6.844l-.387-.962A60.52 60.52 0 0 0 189.9 298.5a36.136 36.136 0 0 1-6.521-6.719 43.4 43.4 0 0 1-9.6 6.588l-.771-.764a50.485 50.485 0 0 0 8.126-9.4 33.229 33.229 0 0 1-2.55-5.5l.895-.576a26.758 26.758 0 0 0 2.749 4.351 56.541 56.541 0 0 0 3.9-7.614c-2.3.323-4.6.707-7.092 1.087a3.142 3.142 0 0 1-1.73 1.218l-2.564-7.359a11.4 11.4 0 0 0 2.564-.572 76.092 76.092 0 0 0 14.646-8.573c-3.523.7-7.678 1.6-12.032 2.365a3.3 3.3 0 0 1-1.655 1.6l-1.406-3.456c-.387.515-.959.831-2.365.639a82.216 82.216 0 0 1-5.885 7.291l2.937 1.09c-.252.572-.835.959-1.918 1.151v30.443c-.06.511-2.426 2.049-4.8 2.049h-1.147v-29.747a60.252 60.252 0 0 1-8.062 6.528l-.7-.7a89.252 89.252 0 0 0 14.135-23.1l7.668 4.031-1.335-3.328a8.779 8.779 0 0 0 1.978-.511c5.242-2.362 12.086-9.337 14.646-13.112l7.231 4.354c-.323.572-1.158.955-2.5.7a79.307 79.307 0 0 1-16.053 9.205c3.772 0 9.021 0 14.522-.06a73.089 73.089 0 0 0 9.145-8.442l6.46 5.693a2.416 2.416 0 0 1-2.617.316c-5.76 4.418-17.718 10.939-27.893 14.906 6.144-.067 15.8-.448 26.167-.895a58.214 58.214 0 0 0-4.866-6.528l.707-.448c17.012 5.949 12.533 17.466 6.968 13.371a19.366 19.366 0 0 0-1.978-4.926c-4.6.9-10.626 1.982-17.53 3.072l4.99 1.662a2.355 2.355 0 0 1-2.49 1.211c-.448.7-.959 1.474-1.406 2.241h10.8l3.846-3.452zM175.449 252.7c-.323.579-.959.966-2.376.643a65.446 65.446 0 0 1-16.823 12.6l-.636-.7a68.416 68.416 0 0 0 12.544-16.891zm14.071 32.5a41.278 41.278 0 0 1-4.031 4.674 39.978 39.978 0 0 0 8.314 5.5 34.854 34.854 0 0 0 7.8-10.172z" transform="translate(321.441 80.599)"/>
<path id="Path_26" d="M250.455 262.013c-.448.572-.959.895-2.365.508a60.029 60.029 0 0 1-7.227 3.2 64.56 64.56 0 0 0 14.781 3.839l-.064.763c-2.436.579-4.031 2.5-4.6 5.437-10.427-3.26-18.677-8.573-23.22-17.91a37.964 37.964 0 0 1-8.385 5.313v6.457c3.4-.831 7.291-1.854 11.258-2.88l.252.895c-3.26 1.794-9.273 5.185-15.992 8.637a3.77 3.77 0 0 1-1.279 1.218l-3.388-5.5c2.752-1.538 3.2-2.177 3.2-3.136v-3.328a101.194 101.194 0 0 1-15.74 3.9l-.448-1.019c8.9-2.561 16.823-6.528 22.136-11.07h-19.826l-.582-1.854h28.469a4.552 4.552 0 0 1-1.73-.579 16.413 16.413 0 0 0-4.155-6.588l.572-.38c11.262-.064 10.044 7.1 6.084 7.547h17.072l3.324-4.411s3.843 3.068 6.084 5.245c-.2.7-.771 1.019-1.666 1.019h-23.99a26.382 26.382 0 0 0 9.145 7.1 52.66 52.66 0 0 0 5.636-6.776zM245.54 274.8l6.46 4.864a4.568 4.568 0 0 1-2.688 1.282v19.7c0 4.095-.831 6.524-7.675 7.163-.124-1.794-.387-3.2-1.083-4.031-.771-.9-1.928-1.6-4.482-2.046v-.632a10.434 10.434 0 0 1-3.967 1.083h-.895v-2.688h-9.273v2.105c0 .38-2.365 1.531-4.414 1.531h-.771v-15.089a53.845 53.845 0 0 1-6.013 1.538l-.7-.895v16.884c0 .579-2.564 1.985-4.99 1.985h-.9v-32.24l6.4 2.752h32.169zm-35.5 13.819c7.48-2.561 8.7-5.437 9.01-8.765h-9.01zm14.771-8.765c-.575 3.072-2.177 5.757-7.167 7.87l4.542 1.854h8.445l2.3-2.3c-2.5-.192-2.877-1.282-2.877-3.583v-3.839zm6.4 17.782v-6.2h-9.273v6.2zm5.249 3.072c0 .064-.064.064-.064.124 1.023.068 4.606.323 5.69.323 1.019 0 1.282-.256 1.282-1.087v-20.213h-9.085v3.072c0 .575.124.827.835.827h3.2c.249 0 .636-.06.835-.06a7.86 7.86 0 0 0 1.019-.192h.572l.2.06c1.271.387 1.719.71 1.719 1.474 0 1.6-1.406 2.241-6.4 2.241h-2.749l4.99 3.708a3.782 3.782 0 0 1-2.042 1.026z" transform="translate(429.414 80.693)"/>
<g id="Group_6" transform="translate(306.539 324.893)">
<path id="Path_27" d="M142.124 277.359l15.545-15.545-13.581-13.581a4.609 4.609 0 0 0-6.513 0l-29.126 29.126a4.608 4.608 0 0 0 0 6.513l29.012 29.012a4.609 4.609 0 0 0 6.513 0l13.582-13.584-15.431-15.431a4.6 4.6 0 0 1-.001-6.51z" class="cls-1" transform="translate(-107.102 -246.885)"/>
<path id="Path_28" d="M170.528 277.245l-29.012-29.012a4.609 4.609 0 0 0-6.513 0l-13.581 13.581 15.431 15.431a4.608 4.608 0 0 1 0 6.513L121.308 299.3l13.581 13.581a4.609 4.609 0 0 0 6.513 0l29.126-29.126a4.609 4.609 0 0 0 0-6.51z" class="cls-2" transform="translate(-70.854 -246.885)"/>
</g>
<g id="Group_7" transform="translate(307.684 325.423)">
<path id="Path_29" d="M141.9 277.028l15.3-15.3-13.368-13.364a4.529 4.529 0 0 0-6.41 0l-28.664 28.664a4.529 4.529 0 0 0 0 6.41l28.55 28.554a4.529 4.529 0 0 0 6.41 0l13.368-13.364-15.186-15.19a4.529 4.529 0 0 1 0-6.41z" class="cls-1" transform="translate(-107.424 -247.035)"/>
<path id="Path_30" d="M169.848 276.914l-28.55-28.55a4.534 4.534 0 0 0-6.414 0l-13.364 13.364 15.186 15.186a4.534 4.534 0 0 1 0 6.414l-15.3 15.3 13.364 13.364a4.534 4.534 0 0 0 6.414 0l28.664-28.664a4.534 4.534 0 0 0 0-6.414z" class="cls-2" transform="translate(-71.748 -247.035)"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

3
src/assets/images/lightning-outline.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="44.299" height="82.48" viewBox="0 0 44.299 82.48">
<path fill="none" stroke="#fff" stroke-width="5px" d="M331.807 398.336h32.662l-15.836 25.636 11.392 12.83-30.046 40.012 14.357-36.914-16.984-12.4z" opacity="0.3" transform="translate(-324.652 -395.836)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 314 B

3
src/assets/images/stall-outline.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="66.419" height="67.359" viewBox="0 0 66.419 67.359">
<path fill="none" stroke="#fefefe" stroke-width="5px" d="M186.072 98.126a13.924 13.924 0 0 0-7.162-7.8 11.178 11.178 0 1 0-11.753 0 13.924 13.924 0 0 0-7.162 7.8h-12V71.065h-9.543V87.85h7.9v10.276h-12.481v33.886h61.419V98.126z" opacity="0.3" transform="translate(-131.371 -67.153)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 395 B

1
src/assets/images/teams/dev.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

3
src/assets/images/title-block.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30.252" height="30.252" viewBox="0 0 30.252 30.252">
<path fill="#1060ff" d="M87.79 130.265l-6.932-6.932-6.1-6.1a2.07 2.07 0 0 0-2.926 0L58.75 130.316a2.068 2.068 0 0 0 0 2.926l13.031 13.031a2.068 2.068 0 0 0 2.926 0l6.1-6.1 6.983-6.983a2.069 2.069 0 0 0 0-2.925z" transform="translate(-58.143 -116.627)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

6
src/assets/images/union.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="65" height="78.999" viewBox="0 0 65 78.999">
<g fill="none" stroke-linejoin="round" opacity="0.3">
<path d="M-3975 79a5.005 5.005 0 0 1-5-5V28.487a5.007 5.007 0 0 1 5-5h16.5a14.8 14.8 0 0 1-2.82-8.718A14.7 14.7 0 0 1-3946.687 0a14.7 14.7 0 0 1 14.63 14.768 14.794 14.794 0 0 1-2.82 8.718H-3920a5.007 5.007 0 0 1 5 5v15.468a10.994 10.994 0 0 0-6.808-2.27c-5.5 0-9.973 3.783-9.973 8.432s4.474 8.431 9.973 8.431a11 11 0 0 0 6.808-2.269V74a5.005 5.005 0 0 1-5 5z" transform="translate(3980)"/>
<path fill="#fff" d="M-3920.003 73.999l.003-.003V63.45c-.597.065-1.2.098-1.808.098-3.84 0-7.49-1.298-10.277-3.654-1.436-1.214-2.574-2.647-3.382-4.259-.872-1.74-1.315-3.598-1.315-5.519 0-1.921.443-3.778 1.315-5.519.808-1.612 1.945-3.045 3.381-4.259 2.787-2.356 6.437-3.654 10.278-3.654.607 0 1.21.033 1.808.097V28.49l-.004-.004h-14.873c-1.88 0-3.6-1.054-4.454-2.729-.854-1.675-.697-3.687.407-5.208 1.222-1.683 1.867-3.682 1.867-5.781 0-5.386-4.32-9.768-9.63-9.768-5.31 0-9.629 4.382-9.629 9.768 0 2.1.646 4.098 1.867 5.782 1.104 1.521 1.261 3.533.407 5.207-.854 1.675-2.574 2.729-4.454 2.729h-16.5l-.004.004v45.506l.003.003h54.994m.003 5h-55c-2.757 0-5-2.242-5-5V28.488c0-2.758 2.243-5.001 5-5.001h16.504c-1.773-2.443-2.82-5.458-2.82-8.718 0-8.157 6.55-14.768 14.63-14.768 8.08 0 14.63 6.611 14.63 14.768 0 3.26-1.048 6.275-2.821 8.718H-3920c2.756 0 5 2.243 5 5.001v15.467c-1.853-1.463-4.27-2.27-6.808-2.27-5.5 0-9.974 3.783-9.974 8.432 0 4.65 4.474 8.432 9.974 8.432 2.537 0 4.955-.807 6.808-2.27V74c0 2.757-2.244 4.999-5 4.999z" transform="translate(3980)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

119
src/assets/scss/CFP/header.scss
View File

@ -1,4 +1,4 @@
@import '../hyperpoint.scss';
@import "../hyperpoint.scss";
$width-svg-sitcon2021: 341px;
$width-svg-sitcon: 244px;
@ -6,7 +6,8 @@ $width-svg-topic: 515px;
$width-svg-cfp: 368px;
$width-svg-date: 207px;
$width-svg-location: 227px;
$width-svg-news: 259px;
$width-svg-news1: 259px;
$width-svg-news2: 285px;
#cfp-header {
padding-left: 20px;
@ -66,9 +67,22 @@ $width-svg-news: 259px;
.btn-news-wrapper {
margin: -48px;
}
.cfp-news__btn {
position: relative;
&:hover {
bottom: 6px;
// @include
&--1 {
transform: translate(50%, 0%);
&:hover {
transform: translate(50%, -20%);
}
}
&--2 {
transform: translate(-50%, 280%);
&:hover {
transform: translate(-50%, 260%);
}
}
}
}
}
@ -103,15 +117,6 @@ $width-svg-news: 259px;
margin-bottom: 36px;
}
}
.cfp-news {
order: 3;
flex: 0 0 50%;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 12px;
}
}
}
}
@ -132,7 +137,7 @@ $width-svg-news: 259px;
.info-box {
.cfp-title {
margin-bottom: 56px;
left: calc(#{$width-svg-cfp} * 0.06)
left: calc(#{$width-svg-cfp} * 0.06);
}
.date-location {
.date-wrapper {
@ -140,6 +145,28 @@ $width-svg-news: 259px;
}
}
.cfp-news {
order: 3;
flex: 0 0 50%;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 12px;
.cfp-news__btn {
position: relative;
&--1 {
top: -95px;
&:hover {
top: -100px;
}
}
&--2 {
top: -45px;
&:hover {
top: -50px;
}
}
}
}
}
}
@ -160,8 +187,11 @@ $width-svg-news: 259px;
#svg-location {
width: $width-svg-location * $scale;
}
#svg-news {
width: $width-svg-news * $scale;
#svg-news1 {
width: $width-svg-news1 * $scale;
}
#svg-news2 {
width: $width-svg-news2 * $scale;
}
#svg-cfp {
width: $width-svg-cfp * $scale;
@ -184,7 +214,7 @@ $width-svg-news: 259px;
.info-box {
.cfp-title {
margin-bottom: 56px;
left: calc(#{$width-svg-cfp} * 0.05)
left: calc(#{$width-svg-cfp} * 0.05);
}
.date-location {
.date-wrapper {
@ -193,6 +223,24 @@ $width-svg-news: 259px;
}
.cfp-news {
margin-bottom: 16px;
.cfp-news__btn {
position: relative;
&--1 {
top: -75px;
right: -5px;
&:hover {
top: -80px;
}
}
&--2 {
top: 0px;
&:hover {
top: -5px;
}
}
}
}
}
}
@ -213,8 +261,11 @@ $width-svg-news: 259px;
#svg-location {
width: $width-svg-location * $scale;
}
#svg-news {
width: $width-svg-news * $scale;
#svg-news1 {
width: $width-svg-news1 * $scale;
}
#svg-news2 {
width: $width-svg-news2 * $scale;
}
#svg-cfp {
width: $width-svg-cfp * $scale;
@ -237,7 +288,7 @@ $width-svg-news: 259px;
.info-box {
.cfp-title {
margin-bottom: 32px;
left: calc(#{$width-svg-cfp} * 0.033)
left: calc(#{$width-svg-cfp} * 0.033);
}
.date-location {
.date-wrapper {
@ -246,6 +297,27 @@ $width-svg-news: 259px;
}
.cfp-news {
margin-bottom: 2px;
position: relative;
.cfp-news__btn {
position: relative;
&--1 {
top: -45px;
right: -25px;
&:hover {
top: -48px;
}
}
&--2 {
top: 5px;
right: -21px;
&:hover {
top: 2px;
}
}
}
}
}
}
@ -266,8 +338,11 @@ $width-svg-news: 259px;
#svg-location {
width: $width-svg-location * $scale;
}
#svg-news {
width: $width-svg-news * $scale;
#svg-news1 {
width: $width-svg-news1 * $scale;
}
#svg-news2 {
width: $width-svg-news2 * $scale;
}
#svg-cfp {
width: $width-svg-cfp * $scale;

159
src/assets/scss/agenda.scss Normal file
View File

@ -0,0 +1,159 @@
@import './breakpoint';
@import './color';
$fontFamily: "Noto Serif CJK TC -SemiBold";
$fontFamilyVote: "Noto Serif CJK TC -Black";
@mixin RWDFontSize {
font-size: 14pt;
@media screen and (max-width: $max-width-medium-0) {
font-size: 12pt;
}
@media screen and (max-width: $max-width-small-0) {
font-size: 10pt;
}
@media screen and (max-width: $max-width-small-2) {
font-size: 8pt
}
}
@mixin RWDWidth {
max-width: 80%;
@media screen and (max-width: $max-width-medium-0) {
max-width: 85%;
}
@media screen and (max-width: $max-width-small-0) {
max-width: 85%;
}
@media screen and (max-width: $max-width-small-2) {
max-width: 85%;
}
}
@mixin RWDButton {
font-size: 16pt;
line-height: 1.44;
@media screen and (max-width: $max-width-medium-0) {
}
@media screen and (max-width: $max-width-small-0) {
font-size: 14pt;
line-height: 1.3;
}
@media screen and (max-width: $max-width-small-2) {
}
}
#agenda {
margin: 0 auto;
@include RWDWidth;
padding-top: 50px;
padding-bottom: 50px;
font-family: $fontFamily;
@include RWDFontSize;
article {
line-height: 2;
margin: 50px 0;
&.bold {
font-family: $fontFamilyBold;
font-weight: bold;
}
}
p.vote {
text-align: center;
padding: 50px 0;
a.vote.button {
display: inline-block;
padding: 7px 20px;
background-color: $indigo-blue;
border: none;
border-radius: 32px;
font-family: $fontFamilyVote;
color: white;
@include RWDButton;
}
}
ol.vote.rule {
list-style-type: decimal;
li {
line-height: 2;
// prevent marker overflow
margin-left: 1.5em;
}
}
div.event.container:not(.mobile) {
display: grid;
grid-template-columns: min-content repeat(6, 1fr) min-content;
column-gap: 30px;
@media screen and (max-width: 1200px) {
column-gap: 20px;
}
@media screen and (max-width: 1024px) {
column-gap: 10px;
}
img.arrow {
margin: auto;
width: fit-content;
height: calc(99/217 * 100%);
}
}
}
@media screen and (max-width: $max-width-medium-1) {
#agenda {
p.vote {
padding: 0;
}
div.mobile.event.container {
.column {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
.event.block {
width: 33%;
}
> :nth-child(2) {
margin-left: 20px;
margin-right: 20px;
}
// column with two item only
> :last-child:nth-child(2) {
margin-left: 10px;
margin-right: 0;
}
// column with one item and two arrows
> .arrow ~ :nth-child(2) {
margin-left: 30px;
margin-right: 30px;
}
&:not(:first-child) {
// more vertically compact column
margin-top: -20px;
}
}
img.arrow {
height: 80%;
}
}
}
}

37
src/assets/scss/blocktitle.scss Normal file
View File

@ -0,0 +1,37 @@
$fontFamily: "Noto Serif CJK TC -Black";
div.block.title {
display: flex;
justify-content: center;
font-size: 26px;
font-family: $fontFamily;
font-weight: bold;
line-height: 1.44;
margin: 36px 0;
span.text {
display: contents;
&::before, &::after {
display: inline-block;
content: '';
width: 1.44em;
height: 1.44em;
margin: auto;
vertical-align: middle;
background-image: url('../assets/images/title-block.svg');
background-size: contain;
}
&::before {
margin-right: 18px;
}
&::after {
margin-left: 18px;
}
}
}

5
src/assets/scss/breakpoint.scss
View File

@ -6,7 +6,7 @@ $max-width-4: 415px;
$max-width-35: 480px;
//agenda.scsss breakpoint
//agenda.scsss and home.scss, header.scss breakpoint
$max-width-big-0: 1800px;
$max-width-big: 1500px;
$max-width-medium-0: 1100px;
@ -16,6 +16,9 @@ $max-width-small-1: 500px;
$max-width-small-2: 410px;
$max-width-small-3: 360px;
// home.scss breakpoint
$max-width-big-1: 1300px;
@mixin xs {
@media (max-width: $max-width-4) {
@content;

7
src/assets/scss/color.scss
View File

@ -4,4 +4,9 @@ $pale-grey: #f0f7fd;
$dark-slate-blue: #1f4163;
$dark-sky-blue: #3d93e9;
$slate-blue: #5f7a95;
$sky-blue: #9dc5ec;
$sky-blue: #9dc5ec;
//home
$indigo-blue: #1060ff;
// $indigo-blue-dark: #000098;
$black: black;

169
src/assets/scss/eventblock.scss Normal file
View File

@ -0,0 +1,169 @@
@import './font';
@import './breakpoint';
$fontFamily: "Noto Serif CJK TC -Bold";
@mixin RWDFontSize {
font-size: 18pt;
@media screen and (max-width: 1400px) {
font-size: 16pt;
}
@media screen and (max-width: 1200px) {
font-size: 15pt;
}
@media screen and (max-width: 1024px) {
font-size: 13pt;
}
@media screen and (max-width: $max-width-medium-1 - 1px) {
font-size: 22pt;
}
@media screen and (max-width: 650px) {
font-size: 16pt;
}
@media screen and (max-width: 500px) {
font-size: 15pt;
}
}
@mixin RWDIconScale {
transform: scale(0.75);
@media screen and (max-width: 1300px) {
transform: scale(0.6);
}
@media screen and (max-width: 1200px) {
transform: scale(0.55);
}
@media screen and (max-width: 1024px) {
transform: scale(0.5);
}
@media screen and (max-width: $max-width-medium-1 - 1px) {
transform: scale(1.25);
}
@media screen and (max-width: $max-width-small-0) {
transform: scale(1);
}
@media screen and (max-width: 600px) {
transform: scale(0.75);
}
@media screen and (max-width: 500px) {
transform: scale(0.55);
}
}
.event.block {
position: relative;
height: 100%;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
@include RWDFontSize;
line-height: 1.44;
font-family: $fontFamily;
.background {
width: 100%;
height: auto;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
padding: .75em;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
color: white;
span {
white-space: pre;
z-index: 1;
// for lightning talk block
&.special {
// visual adjustment
margin-top: 5%;
}
@media screen and (min-width: $max-width-medium-1) {
&.special {
transform: scale(0.75);
}
}
}
i.icon {
position: absolute;
z-index: 0;
@include RWDIconScale();
// transform: scale(0.75);
&::before {
width: 100%;
height: 100%;
display: block;
content: '';
background-size: contain;
background-repeat: no-repeat;
}
// different size for each icon
&.union {
width: 65px;
height: 79px;
&::before {
background-image: url('../assets/images/union.svg');
}
}
&.stall-outline {
width: 61px;
height: 62px;
&::before {
background-image: url('../assets/images/stall-outline.svg');
}
}
&.group {
width: 100px;
height: 85px;
&::before {
background-image: url('../assets/images/group.svg');
}
}
&.lightning-outline {
margin-top: 10px;
width: 37px;
height: 78px;
&::before {
background-image: url('../assets/images/lightning-outline.svg');
}
}
&.guide-outline {
margin-right: 25%;
width: 74px;
height: 95px;
&::before {
background-image: url('../assets/images/guide-outline.svg');
}
}
}
}
}

20
src/assets/scss/font.scss
View File

@ -1,4 +1,24 @@
// import web font
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
@font-face {
font-family: "Noto Serif CJK TC -Bold";
src: url("~@/assets/font/NotoSerifCJKtc-Bold.otf");
}
@font-face {
font-family: "Noto Serif CJK TC -Black";
src: url("~@/assets/font/NotoSerifCJKtc-Black.otf");
}
@font-face {
font-family: "Noto Serif CJK TC -SemiBold";
src: url("~@/assets/font/NotoSerifCJKtc-SemiBold.otf");
}
@font-face {
font-family: "Letter Gothic Std Bold";
src: url("~@/assets/font/Letter Gothic Std Bold.ttf");
}
$fontFamily: Noto Sans TC, monospace;

188
src/assets/scss/footer-primary.scss Normal file
View File

@ -0,0 +1,188 @@
@import 'breakpoint.scss';
// varible declare
$fontColor: white;
//for footer-primary
$backgroundColor: #000098;
$fontFamily: 'Noto Sans TC', monospace;
@mixin fontSize() {
font-size: 14pt;
line-height: 2;
@include xl {
}
@include lg {
}
@include md {
}
@include sm {
font-size: 14pt;
}
@include xs {
font-size: 12pt;
}
}
@mixin iconSize() {
font-size: 2.2em;
margin-right: 36px;
@include xl {
font-size: 2.1em;
margin-right: 20px;
}
@include lg {
}
@include md {
font-size: 1.8em;
}
@include sm {
}
@include xs {
font-size: 1.6em;
}
}
@mixin footerLayout() {
// flex
display: flex;
flex-direction: row;
justify-content: center;
& > .footer-right {
margin-left: 100px;
}
@include md {
flex-direction: column;
justify-content: flex-start;
align-items: center;
// height: 320px;
& > .footer-right {
margin-left: 0;
}
& > * {
margin-left: 0;
width: 80%;
}
.footer-left {
margin-bottom: 24px;
}
.footer-right {
padding-bottom: 0;
}
}
@include xs {
& > * {
width: 90%;
}
}
}
.footer-container-primary {
background: $backgroundColor;
// position
// position: absolute;
// bottom: 0;
// left: 0;
margin-top: auto;
// size
width: 100vw;
padding-top: 45px;
padding-bottom: 45px;
position: relative;
z-index: 2;
.footer-left {
display: inline-flex;
flex-direction: column;
justify-content: center;
.footer-brand {
margin-bottom: 24px;
}
}
.footer-right {
display: inline-flex;
flex-direction: column;
justify-content: center;
padding-bottom: 24px;
//for footer-primary
transform: translateY(11%);
.footer-context {
margin-bottom: 14px;
}
}
// layout
@include footerLayout;
}
.footer-community-icon {
.community-icon {
@include iconSize;
color: $fontColor;
}
.community-icon:first {
margin-left: 0;
}
}
.footer-context {
@include fontSize;
font-family: $fontFamily;
color: $fontColor;
font-weight: bold;
}
.footer-font-block {
// display flex
display: flex;
flex-direction: column;
// size
width: auto;
}
//for footer-primary (on below)
@mixin sitesOverYearsLink() {
margin-right: 20px;
@media (max-width: 570px) {
margin-right: 10px;
}
@include subs {
margin-right: 30px;
margin-bottom: 10px;
}
}
@mixin sitesOverYears() {
height: 100px;
width: 480px;
@include subs {
width: 300px;
margin-bottom: 50px;
}
}
.footer-sitesOverYears {
@include sitesOverYears;
&__title {
margin-top: 20px;
height: 50px;
}
&__links {
a {
float: left;
color: $fontColor;
@include sitesOverYearsLink;
}
}
}

147
src/assets/scss/footer-secondary.scss Normal file
View File

@ -0,0 +1,147 @@
@import 'breakpoint.scss';
// varible declare
$fontColor: white;
$backgroundColor: #1f4163;
$fontFamily: 'Noto Sans TC', monospace;
@mixin fontSize() {
font-size: 14pt;
line-height: 2;
@include xl {
}
@include lg {
}
@include md {
}
@include sm {
font-size: 14pt;
}
@include xs {
font-size: 12pt;
}
}
@mixin iconSize() {
font-size: 2.2em;
margin-right: 36px;
@include xl {
font-size: 2.1em;
margin-right: 20px;
}
@include lg {
}
@include md {
font-size: 1.8em;
}
@include sm {
}
@include xs {
font-size: 1.6em;
}
}
@mixin footerLayout() {
// flex
display: flex;
flex-direction: row;
justify-content: center;
& > .footer-right {
margin-left: 100px;
}
@include md {
flex-direction: column;
justify-content: flex-start;
align-items: center;
// height: 320px;
& > .footer-right {
margin-left: 0;
}
& > * {
margin-left: 0;
width: 80%;
}
.footer-left {
margin-bottom: 24px;
}
.footer-right {
padding-bottom: 0;
}
}
@include xs {
& > * {
width: 90%;
}
}
}
.footer-container-secondary {
background: $backgroundColor;
// position
// position: absolute;
// bottom: 0;
// left: 0;
margin-top: auto;
// size
width: 100vw;
padding-top: 45px;
padding-bottom: 45px;
position: relative;
z-index: 2;
.footer-left {
display: inline-flex;
flex-direction: column;
justify-content: center;
//margin-left: 100px;
.footer-brand {
margin-bottom: 24px;
}
}
.footer-right {
display: inline-flex;
flex-direction: column;
justify-content: center;
padding-bottom: 24px;
//margin-left: 100px;
.footer-context {
margin-bottom: 14px;
}
}
// layout
@include footerLayout;
}
.footer-community-icon {
.community-icon {
@include iconSize;
color: $fontColor;
}
.community-icon:first {
margin-left: 0;
}
}
.footer-context {
@include fontSize;
font-family: $fontFamily;
color: $fontColor;
font-weight: bold;
}
.footer-font-block {
// display flex
display: flex;
flex-direction: column;
// size
width: auto;
}

148
src/assets/scss/footer.scss
View File

@ -1,148 +0,0 @@
@import 'breakpoint.scss';
// varible declare
$fontColor: white;
$backgroundColor: #1f4163;
$fontFamily: 'Noto Sans TC', monospace;
@mixin fontSize() {
font-size: 14pt;
line-height: 2;
@include xl {
}
@include lg {
}
@include md {
}
@include sm {
font-size: 14pt;
}
@include xs {
font-size: 12pt;
}
}
@mixin iconSize() {
font-size: 2.2em;
margin-right: 36px;
@include xl {
font-size: 2.1em;
margin-right: 20px;
}
@include lg {
}
@include md {
font-size: 1.8em;
}
@include sm {
}
@include xs {
font-size: 1.6em;
}
}
@mixin footerLayout() {
// flex
display: flex;
flex-direction: row;
justify-content: center;
& > .footer-right {
margin-left: 100px;
}
@include md {
flex-direction: column;
justify-content: flex-start;
align-items: center;
// height: 320px;
& > .footer-right {
margin-left: 0;
}
& > * {
margin-left: 0;
width: 80%;
}
.footer-left {
margin-bottom: 24px;
}
.footer-right {
padding-bottom: 0;
}
}
@include xs {
& > * {
width: 90%;
}
}
}
.footer-container {
background: $backgroundColor;
// position
// position: absolute;
// bottom: 0;
// left: 0;
margin-top: auto;
// size
width: 100vw;
padding-top: 45px;
padding-bottom: 45px;
position: relative;
z-index: 2;
.footer-left {
display: inline-flex;
flex-direction: column;
justify-content: center;
//margin-left: 100px;
.footer-brand {
margin-bottom: 24px;
}
}
.footer-right {
display: inline-flex;
flex-direction: column;
justify-content: center;
padding-bottom: 24px;
//margin-left: 100px;
.footer-context {
margin-bottom: 14px;
}
}
// layout
@include footerLayout;
}
.footer-community-icon {
.community-icon {
@include iconSize;
color: $fontColor;
}
.community-icon:first {
margin-left: 0;
}
}
.footer-context {
@include fontSize;
font-family: $fontFamily;
color: $fontColor;
font-weight: bold;
}
.footer-font-block {
// display flex
display: flex;
flex-direction: column;
// size
width: auto;
}

326
src/assets/scss/header.scss Normal file
View File

@ -0,0 +1,326 @@
@import './color.scss';
@import './breakpoint.scss';
$font-header-link: 'Noto Serif CJK TC -Bold';
$font-header-apply: 'Noto Serif CJK TC -Black';
@mixin headerWidth {
width: 88%;
@media screen and (max-width: $max-width-small-0) {
width: 92%;
}
}
@mixin headerHeight {
height: 62px;
@media screen and (max-width: $max-width-medium-1) {
height: 75px;
}
}
// -------------------------------------------
// header-logo
@mixin headerLogoPosition {
position: absolute;
left: 35px;
top: 50%;
@media screen and (max-width: $max-width-small-1) {
left: 20px;
}
@media screen and (max-width: $max-width-small-3) {
left: 15px;
}
}
@mixin headerLogoWidth {
width: 150px;
@media screen and (max-width: $max-width-small-1) {
width: 120px;
}
@media screen and (max-width: $max-width-small-2) {
width: 105px;
}
@media screen and (max-width: $max-width-small-3) {
width: 98px;
}
}
// -------------------------------------------
// header-links
@mixin headerLinksFontSize {
font-size: 12pt;
@media screen and (min-width: $max-width-big) {
font-size: 13.5pt;
}
@media screen and (min-width: $max-width-big-0) {
font-size: 15pt;
}
}
@mixin headerLinksWidth {
width: 600px;
@media screen and (min-width: $max-width-big) {
width: 630px;
}
@media screen and (min-width: $max-width-big-0) {
width: 680px;
}
}
@mixin headerLinksMarginRight {
margin-right: 92px;
@media screen and (max-width: $max-width-medium-0) {
margin-right: -35px;
}
}
@mixin headerLinksLiPadding {
padding: 22px 20px;
@media screen and (max-width: $max-width-medium-0) {
padding: 22px 8px;
}
}
// -------------------------------------------
// header-apply
@mixin headerApplyWidthAndHeight {
width: 92px;
height: 38px;
@media screen and (max-width: $max-width-medium-1) {
width: 85px;
height: 43px;
}
@media screen and (max-width: $max-width-small-1) {
width: 75px;
height: 40px;
}
@media screen and (max-width: $max-width-small-2) {
width: 65px;
height: 38px;
}
@media screen and (max-width: $max-width-small-3) {
width: 55px;
height: 35px;
}
}
@mixin headerApplyFontsize {
font-size: 13pt;
@media screen and (max-width: $max-width-medium-1) {
font-size: 12pt;
}
@media screen and (max-width: $max-width-small-1) {
font-size: 10pt;
}
@media screen and (max-width: $max-width-small-2) {
font-size: 9pt;
}
@media screen and (max-width: $max-width-small-3) {
font-size: 8pt;
}
}
// -------------------------------------------
// header-links--mobile
@mixin headerLinksMobilePosition {
position: relative;
left: 40%;
top: 12px;
@media screen and (max-width: $max-width-small-0) {
left: 35%;
}
@media screen and (max-width: $max-width-small-1) {
left: 25%;
}
@media screen and (max-width: $max-width-small-1) {
left: 26%;
}
}
@mixin headerLinksMobileSelectWidth {
width: 150px;
@media screen and (max-width: $max-width-small-0) {
width: 120px;
}
@media screen and (max-width: $max-width-small-1) {
width: 115px;
}
@media screen and (max-width: $max-width-small-2) {
width: 95px;
}
@media screen and (max-width: $max-width-small-3) {
width: 85px;
}
}
@mixin headerLinksMobileSelectFontsize {
font-size: 14pt;
@media screen and (max-width: $max-width-small-0) {
font-size: 13pt;
}
@media screen and (max-width: $max-width-small-2) {
font-size: 11pt;
}
@media screen and (max-width: $max-width-small-3) {
font-size: 9pt;
}
}
@mixin headerLinksMobileSelectPadding {
padding-left: 10px;
padding-bottom: 10px;
@media screen and (max-width: $max-width-small-0) {
padding-left: 3px;
padding-bottom: 10px;
}
@media screen and (max-width: $max-width-small-3) {
padding-bottom: 7px;
}
}
// ----------------------------------------------------------------------------------------------
.header {
z-index: 99;
position: relative;
top: 35px;
margin: 0 auto;
@include headerWidth;
@include headerHeight;
border-radius: 73px;
box-shadow: 0 6px 18px 0 rgba(0, 0, 255, 0.22);
background-color: $white;
&--sticky {
position: sticky;
z-index: 99;
margin-top: 60px;
}
&__left {
float: left;
width: 20%;
}
&-logo {
@include headerLogoPosition;
@include headerLogoWidth;
transform: translateY(-50%);
}
&__right {
float: right;
width: 80%;
}
&-links {
&--mobile {
@media screen and (min-width: $max-width-medium-1) {
display: none;
visibility: hidden;
}
@include headerLinksMobilePosition;
left: 40%;
select {
z-index: 99;
@include headerLinksMobileSelectWidth;
height: 60px;
@include headerLinksMobileSelectPadding;
font-family: $font-header-link;
@include headerLinksMobileSelectFontsize;
background-color: $white;
border: none;
border-bottom: 4px solid $indigo-blue;
&:focus {
border: none;
outline: none;
}
option {
text-align: center;
@include headerLinksMobileSelectFontsize;
}
}
select:focus ~ &-bg {
opacity: 1;
display: block;
transition: 0.3s linear;
}
&-bg {
z-index: 90;
opacity: 0;
display: none;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba($black, 0.5);
backdrop-filter: blur(3px);
}
}
@media screen and (max-width: $max-width-medium-1) {
display: none;
visibility: hidden;
}
font-family: $font-header-link;
float: right;
@include headerLinksWidth;
@include headerLinksMarginRight;
height: 100%;
height: 50px;
top: 6px;
ul {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
li {
float: left;
margin: 0;
padding: 0;
height: 100%;
display: block;
text-align: left;
@include headerLinksLiPadding;
a {
@include headerLinksFontSize;
color: $black;
padding-bottom: 15px;
}
}
}
}
&-link--active {
border-bottom: $indigo-blue solid 3.5px;
}
&-apply {
font-family: $font-header-apply;
@include headerApplyWidthAndHeight;
border-radius: 38px;
background-color: $indigo-blue;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
a {
@include headerApplyFontsize;
color: $white;
position: absolute;
top: 50%;
left: 40%;
transform: translateX(-35%) translateY(-50%);
}
}
}

478
src/assets/scss/home/home.scss Normal file
View File

@ -0,0 +1,478 @@
@import '../color.scss';
@import '../breakpoint.scss';
$font-home: 'Noto Serif CJK TC -SemiBold';
$font-home-h1: 'Noto Serif CJK TC -Bold';
$font-home-h2: 'Letter Gothic Std Bold';
$font-home-button: 'Noto Serif CJK TC -Black';
//default screen size width: 1440px
//section
@mixin sectionTitleHeight {
height: 583px;
@media screen and (min-width: $max-width-big) {
height: 635px;
}
@media screen and (min-width: $max-width-big-0) {
height: 700px;
}
@media screen and (max-width: $max-width-small-1) {
height: 535px;
}
@media screen and (max-width: $max-width-small-3) {
height: 500px;
}
}
@mixin sectionContentHeight {
height: 1900px;
@media screen and (min-width: $max-width-big) {
height: 2050px;
}
@media screen and (min-width: $max-width-big-0) {
height: 2150px;
}
@media screen and (max-width: $max-width-medium-1) {
height: 1950px;
}
}
// -------------------------------------------
//home__title
@mixin homeTitleFontsize {
font-size: 18pt;
@media screen and (min-width: $max-width-big) {
font-size: 22pt;
}
@media screen and (min-width: $max-width-big-0) {
font-size: 25pt;
}
@media screen and (max-width: $max-width-small-0) {
font-size: 17pt;
}
@media screen and (max-width: $max-width-small-1) {
font-size: 15pt;
}
@media screen and (max-width: $max-width-small-2) {
font-size: 13pt;
}
@media screen and (max-width: $max-width-small-3) {
font-size: 11pt;
}
}
@mixin homeTitleWidth {
width: 75%;
@media screen and (max-width: $max-width-big-1) {
width: 85%;
}
@media screen and (max-width: $max-width-small-1) {
width: 92%;
}
}
@mixin homeTitleTopicWidth {
width: 500px;
@media screen and (min-width: $max-width-big) {
width: 600px;
}
@media screen and (min-width: $max-width-big-0) {
width: 700px;
}
@media screen and (max-width: $max-width-small-0) {
width: 400px;
}
@media screen and (max-width: $max-width-small-1) {
width: 340px;
}
@media screen and (max-width: $max-width-small-2) {
width: 320px;
}
@media screen and (max-width: $max-width-small-3) {
width: 270px;
}
}
@mixin homeTitleBox2PDisplay {
&--p1 {
display: block;
}
&--p2 {
display: none;
}
@media screen and (max-width: $max-width-small-0) {
&--p1 {
display: none;
}
&--p2 {
display: block;
}
}
}
// -------------------------------------------
//home__info
@mixin homeInfoWidth {
width: 75%;
@media screen and (max-width: $max-width-big-1) {
width: 85%;
}
@media screen and (max-width: $max-width-small-1) {
width: 92%;
}
}
@mixin homeInfoPaddingBottom {
padding-bottom: 75px;
@media screen and (max-width: $max-width-medium-1) {
padding-bottom: 50px;
}
@media screen and (max-width: $max-width-small-3) {
padding-bottom: 30px;
}
}
@mixin homeInfoContainerWidth {
width: 75%;
@media screen and (max-width: $max-width-medium-0) {
width: 80%;
}
@media screen and (max-width: $max-width-medium-1) {
width: 85%;
}
@media screen and (max-width: $max-width-small-0) {
width: 90%;
}
@media screen and (max-width: $max-width-small-2) {
width: 94%;
}
@media screen and (max-width: $max-width-small-3) {
width: 98%;
}
}
@mixin homeInfoTittleModifiedWidth {
@media screen and (max-width: $max-width-medium-0) {
width: 90%;
}
@media screen and (max-width: $max-width-medium-1) {
width: 75%;
}
}
@mixin homeInfoTitleH1Fontsize {
font-size: 26pt;
@media screen and (min-width: $max-width-big) {
font-size: 30pt;
}
@media screen and (min-width: $max-width-big-0) {
font-size: 35pt;
}
@media screen and (max-width: $max-width-small-0) {
font-size: 22pt;
}
@media screen and (max-width: $max-width-small-1) {
font-size: 20pt;
}
@media screen and (max-width: $max-width-small-1) {
font-size: 18pt;
}
}
@mixin homeInfoTitleH2Fontsize {
&--small {
font-size: 19pt;
}
&--mid {
font-size: 23pt;
}
&--big {
font-size: 31pt;
}
@media screen and (min-width: $max-width-big) {
&--small {
font-size: 22pt;
}
&--mid {
font-size: 27pt;
}
&--big {
font-size: 35pt;
}
}
@media screen and (min-width: $max-width-big-0) {
&--small {
font-size: 26pt;
}
&--mid {
font-size: 32pt;
}
&--big {
font-size: 40pt;
}
}
@media screen and (max-width: $max-width-medium-0) {
&--small {
font-size: 14pt;
}
&--mid {
font-size: 17pt;
}
&--big {
font-size: 24pt;
}
}
@media screen and (max-width: $max-width-small-0) {
&--small {
font-size: 13pt;
}
&--mid {
font-size: 15pt;
}
&--big {
font-size: 21pt;
}
}
@media screen and (max-width: $max-width-small-1) {
&--big {
font-size: 16pt;
}
}
@media screen and (max-width: $max-width-small-2) {
&--small {
font-size: 11pt;
}
}
@media screen and (max-width: $max-width-small-2) {
&--small {
font-size: 9pt;
}
&--mid {
font-size: 12pt;
}
&--big {
font-size: 14pt;
}
}
}
@mixin homeInfoParagraphPadding {
padding-top: 30px;
@media screen and (max-width: $max-width-small-1) {
padding-top: 20px;
}
}
@mixin homeInfoParagraphFontsize {
font-size: 12pt;
@media screen and (min-width: $max-width-big) {
font-size: 15pt;
}
@media screen and (min-width: $max-width-big-0) {
font-size: 18pt;
}
@media screen and (max-width: $max-width-small-0) {
font-size: 11pt;
}
@media screen and (max-width: $max-width-small-3) {
font-size: 10pt;
}
}
@mixin homeInfoButtonBox {
height: 50px;
width: 245px;
margin-top: 40px;
@media screen and (min-width: $max-width-big) {
transform: scale(1.2) translateX(8%) translateY(20%);
}
@media screen and (min-width: $max-width-big-0) {
transform: scale(1.4) translateX(14%) translateY(25%);
}
@media screen and (max-width: $max-width-medium-1) {
transform: scale(1.2) translateX(8%) translateY(5%);
}
@media screen and (max-width: $max-width-small-1) {
transform: scale(1.1) translateX(5%) translateY(5%);
}
@media screen and (max-width: $max-width-small-1) {
transform: scale(0.9) translateX(-6%) translateY(-20%);
}
}
//home__info <img>
@mixin homeInfoImgWidth {
width: 120px;
@media screen and (min-width: $max-width-big) {
width: 130px;
}
@media screen and (min-width: $max-width-big-0) {
width: 150px;
}
@media screen and (max-width: $max-width-medium-0) {
width: 110px;
}
@media screen and (max-width: $max-width-small-1) {
width: 90px;
}
@media screen and (max-width: $max-width-small-2) {
width: 80px;
}
@media screen and (max-width: $max-width-small-3) {
width: 70px;
}
}
@mixin homeInfoSquareImgTranslate {
transform: translateX(-130%);
@media screen and (max-width: $max-width-medium-0) {
transform: translateX(-110%);
}
}
@mixin homeInfoAppleImgTranslate {
transform: translateX(150%) translateY(-12%);
@media screen and (max-width: $max-width-medium-0) {
transform: translateX(100%) translateY(-12%);
}
@media screen and (max-width: $max-width-small-2) {
transform: translateX(90%) translateY(-12%);
}
}
// ----------------------------------------------------------------------------------------------
.section {
&-title {
margin-top: 20px;
@include sectionTitleHeight;
}
&-content {
@include sectionContentHeight;
}
}
.home {
font-family: $font-home;
position: relative;
&__title {
@include homeTitleWidth;
text-align: center;
margin: 0 auto;
padding-top: 10px;
position: relative;
&-box1 {
margin: 0 auto;
margin-top: 50px;
margin-bottom: 20px;
height: 80px;
width: 100%;
p {
@include homeTitleFontsize;
}
}
&-topic {
margin: 0 auto;
@include homeTitleTopicWidth;
}
&-box2 {
text-align: center;
height: 80px;
width: 100%;
margin: 0 auto;
margin-top: 80px;
p {
@include homeTitleFontsize;
}
@include homeTitleBox2PDisplay;
}
}
&__info {
@include homeInfoWidth;
@include homeInfoPaddingBottom;
margin: 0 auto;
position: relative;
&-container {
@include homeInfoContainerWidth;
margin: 0 auto;
}
&-title {
margin: 0 auto;
position: relative;
h1 {
@include homeInfoTitleH1Fontsize;
font-family: $font-home-h1;
padding-top: 25px;
}
h2 {
font-family: $font-home-h2;
padding-top: 25px;
}
&-h2 {
@include homeInfoTitleH2Fontsize;
}
&--1 {
float: right;
width: 100%;
@include homeInfoTittleModifiedWidth;
}
&--2 {
float: left;
width: 80%;
@include homeInfoTittleModifiedWidth;
}
}
&-paragraph {
clear: both;
@include homeInfoParagraphPadding;
p {
@include homeInfoParagraphFontsize;
line-height: 33px;
a {
text-decoration: underline;
color: $indigo-blue;
}
}
}
&-buttonsBox {
@include homeInfoButtonBox;
}
}
&-button {
font-size: 12.5pt;
font-family: $font-home-button;
position: relative;
top: 15px;
color: $white;
background-color: $indigo-blue;
padding: 6px 17px 8px 17px;
border-radius: 32px;
box-shadow: 0 3px 10px 0 rgba(0, 0, 255, 0.18);
margin-right: 20px;
}
&-squareImg {
position: absolute;
left: 0;
@include homeInfoImgWidth;
@include homeInfoSquareImgTranslate;
}
&-appleImg {
position: absolute;
top: 0;
right: 0;
@include homeInfoImgWidth;
@include homeInfoAppleImgTranslate;
}
&-sponsorsImg {
position: absolute;
bottom: 0;
}
}

9
src/assets/scss/news/header.scss
View File

@ -108,7 +108,6 @@ $fontFamily: Noto Sans TC, monospace;
border-radius: 24px;
color: $white;
background: $mid-blue;
font-size: 14pt;
font-weight: bold;
@ -149,6 +148,12 @@ $fontFamily: Noto Sans TC, monospace;
}
}
}
.cfp-body-gray {
background: #5F7A95;
}
.cfp-body-blue {
background: $mid-blue;
}
@include lg {
#news-header {
@ -240,7 +245,7 @@ $fontFamily: Noto Sans TC, monospace;
border-radius: 24px;
color: $white;
background: $mid-blue;
//background: $mid-blue;
font-weight: bold;
font-size: 1em;

113
src/assets/scss/news/navbar.scss
View File

@ -2,19 +2,32 @@
@import '../font';
$mobileView: 1024px;
$fixedTopPadding: 25px;
$fixedRightPadding: 50px;
#news-nav {
font-size: 13pt;
line-height: 1em;
z-index: 2;
// prevent slow animation update
position: sticky;
top: 25px;
top: $fixedTopPadding;
&.fixed {
position: fixed;
top: 25px;
right: 50px;
top: $fixedTopPadding;
right: $fixedRightPadding;
.news-nav.animating {
// from section to fixed
animation-name: move-to-side;
}
}
&.returning {
// prevent navbar overlap header
position: sticky;
}
a {
@ -32,15 +45,23 @@ $mobileView: 1024px;
background: white;
z-index: 5;
transform: translateX(0);
transition: transform 0.5s ease-in-out;
margin-left: 25px;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
&.animating {
// from fixed to section
animation-name: move-to-section;
}
&-item {
margin: 0 8px;
padding: 5px 1em;
color: $mid-blue;
font-family: $fontFamily;
cursor: point;
cursor: pointer;
border-right: 3px solid $sky-blue;
&.active {
@ -72,25 +93,36 @@ $mobileView: 1024px;
}
.nav-control-button {
color: $mid-blue;
position: fixed;
z-index: 5;
top: 25px;
right: 50px;
border-radius: 5px;
border: none;
font-size: 24px;
position: flex;
display: flex;
flex-direction: column;
position: fixed;
top: $fixedTopPadding;
right: $fixedRightPadding;
z-index: 5;
padding: 0 15px;
width: 55px;
border: none;
border-radius: 5px;
color: $mid-blue;
font-size: 24px;
background-color: white;
box-shadow: -2px 0 15px $mid-blue;
padding: 0 15px;
cursor: pointer;
p {
text-align: end;
}
}
// narrower padding
@media screen and (max-width: 1365px) {
.news-nav.animating {
animation-name: slide-to-section;
}
&.fixed .news-nav.animating {
animation-name: slide-to-side;
}
}
@media screen and (max-width: $mobileView) {
.nav-control-button {
@ -101,14 +133,57 @@ $mobileView: 1024px;
text-align: left;
padding: 0 10px;
}
.news-nav.animating,
&.fixed .news-nav.animating {
animation-name: none;
}
}
}
@media screen and (max-width: $mobileView) {
#news-nav,
#news-nav.fixed {
position: fixed;
top: 25px;
right: 20px;
}
}
@keyframes move-to-section {
0% {
transform: translateX(280px - $fixedRightPadding);
}
100% {
transform: translateX(0);
}
}
@keyframes move-to-side {
0% {
transform: translateX(-(280px - $fixedRightPadding));
}
100% {
transform: translateX(0);
}
}
// for narrower padding
@keyframes slide-to-section {
0% {
transform: translateX(120px - $fixedRightPadding);
}
100% {
transform: translateX(0);
}
}
@keyframes slide-to-side {
0% {
transform: translateX(-(120px - $fixedRightPadding));
}
100% {
transform: translateX(0);
}
}

8
src/assets/scss/news/schedule.scss
View File

@ -27,7 +27,7 @@
h1 {
font-size: 36pt;
line-height: 1.45em;
margin: 15px 0;
padding: 15px 0;
}
h2 {
@ -104,6 +104,10 @@
#news-schedule {
margin: 0 100px;
h1 {
font-size: 28pt;
}
#presentation-example,
#espresso-example {
margin-bottom: unset;
@ -137,7 +141,7 @@
h1,
h2,
h3 {
margin: 0;
padding: 0;
}
#schedule {

601
src/assets/scss/ocfp/agenda.scss Normal file
View File

@ -0,0 +1,601 @@
// import google font
// no need to import font; such font has been imported in App.vue
// @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
$fontFamily-NotoSansTC: 'Noto Sans TC', sans-serif;
$fontFamily: 'Noto Sans TC', sans-serif;
// Color
// dont define private color if these are common ones
@import '../color';
// $white: #ffffff;
// $mid-blue: #226bb4;
//Screen breakpoint
$max-width-big-0: 1800px;
$max-width-big: 1500px;
$max-width-medium-0: 1100px;
$max-width-medium-1: 900px;
$max-width-small-0: 750px;
$max-width-small-1: 500px;
$max-width-small-2: 410px;
$max-width-small-3: 360px;
// .info-container
@mixin infoContainer() {
max-width: 80%;
@media screen and (max-width: 1365px) {
margin: 0 120px;
}
@media screen and (max-width: 1023px) {
margin: 0 100px;
}
@media screen and (max-width: $max-width-small-0) {
margin: 0;
max-width: 100%;
padding-left: 40px;
padding-right: 40px;
}
}
// .info-section
@mixin sectionH1Fontsize() {
font-size: 32pt;
@media only screen and (min-width: $max-width-big-0) {
font-size: 36pt;
margin-bottom: 50px;
}
@media only screen and (max-width: $max-width-medium-0) {
font-size: 28pt;
}
@media only screen and (max-width: $max-width-medium-1) {
font-size: 24pt;
}
@media only screen and (max-width: $max-width-small-0) {
font-size: 21pt;
}
@media only screen and (max-width: $max-width-small-1) {
font-size: 19pt;
}
}
@mixin sectionH2Fontsize() {
font-size: 24pt;
@media only screen and (min-width: $max-width-big-0) {
font-size: 27pt;
}
@media only screen and (max-width: $max-width-medium-0) {
font-size: 22pt;
}
@media only screen and (max-width: $max-width-medium-1) {
font-size: 19pt;
}
@media only screen and (max-width: $max-width-small-0) {
font-size: 18pt;
}
@media only screen and (max-width: $max-width-small-1) {
font-size: 18pt;
}
}
//.info-section__content
@mixin sectionContentParagraphWidth() {
// width: 92%;
@media only screen and (max-width: $max-width-small-0) {
width: 100%;
margin-left: 0;
}
@media only screen and (max-width: $max-width-small-1) {
width: 100%;
margin-left: 0;
}
}
@mixin sectionContentParagraphFontsize() {
font-size: 15pt;
@media only screen and (max-width: $max-width-big-0) {
font-size: 14pt;
}
@media only screen and (max-width: $max-width-medium-0) {
font-size: 13pt;
}
@media only screen and (max-width: $max-width-medium-1) {
font-size: 12pt;
}
@media only screen and (max-width: $max-width-small-0) {
font-size: 11pt;
}
@media only screen and (max-width: $max-width-small-1) {
font-size: 10pt;
}
}
@mixin ulPadding {
padding: 0 0 0 20px;
@media only screen and (max-width: $max-width-big) {
padding: 0 0 0 5px;
}
@media only screen and (max-width: $max-width-medium-1) {
padding: 0;
}
}
@mixin sectionContentSubExtendWidth {
width: 107%;
@media only screen and (max-width: $max-width-small-0) {
width: 100%;
}
}
// .info-kind
@mixin kind() {
@media only screen and (min-width: $max-width-big-0) {
padding-bottom: 330px;
&__itemBox {
height: 305px;
padding-top: 0;
padding-bottom: 0;
&-title {
margin-top: 30px;
}
&-text {
padding-top: 8px;
}
}
}
@media only screen and (max-width: $max-width-small-0) {
width: 100%;
&__itemBox {
width: 100%;
height: 201px;
margin-bottom: 20px;
margin-right: 0;
padding: 0;
&-title {
margin-top: 20px;
}
&-text {
width: 86%;
}
}
}
}
@mixin kindTitleFontsize() {
font-size: 27pt;
@media only screen and (max-width: $max-width-big-0) {
font-size: 21pt;
}
@media only screen and (max-width: $max-width-big) {
font-size: 19pt;
}
@media only screen and (max-width: $max-width-medium-0) {
font-size: 15pt;
}
@media only screen and (max-width: $max-width-medium-1) {
font-size: 12pt;
}
@media only screen and (max-width: $max-width-small-0) {
font-size: 21pt;
}
@media only screen and (max-width: $max-width-small-1) {
font-size: 15pt;
}
}
@mixin kindTextFontsize() {
font-size: 15pt;
@media only screen and (max-width: $max-width-big-0) {
font-size: 13pt;
}
@media only screen and (max-width: $max-width-big) {
font-size: 12pt;
}
@media only screen and (max-width: $max-width-medium-0) {
font-size: 11pt;
}
@media only screen and (max-width: $max-width-medium-1) {
font-size: 9pt;
}
@media only screen and (max-width: $max-width-small-0) {
font-size: 13pt;
}
@media only screen and (max-width: $max-width-small-1) {
font-size: 11pt;
}
}
// .info-qa
@mixin qaLayout {
width: 86%;
margin-bottom: 120px;
@media only screen and (max-width: $max-width-big) {
width: 90%;
margin-bottom: 25px;
}
@media only screen and (max-width: $max-width-small-0) {
width: 100%;
margin-bottom: 0px;
}
}
@mixin qaTitleFontsize() {
font-size: 18pt;
@media only screen and (max-width: $max-width-medium-0) {
font-size: 16pt;
}
@media only screen and (max-width: $max-width-medium-1) {
font-size: 14pt;
}
@media only screen and (max-width: $max-width-small-0) {
font-size: 11pt;
}
@media only screen and (max-width: $max-width-small-1) {
font-size: 9pt;
}
@media only screen and (max-width: $max-width-small-2) {
font-size: 8pt;
}
@media only screen and (max-width: $max-width-small-3) {
font-size: 7pt;
}
}
@mixin qaTextFontsize() {
font-size: 15pt;
@media only screen and (max-width: $max-width-medium-1) {
font-size: 14pt;
}
@media only screen and (max-width: $max-width-medium-0) {
font-size: 12pt;
}
@media only screen and (max-width: $max-width-small-0) {
font-size: 11pt;
}
@media only screen and (max-width: $max-width-small-1) {
font-size: 9pt;
}
@media only screen and (max-width: $max-width-small-2) {
font-size: 8pt;
}
@media only screen and (max-width: $max-width-small-3) {
font-size: 6.5pt;
}
}
@mixin qaTitleHeight {
height: 57px;
@media only screen and (max-width: $max-width-small-0) {
height: 45px;
}
@media only screen and (max-width: $max-width-small-1) {
height: 36px;
}
@media only screen and (max-width: $max-width-small-2) {
height: 32px;
}
@media only screen and (max-width: $max-width-small-3) {
height: 28px;
}
}
@mixin qaTitleMarginTop {
margin-top: 15px;
@media only screen and (max-width: $max-width-small-1) {
margin-top: 10px;
}
@media only screen and (max-width: $max-width-small-2) {
margin-top: 9px;
}
}
@mixin qaTextMarginTop {
margin-top: 25px;
@media only screen and (max-width: $max-width-small-1) {
margin-top: 15px;
}
}
@mixin qaQdisplay {
margin-left: 25px;
&::before {
content: "Q：";
}
@media only screen and (max-width: $max-width-medium-1) {
margin-left: 18px;
&::before {
content: "";
}
}
}
@mixin qaIconSize {
height: 25px;
width: 30px;
@media only screen and (max-width: $max-width-medium-1) {
height: 16px;
width: 19px;
}
}
@mixin qaIcon {
background-image: url("../../assets/images/CFP/Polygon-big.svg");
@media only screen and (max-width: $max-width-medium-1) {
background-image: url("../../assets/images/CFP/Polygon-small.svg");
}
}
@mixin sitconImg {
float: right;
margin-top: 382px;
margin-right: 15%;
margin-bottom: 30px;
@media only screen and (max-width: $max-width-big) {
margin-top: 0;
margin-right: 80%;
}
@media only screen and (max-width: $max-width-medium-0) {
width: 108px;
height: 135px;
}
@media only screen and (max-width: $max-width-small-0) {
margin-right: 15%;
}
@media only screen and (max-width: $max-width-small-1) {
width: 86px;
height: 107px;
}
@media only screen and (max-width: $max-width-small-2) {
width: 69px;
height: 86px;
}
@media only screen and (max-width: $max-width-small-3) {
width: 55px;
height: 68px;
}
}
//cfp-sub-information <subInformation>
.info {
position: relative;
width: 100%;
font-family: $fontFamily;
float: left;
&-container {
@include infoContainer();
margin: 0 280px;
// float: left;
}
&-section {
float: left;
clear: both;
width: 100%;
h1 {
@include sectionH1Fontsize();
height: 70px;
font-weight: 900;
font-stretch: normal;
font-style: normal;
line-height: 1.9;
letter-spacing: normal;
text-align: left;
color: $mid-blue;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
}
&__content {
width: 100%;
p {
@include sectionContentParagraphWidth();
@include sectionContentParagraphFontsize();
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 2.1;
letter-spacing: 0.2px;
text-align: left;
color: $mid-blue;
}
strong {
font-weight: 900;
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
@include ulPadding();
margin: 0;
span {
display: inline-block;
height: 4px;
width: 4px;
transform: translate(-200%, -150%);
background-color: $mid-blue;
border-radius: 50%;
}
}
}
&--sub {
h2 {
@include sectionH2Fontsize();
height: 60px;
font-weight: 900;
font-stretch: normal;
font-style: normal;
line-height: 2.2;
letter-spacing: normal;
text-align: left;
color: $mid-blue;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
}
&-extend {
@include sectionContentSubExtendWidth();
}
}
}
}
&-sitcon-img {
&__box {
float: right;
}
@include sitconImg();
}
//cfp-sub-information <subInformation> kind, qa components
&-kind {
width: 100%;
margin-top: 45px;
padding-bottom: 300px;
&__itemBox {
float: left;
padding: 25px 1.5% 35px 1.5%;
border-radius: 13px;
background-color: $mid-blue;
width: 30%;
&:not(:last-child) {
margin-right: 5%;
}
&-title {
@include kindTitleFontsize();
width: 100%;
color: $white;
display: inline-block;
text-align: center;
font-weight: 900;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin-top: 25px;
}
&-text {
width: 100%;
height: 172px;
margin: 0 auto;
text-align: left;
p {
@include kindTextFontsize();
margin: 10px auto;
color: $white;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 2.1;
letter-spacing: 0.2px;
}
strong {
font-weight: 900;
}
}
}
//RWD for kind
@include kind();
}
&-qa {
@include qaLayout();
margin-bottom: 120px;
float: left;
// margin: 0 auto;
&__itemBox {
border-radius: 29px;
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
background-color: $white;
margin: 0 0 30px 0;
position: relative;
&-title {
@include qaTitleHeight();
display: block;
width: 100%;
&:hover {
cursor: pointer;
}
p {
@include qaTitleFontsize();
@include qaTitleMarginTop();
@include qaQdisplay();
display: inline-block;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.25;
letter-spacing: normal;
text-align: left;
color: $mid-blue;
}
span {
@include qaIcon();
background-repeat: no-repeat;
position: absolute;
top: 15px;
top: 50%;
transform: translateY(-45%);
right: 3.5%;
}
}
&-input {
position: absolute;
opacity: 0;
cursor: pointer;
}
&-input:checked ~ &-text {
display: block;
width: 88%;
margin: 0 auto;
padding-bottom: 20px;
p {
width: 100%;
@include qaTextFontsize();
}
}
&-input:checked ~ &-title {
p {
@include qaTextMarginTop();
}
span {
transform: rotate(180deg);
position: absolute;
top: 20px;
right: 3.5%;
}
}
&-text {
display: none;
}
}
&-icon {
@include qaIconSize();
}
}
}

34
src/assets/scss/ocfp/card.scss Normal file
View File

@ -0,0 +1,34 @@
@import '../breakpoint';
@import '../color';
.agenda.card:not(.container) {
a.image.container {
display: inline-block;
width: 100%;
line-height: 0; // prevent background overflow
background-color: #ffffff;
border-radius: 11px;
box-shadow: 0 3px 15px 0 rgba(89, 120, 206, 0.56);
// smooth transition from hover -> default state
will-change: transform;
transform: scale(1);
transition-duration: 0.25s;
img {
border-radius: 11px;
width: 100%;
}
&:hover {
transform: scale(1.04);
transition-duration: 0.25s;
}
}
p.description {
line-height: 1.55em;
text-align: center;
font-weight: bold;
}
}

362
src/assets/scss/ocfp/header.scss Normal file
View File

@ -0,0 +1,362 @@
@import '../hyperpoint';
@import '../color';
$fontFamily: Noto Sans TC, monospace;
// desktop mode
#ocfp-header {
padding: 72px 280px;
* {
font-family: "Noto Sans TC";
}
.top-bar {
position: relative;
// background: red; // debug
height: 60px;
.return-wrapper {
// location
position: absolute;
left: -30px;
bottom: -4px;
.shape-wrapper {
background: $white;
border-radius: 12px;
-webkit-box-shadow: -18px 18px 0px -6px $mid-blue,
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -18px 18px 0px -6px $mid-blue,
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: -18px 18px 0px -6px $mid-blue,
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
@keyframes jump {
0% {
position: relative;
bottom: 0px;
}
50% {
position: relative;
bottom: 20px;
}
100% {
position: relative;
bottom: 0px;
}
}
&:hover {
animation: jump 0.6s ease-in 0s infinite reverse;
}
.text-wrapper {
width: 68px;
height: 68px;
line-height: 68px;
text-align: center;
color: $mid-blue;
font-weight: bold;
font-size: 16pt;
}
}
}
@media screen and (min-width: 1023px) {
.contribute-wrapper {
position:absolute;
background-color: #ffffff;
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
transition-duration: 0.2s;
color: #226bb4;
width: 126px;
height: 50px;
border-radius: 8px;
top: 20px;
right: 25px;
.btn-contribute {
padding: 0.85em 1.25em;
font-size: 1.1em;
font-weight: 900;
border: none;
position: absolute;
color:$mid-blue;
top:0;
bottom:0;
margin:auto;
width: 100%;
&:hover {
background-color: #226bb4;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19);
color: white;
border-radius: 8px;
}
}
}
}
.title-wrapper {
.svg-cfp-news {
height: 60px;
width: auto;
}
}
}
.cfp-body {
padding: 40px 48px;
margin-top: 54px;
border-radius: 24px;
color: $white;
font-size: 14pt;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: center;
.spot-wrapper {
margin-bottom: 2.25em;
h1 {
font-size: 26pt;
margin-bottom: 1em;
}
.countdown {
line-height: 1.5;
}
}
.time-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
h2 {
height: 24pt;
}
p {
font-size: 1.44em;
}
.tilde-wrapper {
margin-right: 0.85em;
}
}
}
}
.cfp-body-gray {
background: #5F7A95;
}
.cfp-body-blue {
background: $mid-blue;
}
@include lg {
#ocfp-header {
padding-left: 120px;
padding-right: 120px;
}
}
// mobile mode
@include md {
#ocfp-header {
font-size: 14pt;
padding: 72px 100px;
.top-bar {
position: initial;
height: 5em;
border-radius: 2.5em;
padding-left: 2.5em;
padding-right: 2.5em;
background: $white;
-webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: row;
align-items: center;
.return-wrapper {
// location
position: initial;
flex: 1;
.shape-wrapper {
background: $white;
border-radius: 12px;
-webkit-box-shadow: -13px 13px 0px -6px $mid-blue,
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -13px 13px 0px -6px $mid-blue,
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: -13px 13px 0px -6px $mid-blue,
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
.text-wrapper {
width: 3em;
height: 3em;
line-height: 3em;
text-align: center;
color: $mid-blue;
font-weight: bold;
font-size: 1em;
}
}
}
.title-wrapper {
flex: 1;
.svg-cfp-news {
height: 2.25em;
width: auto;
}
}
.contribute-wrapper {
display: initial;
flex: 1;
text-align: end;
.btn-contribute {
display: inline-block;
border-radius: 6px;
background: $mid-blue;
color: $white;
font-weight: 900;
padding: 0.5em;
font-size: 1.2em;
}
}
}
.cfp-body {
padding-top: 2em;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 3.5em;
margin-top: 54px;
border-radius: 24px;
color: $white;
//background: $mid-blue;
font-weight: bold;
font-size: 1em;
.spot-wrapper {
h1 {
font-size: 2em;
margin-bottom: 1em;
}
margin-bottom: 2.25em;
}
.time-wrapper {
display: flex;
flex-direction: column;
h2 {
height: initial;
}
p {
font-size: 1.25em;
}
.start-time-wrapper {
h2,
p {
margin-bottom: 1.25em;
}
}
.end-time-wrapper {
h2 {
margin-bottom: 1.25em;
}
}
.tilde-wrapper {
display: none;
}
}
}
}
}
@include sm {
#ocfp-header {
font-size: 11pt;
padding: 60px 40px;
.cfp-body {
font-size: 14pt;
}
}
}
// a 540px break point will be better = =
@media screen and (max-width: 539px) {
#ocfp-header {
font-size: 9pt;
padding: 36px 18px;
.top-bar {
height: 4em;
border-radius: 2em;
padding-left: 1.66em;
padding-right: 1em;
-webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
.return-wrapper {
.shape-wrapper {
.text-wrapper {
width: 2.4em;
height: 2.4em;
line-height: 2.4em;
text-align: center;
color: $mid-blue;
font-weight: bold;
font-size: 1em;
}
}
}
.title-wrapper {
flex: 1;
.svg-cfp-news {
height: 1.85em;
width: auto;
}
}
.contribute-wrapper {
display: initial;
flex: 1;
text-align: end;
.btn-contribute {
display: inline-block;
border-radius: 6px;
background: $mid-blue;
color: $white;
font-weight: 900;
padding: 0.5em;
font-size: 1.2em;
}
}
}
.cfp-body {
font-size: 12pt;
}
}
}

189
src/assets/scss/ocfp/navbar.scss Normal file
View File

@ -0,0 +1,189 @@
@import '../color';
@import '../font';
$mobileView: 1024px;
$fixedTopPadding: 25px;
$fixedRightPadding: 50px;
#ocfp-nav {
font-size: 13pt;
line-height: 1em;
z-index: 2;
// prevent slow animation update
position: sticky;
top: $fixedTopPadding;
&.fixed {
position: fixed;
top: $fixedTopPadding;
right: $fixedRightPadding;
.news-nav.animating {
// from section to fixed
animation-name: move-to-side;
}
}
&.returning {
// prevent navbar overlap header
position: sticky;
}
a {
text-decoration: none;
}
.news-nav {
float: right;
text-align: end;
display: flex;
flex-direction: column;
border-radius: 15px;
padding: 10px;
box-shadow: 3px 3px 15px $mid-blue;
background: white;
z-index: 5;
margin-left: 25px;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
&.animating {
// from fixed to section
animation-name: move-to-section;
}
&-item {
margin: 0 8px;
padding: 5px 1em;
color: $mid-blue;
font-family: $fontFamily;
cursor: pointer;
border-right: 3px solid $sky-blue;
&.active {
font-weight: 900;
border-right: 3px solid $mid-blue;
}
}
&-button {
color: $mid-blue;
border: none;
background: transparent;
padding: 0.5em 0;
font-size: 20px;
cursor: pointer;
&:focus {
outline: none;
}
}
&-contribute-button {
display: inline-block;
border-radius: 6px;
background: $mid-blue;
color: $white;
font-weight: 900;
padding: 0.5em 1em;
font-size: 1.2em;
margin: 1em auto;
}
}
.nav-control-button {
display: flex;
flex-direction: column;
position: fixed;
top: $fixedTopPadding;
right: $fixedRightPadding;
z-index: 5;
padding: 0 15px;
width: 55px;
border: none;
border-radius: 5px;
color: $mid-blue;
font-size: 24px;
background-color: white;
box-shadow: -2px 0 15px $mid-blue;
cursor: pointer;
p {
text-align: end;
}
}
// narrower padding
@media screen and (max-width: 1365px) {
.news-nav.animating {
animation-name: slide-to-section;
}
&.fixed .news-nav.animating {
animation-name: slide-to-side;
}
}
@media screen and (max-width: $mobileView) {
.nav-control-button {
top: 250px;
right: 0;
width: 35px;
font-size: 16px;
text-align: left;
padding: 0 10px;
}
.news-nav.animating,
&.fixed .news-nav.animating {
animation-name: none;
}
}
}
@media screen and (max-width: $mobileView) {
#ocfp-nav.fixed {
right: 20px;
}
}
@keyframes move-to-section {
0% {
transform: translateX(280px - $fixedRightPadding);
}
100% {
transform: translateX(0);
}
}
@keyframes move-to-side {
0% {
transform: translateX(-(280px - $fixedRightPadding));
}
100% {
transform: translateX(0);
}
}
// for narrower padding
@keyframes slide-to-section {
0% {
transform: translateX(120px - $fixedRightPadding);
}
100% {
transform: translateX(0);
}
}
@keyframes slide-to-side {
0% {
transform: translateX(-(120px - $fixedRightPadding));
}
100% {
transform: translateX(0);
}
}

155
src/assets/scss/ocfp/schedule.scss Normal file
View File

@ -0,0 +1,155 @@
@import "../breakpoint";
@import "../color";
@import "../font";
// No need to import font; the fonts have been imported in App.vue
// @import '@/assets/scss/font';
#ocfp-schedule {
position: relative;
max-width: 80vw;
margin: 0 280px;
font-family: $fontFamily;
font-size: 15pt;
line-height: 2.1em;
letter-spacing: 0.2px;
color: $mid-blue;
* {
position: relative;
}
a {
color: $mid-blue;
text-decoration: underline;
}
h1 {
font-size: 36pt;
line-height: 1.45em;
padding: 15px 0;
}
h2 {
font-size: 27pt;
line-height: 2em;
}
h3 {
font-size: 18pt;
line-height: 1.25em;
}
h1,
h2,
h3 {
font-weight: 900;
}
ul {
li {
&::before {
content: "•";
margin: 2px;
line-height: 42px;
}
}
}
section:not(:last-of-type),
article:not(:last-of-type) {
margin-bottom: 55px;
}
#theme-example {
> p {
padding: 20px 0;
}
}
#theme-example ~ p {
padding: 20px 0;
}
#example > p {
word-wrap: break-word;
}
#presentation-example,
#espresso-example {
> p {
padding-bottom: 40px;
}
.agenda.card.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 62px;
row-gap: 40px;
}
}
}
#code-of-conduct a {
font-weight: 900;
}
@media screen and (max-width: 1365px) {
#ocfp-schedule {
margin: 0 120px;
}
}
@media screen and (max-width: 1023px) {
#ocfp-schedule {
margin: 0 100px;
h1 {
font-size: 28pt;
}
#presentation-example,
#espresso-example {
margin-bottom: unset;
.agenda.card.container {
grid-template-columns: repeat(2, 1fr);
column-gap: 42px;
row-gap: 30px;
}
}
}
}
@media screen and (max-width: $max-width-small-0) {
#news-schedule {
margin: 0;
max-width: 100vw;
padding: 0 40px;
font-size: 11pt;
h1,
h2 {
font-size: 20pt;
line-height: 2.69em;
}
h3 {
font-size: 15pt;
line-height: 1.5em;
}
h1,
h2,
h3 {
padding: 0;
}
#schedule {
margin-bottom: unset;
}
#theme-example ~ p {
padding: 15px 0;
}
}
}

47
src/assets/scss/ocfp/topic.scss Normal file
View File

@ -0,0 +1,47 @@
@import '../breakpoint';
@import '../color';
.topic {
padding: 30px 0;
position: relative;
display: grid;
grid-template-columns: 256px min-content 1fr;
h3.title {
line-height: 1.67em;
}
.divider {
width: 0;
height: 100%;
border-left: 2px $mid-blue solid;
margin: 0 37px;
}
.title,
.description {
display: flex;
align-items: center;
}
}
@include md {
.topic {
grid-template-columns: 1fr;
padding: 20px 0;
h3.title {
br[data-delimiter='：'] {
display: none;
}
}
.divider {
width: 100%;
height: 0;
border-bottom: none;
border-top: 2px $mid-blue solid;
margin: 15px 0;
}
}
}

89
src/assets/scss/sponsor.scss Normal file
View File

@ -0,0 +1,89 @@
@import './breakpoint';
$fontFamily: "Noto Serif CJK TC -SemiBold";
@mixin RWDFontSize {
font-size: 14pt;
@media screen and (max-width: $max-width-medium-0) {
font-size: 12pt;
}
@media screen and (max-width: $max-width-small-0) {
font-size: 10pt;
}
@media screen and (max-width: $max-width-small-2) {
font-size: 8pt
}
}
@mixin RWDWidth {
width: 60%;
@media screen and (max-width: $max-width-medium-0) {
width: 70%;
}
@media screen and (max-width: $max-width-small-0) {
width: 85%;
}
@media screen and (max-width: $max-width-small-2) {
width: 90%;
}
}
#sponsor {
line-height: 2em;
font-family: $fontFamily;
h2 {
line-height: normal;
font-size: 36pt;
color: #4e4e4e;
}
.main-container {
@include RWDWidth;
margin: 0 auto;
padding-top: 100px;
padding-bottom: 240px;
}
.info-wrapper {
.content-wrapper {
display: flex;
flex-direction: row;
.info-left-button-wrapper {
// padding-right: 10%;
}
.info-content {
@include RWDFontSize;
p:not(:first-child) {
margin-top: 3em;
}
}
.info-right-button-wrapper {
// padding-left: 10%;
}
}
.button-wrapper {
margin: 3em;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
.button {
color: white;
background: #1060ff;
margin: 15px 30px;
padding: 0.33em 1em;
border-radius: 9487px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
}
}
.deep-ploughing {
.image-wrapper {
margin-top: 8em;
display: flex;
flex-direction: row;
justify-content: space-between;
img {
width: 307px;
height: 251px;
}
}
}
}

17
src/components/BlockTitle.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div class="block title">
<span class="text">{{ text }}</span>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class BlockTitle extends Vue {
@Prop({ default: '' }) private text!: string;
}
</script>
<style lang="scss">
@import '@/assets/scss/blocktitle';
</style>

27
src/components/CFP/Header.vue
View File

@ -55,11 +55,26 @@
</div>
</div>
<div class="cfp-news">
<a href="/2021/cfp/news" rel="noopener">
<div class="btn-news-wrapper">
<img src="~@/assets/images/burnfont/btn-news.svg" id="svg-news" />
</div>
</a>
<div class="cfp-news__btn cfp-news__btn--1">
<a href="/2021/cfp/news" rel="noopener">
<div class="btn-news-wrapper">
<img
src="~@/assets/images/burnfont/btn-news1-desktop.svg"
id="svg-news1"
/>
</div>
</a>
</div>
<div class="cfp-news__btn cfp-news__btn--2">
<a href="/2021/cfp/ocfp-news" rel="noopener">
<div class="btn-news-wrapper">
<img
src="~@/assets/images/burnfont/btn-news2-desktop.svg"
id="svg-news2"
/>
</div>
</a>
</div>
</div>
</div>
</header>
@ -73,5 +88,5 @@ export default class CfpHeader extends Vue {}
</script>
<style lang="scss">
@import "@/assets/scss/CFP/header";
@import '@/assets/scss/CFP/header';
</style>

12
src/components/CFP/Intro.vue
View File

@ -14,19 +14,19 @@
<div class="past-sitcon">
<h3>歷屆年會網站</h3>
<div class="thumbnails">
<div class="thumb-wrapper">
<a class="thumb-wrapper" href="https://sitcon.org/2020/" target="_blank" rel="noopener">
<!-- TODO add thumb -->
<img class="cfp-img" src="@/assets/images/CFP/2020.png" />
<p class="thumb-title text-center">SITCON 2020<br /></p>
<p class="thumb-subtitle text-center">#define</p>
</div>
<div class="thumb-wrapper">
</a>
<a class="thumb-wrapper" href="https://sitcon.org/2019/" target="_blank" rel="noopener">
<!-- TODO add thumb -->
<img class="cfp-img" src="@/assets/images/CFP/2019.png" />
<p class="thumb-title text-center">SITCON 2019<br /></p>
<p class="thumb-subtitle text-center">開箱演算法</p>
</div>
<div class="thumb-wrapper">
</a>
<a class="thumb-wrapper" href="https://sitcon.org/2018/" target="_blank" rel="noopener">
<!-- TODO add thumb -->
<img class="cfp-img" src="@/assets/images/CFP/2018.png" />
<p class="thumb-title text-center">SITCON 2018<br /></p>
@ -34,7 +34,7 @@
<p class="thumb-subtitle text-center small">
POPULAR COMPUTER SCIENCE
</p>
</div>
</a>
</div>
</div>
<div class="join-discuss">

28
src/components/EventBlock.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<a href="" class="event block">
<img class="background" src="../assets/images/event-block-bg.svg">
<div class="inner">
<i v-if="icon" :class="icon" class="icon" />
<span :class="{ special }">{{ newlineText }}</span>
</div>
</a>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
})
export default class EventBlock extends Vue {
@Prop({ default: '' }) private text!: string;
@Prop({ default: '' }) private icon!: string;
@Prop({ default: false }) private special!: boolean;
get newlineText () {
return this.text.replace('\\n', '\n');
}
}
</script>
<style lang="scss">
@import '@/assets/scss/eventblock';
</style>

90
src/components/FooterPrimary.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<footer class="footer-container-primary">
<div class="footer-left">
<p class="footer-brand footer-font-block">
<span class="footer-context">學生計算機年會</span>
<span class="footer-context"
>Students' Information Technology Conference</span
>
</p>
<p class="footer-contact footer-font-block">
<span class="footer-context">聯絡我們</span>
<span class="footer-context">contact@sitcon.org</span>
</p>
</div>
<div class="footer-right">
<div class="footer-community">
<p class="footer-context">社群媒體</p>
<p class="footer-community-icon-container">
<span class="footer-community-icon">
<a
target="_blank"
rel="noopener"
v-for="community in communityLink"
:href="community.link"
:key="community.title"
>
<FontawesomeIcon
class="community-icon"
:icon="['fab', community.icon]"
/>
</a>
</span>
</p>
</div>
<div class="footer-sitesOverYears">
<div class="footer-sitesOverYears__title">
<p class="footer-context">歷年網站</p>
</div>
<div class="footer-sitesOverYears__links">
<a href="https://sitcon.org/2020/">2020</a>
<a href="https://sitcon.org/2019/">2019</a>
<a href="https://sitcon.org/2018/">2018</a>
<a href="https://sitcon.org/2017/">2017</a>
<a href="https://sitcon.org/2016/">2016</a>
<a href="https://sitcon.org/2015/">2015</a>
<a href="https://sitcon.org/2014/">2014</a>
<a href="https://sitcon.org/2013/">2013</a>
</div>
</div>
</div>
</footer>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class CFP extends Vue {
private communityLink = [
{
title: 'facebook',
icon: 'facebook-f',
link: 'https://sitcon.org/fb'
},
{
title: 'flickr',
icon: 'flickr',
link: 'https://sitcon.org/flickr'
},
{
title: 'telegram',
icon: 'telegram-plane',
link: 'https://sitcon.org/tg'
},
{
title: 'twitter',
icon: 'twitter',
link: 'https://sitcon.org/twitter'
},
{
title: 'youtube',
icon: 'youtube',
link: 'https://sitcon.org/yt'
}
];
}
</script>
<style lang="scss">
@import '@/assets/scss/footer-primary';
</style>

4
src/components/Footer.vue → src/components/FooterSecondary.vue
View File

@ -1,5 +1,5 @@
<template>
<footer class="footer-container">
<footer class="footer-container-secondary">
<div class="footer-left">
<p class="footer-brand footer-font-block">
<span class="footer-context">學生計算機年會</span>
@ -71,5 +71,5 @@ export default class CFP extends Vue {
</script>
<style lang="scss">
@import '@/assets/scss/footer';
@import '@/assets/scss/footer-secondary';
</style>

124
src/components/Header.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<div class="header header--sticky">
<div class="header__left">
<div class="header-logo">
<a href="/2021/">
<img
src="~@/assets/images/home/home-headerIcon.svg"
width="100%"
/>
</a>
</div>
</div>
<div class="header__right">
<div class="header-links">
<ul>
<li>
<a
href="/2021/agenda"
v-bind:class="
onRoute('Agenda') ? 'header-link--active' : ''
"
>議程與活動</a
>
</li>
<li>
<a
href="/2021/traffic"
v-bind:class="
onRoute('Traffic') ? 'header-link--active' : ''
"
>交通方式</a
>
</li>
<li>
<a
href="/2021/venue"
v-bind:class="
onRoute('Venue') ? 'header-link--active' : ''
"
>會場地圖</a
>
</li>
<li>
<a
href="/2021/sponsor"
v-bind:class="
onRoute('Sponsor') ? 'header-link--active' : ''
"
>贊助資訊</a
>
</li>
<li>
<a
href="/2021/team"
v-bind:class="
onRoute('Team') ? 'header-link--active' : ''
"
>籌備團隊</a
>
</li>
</ul>
</div>
<div class="header-links--mobile">
<select onchange="location = this.value;">
<option value="/"> 年會主題</option>
<option
value="/agenda"
:selected="onRoute('Agenda') ? true : false"
>
<a href="/2021/agenda"> 議程與活動</a></option
>
<option
value="/traffic"
:selected="onRoute('Traffic') ? true : false"
>
<a href="/2021/traffic">交通方式</a></option
>
<option
value="/venue"
:selected="onRoute('Venue') ? true : false"
><a href="/2021/venue">會場地圖</a></option
>
<option
value="/sponsor"
:selected="onRoute('Sponsor') ? true : false"
><a href="/2021/sponsor">贊助資訊</a></option
>
<option
value="/team"
:selected="onRoute('Team') ? true : false"
><a href="/2021/team">籌備團隊</a></option
>
</select>
<!-- <div class="header-links--mobile-bg"></div> -->
</div>
<div class="header-apply">
<a
href="https://sitcon.kktix.cc/events/sitcon2021"
target="_blank"
>
報名去
</a>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
props: ['route']
})
export default class Header extends Vue {
public onRoute (routeName: string) {
return this.$props.route.name === routeName ? true : false;
}
}
</script>
<style lang="scss">
@import '@/assets/scss/header';
</style>

39
src/components/WIP.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<div id="wip">
<img
class="wip-dev-icon"
src="~@/assets/images/teams/dev.svg"
/>
<h1>施工中．．．</h1>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class WIP extends Vue {
}
</script>
<style lang="scss">
$fontFamily: "Noto Serif CJK TC -Black";
#wip {
width: 70%;
margin: 150px auto;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.wip-dev-icon {
width: 150px;
margin: 20px 0;
}
h1 {
font-size: 24pt;
font-family: $fontFamily;
}
}
</style>

17
src/components/news/Header.vue
View File

@ -10,19 +10,21 @@
<img src="~@/assets/images/burnfont/news.svg" class="svg svg-cfp-news" />
</div>
<div class="contribute-wrapper">
<a class="btn-contribute" href="https://forms.gle/XoXJSD2P8dL8X8s2A">我要投稿</a>
<a class="btn-contribute" target="_blank" rel="noopener" href="https://forms.gle/XoXJSD2P8dL8X8s2A">我要投稿</a>
</div>
</div>
<div class="cfp-body">
<div class="spot-wrapper">
<h1 class="text-center">現正徵稿中<span class="ignore">！</span></h1>
<div class="cfp-body" :class="(cfp)? 'cfp-body-blue':'cfp-body-gray'">
<div class="spot-wrapper" >
<h1 class="text-center" v-if="cfp">現正徵稿中<span class="ignore">！</span></h1>
<h1 class="text-center" v-else>徵稿已截止 :<span class="ignore">(</span></h1>
<!-- TODO counter -->
<p class="text-center countdown">
距離投稿截止還有
<span class="d-inline-block">
<span class="d-inline-block" v-if="cfp">
{{ countdown.d }} 天 {{ countdown.h }} 小時 {{ countdown.m }} 分
{{ countdown.s }} 秒</span
>
<span v-else class="d-inline-block">...喔不! 你沒有時間了</span>
</p>
</div>
<div class="time-wrapper">
@ -72,7 +74,7 @@ export default class CfpHeader extends Vue {
h: 0,
d: 0
};
private cfp: boolean = true;
public beforeMount () {
this.registerTimer();
}
@ -96,6 +98,9 @@ export default class CfpHeader extends Vue {
}
private async onTick (t: number) {
if (t < 0) {
this.cfp = false;
}
this.countdown.s = t % 60;
t = Math.floor(t / 60);
this.countdown.m = t % 60;

85
src/components/news/Navbar.vue
View File

@ -1,6 +1,11 @@
<template>
<nav id="news-nav" :class="{ fixed: isNavbarFixed }">
<div v-show="!isMobileView || navVisible" class="news-nav" v-scrollspy="{ selectors: navbarItems }">
<nav id="news-nav" :class="{ fixed: (isNavbarFixed || isMobileView), returning: isNavbarReturning }">
<div
class="news-nav"
:class="{ animating: isNavbarAnimating }"
v-show="!isMobileView || navVisible"
v-scrollspy="{ selectors: navbarItems }"
>
<a class="news-nav-item" href="#schedule">重要時程</a>
<a class="news-nav-item" href="#example">投稿主題範例</a>
<a class="news-nav-item" href="#code-of-conduct">Code of Conduct</a>
@ -16,6 +21,11 @@
<p>&#9650;</p>
<p>&#9660;</p>
</button>
<div
style="width:100vw;height:100vh;color:red;position:fixed;top:0;right:0;"
v-if="isMobileView && navVisible"
@click="()=>navVisible=!navVisible"
></div>
</nav>
</template>
@ -30,7 +40,9 @@ import ScrollSpyDirective from './ScrollSpyDirective';
})
export default class Navbar extends Vue {
private isMobileView: boolean = false;
private isNavbarFixed = false;
private isNavbarFixed: boolean = false;
private isNavbarAnimating: boolean = false;
private isNavbarReturning: boolean = false;
private navVisible: boolean = false;
private navbarItems: string[] = [
'#schedule',
@ -43,29 +55,56 @@ export default class Navbar extends Vue {
'#precautions'
];
public mounted () {
this.$nextTick().then(() => {
const query: string = '(max-width: 1024px)';
const mq: MediaQueryList = window.matchMedia(query);
if (mq.addEventListener) {
mq.addEventListener('change', this.matchMediaCallback);
} else {
mq.addListener(this.matchMediaCallback);
}
// check first
this.matchMediaCallback(mq);
public created () {
const query: string = '(max-width: 1024px)';
const mq: MediaQueryList = window.matchMedia(query);
if (mq.addEventListener) {
mq.addEventListener('change', this.matchMediaCallback);
} else {
// for sad safari
mq.addListener(this.matchMediaCallback);
}
// check first
this.matchMediaCallback(mq);
}
// observe header: header appears => no fix; header disappears => fix.
const fixObserver: IntersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
this.isNavbarFixed = true;
} else {
this.isNavbarFixed = false;
public mounted () {
// observe header: header appears => no fix; header disappears => fix.
const fixObserver: IntersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
// no animation for mobile
if (!this.isMobileView) {
// only show animation if fix status has changed
if (!entry.isIntersecting !== this.isNavbarFixed) {
if (!entry.isIntersecting) {
this.isNavbarFixed = true;
} else {
this.isNavbarFixed = false;
this.isNavbarReturning = true;
}
this.isNavbarAnimating = true;
}
});
}, { rootMargin: '25px 0px 0px 0px', threshold: 0 });
}
});
}, { rootMargin: '25px 0px 0px 0px', threshold: 0 });
this.$nextTick().then(() => {
fixObserver.observe(document.querySelector('#news-header') as Element);
document.querySelector('.news-nav')?.addEventListener('animationend', (ev) => {
if (!this.isNavbarFixed) {
this.isNavbarReturning = false;
}
this.isNavbarAnimating = false;
});
if (location.hash) {
const hash = location.hash;
// scroll to anchor
// value should be changed to scroll, so set to empty string first.
location.hash = '';
location.hash = hash;
}
});
}

4
src/components/news/ScrollSpyDirective.ts
View File

@ -8,10 +8,10 @@ const ScrollSpyDirective: DirectiveOptions = {
selectors = binding.value.selectors;
// highlight first element
el.querySelector(`[href="${location.hash || selectors[0] || ''}"]`)?.classList.toggle('active', true);
el.querySelector(`[href="${selectors[0] || ''}"]`)?.classList.toggle('active', true);
const config = {
rootMargin: '-10% 0px -80% 0px',
rootMargin: '-5% 0px -85% 0px',
threshold: 0
};

199
src/components/ocfp-news/Agenda.vue Normal file
View File

@ -0,0 +1,199 @@
<template>
<div class="info">
<div class="info-container">
<!-- 投稿方式 -->
<section class="info-section" id="methods">
<h1>投稿格式</h1>
<article class="info-section__content">
<p>
除有特別標示會公布的資料外，其餘則只會供審稿委員閱讀。
</p>
<article class="info-section__content--sub">
<h2>投稿格式</h2>
<p>
各議程類型的投稿格式相同，除特別標示之資訊外，其餘僅供審稿委員於審稿時閱讀。
<br>
<br>
<ul>
<li><span /><strong>題目 Title：</strong>必填、公開。請不要超出 20 字。</li>
<li><span /><strong>摘要 Abstract：</strong>必填、公開。建議含標點符號 150–250 字，使用於宣傳與網站公告。</li>
<li><span /><strong>演講大綱 Outline：</strong>必填，請說明該開放式議程的大綱、如何進行、時間長度規劃。</li>
<li><span /><strong>目標受眾 Target
Audience：</strong>必填，請說明您期待該議程的目標受眾，為怎麼樣的人。例如：「嚮往成為前端開發者的初學者」、「不知道該不該讀研究所的學生」等。</li>
<li><span /><strong>先備知識 Prior Knowledge：</strong>必填、公開。請說明該議程的與會者所需具備的先備知識。例如：「能理解 Python 基礎語法」、「能熟練運用 Class 與 OOP」等。
</li>
<li><span /><strong>詳細說明
Description：</strong>必填。不限字數，請說明這個議程您認為重要的相關細節，以利審稿委員更瞭解您的作品。我們強烈建議您詳細填寫此項，讓審稿委員全面且深入地了解您的稿件，增加入選機率。
</li>
<li><span /><strong>附件 Attachment：</strong>選填。可以附上程式碼、投影片草稿或任何您認為有助於我們瞭解您的議程的附件。</li>
</ul>
</p>
</article>
<article class="info-section__content--sub">
<h2>個人資料</h2>
<p>
除了暱稱/姓名被用於宣傳，其餘資訊僅需提供一人作為代表（當稿件同時有多位講者時），供議程組於聯絡時使用。
<br>
<br>
<ul>
<li><span /><strong>電子郵件 Email：</strong>能讓大會聯絡的電子信箱。（注意：請您在大會的聯絡過程中，維持使用相同信箱。）</li>
<li><span /><strong>暱稱/名字 Name：</strong>公開於講者海報及網站的稱呼。</li>
<li><span /><strong>手機號碼 Phone：</strong>用於大會聯絡、確認資訊用的電話號碼。</li>
<li><span /><strong>其他聯絡方式 Other contact information：</strong>其他任何我們能聯絡您的方式（如 Telegram、住處電話等）。
</li>
</ul>
</p>
</article>
</article>
</section>
<!-- 投稿方式 -->
<!-- 審稿方式 -->
<section class="info-section" id="review">
<h1>審稿方式</h1>
<article class="info-section__content">
<p>
審稿委員將針對以下項目進行篩選：
<ul>
<li><span /><strong>稿件內容：</strong>包含的知識分享、經驗案例、想法觀點是否獨特等。</li>
<li><span /><strong>表達能力：</strong>提供的資料是否有條理、文句暢通，提供資料（尤其是稿件的詳細說明）之完整度。我們偏好完整的資料，讓審稿委員更清楚了解演講細節。</li>
<li><span /><strong>適合聽眾：</strong>稿件是否適合 SITCON 大多數的與會者討論。</li>
</ul>
</p>
</article>
<!-- 審稿方式 -->
<!-- 投稿注意事項 -->
</section>
<section class="info-section" id="precautions">
<h1>投稿注意事項</h1>
<article class="info-section__content">
<p>
<ul>
<li><span />SITCON 2021 採用 Google Forms 接收投稿。</li>
<li><span />議程時間長度以 40 分鐘為原則。</li>
<li><span />除了開放式議程外，同一時間將有 3 至 4 軌一般議程同時進行。</li>
<li><span />上述審稿方式不考慮稿件內容的技術難度，我們仍以稿件是否能夠吸引人、高品質、適合與會者（即上述篩選方式）為考量。</li>
<li><span />為鼓勵投稿，大會提供投稿者一組入場票邀請碼
（投稿者有多個投稿亦同，即為一人一組，非一稿一組），可優先報名參與本年會。若您的稿件被接受，屆時可使用講者身分入場，不需要另外報名，並可以將入場票邀請碼贈與他人使用，邀請親朋好友共襄盛舉。講者身分入場，每組可獲得一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。
</li>
<li><span />在截稿之前，投稿者可以隨時使用投稿系統修改已投的稿件。</li>
<li><span />SITCON 議程組得與投稿者討論並經同意後，轉換稿件之投稿類型。</li>
<li><span />無論投稿有無入選，仍然歡迎於年會當天報名其他議程相關活動！</li>
<li><span />凡稿件經接受者，年會將頒予感謝狀以表彰投稿者之熱情付出與貢獻。</li>
<li><span />「議程題目」、「摘要」與「先備知識」將放置於官方網站與年會前發行的電子報中。</li>
</ul>
<br />
若有任何問題或投稿建議，請 E-mail 至 SITCON 議程組信箱 session[at]sitcon.org。
</p>
<article class="info-section__content--sub" id="record">
<h2>錄影與紀錄</h2>
<p>
所有議程皆會錄影，若不希望被錄影與釋出，可以與議程組聯絡。<br />
本屆 SITCON
提供入選講者試講及彩排的機會。試講除了讓大會工作人員先行對議程內容、演講習慣有初步了解外，也可以讓講者熟悉現場流程、找出能讓簡報更生動精采的模式。彩排則讓講者熟悉現場設備環境、攝影機位置，並且測試
Live
Demo 情境。希望講者能夠共同參與試講及彩排，一起使年會議程品質更臻完美。
</p>
</article>
<article class="info-section__content--sub">
<h2>授權</h2>
<p>
議程錄影將在經過您的同意後，一律以 CC - BY 3.0 授權在 YouTube 釋出。
議程相關素材，例如投影片等，將由您自行決定在何處、以何種方式釋出，或選擇不釋出，我們不會干涉。年會後，我們將向您蒐集素材連結，若您選擇釋出，我們會將連結放置在年會官方網站的議程表上。
</p>
</article>
<article class="info-section__content--sub">
<h2>試講</h2>
<p>
試講提供講者在演講前有練習的機會，比照年會時間安排供講者講完整場演講，並有議程組人員提供建議（如簡報、台風等），講者可以自由參加，並自行選擇最合適的場次。若您的稿件確認入選，議程組將與您協調精確時間。
</p>
<p>
所有場次將依報名情況舉辦，預計舉辦北部、中部、南部、東部場等，時間約為四月份，地點另行通知。 補助：依照客運價格標準，補助講者至最近試講場地的全額或部分車馬費。
</p>
</article>
<article class="info-section__content--sub">
<h2>彩排</h2>
<p>
<ul>
<li><span />日期：2021/05/28（五）。</li>
<li><span />場地：使用場地與正式年會相同，細節將於稿件接受後通知。</li>
<li><span />時間：一人約 5–10 分鐘。若有 Live Demo 或特殊需求，可提前與議程組安排時間。</li>
<li><span />流程：講者操作設備，測試 Live Demo 連結及切換方式，也可以演練部分簡報內容。</li>
<li><span />提供設備：與年會當天場地的設備相同，有麥克風、倒數計時器等。</li>
</ul>
</p>
</article>
<article class="info-section__content--sub info-section__content--sub-extend" id="QA">
<h2>Q&A</h2>
<div class="info-qa">
<div class="info-qa__itemBox">
<input class="info-qa__itemBox-input" type="checkbox" name="checkbox" id="1">
<label class="info-qa__itemBox-title" for="1">
<p>我想在開放式議程嘗試 XXX 可以嗎？</p>
<span class="info-qa__itemBox-checkmark">
<div class="info-qa-icon"></div>
</span>
</label>
<div class="info-qa__itemBox-text">
<p>
原則上只要是跳脫傳統演講形式，以雙向互動為主的議程進行方式都是可以的，但必須遵守 CoC，且建議議程以知識與想法交流為優先。
</p>
</div>
</div>
<div class="info-qa__itemBox">
<input class="info-qa__itemBox-input" type="checkbox" name="checkbox" id="2">
<label class="info-qa__itemBox-title" for="2">
<p>先備知識與目標受眾有何不同？</p>
<span class="info-qa__itemBox-checkmark">
<div class="info-qa-icon"></div>
</span>
</label>
<div class="info-qa__itemBox-text">
<p>
「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為會眾的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關 Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。
</p>
</div>
</div>
<div class="info-qa__itemBox">
<input class="info-qa__itemBox-input" type="checkbox" name="checkbox" id="6">
<label class="info-qa__itemBox-title" for="6">
<p>還有疑問怎麼辦？</p>
<span class="info-qa__itemBox-checkmark" type="radio" name="radio" id="6">
<div class="info-qa-icon"></div>
</span>
</label>
<div class="info-qa__itemBox-text">
<p>
歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。
</p>
</div>
</div>
</div>
<div class="info-sitcon-img__box">
<img src="../../assets/images/CFP/sitcon-img.svg" class="info-sitcon-img">
</div>
</article>
</article>
<!-- 投稿注意事項 -->
</section>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class Agenda extends Vue {}
</script>
<style lang="scss">
@import "@/assets/scss/ocfp/agenda";
</style>

126
src/components/ocfp-news/Header.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<header id="ocfp-header">
<div class="top-bar">
<div class="return-wrapper">
<a class="shape-wrapper diamond" href="/2021/cfp"
><span class="text-wrapper">返回</span></a
>
</div>
<div class="title-wrapper text-center">
<img src="~@/assets/images/burnfont/ocfp_title.svg" class="svg svg-cfp-news" />
</div>
<div class="contribute-wrapper">
<a class="btn-contribute" target="_blank" rel="noopener" href="https://forms.gle/k4XobTn3Pac6NrLE7">我要投稿</a>
</div>
</div>
<div class="cfp-body" :class="(cfp)? 'cfp-body-blue':'cfp-body-gray'">
<div class="spot-wrapper" >
<h1 class="text-center" v-if="cfp">現正徵稿中<span class="ignore">！</span></h1>
<h1 class="text-center" v-else>徵稿已截止 :<span class="ignore">(</span></h1>
<!-- TODO counter -->
<p class="text-center countdown">
距離投稿截止還有
<span class="d-inline-block" v-if="cfp">
{{ countdown.d }} 天 {{ countdown.h }} 小時 {{ countdown.m }} 分
{{ countdown.s }} 秒</span
>
<span v-else class="d-inline-block">...喔不! 你沒有時間了</span>
</p>
</div>
<div class="time-wrapper">
<div class="start-time-wrapper">
<h2>投稿開始</h2>
<p>現在</p>
</div>
<div class="tilde-wrapper">
<h2><!-- pseudo element --></h2>
<p>～</p>
<p></p>
</div>
<div class="end-time-wrapper">
<h2>投稿結束</h2>
<p>
2021/04/06（二）日出<small class="d-inline-block"
>（清晨 06：41）</small
>
</p>
</div>
</div>
</div>
</header>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
const DEAD_LINE = Math.floor(
new Date('06 Apr 2021 06:41:00 GMT+8').getTime() / 1000
);
interface Countdown {
s: number;
m: number;
h: number;
d: number;
}
@Component({})
export default class CfpHeader extends Vue {
private timerId!: number;
private countdown: Countdown = {
s: 0,
m: 0,
h: 0,
d: 0
};
private cfp: boolean = true;
public beforeMount () {
this.registerTimer();
}
public unmouted () {
this.unregisterTimer();
}
public async createTimer (f: (t: number) => void): Promise<number> {
const d = new Date();
let t = d.getTime();
const rem = 1000 - (t % 1000);
t = Math.floor(t / 1000);
let downcount = DEAD_LINE - t - 1;
this.onTick(downcount);
const id = setInterval(() => {
f(--downcount);
}, 1000);
return id;
}
private async onTick (t: number) {
if (t < 0) {
this.cfp = false;
}
this.countdown.s = t % 60;
t = Math.floor(t / 60);
this.countdown.m = t % 60;
t = Math.floor(t / 60);
this.countdown.h = t % 24;
t = Math.floor(t / 24);
this.countdown.d = t;
}
private async registerTimer () {
this.timerId = await this.createTimer(this.onTick);
}
private unregisterTimer () {
clearInterval(this.timerId);
}
}
</script>
<style lang="scss">
@import '@/assets/scss/ocfp/header';
</style>

120
src/components/ocfp-news/Navbar.vue Normal file
View File

@ -0,0 +1,120 @@
<template>
<nav id="ocfp-nav" :class="{ fixed: (isNavbarFixed || isMobileView), returning: isNavbarReturning }">
<div
class="news-nav"
:class="{ animating: isNavbarAnimating }"
v-show="!isMobileView || navVisible"
v-scrollspy="{ selectors: navbarItems }"
>
<a class="news-nav-item" href="#schedule">重要時程</a>
<a class="news-nav-item" href="#example">投稿主題</a>
<a class="news-nav-item" href="#code-of-conduct">Code of Conduct</a>
<a class="news-nav-item" href="#methods">投稿格式</a>
<a class="news-nav-item" href="#review">審稿方式</a>
<a class="news-nav-item" href="#precautions">投稿注意事項</a>
<a class="news-nav-item" href="#record">錄影與紀錄</a>
<a class="news-nav-item" href="#QA">QA</a>
<a class="news-nav-contribute-button" target="_blank" rel="noopener" href="https://forms.gle/k4XobTn3Pac6NrLE7" v-show="!isMobileView">我要投稿</a>
<button class="news-nav-button" @click="(e)=>navVisible=!navVisible" v-show="isMobileView">&#9650;</button>
</div>
<button v-show="!navVisible && isMobileView" class="nav-control-button" @click="(e)=>navVisible=!navVisible">
<p>&#9650;</p>
<p>&#9660;</p>
</button>
<div
style="width:100vw;height:100vh;color:red;position:fixed;top:0;right:0;"
v-if="isMobileView && navVisible"
@click="()=>navVisible=!navVisible"
></div>
</nav>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import ScrollSpyDirective from './ScrollSpyDirective';
@Component({
directives: {
scrollspy: ScrollSpyDirective
}
})
export default class Navbar extends Vue {
private isMobileView: boolean = false;
private isNavbarFixed: boolean = false;
private isNavbarAnimating: boolean = false;
private isNavbarReturning: boolean = false;
private navVisible: boolean = false;
private navbarItems: string[] = [
'#schedule',
'#example',
'#code-of-conduct',
'#methods',
'#review',
'#precautions',
'#record',
'#QA'
];
public created () {
const query: string = '(max-width: 1024px)';
const mq: MediaQueryList = window.matchMedia(query);
if (mq.addEventListener) {
mq.addEventListener('change', this.matchMediaCallback);
} else {
// for sad safari
mq.addListener(this.matchMediaCallback);
}
// check first
this.matchMediaCallback(mq);
}
public mounted () {
// observe header: header appears => no fix; header disappears => fix.
const fixObserver: IntersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
// no animation for mobile
if (!this.isMobileView) {
// only show animation if fix status has changed
if (!entry.isIntersecting !== this.isNavbarFixed) {
if (!entry.isIntersecting) {
this.isNavbarFixed = true;
} else {
this.isNavbarFixed = false;
this.isNavbarReturning = true;
}
this.isNavbarAnimating = true;
}
}
});
}, { rootMargin: '25px 0px 0px 0px', threshold: 0 });
this.$nextTick().then(() => {
fixObserver.observe(document.querySelector('#news-header') as Element);
document.querySelector('.news-nav')?.addEventListener('animationend', (ev) => {
if (!this.isNavbarFixed) {
this.isNavbarReturning = false;
}
this.isNavbarAnimating = false;
});
if (location.hash) {
const hash = location.hash;
// scroll to anchor
// value should be changed to scroll, so set to empty string first.
location.hash = '';
location.hash = hash;
}
});
}
private matchMediaCallback (ev: (MediaQueryList | MediaQueryListEvent)) {
this.isMobileView = ev.matches;
// alaways disable navbar while view changing
this.navVisible = false;
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/ocfp/navbar';
</style>

65
src/components/ocfp-news/Schedule.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div>
<Navbar />
<!-- 重要時程 -->
<section id="schedule">
<h1>重要時程</h1>
<ul>
<li>2020/04/06（二）日出（早上 06:41）投稿截止</li>
<li>3 月下旬第二階段補充資料截止收取</li>
<li>預計於五月初公佈完整議程</li>
<li>2021/05/29（六）SITCON 2021 年會</li>
</ul>
</section>
<!-- 重要時程 -->
<!-- 投稿主題範例 -->
<section id="example">
<article id="theme-example">
<h1>投稿主題</h1>
<p>延續著去年的熱潮，開放式議程將於 SITCON 2021 舉辦，期待藉由主講者及會眾的雙向資訊傳遞，激盪出熱烈的討論及更多的觀點。在開放式議程中，您可以舉辦一場精彩的議題探討，也可以集思廣益，解決學生在資訊界可能碰到的困難。任何形式的議程，都可以於開放式議程中實現。</p>
<p>SITCON 作為學生展現自己的舞台，我們期待以學生為主體的投稿，以下提供幾種開放式議程形式範例 :</p>
<!-- there is a object arr named 'themeExample', each object have two value ie. title and content -->
<div class="theme container">
<Topic v-for="theme in themeExample" :topic="theme.title" :description="theme.context" :key="theme.title" />
</div>
</article>
<p>
除了以上範例，我們也非常歡迎其他形式的議程。
</p>
</section>
<!-- 投稿主題範例 -->
<!-- Code of Conduct -->
<section id="code-of-conduct">
<h1>Code of Conduct</h1>
<p>SITCON 歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加 SITCON，我們要求所有參與者閱讀年會的<a href="https://sitcon.org/code-of-conduct/" target="_blank" rel="noopener"><u>行為守則（Code of Conduct）</u></a>，共同創造一個友善的環境。</p>
</section>
<!-- Code of Conduct -->
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Topic from './Topic.vue';
import Navbar from './Navbar.vue';
// import data
import themeExample from '../../../template/themeExample.ocfp';
import espresso from '../../../template/espresso.cfp';
import presentation from '../../../template/presentation.cfp';
@Component({
components: {
Topic,
Navbar
}
})
export default class Schedule extends Vue {
private themeExample = themeExample;
private espresso = espresso;
private presentation = presentation;
}
</script>
<style lang="scss">
@import '@/assets/scss/ocfp/schedule';
</style>

37
src/components/ocfp-news/ScrollSpyDirective.ts Normal file
View File

@ -0,0 +1,37 @@
import Vue, { DirectiveOptions, VNode, VNodeDirective } from 'vue';
let selectors!: string[];
let observer!: IntersectionObserver;
const ScrollSpyDirective: DirectiveOptions = {
inserted (el: Element, binding: VNodeDirective, vnode: VNode) {
selectors = binding.value.selectors;
// highlight first element
el.querySelector(`[href="${selectors[0] || ''}"]`)?.classList.toggle('active', true);
const config = {
rootMargin: '-5% 0px -85% 0px',
threshold: 0
};
observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
selectors.forEach((selector: string) => {
el.querySelector(`[href="${selector}"`)?.classList.toggle('active', selector === `#${entry.target.id}`);
});
}
});
}, config);
selectors.forEach((selector: string) => {
observer.observe(document.querySelector(selector) as Element);
});
},
unbind () {
observer.disconnect();
}
};
export default ScrollSpyDirective;

25
src/components/ocfp-news/Topic.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<div class="topic">
<h3 class="title" v-html="title"></h3>
<div class="divider"></div>
<p class="description">{{ description }}</p>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class Topic extends Vue {
@Prop({ required: true }) private topic!: string;
@Prop({ required: true }) private description!: string;
get title () {
return this.topic.replace(/(：|？)/, '$1<br data-delimiter="$1">');
}
}
</script>
<style lang="scss">
@import '@/assets/scss/ocfp/topic';
</style>

83
src/pages/Agenda.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<div id="agenda">
<!-- Vote Section -->
<BlockTitle text="人氣投票" id="#vote" />
<article class="bold">
總是因為擠不進會議廳，而聽不到感興趣的議程嗎？
<br /><br />
喜歡的議程，不能只有自己看到！SITCON 2021 首次舉辦「事前人氣投票」，除了搶先看到精彩議程介紹，也能把手中關鍵一票投給最期待的議程！會眾期待度愈高的議程，愈有機會安排在空間比較寬敞的會議廳。
</article>
<p class="vote"><a class="vote button" href="https://docs.google.com/forms/d/e/1FAIpQLSdWJtLP96bqXWukmOEar0xiBfGScm3qAlp-Xii05-cmU2Gxlg/viewform" target="_blank" rel="noopeener">投票去</a></p>
<article>
投票時間：4/2 (五) 20:00 至 4/9 (五) 23:59（UTC+8）<br />
投票資格：於 4/9 (五) 23:59 前取得 2021 年會門票的與會者（不分票種）、2021 年會志工、2021 年會講者
</article>
<article>
【注意事項】
<ol class="vote rule" start="0" type="1">
<li>事前人氣投票結果，將作為議程組與審稿委員會於安排議程時段與會議廳的參考依據之一。</li>
<li>投票為「記名投票」，使用 KKTIX 四碼檢查碼作為投票依據。議程組以檢查碼辨識投票的人是否持有年會門票，不對外公布各組檢查碼的具體投票內容。</li>
<li>三個議程種類（Espresso、Double Espresso 與 Presentation）可各選擇投給 1 個議程。</li>
<li>若同一議程種類選擇超過一個議程，或不選擇任何議程，視為無效票。各個議程種類的選票有效性互相獨立，無效票不影響其他議程種類的選票認定，舉例來說，若 Espresso 選擇 2 個議程、Double Espresso 選擇 1 個議程、Presentation 選擇 0 個議程，則 Double Espresso 的部分為有效票，其他二種議程為無效票。</li>
<li>此投票表單使用 Google Forms「隨機決定問題順序」功能決定各個議程的顯示順序。</li>
<li>在投票截止前，可以使用同一組檢查碼重複投票。計票時以最新一筆投票記錄為準。</li>
</ol>
</article>
<!-- Vote Section End -->
<!-- Event Section -->
<BlockTitle text="活動" id="#event" />
<div v-if="!isMobile()" class="event container">
<img class="arrow" src="@/assets/images/arrow-left.svg">
<EventBlock icon="union" text="大地遊戲"/>
<EventBlock icon="stall-outline" text="社群攤位"/>
<EventBlock icon="group" text="天使計劃"/>
<EventBlock icon="lightning-outline" text="Lightning\nTalk" :special="true"/>
<EventBlock icon="guide-outline" text="導遊團"/>
<EventBlock text="開放式\n議程"/>
<img class="arrow" src="@/assets/images/arrow-right.svg">
</div>
<div v-else class="mobile event container">
<div class="column">
<EventBlock icon="union" text="大地遊戲"/>
<EventBlock icon="stall-outline" text="社群攤位"/>
<EventBlock icon="group" text="天使計劃"/>
</div>
<div class="column">
<EventBlock icon="lightning-outline" text="Lightning\nTalk" :special="true"/>
<EventBlock icon="guide-outline" text="導遊團"/>
</div>
<div class="column">
<img class="arrow" src="@/assets/images/arrow-left.svg">
<EventBlock text="開放式\n議程"/>
<img class="arrow" src="@/assets/images/arrow-right.svg">
</div>
</div>
<!-- Event Section End -->
</div>
</template>
<script lang="ts">
import { Watch, Component, Prop, Vue } from 'vue-property-decorator';
import { Action, Getter } from 'vuex-class';
import { DeviceType } from '@/store/types/app';
import EventBlock from '../components/EventBlock.vue';
import BlockTitle from '../components/BlockTitle.vue';
@Component({
components: {
EventBlock,
BlockTitle
}
})
export default class Agenda extends Vue {
@Getter('device', { namespace: 'app' }) private device!: DeviceType;
private isMobile (): boolean {
return this.device === DeviceType.MOBILE;
}
}
</script>
<style lang="scss">
@import '@/assets/scss/agenda';
</style>

146
src/pages/Home.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<div id="home" class="home">
<section class="section-title">
<div class="home__title">
<div class="home__title-box1">
<p>SITCON 學生計算機年會 2021</p>
</div>
<div class="home__title-topic">
<img
src="~@/assets/images/home/home-topic.svg"
width="100%"
/>
</div>
<div class="home__title-box2">
<p class="home__title-box2--p1">
05/29 • 中央研究院－人文社會科學館 •免費報名
</p>
<p class="home__title-box2--p2">
05/29 <br /><br />
中央研究院－人文社會科學館 •免費報名
</p>
</div>
</div>
</section>
<section class="section-content">
<section class="home__info">
<div class="home__info-container">
<div class="home__info-title home__info-title--1">
<img
class="home-squareImg"
src="~@/assets/images/home/home-icon-square.svg"
/>
<h1>算盤的後裔</h1>
<h2 class="home__info-title-h2--big">
Descendants of the abacus
</h2>
</div>
<div class="home__info-paragraph">
<p>
千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
<br />
俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
<br />
<br />
人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
</p>
</div>
</div>
</section>
<section class="home__info">
<div class="home__info-container">
<div class="home__info-title home__info-title--2">
<img
class="home-appleImg"
src="~@/assets/images/home/home-icon-apple.svg"
/>
<h1>關於 SITCON</h1>
<h2 class="home__info-title-h2--small">
Students' Information Technology Conference
</h2>
</div>
<div class="home__info-paragraph">
<p>
學生計算機年會（SITCON）自 2013
年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
</p>
</div>
</div>
</section>
<section class="home__info">
<div class="home__info-container">
<div class="home__info-title">
<h1>行為準則</h1>
<h2 class="home__info-title-h2--mid">
Code of Conduct
</h2>
</div>
<div class="home__info-paragraph">
<p>
SITCON
歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加
SITCON，我們要求所有參與者閱讀年會的<a href="https://sitcon.org/code-of-conduct/" target="_blank"
>行為準則（Code of Conduct）</a
>，共同創造一個友善的環境。
</p>
</div>
</div>
</section>
<section class="home__info">
<div class="home__info-container">
<div class="home__info-title">
<h1>參與討論</h1>
<h2 class="home__info-title-h2--mid">
Join the community
</h2>
</div>
<div class="home__info-paragraph">
<p>
SITCON
是個開放的社群，許多籌備的相關事項都會在公開的郵件論壇上進行討論，如果有興趣參與，歡迎訂閱
SITCON 的郵件論壇並貢獻你的想法！
<br />
<br />
若你想進一步了解過往討論的內容，也歡迎在 HackMD
上查看 SITCON 2021 的會議記錄。
</p>
</div>
<div class="home__info-buttonsBox">
<a
href="https://groups.google.com/g/sitcon-general"
target="_blank"
class="home-button"
>郵件論壇</a
>
<a
href="https://hackmd.io/@SITCON/SITCON2021"
target="_blank_"
class="home-button"
>會議記錄</a
>
</div>
</div>
</section>
<img
class="home-sponsorsImg"
src="~@/assets/images/home/home-sponsors.png"
width="100%"
/>
</section>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
components: {}
})
export default class CFP extends Vue {
@Prop() private msg!: string;
}
</script>
<style lang="scss">
@import '@/assets/scss/home/home';
</style>

26
src/pages/OCFP.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="news">
<NewsHeader id="ocfp-header" />
<Schedule id="ocfp-schedule" />
<Agenda id="ocfp-agenda" />
<!-- <Footer></Footer> should be put at App.vue (?) -->
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import NewsHeader from '@/components/ocfp-news/Header.vue';
import Schedule from '@/components/ocfp-news/Schedule.vue';
import Agenda from '@/components/ocfp-news/Agenda.vue';
@Component({
components: {
NewsHeader,
Schedule,
Agenda
}
})
export default class News extends Vue {
@Prop() private msg!: string;
}
</script>

49
src/pages/Sponsor.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<div id="sponsor">
<div class="main-container">
<div class="info-wrapper">
<div class="content-wrapper">
<div class="info-left-button-wrapper"></div>
<div class="info-content">
<p>
SITCON
學生計算機年會為學生自發組成籌辦的研討會，秉持著以學生為主軸的核心價值，提供一個經驗交流與資訊技術實務分享的平台，進而達到「學以致用、教學相長」的目標。
</p>
<p>
維繫這樣的交流平台，需要多人的努力及貢獻，亦十分需要在資金上的支持。
希望能藉由您的一份力量，來促成活動的舉行，讓更多學生能在舞台上展現自我成長。<br />
歡迎您參與贊助，支持
SITCON、讓我們將每年的活動辦得盡善盡美！
</p>
</div>
<div class="info-left-button-wrapper"></div>
</div>
<div class="button-wrapper">
<a class="button" href="http://bit.ly/donatesitcon2021" target="_blank">個人贊助</a>
<a class="button" href="mailto:contact@sitcon.org">企業合作</a>
</div>
</div>
<!--
<div class="deep-ploughing">
<h2>深耕級</h2>
<div class="image-wrapper">
<img />
<img />
<img />
</div>
</div>
-->
</div>
</div>
</template>
<style lang="scss">
@import '@/assets/scss/sponsor';
</style>
<script>
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class Sponsor extends Vue {}
</script>

15
src/pages/Team.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<WIP></WIP>
</template>
<script>
import { Component, Prop, Vue } from 'vue-property-decorator';
import WIP from '@/components/WIP.vue';
@Component({
components: {
WIP
}
})
export default class Team extends Vue {}
</script>

15
src/pages/Traffic.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<WIP></WIP>
</template>
<script>
import { Component, Prop, Vue } from 'vue-property-decorator';
import WIP from '@/components/WIP.vue';
@Component({
components: {
WIP
}
})
export default class Traffic extends Vue {}
</script>

15
src/pages/Venue.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<WIP></WIP>
</template>
<script>
import { Component, Prop, Vue } from 'vue-property-decorator';
import WIP from '@/components/WIP.vue';
@Component({
components: {
WIP
}
})
export default class Venue extends Vue {}
</script>

67
src/router/index.ts
View File

@ -3,6 +3,13 @@ import VueRouter, { RouteConfig } from 'vue-router';
// components
import CFP from '../pages/CFP.vue';
import News from '../pages/News.vue';
import OCFP from '../pages/OCFP.vue';
import Home from '../pages/Home.vue';
import Agenda from '../pages/Agenda.vue';
import Sponsor from '../pages/Sponsor.vue';
import Team from '../pages/Team.vue';
import Traffic from '../pages/Traffic.vue';
import Venue from '../pages/Venue.vue';
Vue.use(VueRouter);
@ -10,13 +17,63 @@ export const routes: RouteConfig[] = [
{
path: '/',
name: 'Home',
redirect: '/cfp',
component: Home,
meta: {
index: 0,
label: 'SITCON 2021',
menuItem: true
}
},
{
path: '/agenda',
name: 'Agenda',
component: Agenda,
meta: {
index: 1,
label: 'SITCON 2021',
menuItem: true
}
},
{
path: '/sponsor',
name: 'Sponsor',
component: Sponsor,
meta: {
index: 4,
label: '贊助資訊',
menuItem: true
}
},
{
path: '/team',
name: 'Team',
component: Team,
meta: {
index: 5,
label: 'SITCON團隊',
menuItem: true
}
},
{
path: '/traffic',
name: 'Traffic',
component: Traffic,
meta: {
index: 2,
label: '交通方式',
menuItem: true
}
},
{
path: '/venue',
name: 'Venue',
component: Venue,
meta: {
index: 3,
label: '會場地圖',
menuItem: true
}
},
{
path: '/cfp',
name: 'CFP',
@ -25,6 +82,14 @@ export const routes: RouteConfig[] = [
menuItem: false
}
},
{
path: '/cfp/ocfp-news',
name: 'ocfp-news',
component: OCFP,
meta: {
menuItem: false
}
},
{
path: '/cfp/news',
name: 'news',

14
template/themeExample.ocfp.ts Normal file
View File

@ -0,0 +1,14 @@
export default [
{
title: '新坑引導形式',
context: '我們期待講者藉由自身的學習經驗分享，帶領想要入門該領域的聽眾展開新領域學習的方向，提供學習時可得到的資源及管道。例如 : 我也想寫模型 - 如何入手機器學習？'
},
{
title: '議題探討形式',
context: '資訊發展快速，卻也延伸出了許多可探討的議題，我們期待以講者的拋磚引玉，與聽眾碰撞出更多的論點及討論。例如 : 人工智慧是否會有自我意識？'
},
{
title: '經驗分享形式',
context: '我們期待講者分享自己在資訊領域遇到的難題和解決方式，或是擔任活動籌備的經驗，任何您想分享的，都可以在開放式議程中實現。例如 : 學測還是特殊選材？我如何在學業與術業中做選擇。'
}
];

14
vue.config.js
View File

@ -15,7 +15,19 @@ module.exports = {
'/2021/cfp',
'/2021/cfp/',
'/2021/cfp/news',
'/2021/cfp/news/'
'/2021/cfp/news/',
'/2021/cfp/ocfp-news',
'/2021/cfp/ocfp-news/',
'/2021/agenda',
'/2021/agenda/',
'/2021/venue',
'/2021/venue/',
'/2021/traffic',
'/2021/traffic/',
'/2021/team',
'/2021/team/',
'/2021/sponsor',
'/2021/sponsor/'
],
useRenderEvent: true,
headless: true,