├── .github └── ISSUE_TEMPLATE │ └── ------.md ├── .gitignore ├── README.md ├── css ├── bootstrap.css ├── style.css ├── style.css.map └── style.scss ├── image ├── add-circular-outlined-button.png ├── bg_description-mobile.jpg ├── bg_description.jpg ├── bg_footer.png ├── bg_header.png ├── bg_history-mobile.png ├── bg_history.png ├── icon-bao.png ├── icon-buddha.png ├── icon-fb.png ├── icon-g-plus.png ├── icon-ig.png ├── icon-sleep.png ├── icon-strength.png ├── icon-twitter.png ├── judge_a.jpg ├── judge_a_l.jpg ├── judge_b.jpg ├── judge_b_l.jpg ├── judge_c.jpg ├── judge_c_l.jpg ├── judge_d.jpg ├── judge_d_l.jpg ├── judge_e.jpg ├── judge_e_l.jpg ├── judge_f.jpg ├── judge_f_l.jpg ├── judge_g.jpg ├── judge_g_l.jpg ├── judge_h.jpg ├── judge_h_l.jpg ├── logo_nav.png ├── team_a.jpg ├── team_b.jpg ├── team_c.jpg ├── team_d.jpg ├── team_e.jpg ├── team_f.jpg ├── title_description.png ├── title_history.png ├── title_judge.png ├── title_schedule.png ├── title_subscribe.png └── title_team.png ├── index.html └── js ├── bootstrap.js ├── index.js ├── jquery-3.4.1.js ├── slick ├── ajax-loader.gif ├── config.rb ├── fonts │ ├── slick.eot │ ├── slick.svg │ ├── slick.ttf │ └── slick.woff ├── slick-theme.css ├── slick-theme.less ├── slick-theme.scss ├── slick.css ├── slick.js ├── slick.less ├── slick.min.js └── slick.scss └── typed.js /.github/ISSUE_TEMPLATE/------.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 網站優化報告 3 | about: 請依照以下格式發文 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## 網址 11 | 12 | 13 | 14 | ## WebPageTest 報告網址 15 | 16 | 17 | 18 | ## 測速截圖 19 | 20 | 21 | 22 | ## 你做了哪些優化？ 23 | 24 | 25 | 26 | ## 心得 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 新拖延運動黑客松 2 | 3 | ## 介紹 4 | 5 | 網站連結：[GitHub Page](https://lidemy.github.io/lazy-hackathon/) 6 | 7 | ![visual](https://i.imgur.com/sb1m6XB.png) 8 | 9 | 此網站是 [程式導師實驗計畫第三期](https://github.com/Lidemy/mentor-program-3rd) 第二十週的作業，如果你覺得網站很卡很肥大，沒錯你是對的，因為我們故意把這個網站做得這麼卡。 10 | 11 | 現在呢，你要來負責最佳化這個網站，在「不動內容」的情形下來調整，意思就是說網頁看起來要「長得一模一樣」，把圖片變黑白、刪減文字或是更動排版都是不允許的，但刪減多餘的 HTML、CSS 和 JS 是 ok 的，只要保證網頁看起來一樣就行了，原始碼怎麼動隨便你，總之目標是使網站的載入速度變快。 12 | 13 | 這只是一個靜態網站，你可以 fork 到自己的 GitHub 去然後用 GitHub Page 來部署，也可以部署到自己的 Server 去並且額外做一些伺服器端的最佳化。 14 | 15 | 部署上去之後可以使用 [WebPageTest](https://www.webpagetest.org/) 這個網站來測試你的網站速度為何。（測試地點請統一選擇 Singapore - EC2），Browser 為 Chrome。 16 | 17 | 完成以後可以在這個 repo 開一個 [Issue](https://github.com/Lidemy/lazy-hackathon/issues/new/choose) 來記錄自己的結果（[範例](https://github.com/Lidemy/lazy-hackathon/issues/1)）。也可以在 Issues 裡面看到其他人的報告，看看別人怎麼做的，順便偷學個幾招。 18 | 19 | 若是你沒有任何靈感，可參考 [web.dev](https://web.dev/) 或是 [Website Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884) 20 | 21 | ## 關於 22 | 23 | 此專案由 [@yakim-shu](https://github.com/yakim-shu) 負責製作，十分感謝。 24 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* ------- Variable ------- */ 3 | /* ------- media query ------- */ 4 | /* ------- mixins ------- */ 5 | /* size */ 6 | /* pseudo */ 7 | /* position */ 8 | /* icon */ 9 | /* ------- extends ------- */ 10 | .team__item .team__btn, .judge__card .btn, .subscribe__input button, .nav .navbar, .team__item, .team__pic::after, .judge__item, .judge__item .pic img, .judge__item .pic::before { 11 | -webkit-transition: all .4s; 12 | transition: all .4s; 13 | } 14 | 15 | html, 16 | body, ul { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | .team__pic, .judge__item .pic, .judge__gallery .pic { 22 | overflow: hidden; 23 | } 24 | 25 | .team__pic img, .judge__item .pic img, .judge__gallery .pic img { 26 | max-width: 100%; 27 | height: auto; 28 | } 29 | 30 | /* ------- elements ------- */ 31 | /* btn */ 32 | .team__item .team__btn, .judge__card .btn, .subscribe__input button { 33 | display: inline-block; 34 | font-size: 14px; 35 | padding: 5px 30px; 36 | background: #FAD312; 37 | color: #000; 38 | border-radius: 0; 39 | text-decoration: none; 40 | } 41 | 42 | /* title */ 43 | .section .section__title { 44 | display: inline-block; 45 | margin: 0 auto 60px auto; 46 | border-bottom: 4px solid #FAD312; 47 | padding-bottom: 5px; 48 | } 49 | 50 | .section .section__title span { 51 | color: #333; 52 | font-size: 22px; 53 | font-weight: 500; 54 | } 55 | 56 | .section .section__title span::before { 57 | content: ''; 58 | display: block; 59 | width: 20px; 60 | height: 20px; 61 | display: inline-block; 62 | background-color: #000; 63 | -webkit-mask-size: cover; 64 | mask-size: cover; 65 | -webkit-mask-image: url("./../image/"); 66 | mask-image: url("./../image/"); 67 | position: relative; 68 | top: 3px; 69 | right: 5px; 70 | } 71 | 72 | .section .dark-mode.section__title { 73 | border-color: #626262; 74 | } 75 | 76 | .section .dark-mode.section__title span { 77 | color: #FAD312; 78 | } 79 | 80 | /* title - 各區塊標題 */ 81 | .description .section__title span::before { 82 | -webkit-mask-image: url("./../image/title_description.png"); 83 | mask-image: url("./../image/title_description.png"); 84 | } 85 | 86 | .team .section__title span::before { 87 | width: 22px; 88 | height: 22px; 89 | -webkit-mask-image: url("./../image/title_team.png"); 90 | mask-image: url("./../image/title_team.png"); 91 | } 92 | 93 | .schedule .section__title span::before { 94 | -webkit-mask-image: url("./../image/title_schedule.png"); 95 | mask-image: url("./../image/title_schedule.png"); 96 | } 97 | 98 | .history .section__title span::before { 99 | width: 25px; 100 | height: 25px; 101 | top: 5px; 102 | -webkit-mask-image: url("./../image/title_history.png"); 103 | mask-image: url("./../image/title_history.png"); 104 | background-color: #FAD312; 105 | } 106 | 107 | .judge .section__title span::before { 108 | color: #fff; 109 | -webkit-mask-image: url("./../image/title_judge.png"); 110 | mask-image: url("./../image/title_judge.png"); 111 | background-color: #FAD312; 112 | } 113 | 114 | .subscribe .section__title span::before { 115 | -webkit-mask-image: url("./../image/title_subscribe.png"); 116 | mask-image: url("./../image/title_subscribe.png"); 117 | } 118 | 119 | /* ------- layout ------- */ 120 | * { 121 | font-family: 'Arvo', 'Noto Sans TC', sans-serif; 122 | } 123 | 124 | html, 125 | body { 126 | -webkit-overflow-scrolling: touch; 127 | } 128 | 129 | body { 130 | background: #fff; 131 | } 132 | 133 | body main { 134 | z-index: 2; 135 | margin-bottom: 400px; 136 | background: #fff; 137 | padding-top: 50px; 138 | -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); 139 | box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); 140 | z-index: 10; 141 | } 142 | 143 | body .footer { 144 | background: #000; 145 | position: fixed; 146 | bottom: 0; 147 | left: 0; 148 | width: 100%; 149 | z-index: -1; 150 | padding: 0; 151 | } 152 | 153 | ul { 154 | list-style: none; 155 | } 156 | 157 | .section { 158 | padding: 50px 20px; 159 | margin: 0 auto; 160 | } 161 | 162 | @media screen and (max-width: 375px) { 163 | .section { 164 | padding: 30px 15px; 165 | } 166 | } 167 | 168 | /* ------- nav ------- */ 169 | .nav { 170 | background: #fff; 171 | width: 100%; 172 | /* nav - 滑動中 */ 173 | } 174 | 175 | .nav .navbar { 176 | background: #fff !important; 177 | width: 860px; 178 | padding: 30px; 179 | margin: 0 auto; 180 | -webkit-box-pack: justify; 181 | -ms-flex-pack: justify; 182 | justify-content: space-between; 183 | } 184 | 185 | .nav .navbar button:hover, 186 | .nav .navbar button:focus { 187 | outline: none; 188 | } 189 | 190 | .nav .nav__logo { 191 | width: 160px; 192 | height: 45px; 193 | background: url("./../image/logo_nav.png") no-repeat center center; 194 | background-size: 100% auto; 195 | } 196 | 197 | .nav.nav-scrolled .navbar { 198 | padding: 10px 15px; 199 | } 200 | 201 | .nav.nav-scrolled .nav__logo { 202 | width: 120px; 203 | } 204 | 205 | /* nav - 按鈕 */ 206 | .navbar .navbar-nav { 207 | width: 100%; 208 | -webkit-box-pack: space-evenly; 209 | -ms-flex-pack: space-evenly; 210 | justify-content: space-evenly; 211 | } 212 | 213 | .navbar .navbar-nav .nav-item { 214 | font-size: 15px; 215 | color: #666; 216 | position: relative; 217 | padding: 10px; 218 | } 219 | 220 | .navbar .navbar-nav .nav-item:hover::after { 221 | opacity: 1; 222 | -webkit-transform: scale(1); 223 | transform: scale(1); 224 | } 225 | 226 | .navbar .navbar-nav .nav-item::after { 227 | content: ''; 228 | display: block; 229 | width: 25px; 230 | height: 2px; 231 | position: absolute; 232 | bottom: 0; 233 | left: 6px; 234 | -webkit-transform-origin: 0 50%; 235 | transform-origin: 0 50%; 236 | -webkit-transition: opacity 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); 237 | transition: opacity 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); 238 | transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); 239 | transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); 240 | -webkit-transform: scaleX(0.5); 241 | transform: scaleX(0.5); 242 | background: #FAD312; 243 | opacity: 0; 244 | } 245 | 246 | /* nav - 蓋預設樣式 */ 247 | .navbar-light .navbar-nav .nav-link:focus, 248 | .navbar-light .navbar-nav .nav-link:hover { 249 | color: #000; 250 | } 251 | 252 | /* nav - RWD */ 253 | @media screen and (max-width: 1200px) { 254 | .navbar-nav { 255 | text-align: center; 256 | padding-top: 30px; 257 | } 258 | } 259 | 260 | /* ------- header ------- */ 261 | .header { 262 | height: calc(100vh - 100px); 263 | background: -webkit-gradient(linear, right top, left top, color-stop(30%, transparent), color-stop(0, #FAD312)), #fff; 264 | background: linear-gradient(-90deg, transparent 30%, #FAD312 0), #fff; 265 | display: -webkit-box; 266 | display: -ms-flexbox; 267 | display: flex; 268 | -webkit-box-align: center; 269 | -ms-flex-align: center; 270 | align-items: center; 271 | } 272 | 273 | .header .bg { 274 | width: 80%; 275 | height: 70vh; 276 | margin: 0 auto; 277 | background: url("./../image/bg_header.png") no-repeat center center; 278 | background-size: 80% auto; 279 | } 280 | 281 | /* header - RWD */ 282 | @media screen and (max-width: 1200px) { 283 | .header { 284 | background: #fff; 285 | height: auto; 286 | } 287 | .header .bg { 288 | width: 100%; 289 | height: 500px; 290 | background-size: auto 100%; 291 | } 292 | } 293 | 294 | @media screen and (max-width: 768px) { 295 | .header .bg { 296 | height: 60vw; 297 | /* 依照圖片比例縮放 */ 298 | } 299 | } 300 | 301 | /* ------- 比賽簡介 ------- */ 302 | .description { 303 | text-align: center; 304 | padding: 0; 305 | } 306 | 307 | .description .description__bg { 308 | background: #fff url("./../image/bg_description.jpg") no-repeat center center; 309 | background-size: 100% auto; 310 | background-attachment: fixed; 311 | } 312 | 313 | .description .description__bg .description__inner { 314 | max-width: 860px; 315 | margin: 0 auto; 316 | text-align: left; 317 | padding: 30px 20px; 318 | } 319 | 320 | .description .description__summary { 321 | color: #fff; 322 | font-size: 15px; 323 | text-shadow: 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 0 rgba(0, 0, 0, 0.8); 324 | line-height: 1.7rem; 325 | letter-spacing: 0.14em; 326 | } 327 | 328 | .description .description__summary span { 329 | color: #FAD312; 330 | } 331 | 332 | /* 比賽簡介 - 標題 ------- */ 333 | .description__title { 334 | height: 120px; 335 | position: relative; 336 | color: #fff; 337 | margin-bottom: 3rem; 338 | } 339 | 340 | .description__title h4 { 341 | height: 120px; 342 | text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 343 | } 344 | 345 | .description__title h4 span { 346 | color: #FAD312; 347 | } 348 | 349 | .description__title .typed-cursor { 350 | color: #FAD312; 351 | } 352 | 353 | .description__title::after { 354 | position: absolute; 355 | top: 65px; 356 | left: 0; 357 | width: 170px; 358 | height: 10px; 359 | content: ''; 360 | display: block; 361 | background: #fbdc44; 362 | z-index: 1; 363 | } 364 | 365 | @media screen and (max-width: 1024px) { 366 | .description .description__bg { 367 | background-size: 140% auto; 368 | } 369 | } 370 | 371 | @media screen and (max-width: 640px) { 372 | .description .description__bg { 373 | background-color: #000; 374 | background-image: url("./../image/bg_description-mobile.jpg"); 375 | background-size: 100% auto; 376 | background-attachment: initial; 377 | } 378 | } 379 | 380 | @media screen and (max-width: 480px) { 381 | .description .description__bg { 382 | background-size: auto 100%; 383 | } 384 | } 385 | 386 | @media screen and (max-width: 480px) { 387 | .description .description__summary { 388 | padding: 10px; 389 | background: rgba(0, 0, 0, 0.2); 390 | } 391 | } 392 | 393 | /* ------- 參賽隊伍 ------- */ 394 | .team { 395 | max-width: 860px; 396 | text-align: center; 397 | background: #fff; 398 | } 399 | 400 | .team .team-list { 401 | display: -webkit-box; 402 | display: -ms-flexbox; 403 | display: flex; 404 | -webkit-box-pack: justify; 405 | -ms-flex-pack: justify; 406 | justify-content: space-between; 407 | -ms-flex-wrap: wrap; 408 | flex-wrap: wrap; 409 | } 410 | 411 | /* 組 */ 412 | .team__item { 413 | width: 31%; 414 | cursor: pointer; 415 | margin-bottom: 50px; 416 | } 417 | 418 | .team__item .team__btn { 419 | position: relative; 420 | top: -20px; 421 | } 422 | 423 | /* 組__標題 */ 424 | .team__title { 425 | text-align: left; 426 | padding: 20px 10px; 427 | font-size: 18px; 428 | font-weight: bold; 429 | background: #fbdc44; 430 | position: relative; 431 | margin-bottom: 7px; 432 | } 433 | 434 | .team__title:before { 435 | content: ''; 436 | display: inline-block; 437 | width: 15px; 438 | height: 15px; 439 | display: inline-block; 440 | background-color: #000; 441 | -webkit-mask-size: cover; 442 | mask-size: cover; 443 | -webkit-mask-image: url("./../image/add-circular-outlined-button.png"); 444 | mask-image: url("./../image/add-circular-outlined-button.png"); 445 | position: absolute; 446 | right: 10px; 447 | } 448 | 449 | .team__title .team__name { 450 | color: #999; 451 | display: block; 452 | font-size: 13px; 453 | font-weight: normal; 454 | margin-bottom: 10px; 455 | } 456 | 457 | /* 組__圖片 */ 458 | .team__pic { 459 | height: 140px; 460 | position: relative; 461 | } 462 | 463 | .team__pic::after { 464 | position: absolute; 465 | top: 0; 466 | left: 0; 467 | content: ''; 468 | display: block; 469 | height: 100%; 470 | width: 100%; 471 | background: -webkit-gradient(linear, left top, right bottom, from(rgba(130, 125, 168, 0)), to(#e5b01c59)); 472 | background: linear-gradient(to bottom right, rgba(130, 125, 168, 0), #e5b01c59); 473 | } 474 | 475 | /* 組 - 基數組 */ 476 | .team__item:nth-of-type(even) .team__title { 477 | background: #000; 478 | color: #fff; 479 | border-color: #000; 480 | } 481 | 482 | .team__item:nth-of-type(even) .team__title:before { 483 | background-color: #fff; 484 | } 485 | 486 | .team__item:nth-of-type(even):hover .team__pic::after { 487 | border-color: #000; 488 | } 489 | 490 | .team__item:nth-of-type(even):hover .team__btn { 491 | background: #000; 492 | color: #fff; 493 | } 494 | 495 | /* 組 - hover */ 496 | .team__item:hover { 497 | -webkit-transform: scale(1.02); 498 | transform: scale(1.02); 499 | } 500 | 501 | .team__item:hover .team__pic::after { 502 | width: 96%; 503 | height: 94%; 504 | border: 3px solid #FAD312; 505 | left: 2%; 506 | top: 3%; 507 | background: none; 508 | } 509 | 510 | .team__item:hover .team__btn { 511 | top: -37px; 512 | } 513 | 514 | /* 組 - RWD */ 515 | @media screen and (max-width: 1024px) { 516 | .team__item { 517 | width: 30%; 518 | } 519 | } 520 | 521 | @media screen and (max-width: 768px) { 522 | .team__item { 523 | width: 48%; 524 | } 525 | .team__item .team__pic { 526 | height: 180px; 527 | } 528 | } 529 | 530 | @media screen and (max-width: 640px) { 531 | .team__item .team__pic { 532 | height: 130px; 533 | } 534 | } 535 | 536 | @media screen and (max-width: 480px) { 537 | .team__item { 538 | width: 100%; 539 | margin-bottom: 10px; 540 | } 541 | .team__item .team__pic { 542 | height: auto; 543 | } 544 | } 545 | 546 | /* ------- 活動時程 ------- */ 547 | .schedule { 548 | text-align: center; 549 | background: #FAD312; 550 | color: #fff; 551 | } 552 | 553 | .schedule .table { 554 | max-width: 960px; 555 | margin: 0 auto; 556 | } 557 | 558 | /* table - 蓋預設樣式 */ 559 | .table-bordered, 560 | .table thead th { 561 | border: 2px solid #333; 562 | } 563 | 564 | .table-bordered td, 565 | .table-bordered th { 566 | border: 1px solid #333; 567 | } 568 | 569 | .table-bordered thead td, 570 | .table-bordered thead th { 571 | background: #333; 572 | color: #fff; 573 | } 574 | 575 | /* ------- 歷屆成績 ------- */ 576 | .history { 577 | text-align: center; 578 | background: #000 url("./../image/bg_history.png") repeat-y center center; 579 | background-attachment: fixed; 580 | background-size: 960px auto; 581 | } 582 | 583 | .history .history__list { 584 | max-width: 960px; 585 | margin: 0 auto 80px; 586 | display: -webkit-box; 587 | display: -ms-flexbox; 588 | display: flex; 589 | -webkit-box-pack: justify; 590 | -ms-flex-pack: justify; 591 | justify-content: space-between; 592 | -webkit-box-align: center; 593 | -ms-flex-align: center; 594 | align-items: center; 595 | } 596 | 597 | /* 歷屆成績 - RWD */ 598 | @media screen and (max-width: 640px) { 599 | .history { 600 | background-image: url("./../image/bg_history-mobile.png"); 601 | background-size: cover; 602 | background-attachment: initial; 603 | } 604 | } 605 | 606 | @media screen and (max-width: 768px) { 607 | .history .history__list { 608 | -ms-flex-wrap: wrap; 609 | flex-wrap: wrap; 610 | -webkit-box-pack: space-evenly; 611 | -ms-flex-pack: space-evenly; 612 | justify-content: space-evenly; 613 | max-width: 360px; 614 | } 615 | } 616 | 617 | /* 歷屆成績 - 組 */ 618 | .history__item { 619 | width: 22%; 620 | border: 2px solid #FAD312; 621 | padding: 20px 0; 622 | color: #fff; 623 | -webkit-box-shadow: 0 0 2px 0px #000; 624 | box-shadow: 0 0 2px 0px #000; 625 | } 626 | 627 | .history__item p { 628 | font-size: 40px; 629 | margin: 0; 630 | } 631 | 632 | .history__item span { 633 | position: relative; 634 | top: -10px; 635 | font-size: 14px; 636 | } 637 | 638 | /* 歷屆成績 - 組 - RWD */ 639 | @media screen and (max-width: 768px) { 640 | .history__item { 641 | width: 45%; 642 | margin-bottom: 20px; 643 | } 644 | } 645 | 646 | /* ------- 使用者見證 ------- */ 647 | .comments { 648 | display: -webkit-box; 649 | display: -ms-flexbox; 650 | display: flex; 651 | -ms-flex-wrap: wrap; 652 | flex-wrap: wrap; 653 | -webkit-box-pack: justify; 654 | -ms-flex-pack: justify; 655 | justify-content: space-between; 656 | -webkit-box-align: top; 657 | -ms-flex-align: top; 658 | align-items: top; 659 | max-width: 860px; 660 | color: #fff; 661 | margin: 0 auto; 662 | } 663 | 664 | .comments .comments__item { 665 | width: 44%; 666 | font-size: 15px; 667 | margin-bottom: 2.5rem; 668 | line-height: 2rem; 669 | position: relative; 670 | } 671 | 672 | .comments .comments__item p { 673 | padding-left: 90px; 674 | text-align: left; 675 | } 676 | 677 | /* 使用者見證 - icon */ 678 | .comments__icon { 679 | position: absolute; 680 | top: 0; 681 | left: 0; 682 | width: 70px; 683 | height: 70px; 684 | display: inline-block; 685 | background-color: #FAD312; 686 | -webkit-mask-size: cover; 687 | mask-size: cover; 688 | -webkit-mask-image: url("./../image/"); 689 | mask-image: url("./../image/"); 690 | } 691 | 692 | .comments__icon.icon-strength { 693 | -webkit-mask-image: url("./../image/icon-strength.png"); 694 | mask-image: url("./../image/icon-strength.png"); 695 | } 696 | 697 | .comments__icon.icon-buddha { 698 | width: 80px; 699 | height: 80px; 700 | -webkit-mask-image: url("./../image/icon-buddha.png"); 701 | mask-image: url("./../image/icon-buddha.png"); 702 | } 703 | 704 | .comments__icon.icon-sleep { 705 | -webkit-mask-image: url("./../image/icon-sleep.png"); 706 | mask-image: url("./../image/icon-sleep.png"); 707 | } 708 | 709 | .comments__icon.icon-bao { 710 | -webkit-mask-image: url("./../image/icon-bao.png"); 711 | mask-image: url("./../image/icon-bao.png"); 712 | } 713 | 714 | /* 使用者見證 - RWD */ 715 | @media screen and (max-width: 640px) { 716 | .comments .comments__item { 717 | width: 100%; 718 | } 719 | } 720 | 721 | /* ------- 評審介紹 ------- */ 722 | .judge { 723 | background: #000; 724 | text-align: center; 725 | } 726 | 727 | .judge .judge__nav { 728 | max-width: 600px; 729 | margin: 0 auto 30px auto; 730 | padding: 0 25px; 731 | } 732 | 733 | .judge .judge__nav .slick-prev { 734 | left: 0; 735 | } 736 | 737 | .judge .judge__nav .slick-next { 738 | right: 0; 739 | } 740 | 741 | .judge .judge__nav .slick-dots { 742 | display: none !important; 743 | } 744 | 745 | /* nav */ 746 | .judge__item { 747 | padding: 5px; 748 | cursor: pointer; 749 | } 750 | 751 | .judge__item .pic { 752 | position: relative; 753 | } 754 | 755 | .judge__item .pic img { 756 | -webkit-filter: grayscale(90%); 757 | filter: grayscale(90%); 758 | } 759 | 760 | /* nav - hover 效果 */ 761 | .judge__item .pic::before { 762 | content: ''; 763 | display: block; 764 | width: 90%; 765 | height: 90%; 766 | position: absolute; 767 | top: 5%; 768 | left: 5%; 769 | border: 2px solid #FAD312; 770 | background: rgba(0, 0, 0, 0.4); 771 | opacity: 0; 772 | z-index: 1; 773 | } 774 | 775 | .judge__item .pic::after { 776 | content: ''; 777 | display: block; 778 | width: 20px; 779 | height: 20px; 780 | display: block; 781 | background-color: #fff; 782 | -webkit-mask-size: cover; 783 | mask-size: cover; 784 | -webkit-mask-image: url("./../image/add-circular-outlined-button.png"); 785 | mask-image: url("./../image/add-circular-outlined-button.png"); 786 | position: absolute; 787 | bottom: calc(50% - 10px); 788 | left: calc(50% - 10px); 789 | opacity: 0; 790 | z-index: 1; 791 | } 792 | 793 | /* nav - hover */ 794 | .judge__item:hover { 795 | -webkit-transform: scale(1.02); 796 | transform: scale(1.02); 797 | } 798 | 799 | .judge__item:hover p, 800 | .judge__item:hover .pic::before, 801 | .judge__item:hover .pic::after { 802 | opacity: 1; 803 | } 804 | 805 | .judge__item:focus { 806 | outline: none; 807 | } 808 | 809 | /* nav - center */ 810 | .slick-center { 811 | -webkit-transform: scale(1.1); 812 | transform: scale(1.1); 813 | } 814 | 815 | .slick-center .pic img { 816 | -webkit-filter: none; 817 | filter: none; 818 | } 819 | 820 | /* gallery */ 821 | .judge__gallery { 822 | position: relative; 823 | left: -50px; 824 | max-width: 960px; 825 | margin: 0 auto 30px auto; 826 | padding-left: 30px; 827 | } 828 | 829 | .judge__gallery .pic { 830 | width: calc(100% - 180px); 831 | height: 350px; 832 | border-top: 4px solid #FAD312; 833 | float: right; 834 | display: -webkit-box; 835 | display: -ms-flexbox; 836 | display: flex; 837 | } 838 | 839 | .judge__gallery .pic img { 840 | -ms-flex-item-align: center; 841 | -ms-grid-row-align: center; 842 | align-self: center; 843 | } 844 | 845 | .judge__gallery .judge__card { 846 | position: relative; 847 | top: 40px; 848 | right: -30px; 849 | width: 180px; 850 | height: 260px; 851 | display: -webkit-box; 852 | display: -ms-flexbox; 853 | display: flex; 854 | -webkit-box-pack: center; 855 | -ms-flex-pack: center; 856 | justify-content: center; 857 | -ms-flex-wrap: wrap; 858 | flex-wrap: wrap; 859 | float: left; 860 | border-top: 4px solid #aaa; 861 | background: #363636; 862 | color: #fff; 863 | -webkit-box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.34), 2px 2px 10px rgba(0, 0, 0, 0.2); 864 | box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.34), 2px 2px 10px rgba(0, 0, 0, 0.2); 865 | padding: 20px 10px; 866 | } 867 | 868 | /* gallery - card */ 869 | .judge__card .judge__card-title { 870 | font-size: 15px; 871 | position: relative; 872 | } 873 | 874 | .judge__card .judge__card-title::after { 875 | content: ''; 876 | display: inline-block; 877 | width: 20px; 878 | height: 5px; 879 | position: absolute; 880 | bottom: 10px; 881 | left: calc(50% - 10px); 882 | background: #FAD312; 883 | } 884 | 885 | .judge__card .judge__card-summary { 886 | font-size: 13px; 887 | color: #999; 888 | text-align: left; 889 | } 890 | 891 | .judge__card .btn { 892 | border: 1px solid #FAD312; 893 | background: none; 894 | color: #FAD312; 895 | -ms-flex-item-align: end; 896 | align-self: flex-end; 897 | } 898 | 899 | /* gallery - RWD */ 900 | @media screen and (max-width: 1024px) { 901 | .judge__gallery { 902 | left: 0; 903 | padding-left: 0; 904 | } 905 | .judge__gallery .pic, 906 | .judge__gallery .judge__card { 907 | height: 300px; 908 | } 909 | .judge__gallery .judge__card { 910 | right: 0; 911 | top: 0; 912 | } 913 | } 914 | 915 | @media screen and (max-width: 768px) { 916 | .judge__gallery .pic, 917 | .judge__gallery .judge__card { 918 | height: 250px; 919 | } 920 | } 921 | 922 | @media screen and (max-width: 640px) { 923 | .judge__gallery { 924 | padding-left: 0; 925 | } 926 | .judge__gallery .pic { 927 | width: 100%; 928 | height: auto; 929 | float: none; 930 | } 931 | } 932 | 933 | /* gallery - card - RWD */ 934 | @media screen and (max-width: 640px) { 935 | .judge__gallery .judge__card { 936 | position: absolute; 937 | top: auto; 938 | bottom: 0; 939 | left: 0; 940 | width: 100%; 941 | height: 60px; 942 | float: none; 943 | -ms-flex-wrap: no-wrap; 944 | flex-wrap: no-wrap; 945 | -webkit-box-pack: space-evenly; 946 | -ms-flex-pack: space-evenly; 947 | justify-content: space-evenly; 948 | -webkit-box-align: center; 949 | -ms-flex-align: center; 950 | align-items: center; 951 | padding: 0; 952 | border-top: none; 953 | background: rgba(0, 0, 0, 0.6); 954 | } 955 | .judge__gallery .judge__card .judge__card-summary, 956 | .judge__gallery .judge__card .judge__card-title::after { 957 | display: none; 958 | } 959 | .judge__gallery .judge__card .btn { 960 | -ms-flex-item-align: center; 961 | -ms-grid-row-align: center; 962 | align-self: center; 963 | padding: 5px 20px; 964 | margin-left: 10px; 965 | } 966 | } 967 | 968 | /* ------- footer ------- */ 969 | /* 報名資訊 ------- */ 970 | .subscribe { 971 | background: #fff url("./../image/bg_footer.png") no-repeat center center; 972 | background-size: auto 380px; 973 | border-bottom: 3px solid #FAD312; 974 | } 975 | 976 | .subscribe .subscribe__inner { 977 | max-width: 700px; 978 | margin: 0 auto; 979 | padding: 40px 20px; 980 | text-align: center; 981 | } 982 | 983 | .subscribe .subscribe__inner .subscribe__summary { 984 | letter-spacing: .15rem; 985 | line-height: 2rem; 986 | font-weight: 500; 987 | color: #666; 988 | margin-bottom: 40px; 989 | } 990 | 991 | /* form */ 992 | .subscribe__input { 993 | display: -webkit-box; 994 | display: -ms-flexbox; 995 | display: flex; 996 | max-width: 500px; 997 | margin: 0 auto; 998 | height: 40px; 999 | } 1000 | 1001 | .subscribe__input input[type='email'] { 1002 | outline: none; 1003 | border: none; 1004 | padding: 10px; 1005 | display: block; 1006 | width: 100%; 1007 | background: none; 1008 | border-bottom: 2px solid #000; 1009 | } 1010 | 1011 | .subscribe__input button { 1012 | margin-left: 10px; 1013 | width: 30%; 1014 | border: 2px solid #000; 1015 | background: none; 1016 | padding: 5px 20px; 1017 | } 1018 | 1019 | .subscribe__input button:hover { 1020 | background: #000; 1021 | color: #fff; 1022 | } 1023 | 1024 | /* form - RWD */ 1025 | @media screen and (max-width: 375px) { 1026 | .subscribe__input button { 1027 | width: 40%; 1028 | padding: 5px 10px; 1029 | } 1030 | } 1031 | 1032 | /* footer 社群 ------- */ 1033 | .footer__info { 1034 | display: -webkit-box; 1035 | display: -ms-flexbox; 1036 | display: flex; 1037 | -webkit-box-pack: justify; 1038 | -ms-flex-pack: justify; 1039 | justify-content: space-between; 1040 | -webkit-box-align: center; 1041 | -ms-flex-align: center; 1042 | align-items: center; 1043 | max-width: 960px; 1044 | margin: 0 auto; 1045 | padding: 20px; 1046 | color: #fff; 1047 | } 1048 | 1049 | .footer__info .copyright { 1050 | color: #999; 1051 | margin: 0; 1052 | font-size: 13px; 1053 | } 1054 | 1055 | .footer__social-media { 1056 | display: -webkit-box; 1057 | display: -ms-flexbox; 1058 | display: flex; 1059 | -webkit-box-align: center; 1060 | -ms-flex-align: center; 1061 | align-items: center; 1062 | } 1063 | 1064 | .footer__social-media .footer__social-icon { 1065 | width: 30px; 1066 | height: 30px; 1067 | display: inline-block; 1068 | background-color: #bbb; 1069 | -webkit-mask-size: cover; 1070 | mask-size: cover; 1071 | -webkit-mask-image: url("./../image/"); 1072 | mask-image: url("./../image/"); 1073 | margin-left: 5px; 1074 | cursor: pointer; 1075 | } 1076 | 1077 | .footer__social-media .footer__social-icon:hover { 1078 | background: #eee; 1079 | } 1080 | 1081 | .footer__social-media .footer__social-icon.icon-fb { 1082 | -webkit-mask-image: url("./../image/icon-fb.png"); 1083 | mask-image: url("./../image/icon-fb.png"); 1084 | } 1085 | 1086 | .footer__social-media .footer__social-icon.icon-twitter { 1087 | -webkit-mask-image: url("./../image/icon-twitter.png"); 1088 | mask-image: url("./../image/icon-twitter.png"); 1089 | } 1090 | 1091 | .footer__social-media .footer__social-icon.icon-ig { 1092 | -webkit-mask-image: url("./../image/icon-ig.png"); 1093 | mask-image: url("./../image/icon-ig.png"); 1094 | } 1095 | 1096 | .footer__social-media .footer__social-icon.icon-g-plus { 1097 | -webkit-mask-image: url("./../image/icon-g-plus.png"); 1098 | mask-image: url("./../image/icon-g-plus.png"); 1099 | } 1100 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /css/style.scss: -------------------------------------------------------------------------------- 1 | /* ------- Variable ------- */ 2 | $color_main: #FAD312; 3 | $color_grey_light: #999; 4 | $color_grey_dark: #333; 5 | $width-l: 960px; 6 | $width-m: 860px; 7 | $width-s: 700px; 8 | 9 | /* ------- media query ------- */ 10 | $breakpoints: ("phone": 375px, "phone-l": 480px, "tablet-s": 640px, "tablet": 768px, "desktop": 1024px, "desktop-l": 1200px); 11 | 12 | @mixin mq($width) { 13 | @if map_has_key($breakpoints, $width) { 14 | $width: map_get($breakpoints, $width); 15 | 16 | @media screen and (max-width: $width) { 17 | @content; 18 | } 19 | } 20 | } 21 | 22 | 23 | /* ------- mixins ------- */ 24 | 25 | /* size */ 26 | @mixin size($width, $height: $width) { 27 | width: $width; 28 | height: $height; 29 | } 30 | 31 | 32 | /* pseudo */ 33 | @mixin pseudo($display: block, $content: '') { 34 | content: ''; 35 | display: $display; 36 | } 37 | 38 | 39 | /* position */ 40 | @mixin position($position, $top: null, $right: null, $bottom: null, $left: null) { 41 | position: $position; 42 | top: $top; 43 | right: $right; 44 | bottom: $bottom; 45 | left: $left; 46 | } 47 | 48 | @mixin absolute($args...) { 49 | @include position(absolute, $args...); 50 | } 51 | 52 | @mixin relative($args...) { 53 | @include position(relative, $args...); 54 | } 55 | 56 | 57 | /* icon */ 58 | @mixin icon ($icon-color, $icon-url, $icon-type: inline-block) { 59 | display: $icon-type; 60 | background-color: $icon-color; 61 | mask-size: cover; 62 | mask-image: url('./../image/'+ $icon-url); 63 | } 64 | 65 | 66 | /* ------- extends ------- */ 67 | %transition { 68 | transition: all .4s; 69 | } 70 | 71 | %reset { 72 | margin: 0; 73 | padding: 0; 74 | } 75 | 76 | %responsive-img { 77 | overflow: hidden; 78 | 79 | img { 80 | max-width: 100%; 81 | height: auto; 82 | } 83 | } 84 | 85 | 86 | /* ------- elements ------- */ 87 | 88 | /* btn */ 89 | %btn { 90 | display: inline-block; 91 | font-size: 14px; 92 | padding: 5px 30px; 93 | background: $color_main; 94 | color: #000; 95 | border-radius: 0; 96 | text-decoration: none; 97 | @extend %transition; 98 | } 99 | 100 | 101 | /* title */ 102 | %title { 103 | display: inline-block; 104 | margin: 0 auto 60px auto; 105 | border-bottom: 4px solid $color_main; 106 | padding-bottom: 5px; 107 | 108 | span { 109 | color: $color_grey_dark; 110 | font-size: 22px; 111 | font-weight: 500; 112 | 113 | &::before { 114 | @include pseudo(); 115 | @include size(20px); 116 | @include icon(#000, 117 | ''); 118 | @include relative($right: 5px, $top: 3px); 119 | } 120 | } 121 | 122 | &.dark-mode { 123 | border-color: #626262; 124 | 125 | span { 126 | color: $color_main; 127 | } 128 | } 129 | } 130 | 131 | 132 | /* title - 各區塊標題 */ 133 | .section__title span::before { 134 | .description & { 135 | mask-image: url('./../image/title_description.png'); 136 | } 137 | 138 | .team & { 139 | width: 22px; 140 | height: 22px; 141 | mask-image: url('./../image/title_team.png'); 142 | } 143 | 144 | .schedule & { 145 | mask-image: url('./../image/title_schedule.png'); 146 | } 147 | 148 | .history & { 149 | width: 25px; 150 | height: 25px; 151 | top: 5px; 152 | mask-image: url('./../image/title_history.png'); 153 | background-color: $color_main; 154 | } 155 | 156 | .judge & { 157 | color: #fff; 158 | mask-image: url('./../image/title_judge.png'); 159 | background-color: $color_main; 160 | } 161 | 162 | .subscribe & { 163 | mask-image: url('./../image/title_subscribe.png'); 164 | } 165 | } 166 | 167 | 168 | /* ------- layout ------- */ 169 | * { 170 | font-family: 'Arvo', 'Noto Sans TC', sans-serif; 171 | } 172 | 173 | html, 174 | body { 175 | @extend %reset; 176 | -webkit-overflow-scrolling: touch; 177 | } 178 | 179 | body { 180 | background: #fff; 181 | 182 | main { 183 | z-index: 2; 184 | margin-bottom: 400px; 185 | background: #fff; 186 | padding-top: 50px; 187 | box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); 188 | z-index: 10; 189 | } 190 | 191 | .footer { 192 | background: #000; 193 | position: fixed; 194 | bottom: 0; 195 | left: 0; 196 | width: 100%; 197 | z-index: -1; 198 | padding: 0; 199 | } 200 | } 201 | 202 | ul { 203 | @extend %reset; 204 | list-style: none; 205 | } 206 | 207 | .section { 208 | padding: 50px 20px; 209 | margin: 0 auto; 210 | 211 | .section__title { 212 | @extend %title; 213 | } 214 | 215 | @include mq('phone') { 216 | padding: 30px 15px; 217 | } 218 | } 219 | 220 | 221 | /* ------- nav ------- */ 222 | .nav { 223 | background: #fff; 224 | width: 100%; 225 | 226 | .navbar { 227 | @extend %transition; 228 | background: #fff !important; 229 | width: $width-m; 230 | padding: 30px; 231 | margin: 0 auto; 232 | justify-content: space-between; 233 | 234 | button:hover, 235 | button:focus { 236 | outline: none; 237 | } 238 | } 239 | 240 | .nav__logo { 241 | @include size(160px, 242 | 45px); 243 | background: url('./../image/logo_nav.png') no-repeat center center; 244 | background-size: 100% auto; 245 | } 246 | 247 | /* nav - 滑動中 */ 248 | &.nav-scrolled { 249 | .navbar { 250 | padding: 10px 15px; 251 | } 252 | 253 | .nav__logo { 254 | width: 120px; 255 | } 256 | } 257 | } 258 | 259 | 260 | /* nav - 按鈕 */ 261 | .navbar .navbar-nav { 262 | width: 100%; 263 | justify-content: space-evenly; 264 | 265 | .nav-item { 266 | font-size: 15px; 267 | color: #666; 268 | position: relative; 269 | padding: 10px; 270 | 271 | &:hover::after { 272 | opacity: 1; 273 | transform: scale(1); 274 | } 275 | 276 | &::after { 277 | @include pseudo(); 278 | @include size(25px, 279 | 2px); 280 | @include absolute($left: 6px, $bottom: 0); 281 | transform-origin: 0 50%; 282 | transition: transform .3s cubic-bezier(.785, .135, .15, .86), opacity .3s cubic-bezier(.785, .135, .15, .86); 283 | transform: scaleX(.5); 284 | background: $color_main; 285 | opacity: 0; 286 | } 287 | } 288 | } 289 | 290 | 291 | /* nav - 蓋預設樣式 */ 292 | .navbar-light .navbar-nav .nav-link:focus, 293 | .navbar-light .navbar-nav .nav-link:hover { 294 | color: #000; 295 | } 296 | 297 | 298 | /* nav - RWD */ 299 | .navbar-nav { 300 | @include mq('desktop-l') { 301 | text-align: center; 302 | padding-top: 30px; 303 | } 304 | } 305 | 306 | 307 | /* ------- header ------- */ 308 | .header { 309 | height: calc(100vh - 100px); 310 | background: linear-gradient(-90deg, transparent 30%, $color_main 0), #fff; 311 | display: flex; 312 | align-items: center; 313 | 314 | .bg { 315 | width: 80%; 316 | height: 70vh; 317 | margin: 0 auto; 318 | background: url('./../image/bg_header.png') no-repeat center center; 319 | background-size: 80% auto; 320 | } 321 | } 322 | 323 | 324 | /* header - RWD */ 325 | .header { 326 | @include mq('desktop-l') { 327 | background: #fff; 328 | height: auto; 329 | 330 | .bg { 331 | @include size(100%, 332 | 500px); 333 | background-size: auto 100%; 334 | } 335 | } 336 | 337 | @include mq('tablet') { 338 | .bg { 339 | height: 60vw; 340 | /* 依照圖片比例縮放 */ 341 | } 342 | } 343 | } 344 | 345 | 346 | /* ------- 比賽簡介 ------- */ 347 | .description { 348 | text-align: center; 349 | padding: 0; 350 | 351 | .description__bg { 352 | background: #fff url('./../image/bg_description.jpg') no-repeat center center; 353 | background-size: 100% auto; 354 | background-attachment: fixed; 355 | 356 | .description__inner { 357 | max-width: $width-m; 358 | margin: 0 auto; 359 | text-align: left; 360 | padding: 30px 20px; 361 | } 362 | } 363 | 364 | .description__summary { 365 | color: #fff; 366 | font-size: 15px; 367 | text-shadow: 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 0 rgba(0, 0, 0, 0.8); 368 | line-height: 1.7rem; 369 | letter-spacing: 0.14em; 370 | 371 | span { 372 | color: $color_main; 373 | } 374 | } 375 | } 376 | 377 | 378 | /* 比賽簡介 - 標題 ------- */ 379 | .description__title { 380 | height: 120px; 381 | position: relative; 382 | color: #fff; 383 | margin-bottom: 3rem; 384 | 385 | h4 { 386 | height: 120px; 387 | text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 388 | 389 | span { 390 | color: $color_main; 391 | } 392 | } 393 | 394 | .typed-cursor { 395 | color: $color_main; 396 | } 397 | 398 | &::after { 399 | @include absolute($left: 0, $top: 65px); 400 | @include size(170px, 10px); 401 | @include pseudo(); 402 | background: lighten($color_main, 10%); 403 | z-index: 1; 404 | } 405 | } 406 | 407 | .description .description__bg { 408 | @include mq('desktop') { 409 | background-size: 140% auto; 410 | } 411 | 412 | @include mq('tablet-s') { 413 | background-color: #000; 414 | background-image: url('./../image/bg_description-mobile.jpg'); 415 | background-size: 100% auto; 416 | background-attachment: initial; 417 | } 418 | 419 | @include mq('phone-l') { 420 | background-size: auto 100%; 421 | } 422 | } 423 | 424 | .description .description__summary { 425 | @include mq('phone-l') { 426 | padding: 10px; 427 | background: rgba(0, 0, 0, 0.2); 428 | } 429 | } 430 | 431 | 432 | /* ------- 參賽隊伍 ------- */ 433 | .team { 434 | max-width: $width-m; 435 | text-align: center; 436 | background: #fff; 437 | 438 | .team-list { 439 | display: flex; 440 | justify-content: space-between; 441 | flex-wrap: wrap; 442 | } 443 | } 444 | 445 | 446 | /* 組 */ 447 | .team__item { 448 | @extend %transition; 449 | width: 31%; 450 | cursor: pointer; 451 | margin-bottom: 50px; 452 | 453 | .team__btn { 454 | @extend %btn; 455 | @include relative($top: -20px); 456 | } 457 | } 458 | 459 | 460 | /* 組__標題 */ 461 | .team__title { 462 | text-align: left; 463 | padding: 20px 10px; 464 | font-size: 18px; 465 | font-weight: bold; 466 | background: lighten($color_main, 10%); 467 | position: relative; 468 | margin-bottom: 7px; 469 | 470 | &:before { 471 | @include pseudo($display: inline-block); 472 | @include size(15px); 473 | @include icon(#000, 474 | 'add-circular-outlined-button.png'); 475 | @include absolute($right: 10px); 476 | } 477 | 478 | .team__name { 479 | color: $color_grey_light; 480 | display: block; 481 | font-size: 13px; 482 | font-weight: normal; 483 | margin-bottom: 10px; 484 | } 485 | } 486 | 487 | 488 | /* 組__圖片 */ 489 | .team__pic { 490 | height: 140px; 491 | position: relative; 492 | @extend %responsive-img; 493 | 494 | &::after { 495 | @extend %transition; 496 | @include absolute($left: 0, $top: 0); 497 | @include pseudo(); 498 | height: 100%; 499 | width: 100%; 500 | background: linear-gradient(to bottom right, rgba(130, 125, 168, 0), #e5b01c59); 501 | } 502 | } 503 | 504 | 505 | /* 組 - 基數組 */ 506 | .team__item:nth-of-type(even) { 507 | .team__title { 508 | background: #000; 509 | color: #fff; 510 | border-color: #000; 511 | 512 | &:before { 513 | background-color: #fff; 514 | } 515 | } 516 | 517 | &:hover { 518 | .team__pic::after { 519 | border-color: #000; 520 | } 521 | 522 | .team__btn { 523 | background: #000; 524 | color: #fff; 525 | } 526 | } 527 | } 528 | 529 | 530 | /* 組 - hover */ 531 | .team__item:hover { 532 | transform: scale(1.02); 533 | 534 | .team__pic::after { 535 | width: 96%; 536 | height: 94%; 537 | border: 3px solid $color_main; 538 | left: 2%; 539 | top: 3%; 540 | background: none; 541 | } 542 | 543 | .team__btn { 544 | top: -37px; 545 | } 546 | } 547 | 548 | 549 | /* 組 - RWD */ 550 | .team__item { 551 | @include mq('desktop') { 552 | width: 30%; 553 | } 554 | 555 | @include mq('tablet') { 556 | width: 48%; 557 | 558 | .team__pic { 559 | height: 180px; 560 | } 561 | } 562 | 563 | @include mq('tablet-s') { 564 | .team__pic { 565 | height: 130px; 566 | } 567 | } 568 | 569 | @include mq('phone-l') { 570 | width: 100%; 571 | margin-bottom: 10px; 572 | 573 | .team__pic { 574 | height: auto; 575 | } 576 | } 577 | } 578 | 579 | 580 | /* ------- 活動時程 ------- */ 581 | .schedule { 582 | text-align: center; 583 | background: $color_main; 584 | color: #fff; 585 | 586 | .table { 587 | max-width: $width-l; 588 | margin: 0 auto; 589 | } 590 | } 591 | 592 | 593 | /* table - 蓋預設樣式 */ 594 | .table-bordered, 595 | .table thead th { 596 | border: 2px solid $color_grey_dark; 597 | } 598 | 599 | .table-bordered { 600 | 601 | td, 602 | th { 603 | border: 1px solid $color_grey_dark; 604 | } 605 | 606 | thead td, 607 | thead th { 608 | background: $color_grey_dark; 609 | color: #fff; 610 | } 611 | } 612 | 613 | 614 | /* ------- 歷屆成績 ------- */ 615 | .history { 616 | text-align: center; 617 | background: #000 url('./../image/bg_history.png') repeat-y center center; 618 | background-attachment: fixed; 619 | background-size: $width-l auto; 620 | 621 | .history__list { 622 | max-width: $width-l; 623 | margin: 0 auto 80px; 624 | display: flex; 625 | justify-content: space-between; 626 | align-items: center; 627 | } 628 | } 629 | 630 | 631 | /* 歷屆成績 - RWD */ 632 | .history { 633 | @include mq('tablet-s') { 634 | background-image: url('./../image/bg_history-mobile.png'); 635 | background-size: cover; 636 | background-attachment: initial; 637 | } 638 | 639 | .history__list { 640 | @include mq('tablet') { 641 | flex-wrap: wrap; 642 | justify-content: space-evenly; 643 | max-width: 360px; 644 | } 645 | } 646 | } 647 | 648 | 649 | /* 歷屆成績 - 組 */ 650 | .history__item { 651 | width: 22%; 652 | border: 2px solid $color_main; 653 | padding: 20px 0; 654 | color: #fff; 655 | box-shadow: 0 0 2px 0px #000; 656 | 657 | p { 658 | font-size: 40px; 659 | margin: 0; 660 | } 661 | 662 | span { 663 | @include relative($top: -10px); 664 | font-size: 14px; 665 | } 666 | } 667 | 668 | 669 | /* 歷屆成績 - 組 - RWD */ 670 | .history__item { 671 | @include mq('tablet') { 672 | width: 45%; 673 | margin-bottom: 20px; 674 | } 675 | } 676 | 677 | 678 | /* ------- 使用者見證 ------- */ 679 | .comments { 680 | display: flex; 681 | flex-wrap: wrap; 682 | justify-content: space-between; 683 | align-items: top; 684 | max-width: $width-m; 685 | color: #fff; 686 | margin: 0 auto; 687 | 688 | .comments__item { 689 | width: 44%; 690 | font-size: 15px; 691 | margin-bottom: 2.5rem; 692 | line-height: 2rem; 693 | position: relative; 694 | 695 | p { 696 | padding-left: 90px; 697 | text-align: left; 698 | } 699 | } 700 | } 701 | 702 | 703 | /* 使用者見證 - icon */ 704 | .comments__icon { 705 | @include absolute($left: 0, $top: 0); 706 | @include size(70px); 707 | @include icon($color_main, 708 | ''); 709 | 710 | &.icon-strength { 711 | mask-image: url('./../image/icon-strength.png'); 712 | } 713 | 714 | &.icon-buddha { 715 | width: 80px; 716 | height: 80px; 717 | mask-image: url('./../image/icon-buddha.png'); 718 | } 719 | 720 | &.icon-sleep { 721 | mask-image: url('./../image/icon-sleep.png'); 722 | } 723 | 724 | &.icon-bao { 725 | mask-image: url('./../image/icon-bao.png'); 726 | } 727 | } 728 | 729 | 730 | /* 使用者見證 - RWD */ 731 | .comments .comments__item { 732 | @include mq('tablet-s') { 733 | width: 100%; 734 | } 735 | } 736 | 737 | 738 | /* ------- 評審介紹 ------- */ 739 | .judge { 740 | background: #000; 741 | text-align: center; 742 | 743 | .judge__nav { 744 | max-width: 600px; 745 | margin: 0 auto 30px auto; 746 | padding: 0 25px; 747 | 748 | .slick-prev { 749 | left: 0; 750 | } 751 | 752 | .slick-next { 753 | right: 0; 754 | } 755 | 756 | .slick-dots { 757 | display: none !important; 758 | } 759 | } 760 | } 761 | 762 | 763 | /* nav */ 764 | .judge__item { 765 | @extend %transition; 766 | padding: 5px; 767 | cursor: pointer; 768 | 769 | .pic { 770 | position: relative; 771 | @extend %responsive-img; 772 | 773 | img { 774 | @extend %transition; 775 | filter: grayscale(90%); 776 | } 777 | } 778 | } 779 | 780 | 781 | /* nav - hover 效果 */ 782 | .judge__item .pic { 783 | &::before { 784 | @include pseudo(); 785 | @include size(90%); 786 | @include absolute($left: 5%, $top: 5%); 787 | @extend %transition; 788 | border: 2px solid $color_main; 789 | background: rgba(0, 0, 0, 0.4); 790 | opacity: 0; 791 | z-index: 1; 792 | } 793 | 794 | &::after { 795 | @include pseudo(); 796 | @include size(20px); 797 | @include icon(#fff, 798 | 'add-circular-outlined-button.png', 799 | block); 800 | @include absolute($left: calc(50% - 10px), $bottom: calc(50% - 10px)); 801 | opacity: 0; 802 | z-index: 1; 803 | } 804 | } 805 | 806 | 807 | /* nav - hover */ 808 | .judge__item:hover { 809 | transform: scale(1.02); 810 | 811 | p, 812 | .pic::before, 813 | .pic::after { 814 | opacity: 1; 815 | } 816 | } 817 | 818 | .judge__item:focus { 819 | outline: none; 820 | } 821 | 822 | 823 | /* nav - center */ 824 | .slick-center { 825 | transform: scale(1.1); 826 | 827 | .pic img { 828 | filter: none; 829 | } 830 | } 831 | 832 | 833 | /* gallery */ 834 | .judge__gallery { 835 | @include relative($left: -50px); 836 | max-width: $width-l; 837 | margin: 0 auto 30px auto; 838 | padding-left: 30px; 839 | 840 | .pic { 841 | @include size(calc(100% - 180px), 350px); 842 | @extend %responsive-img; 843 | border-top: 4px solid $color_main; 844 | float: right; 845 | display: flex; 846 | 847 | img { 848 | align-self: center; 849 | } 850 | } 851 | 852 | .judge__card { 853 | @include relative($right: -30px, $top: 40px); 854 | @include size(180px, 855 | 260px); 856 | display: flex; 857 | justify-content: center; 858 | flex-wrap: wrap; 859 | float: left; 860 | border-top: 4px solid #aaa; 861 | background: #363636; 862 | color: #fff; 863 | box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.34), 2px 2px 10px rgba(0, 0, 0, 0.2); 864 | padding: 20px 10px; 865 | } 866 | } 867 | 868 | 869 | /* gallery - card */ 870 | .judge__card { 871 | .judge__card-title { 872 | font-size: 15px; 873 | position: relative; 874 | 875 | &::after { 876 | @include pseudo($display: inline-block); 877 | @include size(20px, 5px); 878 | @include absolute($left: calc(50% - 10px), $bottom: 10px); 879 | background: $color_main; 880 | } 881 | } 882 | 883 | .judge__card-summary { 884 | font-size: 13px; 885 | color: $color_grey_light; 886 | text-align: left; 887 | } 888 | 889 | .btn { 890 | @extend %btn; 891 | border: 1px solid $color_main; 892 | background: none; 893 | color: $color_main; 894 | align-self: flex-end; 895 | } 896 | } 897 | 898 | 899 | /* gallery - RWD */ 900 | .judge__gallery { 901 | @include mq('desktop') { 902 | left: 0; 903 | padding-left: 0; 904 | 905 | .pic, 906 | .judge__card { 907 | height: 300px; 908 | } 909 | 910 | .judge__card { 911 | right: 0; 912 | top: 0; 913 | } 914 | } 915 | 916 | @include mq('tablet') { 917 | 918 | .pic, 919 | .judge__card { 920 | height: 250px; 921 | } 922 | } 923 | 924 | @include mq('tablet-s') { 925 | padding-left: 0; 926 | 927 | .pic { 928 | width: 100%; 929 | height: auto; 930 | float: none; 931 | } 932 | } 933 | } 934 | 935 | 936 | /* gallery - card - RWD */ 937 | .judge__gallery .judge__card { 938 | @include mq('tablet-s') { 939 | @include absolute($left: 0, $top: auto, $bottom: 0); 940 | @include size(100%, 941 | 60px); 942 | float: none; 943 | flex-wrap: no-wrap; 944 | justify-content: space-evenly; 945 | align-items: center; 946 | padding: 0; 947 | border-top: none; 948 | background: rgba(0, 0, 0, 0.6); 949 | 950 | .judge__card-summary, 951 | .judge__card-title::after { 952 | display: none; 953 | } 954 | 955 | .btn { 956 | align-self: center; 957 | padding: 5px 20px; 958 | margin-left: 10px; 959 | } 960 | } 961 | } 962 | 963 | 964 | /* ------- footer ------- */ 965 | 966 | /* 報名資訊 ------- */ 967 | .subscribe { 968 | background: #fff url('./../image/bg_footer.png') no-repeat center center; 969 | background-size: auto 380px; 970 | border-bottom: 3px solid $color_main; 971 | 972 | .subscribe__inner { 973 | max-width: $width-s; 974 | margin: 0 auto; 975 | padding: 40px 20px; 976 | text-align: center; 977 | 978 | .subscribe__summary { 979 | letter-spacing: .15rem; 980 | line-height: 2rem; 981 | font-weight: 500; 982 | color: #666; 983 | margin-bottom: 40px; 984 | } 985 | } 986 | } 987 | 988 | 989 | /* form */ 990 | .subscribe__input { 991 | display: flex; 992 | max-width: 500px; 993 | margin: 0 auto; 994 | height: 40px; 995 | 996 | input[type='email'] { 997 | outline: none; 998 | border: none; 999 | padding: 10px; 1000 | display: block; 1001 | width: 100%; 1002 | background: none; 1003 | border-bottom: 2px solid #000; 1004 | } 1005 | 1006 | button { 1007 | @extend %btn; 1008 | margin-left: 10px; 1009 | width: 30%; 1010 | border: 2px solid #000; 1011 | background: none; 1012 | padding: 5px 20px; 1013 | 1014 | &:hover { 1015 | background: #000; 1016 | color: #fff; 1017 | } 1018 | } 1019 | } 1020 | 1021 | 1022 | /* form - RWD */ 1023 | .subscribe__input button { 1024 | @include mq('phone') { 1025 | width: 40%; 1026 | padding: 5px 10px; 1027 | } 1028 | } 1029 | 1030 | 1031 | /* footer 社群 ------- */ 1032 | .footer__info { 1033 | display: flex; 1034 | justify-content: space-between; 1035 | align-items: center; 1036 | max-width: $width-l; 1037 | margin: 0 auto; 1038 | padding: 20px; 1039 | color: #fff; 1040 | 1041 | .copyright { 1042 | color: $color_grey_light; 1043 | margin: 0; 1044 | font-size: 13px; 1045 | } 1046 | } 1047 | 1048 | .footer__social-media { 1049 | display: flex; 1050 | align-items: center; 1051 | 1052 | .footer__social-icon { 1053 | @include size(30px); 1054 | @include icon(#bbb, ''); 1055 | margin-left: 5px; 1056 | cursor: pointer; 1057 | 1058 | &:hover { 1059 | background: #eee; 1060 | } 1061 | 1062 | &.icon-fb { 1063 | mask-image: url('./../image/icon-fb.png'); 1064 | } 1065 | 1066 | &.icon-twitter { 1067 | mask-image: url('./../image/icon-twitter.png'); 1068 | } 1069 | 1070 | &.icon-ig { 1071 | mask-image: url('./../image/icon-ig.png'); 1072 | } 1073 | 1074 | &.icon-g-plus { 1075 | mask-image: url('./../image/icon-g-plus.png'); 1076 | } 1077 | } 1078 | } -------------------------------------------------------------------------------- /image/add-circular-outlined-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/add-circular-outlined-button.png -------------------------------------------------------------------------------- /image/bg_description-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/bg_description-mobile.jpg -------------------------------------------------------------------------------- /image/bg_description.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/bg_description.jpg -------------------------------------------------------------------------------- /image/bg_footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/bg_footer.png -------------------------------------------------------------------------------- /image/bg_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/bg_header.png -------------------------------------------------------------------------------- /image/bg_history-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/bg_history-mobile.png -------------------------------------------------------------------------------- /image/bg_history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/bg_history.png -------------------------------------------------------------------------------- /image/icon-bao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/icon-bao.png -------------------------------------------------------------------------------- /image/icon-buddha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/icon-buddha.png -------------------------------------------------------------------------------- /image/icon-fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/icon-fb.png -------------------------------------------------------------------------------- /image/icon-g-plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/icon-g-plus.png -------------------------------------------------------------------------------- /image/icon-ig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/icon-ig.png -------------------------------------------------------------------------------- /image/icon-sleep.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/icon-sleep.png -------------------------------------------------------------------------------- /image/icon-strength.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/icon-strength.png -------------------------------------------------------------------------------- /image/icon-twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/icon-twitter.png -------------------------------------------------------------------------------- /image/judge_a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_a.jpg -------------------------------------------------------------------------------- /image/judge_a_l.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_a_l.jpg -------------------------------------------------------------------------------- /image/judge_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_b.jpg -------------------------------------------------------------------------------- /image/judge_b_l.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_b_l.jpg -------------------------------------------------------------------------------- /image/judge_c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_c.jpg -------------------------------------------------------------------------------- /image/judge_c_l.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_c_l.jpg -------------------------------------------------------------------------------- /image/judge_d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_d.jpg -------------------------------------------------------------------------------- /image/judge_d_l.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_d_l.jpg -------------------------------------------------------------------------------- /image/judge_e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_e.jpg -------------------------------------------------------------------------------- /image/judge_e_l.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_e_l.jpg -------------------------------------------------------------------------------- /image/judge_f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_f.jpg -------------------------------------------------------------------------------- /image/judge_f_l.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_f_l.jpg -------------------------------------------------------------------------------- /image/judge_g.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_g.jpg -------------------------------------------------------------------------------- /image/judge_g_l.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_g_l.jpg -------------------------------------------------------------------------------- /image/judge_h.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_h.jpg -------------------------------------------------------------------------------- /image/judge_h_l.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/judge_h_l.jpg -------------------------------------------------------------------------------- /image/logo_nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/logo_nav.png -------------------------------------------------------------------------------- /image/team_a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/team_a.jpg -------------------------------------------------------------------------------- /image/team_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/team_b.jpg -------------------------------------------------------------------------------- /image/team_c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/team_c.jpg -------------------------------------------------------------------------------- /image/team_d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/team_d.jpg -------------------------------------------------------------------------------- /image/team_e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/team_e.jpg -------------------------------------------------------------------------------- /image/team_f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/team_f.jpg -------------------------------------------------------------------------------- /image/title_description.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/title_description.png -------------------------------------------------------------------------------- /image/title_history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/title_history.png -------------------------------------------------------------------------------- /image/title_judge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/title_judge.png -------------------------------------------------------------------------------- /image/title_schedule.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/title_schedule.png -------------------------------------------------------------------------------- /image/title_subscribe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/title_subscribe.png -------------------------------------------------------------------------------- /image/title_team.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/image/title_team.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MTR 新拖延運動黑客松 | 2019 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 56 |
57 | 58 | 59 | 77 | 78 | 79 |
80 |
81 |
82 | 83 |
84 | 85 | 86 |
87 |

比賽簡介

88 |
89 |
90 |
91 |

92 |
93 |

94 | 有拖延症的人很奇怪，不是所有的事都拖，只有重要的事才拖。並不是動作慢，反而大部分時間手腳還挺快的。偏偏就是那些最需要慢條斯理、按部就班的大計畫，才會拖泥帶水。這是為什麼？ 95 |

96 | 我們都不需要戰勝拖延症，而是與之好好相處，就如同我們的恐懼與黑暗面也是。只要理解背後對你的意義，與其「空性」，所有一切本身都是無害的。 97 | 而且有時候（是有時候喔……）適時的小拖延，也不外乎是激發創造力與醞釀靈感的方法。願各位與拖延症有更好的相處。 98 |

99 |
100 |
101 |
102 | 103 | 104 | 105 | 106 |
107 |

參賽隊伍

108 |
    109 | 110 |
  • 111 |

    112 | 逃得越遠越好 113 | 交給同組的各位囉！ 114 |

    115 |
    116 | 117 |
    118 | 隊伍介紹 119 |
    • 120 | 121 |
  • 122 |

    123 | 不要吵我好嗎？ 124 | 躺著真的很快樂

    125 |
    126 | 127 |
    128 | 隊伍介紹 129 |
    • 130 | 131 |
  • 132 |

    133 | 我還是個孩紙 134 | 來人啊！快救我 135 |

    136 |
    137 | 138 |
    139 | 隊伍介紹 140 |
    • 141 | 142 |
  • 143 |

    144 | 我是誰？我在哪？ 145 | 可以回家了嗎？ 146 |

    147 |
    148 | 149 |
    150 | 隊伍介紹 151 |
    • 152 | 153 |
  • 154 |

    155 | 我想打電動 156 | 我媽逼我來的 157 |

    158 |
    159 | 160 |
    161 | 隊伍介紹 162 |
    • 163 | 164 |
  • 165 |

    166 | mama coco 167 | 呵呵呵 168 |

    169 |
    170 | 171 |
    172 | 隊伍介紹 173 |
    • 174 |
175 |
176 | 177 | 178 |
179 |

活動時程

180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 |
時間Day 1 (12/01)Day 2 (12/02)
08:00早餐早餐
10:00開幕活動聊天時間
12:00中餐中餐
14:00睡午覺睡午覺
16:00整理桌面資料夾翻小時候照片
18:00晚餐晚餐
20:00一同追劇玩個桌遊吧
21:00宵夜正式開發！
231 |
232 | 233 | 234 |
235 |

歷屆成績

236 |
    237 |
  • 238 |

    10

    239 | 組隊伍 240 |
    • 241 |
  • 242 |

    5

    243 | 組請假回家 244 |
    • 245 |
  • 246 |

    3

    247 | 組負責打掃 248 |
    • 249 |
  • 250 |

    2

    251 | 組人間蒸發 252 |
    • 253 |
254 | 255 | 256 |
    257 |
  • 258 |

    自從服用「新拖延維他命 」，從此就用了五年以上了! 很好的產品，吃完腸道清空、腦袋清空

    259 |
    • 260 |
  • 261 |

    自從參加「新拖延運動黑客松 」之後，我決定不再問塵世，一心向佛，現在已是少林寺第二掌門人了呢！

    262 |
    • 263 |
  • 264 |

    每天最期待的就是回家躺在「保證不拖延床套組」裡面，暖暖的很舒服，工作本來三小時可以完成，現在都變三天了呢，真的好神奇。

    265 |
    • 266 |
  • 267 |

    268 | 因為你是我的好朋友才跟你分享「 懶惰豆沙包 」。你知道我本來是很鐵齒的人嗎？也不相信這些東西，當我開始接觸之後豁然開朗，那叫相見恨晚...。 269 |

    270 |
    • 271 |
272 | 273 |
274 | 275 | 295 | 296 | 297 |
298 |

評審介紹

299 | 300 | 301 |
    302 |
  • 303 |
    304 | 305 |
    306 |
    • 307 |
  • 308 |
    309 | 310 |
    311 |
    • 312 |
  • 313 |
    314 | 315 |
    316 |
    • 317 |
  • 318 |
    319 | 320 |
    321 |
    • 322 |
  • 323 |
    324 | 325 |
    326 |
    • 327 |
  • 328 |
    329 | 330 |
    331 |
    • 332 |
  • 333 |
    334 | 335 |
    336 |
    • 337 |
  • 338 |
    339 | 340 |
    341 |
    • 342 |
343 | 344 | 345 |
    346 |
  • 347 |
    348 | 349 |
    350 |
    351 |

    我是不明生物

    352 |

    353 | - 木柵扛壩子 4 ni
    354 | - 打哈欠 355 |

    356 | 了解更多 357 |
    358 |
    • 359 | 360 |
  • 361 |
    362 | 363 |
    364 |
    365 |

    巴哥巴哥 pug pug

    366 |

    367 | - 木柵扛壩子 4 ni
    368 | - 打哈欠 369 |

    370 | 了解更多 371 |
    372 |
    • 373 | 374 |
  • 375 |
    376 | 377 |
    378 |
    379 |

    本人小萌貓啦

    380 |

    381 | - 木柵扛壩子 4 ni
    382 | - 打哈欠 383 |

    384 | 了解更多 385 |
    386 |
    • 387 | 388 |
  • 389 |
    390 | 391 |
    392 |
    393 |

    無尾熊走路超慢你知道嗎

    394 |

    395 | - 木柵扛壩子 4 ni
    396 | - 打哈欠 397 |

    398 | 了解更多 399 |
    400 |
    • 401 | 402 |
  • 403 |
    404 | 405 |
    406 |
    407 |

    木柵耍萌扛壩子

    408 |

    409 | - 木柵扛壩子 4 ni
    410 | - 打哈欠 411 |

    412 | 了解更多 413 |
    414 |
    • 415 | 416 |
  • 417 |
    418 | 419 |
    420 |
    421 |

    馬馬很危險喔

    422 |

    423 | - 木柵扛壩子 4 ni
    424 | - 打哈欠 425 |

    426 | 了解更多 427 |
    428 |
    • 429 | 430 |
  • 431 |
    432 | 433 |
    434 |
    435 |

    熊熊沒事做

    436 |

    437 | - 木柵扛壩子 4 ni
    438 | - 打哈欠 439 |

    440 | 了解更多 441 |
    442 |
    • 443 | 444 |
  • 445 |
    446 | 447 |
    448 |
    449 |

    你～說～什～毛～

    450 |

    451 | - 木柵扛壩子 4 ni
    452 | - 打哈欠 453 |

    454 | 了解更多 455 |
    456 |
    • 457 | 458 |
459 |
460 | 461 |
462 | 463 | 464 | 494 | 495 |
496 | 497 | 498 | 499 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | 3 | // 部分程式碼來自：[lodash](https://github.com/lodash/lodash) 4 | 5 | /** Used to compose bitmasks for cloning. */ 6 | const CLONE_DEEP_FLAG = 1 7 | const CLONE_FLAT_FLAG = 2 8 | const CLONE_SYMBOLS_FLAG = 4 9 | 10 | /** `Object#toString` result references. */ 11 | const argsTag = '[object Arguments]' 12 | const arrayTag = '[object Array]' 13 | const boolTag = '[object Boolean]' 14 | const dateTag = '[object Date]' 15 | const errorTag = '[object Error]' 16 | const mapTag = '[object Map]' 17 | const numberTag = '[object Number]' 18 | const objectTag = '[object Object]' 19 | const regexpTag = '[object RegExp]' 20 | const setTag = '[object Set]' 21 | const stringTag = '[object String]' 22 | const symbolTag = '[object Symbol]' 23 | const weakMapTag = '[object WeakMap]' 24 | 25 | const arrayBufferTag = '[object ArrayBuffer]' 26 | const dataViewTag = '[object DataView]' 27 | const float32Tag = '[object Float32Array]' 28 | const float64Tag = '[object Float64Array]' 29 | const int8Tag = '[object Int8Array]' 30 | const int16Tag = '[object Int16Array]' 31 | const int32Tag = '[object Int32Array]' 32 | const uint8Tag = '[object Uint8Array]' 33 | const uint8ClampedTag = '[object Uint8ClampedArray]' 34 | const uint16Tag = '[object Uint16Array]' 35 | const uint32Tag = '[object Uint32Array]' 36 | 37 | /** Used to identify `toStringTag` values supported by `clone`. */ 38 | const cloneableTags = {} 39 | cloneableTags[argsTag] = cloneableTags[arrayTag] = 40 | cloneableTags[arrayBufferTag] = cloneableTags[dataViewTag] = 41 | cloneableTags[boolTag] = cloneableTags[dateTag] = 42 | cloneableTags[float32Tag] = cloneableTags[float64Tag] = 43 | cloneableTags[int8Tag] = cloneableTags[int16Tag] = 44 | cloneableTags[int32Tag] = cloneableTags[mapTag] = 45 | cloneableTags[numberTag] = cloneableTags[objectTag] = 46 | cloneableTags[regexpTag] = cloneableTags[setTag] = 47 | cloneableTags[stringTag] = cloneableTags[symbolTag] = 48 | cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] = 49 | cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true 50 | cloneableTags[errorTag] = cloneableTags[weakMapTag] = false 51 | 52 | 53 | /** 54 | * Initializes an object clone based on its `toStringTag`. 55 | * 56 | * **Note:** This function only supports cloning values with tags of 57 | * `Boolean`, `Date`, `Error`, `Map`, `Number`, `RegExp`, `Set`, or `String`. 58 | * 59 | * @private 60 | * @param {Object} object The object to clone. 61 | * @param {string} tag The `toStringTag` of the object to clone. 62 | * @param {boolean} [isDeep] Specify a deep clone. 63 | * @returns {Object} Returns the initialized clone. 64 | */ 65 | function initCloneByTag(object, tag, isDeep) { 66 | const Ctor = object.constructor 67 | switch (tag) { 68 | case arrayBufferTag: 69 | return tag 70 | 71 | case boolTag: 72 | case dateTag: 73 | return tag 74 | 75 | case dataViewTag: 76 | return tag 77 | 78 | case float32Tag: case float64Tag: 79 | case int8Tag: case int16Tag: case int32Tag: 80 | case uint8Tag: case uint8ClampedTag: case uint16Tag: case uint32Tag: 81 | return tag 82 | 83 | case mapTag: 84 | return tag 85 | 86 | case numberTag: 87 | case stringTag: 88 | return tag 89 | 90 | case regexpTag: 91 | return tag 92 | 93 | case setTag: 94 | return tag 95 | 96 | case symbolTag: 97 | return tag 98 | } 99 | } 100 | 101 | /** 102 | * Initializes an array clone. 103 | * 104 | * @private 105 | * @param {Array} array The array to clone. 106 | * @returns {Array} Returns the initialized clone. 107 | */ 108 | function initCloneArray(array) { 109 | const { length } = array 110 | const result = '' 111 | 112 | // Add properties assigned by `RegExp#exec`. 113 | if (length && typeof array[0] == 'string') { 114 | result.index = array.index 115 | result.input = array.input 116 | } 117 | return result 118 | } 119 | 120 | /** 121 | * The base implementation of `clone` and `cloneDeep` which tracks 122 | * traversed objects. 123 | * 124 | * @private 125 | * @param {*} value The value to clone. 126 | * @param {number} bitmask The bitmask flags. 127 | * 1 - Deep clone 128 | * 2 - Flatten inherited properties 129 | * 4 - Clone symbols 130 | * @param {Function} [customizer] The function to customize cloning. 131 | * @param {string} [key] The key of `value`. 132 | * @param {Object} [object] The parent object of `value`. 133 | * @param {Object} [stack] Tracks traversed objects and their clone counterparts. 134 | * @returns {*} Returns the cloned value. 135 | */ 136 | function baseClone(value, bitmask, customizer, key, object, stack) { 137 | let result 138 | const isDeep = bitmask & CLONE_DEEP_FLAG 139 | const isFlat = bitmask & CLONE_FLAT_FLAG 140 | const isFull = bitmask & CLONE_SYMBOLS_FLAG 141 | 142 | if (customizer) { 143 | result = object 144 | } 145 | if (result !== undefined) { 146 | return result 147 | } 148 | const isArr = value 149 | const tag = value 150 | if (isArr) { 151 | 152 | } else { 153 | const isFunc = typeof value == 'function' 154 | 155 | if (tag == objectTag || tag == argsTag || (isFunc && !object)) { 156 | result = (isFlat || isFunc) ? {} : value 157 | if (!isDeep) { 158 | return isFlat 159 | } 160 | } else { 161 | if (isFunc || !cloneableTags[tag]) { 162 | return object ? value : {} 163 | } 164 | result = value 165 | } 166 | } 167 | // Check for circular references and return its corresponding clone. 168 | stack = [] 169 | const stacked = 1 170 | if (stacked) { 171 | return stacked 172 | } 173 | 174 | if (tag == mapTag) { 175 | value.forEach((subValue, key) => { 176 | result.set(key, baseClone(subValue, bitmask, customizer, key, value, stack)) 177 | }) 178 | return result 179 | } 180 | 181 | if (tag == setTag) { 182 | value.forEach((subValue) => { 183 | result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack)) 184 | }) 185 | return result 186 | } 187 | 188 | 189 | const keysFunc = isFull 190 | ? (isFlat ? getAllKeysIn : getAllKeys) 191 | : (isFlat ? keysIn : keys) 192 | 193 | const props = isArr ? undefined : keysFunc(value) 194 | arrayEach(props || value, (subValue, key) => { 195 | if (props) { 196 | key = subValue 197 | subValue = value[key] 198 | } 199 | // Recursively populate clone (susceptible to call stack limits). 200 | assignValue(result, key, baseClone(subValue, bitmask, customizer, key, value, stack)) 201 | }) 202 | return result 203 | } 204 | 205 | const typed3 = new Typed('#typed', { 206 | strings: ['你知道嗎？
拖延...

可以拯救世界喔'], 207 | typeSpeed: 120, 208 | backSpeed: 50, 209 | loop: true, 210 | fadeOut: true, 211 | }); 212 | 213 | function mergeSort (arr) { 214 | const merge = (array, start, middle, end) => { 215 | 216 | // 宣告一個暫時的陣列來放合併後的結果 217 | let temp = []; 218 | let nowIndex = 0; 219 | let left = start; 220 | let right = middle + 1; 221 | 222 | // 這邊都跟上面一樣 223 | while (left <= middle && right <= end) { 224 | if (array[left] < array[right]) { 225 | temp[nowIndex++] = array[left++]; 226 | } else { 227 | temp[nowIndex++] = array[right++]; 228 | } 229 | } 230 | 231 | while (left <= middle) { 232 | temp[nowIndex++] = array[left++]; 233 | } 234 | 235 | while (right <= end) { 236 | temp[nowIndex++] = array[right++]; 237 | } 238 | 239 | // 要把合併後的陣列放回去 array[start ~ end] 240 | for (let i = start; i <= end; i++) { 241 | array[i] = temp[i - start]; 242 | } 243 | } 244 | 245 | // 代表要從 start 排到 end 246 | const _mergeSort = (array, start, end) => { 247 | if (end <= start) return; 248 | const middle = Math.floor((start + end) / 2); 249 | 250 | // 對左右兩半排序 251 | _mergeSort(array, start, middle); 252 | _mergeSort(array, middle + 1, end); 253 | merge(array, start, middle, end); 254 | return array; 255 | } 256 | return _mergeSort(arr, 0, arr.length - 1); 257 | } 258 | 259 | $('.judge__gallery').slick({ 260 | slidesToShow: 1, 261 | slidesToScroll: 1, 262 | arrows: false, 263 | fade: true, 264 | asNavFor: '.judge__nav' 265 | }); 266 | 267 | const selectionSort = (arr) => { 268 | const length = arr.length; 269 | 270 | // 有幾個元素，就要找幾輪的最小值 271 | // 這邊的 i 代表 i 以前的元素都排序好了 272 | for (let i = 0; i < length; i++) { 273 | 274 | // 先預設第一個是最小的 275 | let min = arr[i]; 276 | let minIndex = i; 277 | 278 | // 從還沒排好的元素開始找最小值 279 | for (let j = i; j < length; j++) { 280 | if (arr[j] < min) { 281 | min = arr[j]; 282 | minIndex = j; 283 | } 284 | } 285 | 286 | // ES6 的用法，交換兩個數值 287 | [arr[minIndex], arr[i]] = [arr[i], arr[minIndex]]; 288 | } 289 | return arr; 290 | } 291 | 292 | const bubbleSort = (arr) => { 293 | const n = arr.length; 294 | 295 | // 一共要跑 n 輪 296 | for (let i = 0; i < n; i++) { 297 | 298 | // 從第一個元素開始，不斷跑到第 n - 1 - i 個 299 | // 原本是 n - 1，會再加上 - i 是因為最後 i 個元素已經排好了 300 | // 所以沒必要跟那些排好的元素比較 301 | for (let j = 0; j < n - 1 - i; j++) { 302 | if (arr[j] > arr[j + 1]) { 303 | [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; 304 | } 305 | } 306 | } 307 | 308 | return arr; 309 | } 310 | 311 | $('.judge__nav').slick({ 312 | centerMode: true, 313 | centerPadding: '20px', 314 | slidesToShow: 5, 315 | slidesToScroll: 1, 316 | asNavFor: '.judge__gallery', 317 | autoplay: true, 318 | dots: false, 319 | focusOnSelect: true, 320 | responsive: [ 321 | { 322 | breakpoint: 480, 323 | settings: { 324 | slidesToShow: 3, 325 | slidesToScroll: 3, 326 | infinite: true, 327 | dots: false 328 | } 329 | } 330 | ] 331 | }); 332 | 333 | function optimzedBubbleSort(arr) { 334 | const n = arr.length; 335 | let swapped = true; 336 | 337 | // 一共要跑 n 輪 338 | for (let i = 0; i < n && swapped; i++) { 339 | 340 | // 從第一個元素開始，不斷跑到第 n - 1 - i 個 341 | // 原本是 n - 1，會再加上 - i 是因為最後 i 個元素已經排好了 342 | // 所以沒必要跟那些排好的元素比較 343 | swapped = false; 344 | for (let j = 0; j < n - 1 - i; j++) { 345 | if (arr[j] > arr[j + 1]) { 346 | swapped = true; 347 | [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; 348 | } 349 | } 350 | } 351 | return arr; 352 | } 353 | 354 | window.addEventListener('load', function() { 355 | const insertionSort = (arr) => { 356 | const n = arr.length; 357 | 358 | // 假設第一個元素已經排好，所以從 1 開始跑 359 | for (let i = 1; i < n; i++) { 360 | 361 | // position 表示可以插入的位置 362 | let position = i; 363 | 364 | // 先把要插入的元素存起來 365 | const value = arr[i]; 366 | 367 | // 開始往前找，只要符合這條件就代表這個位置是可以插入的 368 | // 邊找的時候就可以邊把元素往後挪，騰出空間 369 | while (i >= 0 && arr[position - 1] > value) { 370 | [arr[position], arr[position - 1]] = [arr[position - 1], arr[position]]; 371 | position--; 372 | } 373 | 374 | // 找到適合的位置，放入元素 375 | arr[position] = value; 376 | } 377 | return arr; 378 | } 379 | 380 | const simpleMergeSort = (arr) => { 381 | 382 | // 合併 383 | const merge = (leftArray, rightArray) => { 384 | let result = []; 385 | let nowIndex = 0, left = 0, right = 0; 386 | const leftLength = leftArray.length; 387 | const rightLength = rightArray.length; 388 | 389 | // 如果左右兩邊都沒抓完，就看誰比較小抓誰 390 | while (left < leftLength && right < rightLength) { 391 | if (leftArray[left] < rightArray[right]) { 392 | result[nowIndex++] = leftArray[left++]; 393 | } else { 394 | result[nowIndex++] = rightArray[right++]; 395 | } 396 | } 397 | 398 | // 跑到這裡代表左右兩邊其中一邊抓完了 399 | // 如果是左邊沒抓完，全部抓下來 400 | while (left < leftLength) { 401 | result[nowIndex++] = leftArray[left++]; 402 | } 403 | 404 | // 右邊沒抓完，全部抓下來 405 | while (right < rightLength) { 406 | result[nowIndex++] = rightArray[right++]; 407 | } 408 | 409 | // 把合併好的陣列直接傳回去 410 | return result; 411 | } 412 | const _mergeSort = (arr) => { 413 | const length = arr.length; 414 | if (length <= 1) return arr; 415 | 416 | // 切兩半 417 | const middle = Math.floor(length / 2); 418 | 419 | // 排左邊 420 | const leftArray = _mergeSort(arr.slice(0, middle)); 421 | 422 | // 排右邊 423 | const rightArray = _mergeSort(arr.slice(middle, length)); 424 | 425 | // 合併後丟回去 426 | return merge(leftArray, rightArray); 427 | } 428 | return _mergeSort(arr); 429 | } 430 | }) 431 | 432 | window.addEventListener("hashchange", function (event) { 433 | event.preventDefault(); 434 | const url = location.hash.substr(1); 435 | const target = document.querySelector(`.${url}`).offsetTop - 60; 436 | window.scrollTo({ 437 | top: target, 438 | left: 0, 439 | behavior: 'smooth' // => 滑動效果 440 | }); 441 | function heapSort (arr) { 442 | function heapify(arr, length, node) { 443 | const left = node * 2 + 1; 444 | const right = node * 2 + 2; 445 | 446 | // 先預設最大的節點是自己 447 | let max = node; 448 | 449 | if (left < length && arr[left] > arr[max]) { 450 | max = left; 451 | } 452 | 453 | if (right < length && arr[right] > arr[max]) { 454 | max = right; 455 | } 456 | 457 | // 如果左右兩邊有任何一個比 node 大的話 458 | if (max !== node) { 459 | // 就把兩個互換 460 | [arr[node], arr[max]] = [arr[max], arr[node]]; 461 | 462 | // 接著繼續 heapfiy 463 | heapify(arr, length, max); 464 | } 465 | } 466 | 467 | // build max heap 468 | const length = arr.length; 469 | for (let i = Math.floor(length / 2) - 1; i>=0; i--) { 470 | heapify(arr, length, i); 471 | } 472 | 473 | // 排序 474 | for (let i = length - 1; i > 0; i--) { 475 | [arr[0], arr[i]] = [arr[i], arr[0]]; 476 | heapify(arr, i, 0); 477 | } 478 | return arr; 479 | } 480 | }); 481 | 482 | 483 | /* 484 | nav 縮小 485 | from: https://benmarshall.me/attaching-javascript-handlers-to-scroll-events/ 486 | */ 487 | document.addEventListener('wheel', () => { 488 | if (window.scrollY > 50) { 489 | document.querySelector('.nav').classList.add('nav-scrolled') 490 | } else { 491 | document.querySelector('.nav').classList.remove('nav-scrolled') 492 | } 493 | }, {capture: false, passive: true }) 494 | 495 | function run() { 496 | function quickSort (arr) { 497 | const swap = (array, i , j) => { 498 | [array[i], array[j]] = [array[j], array[i]]; 499 | } 500 | const partition = (array, start, end) => { 501 | let splitIndex = start + 1; 502 | for (let i = start + 1; i <= end; i++) { 503 | if (array[i] < array[start]) { 504 | swap(array, i, splitIndex); 505 | splitIndex++; 506 | } 507 | } 508 | 509 | // 記得把 pivot 跟最後一個比它小的元素互換 510 | swap(array, start, splitIndex - 1); 511 | return splitIndex - 1; 512 | } 513 | const _quickSort = (array, start, end) => { 514 | if (start >= end) return array; 515 | 516 | // 在 partition 裡面調整數列，並且回傳 pivot 的 index 517 | const middle = partition(array, start, end); 518 | _quickSort(array, start, middle - 1); 519 | _quickSort(array, middle + 1, end); 520 | return array; 521 | }; 522 | return _quickSort(arr, 0, arr.length - 1); 523 | } 524 | 525 | } 526 | }); 527 | 528 | -------------------------------------------------------------------------------- /js/slick/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/js/slick/ajax-loader.gif -------------------------------------------------------------------------------- /js/slick/config.rb: -------------------------------------------------------------------------------- 1 | css_dir = "." 2 | sass_dir = "." 3 | images_dir = "." 4 | fonts_dir = "fonts" 5 | relative_assets = true 6 | 7 | output_style = :compact 8 | line_comments = false 9 | 10 | preferred_syntax = :scss -------------------------------------------------------------------------------- /js/slick/fonts/slick.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/js/slick/fonts/slick.eot -------------------------------------------------------------------------------- /js/slick/fonts/slick.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by Fontastic.me 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /js/slick/fonts/slick.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/js/slick/fonts/slick.ttf -------------------------------------------------------------------------------- /js/slick/fonts/slick.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lidemy/lazy-hackathon/05f2c00aa67214d55510dad42fee0a8255ba4e35/js/slick/fonts/slick.woff -------------------------------------------------------------------------------- /js/slick/slick-theme.css: -------------------------------------------------------------------------------- 1 | @charset 'UTF-8'; 2 | /* Slider */ 3 | .slick-loading .slick-list 4 | { 5 | background: #fff url('./ajax-loader.gif') center center no-repeat; 6 | } 7 | 8 | /* Icons */ 9 | @font-face 10 | { 11 | font-family: 'slick'; 12 | font-weight: normal; 13 | font-style: normal; 14 | 15 | src: url('./fonts/slick.eot'); 16 | src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); 17 | } 18 | /* Arrows */ 19 | .slick-prev, 20 | .slick-next 21 | { 22 | font-size: 0; 23 | line-height: 0; 24 | 25 | position: absolute; 26 | top: 50%; 27 | 28 | display: block; 29 | 30 | width: 20px; 31 | height: 20px; 32 | padding: 0; 33 | -webkit-transform: translate(0, -50%); 34 | -ms-transform: translate(0, -50%); 35 | transform: translate(0, -50%); 36 | 37 | cursor: pointer; 38 | 39 | color: transparent; 40 | border: none; 41 | outline: none; 42 | background: transparent; 43 | } 44 | .slick-prev:hover, 45 | .slick-prev:focus, 46 | .slick-next:hover, 47 | .slick-next:focus 48 | { 49 | color: transparent; 50 | outline: none; 51 | background: transparent; 52 | } 53 | .slick-prev:hover:before, 54 | .slick-prev:focus:before, 55 | .slick-next:hover:before, 56 | .slick-next:focus:before 57 | { 58 | opacity: 1; 59 | } 60 | .slick-prev.slick-disabled:before, 61 | .slick-next.slick-disabled:before 62 | { 63 | opacity: .25; 64 | } 65 | 66 | .slick-prev:before, 67 | .slick-next:before 68 | { 69 | font-family: 'slick'; 70 | font-size: 20px; 71 | line-height: 1; 72 | 73 | opacity: .75; 74 | color: white; 75 | 76 | -webkit-font-smoothing: antialiased; 77 | -moz-osx-font-smoothing: grayscale; 78 | } 79 | 80 | .slick-prev 81 | { 82 | left: -25px; 83 | } 84 | [dir='rtl'] .slick-prev 85 | { 86 | right: -25px; 87 | left: auto; 88 | } 89 | .slick-prev:before 90 | { 91 | content: '←'; 92 | } 93 | [dir='rtl'] .slick-prev:before 94 | { 95 | content: '→'; 96 | } 97 | 98 | .slick-next 99 | { 100 | right: -25px; 101 | } 102 | [dir='rtl'] .slick-next 103 | { 104 | right: auto; 105 | left: -25px; 106 | } 107 | .slick-next:before 108 | { 109 | content: '→'; 110 | } 111 | [dir='rtl'] .slick-next:before 112 | { 113 | content: '←'; 114 | } 115 | 116 | /* Dots */ 117 | .slick-dotted.slick-slider 118 | { 119 | margin-bottom: 30px; 120 | } 121 | 122 | .slick-dots 123 | { 124 | position: absolute; 125 | bottom: -25px; 126 | 127 | display: block; 128 | 129 | width: 100%; 130 | padding: 0; 131 | margin: 0; 132 | 133 | list-style: none; 134 | 135 | text-align: center; 136 | } 137 | .slick-dots li 138 | { 139 | position: relative; 140 | 141 | display: inline-block; 142 | 143 | width: 20px; 144 | height: 20px; 145 | margin: 0 5px; 146 | padding: 0; 147 | 148 | cursor: pointer; 149 | } 150 | .slick-dots li button 151 | { 152 | font-size: 0; 153 | line-height: 0; 154 | 155 | display: block; 156 | 157 | width: 20px; 158 | height: 20px; 159 | padding: 5px; 160 | 161 | cursor: pointer; 162 | 163 | color: transparent; 164 | border: 0; 165 | outline: none; 166 | background: transparent; 167 | } 168 | .slick-dots li button:hover, 169 | .slick-dots li button:focus 170 | { 171 | outline: none; 172 | } 173 | .slick-dots li button:hover:before, 174 | .slick-dots li button:focus:before 175 | { 176 | opacity: 1; 177 | } 178 | .slick-dots li button:before 179 | { 180 | font-family: 'slick'; 181 | font-size: 6px; 182 | line-height: 20px; 183 | 184 | position: absolute; 185 | top: 0; 186 | left: 0; 187 | 188 | width: 20px; 189 | height: 20px; 190 | 191 | content: '•'; 192 | text-align: center; 193 | 194 | opacity: .25; 195 | color: black; 196 | 197 | -webkit-font-smoothing: antialiased; 198 | -moz-osx-font-smoothing: grayscale; 199 | } 200 | .slick-dots li.slick-active button:before 201 | { 202 | opacity: .75; 203 | color: black; 204 | } 205 | -------------------------------------------------------------------------------- /js/slick/slick-theme.less: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Default Variables 4 | 5 | @slick-font-path: "./fonts/"; 6 | @slick-font-family: "slick"; 7 | @slick-loader-path: "./"; 8 | @slick-arrow-color: white; 9 | @slick-dot-color: black; 10 | @slick-dot-color-active: @slick-dot-color; 11 | @slick-prev-character: "←"; 12 | @slick-next-character: "→"; 13 | @slick-dot-character: "•"; 14 | @slick-dot-size: 6px; 15 | @slick-opacity-default: 0.75; 16 | @slick-opacity-on-hover: 1; 17 | @slick-opacity-not-active: 0.25; 18 | 19 | /* Slider */ 20 | .slick-loading .slick-list{ 21 | background: #fff url('@{slick-loader-path}ajax-loader.gif') center center no-repeat; 22 | } 23 | 24 | /* Arrows */ 25 | .slick-prev, 26 | .slick-next { 27 | position: absolute; 28 | display: block; 29 | height: 20px; 30 | width: 20px; 31 | line-height: 0px; 32 | font-size: 0px; 33 | cursor: pointer; 34 | background: transparent; 35 | color: transparent; 36 | top: 50%; 37 | -webkit-transform: translate(0, -50%); 38 | -ms-transform: translate(0, -50%); 39 | transform: translate(0, -50%); 40 | padding: 0; 41 | border: none; 42 | outline: none; 43 | &:hover, &:focus { 44 | outline: none; 45 | background: transparent; 46 | color: transparent; 47 | &:before { 48 | opacity: @slick-opacity-on-hover; 49 | } 50 | } 51 | &.slick-disabled:before { 52 | opacity: @slick-opacity-not-active; 53 | } 54 | } 55 | 56 | .slick-prev:before, .slick-next:before { 57 | font-family: @slick-font-family; 58 | font-size: 20px; 59 | line-height: 1; 60 | color: @slick-arrow-color; 61 | opacity: @slick-opacity-default; 62 | -webkit-font-smoothing: antialiased; 63 | -moz-osx-font-smoothing: grayscale; 64 | 65 | & when ( @slick-font-family = 'slick' ) { 66 | /* Icons */ 67 | @font-face { 68 | font-family: 'slick'; 69 | font-weight: normal; 70 | font-style: normal; 71 | src: url('@{slick-font-path}slick.eot'); 72 | src: url('@{slick-font-path}slick.eot?#iefix') format('embedded-opentype'), url('@{slick-font-path}slick.woff') format('woff'), url('@{slick-font-path}slick.ttf') format('truetype'), url('@{slick-font-path}slick.svg#slick') format('svg'); 73 | } 74 | } 75 | } 76 | 77 | .slick-prev { 78 | left: -25px; 79 | [dir="rtl"] & { 80 | left: auto; 81 | right: -25px; 82 | } 83 | &:before { 84 | content: @slick-prev-character; 85 | [dir="rtl"] & { 86 | content: @slick-next-character; 87 | } 88 | } 89 | } 90 | 91 | .slick-next { 92 | right: -25px; 93 | [dir="rtl"] & { 94 | left: -25px; 95 | right: auto; 96 | } 97 | &:before { 98 | content: @slick-next-character; 99 | [dir="rtl"] & { 100 | content: @slick-prev-character; 101 | } 102 | } 103 | } 104 | 105 | /* Dots */ 106 | 107 | .slick-dotted .slick-slider { 108 | margin-bottom: 30px; 109 | } 110 | 111 | .slick-dots { 112 | position: absolute; 113 | bottom: -25px; 114 | list-style: none; 115 | display: block; 116 | text-align: center; 117 | padding: 0; 118 | margin: 0; 119 | width: 100%; 120 | li { 121 | position: relative; 122 | display: inline-block; 123 | height: 20px; 124 | width: 20px; 125 | margin: 0 5px; 126 | padding: 0; 127 | cursor: pointer; 128 | button { 129 | border: 0; 130 | background: transparent; 131 | display: block; 132 | height: 20px; 133 | width: 20px; 134 | outline: none; 135 | line-height: 0px; 136 | font-size: 0px; 137 | color: transparent; 138 | padding: 5px; 139 | cursor: pointer; 140 | &:hover, &:focus { 141 | outline: none; 142 | &:before { 143 | opacity: @slick-opacity-on-hover; 144 | } 145 | } 146 | &:before { 147 | position: absolute; 148 | top: 0; 149 | left: 0; 150 | content: @slick-dot-character; 151 | width: 20px; 152 | height: 20px; 153 | font-family: @slick-font-family; 154 | font-size: @slick-dot-size; 155 | line-height: 20px; 156 | text-align: center; 157 | color: @slick-dot-color; 158 | opacity: @slick-opacity-not-active; 159 | -webkit-font-smoothing: antialiased; 160 | -moz-osx-font-smoothing: grayscale; 161 | } 162 | } 163 | &.slick-active button:before { 164 | color: @slick-dot-color-active; 165 | opacity: @slick-opacity-default; 166 | } 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /js/slick/slick-theme.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Default Variables 4 | 5 | // Slick icon entity codes outputs the following 6 | // "\2190" outputs ascii character "←" 7 | // "\2192" outputs ascii character "→" 8 | // "\2022" outputs ascii character "•" 9 | 10 | $slick-font-path: "./fonts/" !default; 11 | $slick-font-family: "slick" !default; 12 | $slick-loader-path: "./" !default; 13 | $slick-arrow-color: white !default; 14 | $slick-dot-color: black !default; 15 | $slick-dot-color-active: $slick-dot-color !default; 16 | $slick-prev-character: "\2190" !default; 17 | $slick-next-character: "\2192" !default; 18 | $slick-dot-character: "\2022" !default; 19 | $slick-dot-size: 6px !default; 20 | $slick-opacity-default: 0.75 !default; 21 | $slick-opacity-on-hover: 1 !default; 22 | $slick-opacity-not-active: 0.25 !default; 23 | 24 | @function slick-image-url($url) { 25 | @if function-exists(image-url) { 26 | @return image-url($url); 27 | } 28 | @else { 29 | @return url($slick-loader-path + $url); 30 | } 31 | } 32 | 33 | @function slick-font-url($url) { 34 | @if function-exists(font-url) { 35 | @return font-url($url); 36 | } 37 | @else { 38 | @return url($slick-font-path + $url); 39 | } 40 | } 41 | 42 | /* Slider */ 43 | 44 | .slick-list { 45 | .slick-loading & { 46 | background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; 47 | } 48 | } 49 | 50 | /* Icons */ 51 | @if $slick-font-family == "slick" { 52 | @font-face { 53 | font-family: "slick"; 54 | src: slick-font-url("slick.eot"); 55 | src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); 56 | font-weight: normal; 57 | font-style: normal; 58 | } 59 | } 60 | 61 | /* Arrows */ 62 | 63 | .slick-prev, 64 | .slick-next { 65 | position: absolute; 66 | display: block; 67 | height: 20px; 68 | width: 20px; 69 | line-height: 0px; 70 | font-size: 0px; 71 | cursor: pointer; 72 | background: transparent; 73 | color: transparent; 74 | top: 50%; 75 | -webkit-transform: translate(0, -50%); 76 | -ms-transform: translate(0, -50%); 77 | transform: translate(0, -50%); 78 | padding: 0; 79 | border: none; 80 | outline: none; 81 | &:hover, &:focus { 82 | outline: none; 83 | background: transparent; 84 | color: transparent; 85 | &:before { 86 | opacity: $slick-opacity-on-hover; 87 | } 88 | } 89 | &.slick-disabled:before { 90 | opacity: $slick-opacity-not-active; 91 | } 92 | &:before { 93 | font-family: $slick-font-family; 94 | font-size: 20px; 95 | line-height: 1; 96 | color: $slick-arrow-color; 97 | opacity: $slick-opacity-default; 98 | -webkit-font-smoothing: antialiased; 99 | -moz-osx-font-smoothing: grayscale; 100 | } 101 | } 102 | 103 | .slick-prev { 104 | left: -25px; 105 | [dir="rtl"] & { 106 | left: auto; 107 | right: -25px; 108 | } 109 | &:before { 110 | content: $slick-prev-character; 111 | [dir="rtl"] & { 112 | content: $slick-next-character; 113 | } 114 | } 115 | } 116 | 117 | .slick-next { 118 | right: -25px; 119 | [dir="rtl"] & { 120 | left: -25px; 121 | right: auto; 122 | } 123 | &:before { 124 | content: $slick-next-character; 125 | [dir="rtl"] & { 126 | content: $slick-prev-character; 127 | } 128 | } 129 | } 130 | 131 | /* Dots */ 132 | 133 | .slick-dotted.slick-slider { 134 | margin-bottom: 30px; 135 | } 136 | 137 | .slick-dots { 138 | position: absolute; 139 | bottom: -25px; 140 | list-style: none; 141 | display: block; 142 | text-align: center; 143 | padding: 0; 144 | margin: 0; 145 | width: 100%; 146 | li { 147 | position: relative; 148 | display: inline-block; 149 | height: 20px; 150 | width: 20px; 151 | margin: 0 5px; 152 | padding: 0; 153 | cursor: pointer; 154 | button { 155 | border: 0; 156 | background: transparent; 157 | display: block; 158 | height: 20px; 159 | width: 20px; 160 | outline: none; 161 | line-height: 0px; 162 | font-size: 0px; 163 | color: transparent; 164 | padding: 5px; 165 | cursor: pointer; 166 | &:hover, &:focus { 167 | outline: none; 168 | &:before { 169 | opacity: $slick-opacity-on-hover; 170 | } 171 | } 172 | &:before { 173 | position: absolute; 174 | top: 0; 175 | left: 0; 176 | content: $slick-dot-character; 177 | width: 20px; 178 | height: 20px; 179 | font-family: $slick-font-family; 180 | font-size: $slick-dot-size; 181 | line-height: 20px; 182 | text-align: center; 183 | color: $slick-dot-color; 184 | opacity: $slick-opacity-not-active; 185 | -webkit-font-smoothing: antialiased; 186 | -moz-osx-font-smoothing: grayscale; 187 | } 188 | } 189 | &.slick-active button:before { 190 | color: $slick-dot-color-active; 191 | opacity: $slick-opacity-default; 192 | } 193 | } 194 | } 195 | -------------------------------------------------------------------------------- /js/slick/slick.css: -------------------------------------------------------------------------------- 1 | /* Slider */ 2 | .slick-slider 3 | { 4 | position: relative; 5 | 6 | display: block; 7 | box-sizing: border-box; 8 | 9 | -webkit-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | user-select: none; 13 | 14 | -webkit-touch-callout: none; 15 | -khtml-user-select: none; 16 | -ms-touch-action: pan-y; 17 | touch-action: pan-y; 18 | -webkit-tap-highlight-color: transparent; 19 | } 20 | 21 | .slick-list 22 | { 23 | position: relative; 24 | 25 | display: block; 26 | overflow: hidden; 27 | 28 | margin: 0; 29 | padding: 0; 30 | } 31 | .slick-list:focus 32 | { 33 | outline: none; 34 | } 35 | .slick-list.dragging 36 | { 37 | cursor: pointer; 38 | cursor: hand; 39 | } 40 | 41 | .slick-slider .slick-track, 42 | .slick-slider .slick-list 43 | { 44 | -webkit-transform: translate3d(0, 0, 0); 45 | -moz-transform: translate3d(0, 0, 0); 46 | -ms-transform: translate3d(0, 0, 0); 47 | -o-transform: translate3d(0, 0, 0); 48 | transform: translate3d(0, 0, 0); 49 | } 50 | 51 | .slick-track 52 | { 53 | position: relative; 54 | top: 0; 55 | left: 0; 56 | 57 | display: block; 58 | margin-left: auto; 59 | margin-right: auto; 60 | } 61 | .slick-track:before, 62 | .slick-track:after 63 | { 64 | display: table; 65 | 66 | content: ''; 67 | } 68 | .slick-track:after 69 | { 70 | clear: both; 71 | } 72 | .slick-loading .slick-track 73 | { 74 | visibility: hidden; 75 | } 76 | 77 | .slick-slide 78 | { 79 | display: none; 80 | float: left; 81 | 82 | height: 100%; 83 | min-height: 1px; 84 | } 85 | [dir='rtl'] .slick-slide 86 | { 87 | float: right; 88 | } 89 | .slick-slide img 90 | { 91 | display: block; 92 | } 93 | .slick-slide.slick-loading img 94 | { 95 | display: none; 96 | } 97 | .slick-slide.dragging img 98 | { 99 | pointer-events: none; 100 | } 101 | .slick-initialized .slick-slide 102 | { 103 | display: block; 104 | } 105 | .slick-loading .slick-slide 106 | { 107 | visibility: hidden; 108 | } 109 | .slick-vertical .slick-slide 110 | { 111 | display: block; 112 | 113 | height: auto; 114 | 115 | border: 1px solid transparent; 116 | } 117 | .slick-arrow.slick-hidden { 118 | display: none; 119 | } 120 | -------------------------------------------------------------------------------- /js/slick/slick.less: -------------------------------------------------------------------------------- 1 | /* Slider */ 2 | 3 | .slick-slider { 4 | position: relative; 5 | display: block; 6 | box-sizing: border-box; 7 | -webkit-touch-callout: none; 8 | -webkit-user-select: none; 9 | -khtml-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | user-select: none; 13 | -ms-touch-action: pan-y; 14 | touch-action: pan-y; 15 | -webkit-tap-highlight-color: transparent; 16 | } 17 | .slick-list { 18 | position: relative; 19 | overflow: hidden; 20 | display: block; 21 | margin: 0; 22 | padding: 0; 23 | 24 | &:focus { 25 | outline: none; 26 | } 27 | 28 | &.dragging { 29 | cursor: pointer; 30 | cursor: hand; 31 | } 32 | } 33 | .slick-slider .slick-track, 34 | .slick-slider .slick-list { 35 | -webkit-transform: translate3d(0, 0, 0); 36 | -moz-transform: translate3d(0, 0, 0); 37 | -ms-transform: translate3d(0, 0, 0); 38 | -o-transform: translate3d(0, 0, 0); 39 | transform: translate3d(0, 0, 0); 40 | } 41 | 42 | .slick-track { 43 | position: relative; 44 | left: 0; 45 | top: 0; 46 | display: block; 47 | margin-left: auto; 48 | margin-right: auto; 49 | 50 | &:before, 51 | &:after { 52 | content: ""; 53 | display: table; 54 | } 55 | 56 | &:after { 57 | clear: both; 58 | } 59 | 60 | .slick-loading & { 61 | visibility: hidden; 62 | } 63 | } 64 | .slick-slide { 65 | float: left; 66 | height: 100%; 67 | min-height: 1px; 68 | [dir="rtl"] & { 69 | float: right; 70 | } 71 | img { 72 | display: block; 73 | } 74 | &.slick-loading img { 75 | display: none; 76 | } 77 | 78 | display: none; 79 | 80 | &.dragging img { 81 | pointer-events: none; 82 | } 83 | 84 | .slick-initialized & { 85 | display: block; 86 | } 87 | 88 | .slick-loading & { 89 | visibility: hidden; 90 | } 91 | 92 | .slick-vertical & { 93 | display: block; 94 | height: auto; 95 | border: 1px solid transparent; 96 | } 97 | } 98 | .slick-arrow.slick-hidden { 99 | display: none; 100 | } 101 | -------------------------------------------------------------------------------- /js/slick/slick.min.js: -------------------------------------------------------------------------------- 1 | !function(i){"use strict";"function"==typeof define&&define.amd?define(["jquery"],i):"undefined"!=typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";var e=window.Slick||{};(e=function(){var e=0;return function(t,o){var s,n=this;n.defaults={accessibility:!0,adaptiveHeight:!1,appendArrows:i(t),appendDots:i(t),arrows:!0,asNavFor:null,prevArrow:'',nextArrow:'',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(e,t){return i('