diff --git a/src/App.vue b/src/App.vue index b2f0798..d875017 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,22 +1,38 @@ \ No newline at end of file + diff --git a/src/assets/font/Letter Gothic Std Bold.ttf b/src/assets/font/Letter Gothic Std Bold.ttf new file mode 100644 index 0000000..a750711 Binary files /dev/null and b/src/assets/font/Letter Gothic Std Bold.ttf differ diff --git a/src/assets/font/NotoSerifCJKtc-Black.otf b/src/assets/font/NotoSerifCJKtc-Black.otf new file mode 100644 index 0000000..b332aa3 Binary files /dev/null and b/src/assets/font/NotoSerifCJKtc-Black.otf differ diff --git a/src/assets/font/NotoSerifCJKtc-Bold.otf b/src/assets/font/NotoSerifCJKtc-Bold.otf new file mode 100644 index 0000000..8691c89 Binary files /dev/null and b/src/assets/font/NotoSerifCJKtc-Bold.otf differ diff --git a/src/assets/font/NotoSerifCJKtc-SemiBold.otf b/src/assets/font/NotoSerifCJKtc-SemiBold.otf new file mode 100644 index 0000000..f6556fe Binary files /dev/null and b/src/assets/font/NotoSerifCJKtc-SemiBold.otf differ diff --git a/src/assets/images/home/home-headerIcon.svg b/src/assets/images/home/home-headerIcon.svg new file mode 100644 index 0000000..00c7176 --- /dev/null +++ b/src/assets/images/home/home-headerIcon.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/home/home-icon-apple.svg b/src/assets/images/home/home-icon-apple.svg new file mode 100644 index 0000000..4821847 --- /dev/null +++ b/src/assets/images/home/home-icon-apple.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/images/home/home-icon-square.svg b/src/assets/images/home/home-icon-square.svg new file mode 100644 index 0000000..b45e5ab --- /dev/null +++ b/src/assets/images/home/home-icon-square.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/images/home/home-sponsors.png b/src/assets/images/home/home-sponsors.png new file mode 100644 index 0000000..bee204b Binary files /dev/null and b/src/assets/images/home/home-sponsors.png differ diff --git a/src/assets/images/home/home-topic.svg b/src/assets/images/home/home-topic.svg new file mode 100644 index 0000000..fd6ff55 --- /dev/null +++ b/src/assets/images/home/home-topic.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/scss/color.scss b/src/assets/scss/color.scss index c25d654..3796dfb 100644 --- a/src/assets/scss/color.scss +++ b/src/assets/scss/color.scss @@ -4,4 +4,9 @@ $pale-grey: #f0f7fd; $dark-slate-blue: #1f4163; $dark-sky-blue: #3d93e9; $slate-blue: #5f7a95; -$sky-blue: #9dc5ec; \ No newline at end of file +$sky-blue: #9dc5ec; + +//home +$indigo-blue: #1060ff; +// $indigo-blue-dark: #000098; +$black: black; diff --git a/src/assets/scss/font.scss b/src/assets/scss/font.scss index 4e178cf..0db96f1 100644 --- a/src/assets/scss/font.scss +++ b/src/assets/scss/font.scss @@ -1,4 +1,24 @@ // import web font @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); +@font-face { + font-family: "Noto Serif CJK TC -Bold"; + src: url("~@/assets/font/NotoSerifCJKtc-Bold.otf"); +} + +@font-face { + font-family: "Noto Serif CJK TC -Black"; + src: url("~@/assets/font/NotoSerifCJKtc-Black.otf"); +} + +@font-face { + font-family: "Noto Serif CJK TC -SemiBold"; + src: url("~@/assets/font/NotoSerifCJKtc-SemiBold.otf"); +} + +@font-face { + font-family: "Letter Gothic Std Bold"; + src: url("~@/assets/font/Letter Gothic Std Bold.ttf"); +} + $fontFamily: Noto Sans TC, monospace; diff --git a/src/assets/scss/footer-primary.scss b/src/assets/scss/footer-primary.scss new file mode 100644 index 0000000..ee42df3 --- /dev/null +++ b/src/assets/scss/footer-primary.scss @@ -0,0 +1,189 @@ +@import "breakpoint.scss"; + +// varible declare +$fontColor: white; + +//for footer-primary +$backgroundColor: #000098; + +$fontFamily: "Noto Sans TC", monospace; + +@mixin fontSize() { + font-size: 14pt; + line-height: 2; + @include xl { + } + @include lg { + } + @include md { + } + @include sm { + font-size: 14pt; + } + @include xs { + font-size: 12pt; + } +} + +@mixin iconSize() { + font-size: 2.2em; + margin-right: 36px; + @include xl { + font-size: 2.1em; + margin-right: 20px; + } + @include lg { + } + @include md { + font-size: 1.8em; + } + @include sm { + } + @include xs { + font-size: 1.6em; + } +} + +@mixin footerLayout() { + // flex + display: flex; + flex-direction: row; + justify-content: center; + & > .footer-right { + margin-left: 100px; + } + + @include md { + flex-direction: column; + justify-content: flex-start; + align-items: center; + // height: 320px; + & > .footer-right { + margin-left: 0; + } + & > * { + margin-left: 0; + width: 80%; + } + + .footer-left { + margin-bottom: 24px; + } + + .footer-right { + padding-bottom: 0; + } + } + + @include xs { + & > * { + width: 90%; + } + } +} + +.footer-container { + background: $backgroundColor; + // position + // position: absolute; + // bottom: 0; + // left: 0; + margin-top: auto; + + // size + width: 100vw; + padding-top: 45px; + padding-bottom: 45px; + + position: relative; + z-index: 2; + + .footer-left { + display: inline-flex; + flex-direction: column; + justify-content: center; + + .footer-brand { + margin-bottom: 24px; + } + } + + .footer-right { + display: inline-flex; + flex-direction: column; + justify-content: center; + padding-bottom: 24px; + + //for footer-primary + transform: translateY(11%); + + .footer-context { + margin-bottom: 14px; + } + } + + // layout + @include footerLayout; +} + +.footer-community-icon { + .community-icon { + @include iconSize; + color: $fontColor; + } + .community-icon:first { + margin-left: 0; + } +} + +.footer-context { + @include fontSize; + font-family: $fontFamily; + color: $fontColor; + font-weight: bold; +} + +.footer-font-block { + // display flex + display: flex; + flex-direction: column; + // size + width: auto; +} + +//for footer-primary (on below) +@mixin sitesOverYearsLink() { + margin-right: 20px; + + @media (max-width: 570px) { + margin-right: 10px; + } + + @include subs { + margin-right: 30px; + margin-bottom: 10px; + } +} +@mixin sitesOverYears() { + height: 100px; + width: 480px; + @include subs { + width: 300px; + margin-bottom: 50px; + } +} + +.footer-sitesOverYears { + @include sitesOverYears; + &__title { + margin-top: 20px; + height: 50px; + } + &__links { + a { + float: left; + color: $fontColor; + @include sitesOverYearsLink; + } + } +} diff --git a/src/assets/scss/footer.scss b/src/assets/scss/footer-secondary.scss similarity index 100% rename from src/assets/scss/footer.scss rename to src/assets/scss/footer-secondary.scss diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss new file mode 100644 index 0000000..82aaff2 --- /dev/null +++ b/src/assets/scss/header.scss @@ -0,0 +1,125 @@ +@import "./color.scss"; +@import "./breakpoint.scss"; + +$font-header-link: "Noto Serif CJK TC -Bold"; +$font-header-apply: "Noto Serif CJK TC -Black"; + +@mixin headerLinksFontSize { + font-size: 12pt; + @media screen and (min-width: $max-width-big) { + font-size: 13.5pt; + } + @media screen and (min-width: $max-width-big-0) { + font-size: 15pt; + } +} +@mixin headerLinksWidth { + width: 600px; + @media screen and (min-width: $max-width-big) { + width: 630px; + } + @media screen and (min-width: $max-width-big-0) { + width: 680px; + } +} + +.header { + position: relative; + z-index: 99; + left: 6%; + top: 60px; + width: 88%; + height: 62px; + border-radius: 73px; + box-shadow: 0 6px 18px 0 rgba(0, 0, 255, 0.22); + background-color: $white; + + &--sticky { + position: fixed; + z-index: 99; + left: 6%; + top: 65px; + } + &__left { + float: left; + width: 20%; + } + + &-logo { + position: absolute; + left: 35px; + top: 50%; + transform: translateY(-50%); + width: 150px; + } + + &__right { + float: right; + width: 80%; + // background-color: lightgoldenrodyellow; + } + + &-links { + // background-color: lightgray; + font-family: $font-header-link; + float: right; + @include headerLinksWidth; + // width: 600px; + margin-right: 92px; + height: 100%; + height: 50px; + top: 6px; + + ul { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + + li { + float: left; + margin: 0; + padding: 0; + padding: 22px 20px; + height: 100%; + display: block; + text-align: left; + // &:active { + // border-bottom: $indigo-blue solid 5px; + // } + + a { + @include headerLinksFontSize; + color: $black; + padding-bottom: 15px; + } + } + } + } + + &-link--active { + // padding-bottom: 10px; + border-bottom: $indigo-blue solid 3.5px; + } + + &-apply { + font-family: $font-header-apply; + width: 92px; + height: 38px; + border-radius: 38px; + background-color: $indigo-blue; + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + + a { + font-size: 13pt; + color: $white; + position: absolute; + top: 50%; + left: 40%; + transform: translateX(-35%) translateY(-50%); + } + } +} diff --git a/src/assets/scss/home/home.scss b/src/assets/scss/home/home.scss new file mode 100644 index 0000000..c940fe1 --- /dev/null +++ b/src/assets/scss/home/home.scss @@ -0,0 +1,276 @@ +@import "../color.scss"; +@import "../breakpoint.scss"; +$font-home: "Noto Serif CJK TC -SemiBold"; +$font-home-h1: "Noto Serif CJK TC -Bold"; +$font-home-h2: "Letter Gothic Std Bold"; +$font-home-button: "Noto Serif CJK TC -Black"; + +//default screen size width: 1440px + +//section +@mixin sectionTitleHeight { + height: 583px; + @media screen and (min-width: $max-width-big) { + height: 635px; + } + @media screen and (min-width: $max-width-big-0) { + height: 700px; + } +} +@mixin sectionContentHeight { + height: 1900px; + @media screen and (min-width: $max-width-big) { + height: 2050px; + } + @media screen and (min-width: $max-width-big-0) { + height: 2150px; + } +} +// ------------------------------------------- + +//home__title +@mixin homeTitleFontsize { + font-size: 18pt; + @media screen and (min-width: $max-width-big) { + font-size: 22pt; + } + @media screen and (min-width: $max-width-big-0) { + font-size: 25pt; + } +} +@mixin homeTitleTopicWidth { + width: 500px; + @media screen and (min-width: $max-width-big) { + width: 600px; + } + @media screen and (min-width: $max-width-big-0) { + width: 700px; + } +} +// ------------------------------------------- + +//home__info +@mixin homeInfoTitleH1Fontsize { + font-size: 26pt; + @media screen and (min-width: $max-width-big) { + font-size: 30pt; + } + @media screen and (min-width: $max-width-big-0) { + font-size: 35pt; + } +} +@mixin homeInfoTitleH2Fontsize { + &--small { + font-size: 19pt; + } + &--mid { + font-size: 23pt; + } + &--big { + font-size: 31pt; + } + @media screen and (min-width: $max-width-big) { + &--small { + font-size: 22pt; + } + &--mid { + font-size: 27pt; + } + &--big { + font-size: 35pt; + } + } + @media screen and (min-width: $max-width-big-0) { + &--small { + font-size: 26pt; + } + &--mid { + font-size: 32pt; + } + &--big { + font-size: 40pt; + } + } +} +@mixin homeInfoParagraphFontsize { + font-size: 12pt; + @media screen and (min-width: $max-width-big) { + font-size: 15pt; + } + @media screen and (min-width: $max-width-big-0) { + font-size: 18pt; + } +} +@mixin homeInfoButtonBox { + height: 50px; + width: 245px; + margin-top: 40px; + // background-color: burlywood; + @media screen and (min-width: $max-width-big) { + transform: scale(1.2) translateX(8%) translateY(20%); + } + @media screen and (min-width: $max-width-big-0) { + transform: scale(1.4) translateX(14%) translateY(25%); + } +} +//home__info +@mixin homeInfoImgWidth { + width: 120px; + @media screen and (max-width: $max-width-medium-0) { + width: 80px; + } + @media screen and (min-width: $max-width-big) { + width: 130px; + } + @media screen and (min-width: $max-width-big-0) { + width: 150px; + } +} +// ---------------------------------------------------------------------------------------------- + +.section { + &-title { + margin-top: 150px; + @include sectionTitleHeight; + // background-color: chartreuse; + } + &-content { + @include sectionContentHeight; + // background-color: cornsilk; + } +} + +.home { + font-family: $font-home; + position: relative; + &__title { + // width: 600px; + width: 75%; + // width: 60%; + text-align: center; + // background-color: cornflowerblue; + margin: 0 auto; + padding-top: 10px; + position: relative; + + &-box1 { + margin: 0 auto; + margin-top: 50px; + margin-bottom: 20px; + // background-color: chocolate; + height: 80px; + // width: 600px; + width: 100%; + p { + @include homeTitleFontsize; + } + } + + &-topic { + margin: 0 auto; + @include homeTitleTopicWidth; + } + + &-box2 { + text-align: center; + // background-color: chocolate; + height: 80px; + // width: 600px; + width: 100%; + margin: 0 auto; + margin-top: 80px; + p { + @include homeTitleFontsize; + } + } + } + + &__info { + width: 75%; + padding-bottom: 75px; + // background-color: darkseagreen; + // border: 1px solid blueviolet; + margin: 0 auto; + + position: relative; + + &-container { + width: 75%; + margin-left: 15%; + // background-color: blanchedalmond; + } + + &-title { + // width: 80%; + margin: 0 auto; + // background-color: darkgray; + position: relative; + // height: 100px; + h1 { + font-family: $font-home-h1; + @include homeInfoTitleH1Fontsize; + padding-top: 25px; + } + + h2 { + font-family: $font-home-h2; + padding-top: 25px; + } + + &-h2 { + @include homeInfoTitleH2Fontsize; + } + } + + &-paragraph { + padding-top: 30px; + // background-color: yellow; + p { + @include homeInfoParagraphFontsize; + line-height: 33px; + a { + text-decoration: underline; + color: $indigo-blue; + } + } + } + + &-buttonsBox { + @include homeInfoButtonBox; + } + } + + &-button { + // transform: scale(2); + font-size: 12.5pt; + font-family: $font-home-button; + position: relative; + top: 15px; + color: $white; + background-color: $indigo-blue; + padding: 6px 17px 8px 17px; + border-radius: 32px; + box-shadow: 0 3px 10px 0 rgba(0, 0, 255, 0.18); + margin-right: 20px; + } + + &-squareImg { + position: absolute; + left: 0; + transform: translateX(-130%); + @include homeInfoImgWidth; + } + + &-appleImg { + position: absolute; + top: 0; + right: 0; + transform: translateX(25%) translateY(-12%); + @include homeInfoImgWidth; + } + + &-sponsorsImg { + position: absolute; + bottom: 0; + } +} diff --git a/src/components/FooterPrimary.vue b/src/components/FooterPrimary.vue new file mode 100644 index 0000000..7919b12 --- /dev/null +++ b/src/components/FooterPrimary.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/src/components/Footer.vue b/src/components/FooterSecondary.vue similarity index 71% rename from src/components/Footer.vue rename to src/components/FooterSecondary.vue index 7cb6121..f21321a 100644 --- a/src/components/Footer.vue +++ b/src/components/FooterSecondary.vue @@ -37,39 +37,39 @@ diff --git a/src/components/Header.vue b/src/components/Header.vue new file mode 100644 index 0000000..dc99714 --- /dev/null +++ b/src/components/Header.vue @@ -0,0 +1,117 @@ + + + + + diff --git a/src/pages/Agenda.vue b/src/pages/Agenda.vue index bd2cc0e..aa742bc 100644 --- a/src/pages/Agenda.vue +++ b/src/pages/Agenda.vue @@ -27,4 +27,4 @@ export default class Agenda extends Vue { \ No newline at end of file + diff --git a/src/pages/Home.vue b/src/pages/Home.vue index 99b79a9..2108094 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -1,11 +1,123 @@ - \ No newline at end of file + + + diff --git a/src/pages/Sponsor.vue b/src/pages/Sponsor.vue index 755d265..9bbc795 100644 --- a/src/pages/Sponsor.vue +++ b/src/pages/Sponsor.vue @@ -8,4 +8,4 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; export default class Sponsor extends Vue { } - \ No newline at end of file + diff --git a/src/pages/Team.vue b/src/pages/Team.vue index d2c3b76..cc22743 100644 --- a/src/pages/Team.vue +++ b/src/pages/Team.vue @@ -1,11 +1,7 @@ - + \ No newline at end of file +@Component({}) +export default class Team extends Vue {} + diff --git a/src/pages/Traffic.vue b/src/pages/Traffic.vue index c971af6..cf81a75 100644 --- a/src/pages/Traffic.vue +++ b/src/pages/Traffic.vue @@ -1,11 +1,7 @@ - + \ No newline at end of file +@Component({}) +export default class Traffic extends Vue {} + diff --git a/src/pages/Venue.vue b/src/pages/Venue.vue index 9985248..79981bc 100644 --- a/src/pages/Venue.vue +++ b/src/pages/Venue.vue @@ -1,11 +1,7 @@ - + \ No newline at end of file +@Component({}) +export default class Venue extends Vue {} +