diff --git a/src/assets/scss/CFP/card.scss b/src/assets/scss/CFP/card.scss deleted file mode 100644 index a1c28a6..0000000 --- a/src/assets/scss/CFP/card.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import '@/assets/scss/breakpoint.scss'; -@import '@/assets/scss/color.scss'; - -.agenda.card:not(.container) { - a.image.container { - display: inline-block; - width: 100%; - line-height: 0; // prevent background overflow - background-color: #ffffff; - border-radius: 11px; - box-shadow: 0 3px 15px 0 rgba(89, 120, 206, 0.56); - - // smooth transition from hover -> default state - will-change: transform; - transform: scale(1.0); - transition-duration: .25s; - - img { - border-radius: 11px; - width: 100%; - } - - &:hover { - transform: scale(1.04); - transition-duration: .25s; - } - } - - p.description { - line-height: 1.55em; - text-align: center; - font-weight: 900; - } -} \ No newline at end of file diff --git a/src/assets/scss/CFP/cfpBackground.scss b/src/assets/scss/CFP/cfpBackground.scss.backup similarity index 100% rename from src/assets/scss/CFP/cfpBackground.scss rename to src/assets/scss/CFP/cfpBackground.scss.backup diff --git a/src/assets/scss/CFP/cfp_introduction.scss b/src/assets/scss/CFP/cfp_introduction.scss deleted file mode 100644 index 9af4c42..0000000 --- a/src/assets/scss/CFP/cfp_introduction.scss +++ /dev/null @@ -1,686 +0,0 @@ -// font -$fontFamily: 'Noto Sans TC', sans-serif; -$fontStyle: normal; -$light-blue: #3D93E9; -$fontColor: #226bb4; -$buttonHoverColor: #ffffff; -@mixin Font() { - font-family: $fontFamily; -} -@mixin hyperlinkFont() { - text-decoration: underline; -} -// font size -$h1FontSize: 30px; -$h2FontSize: 24px; -$h3FontSize: 16px; -$contextFontSize: 13px; -$buttonFontSize: 24px; - -$mh1FontSize: 26px; -$mh2FontSize: 20px; -$mh3FontSize: 14px; -$mcontextFontSize: 14px; -$mbuttonFontSize: 18px; -$hyperlinkFontSize: 14px; - -$enlargeFontSize: 55px; -$subFontSize: 30px; -// letter spacing -$titleLetterSpace: 0; -$contextLetterSpace: 0.2px; -$buttonLetterSpace: 0; -$hyperlinkLetterSpace: 0; - -// background -$buttonHoverBg: #226BB4; - -#cfp { - .introduction-container { - overflow-x: hidden; - overflow-y: hidden; - margin: -8px; - position:relative; - } - - .introduction { - // flex - display: flex; - flex-direction: column; - align-items: left; - // font - @include Font; - color: $fontColor; - // size - margin-left: 15%; - margin-top: 50%; - - @media screen and(max-width: 414px) { - width:100%; - } - } - - .about-section { - // font - font-size: $contextFontSize; - letter-spacing: $contextLetterSpace; - line-height: 42px; - width:90%; - - @media screen and(max-width: 414px) { - font-size: $mcontextFontSize; - width:160%; - } - } - - .discuss-section { - font-size: $contextFontSize; - letter-spacing: $contextLetterSpace; - line-height: 42px; - - @media screen and(max-width: 414px) { - font-size: $mcontextFontSize; - width:80%; - } - } - - .topic-intro { - // size - margin-top: 130px; - // font - font-size: $contextFontSize; - letter-spacing: $contextLetterSpace; - line-height: 42px; - - width: 1100px; - - @media screen and(max-width: 414px) { - margin-top: 60%; - width: 110%; - } - } - - .last-part { - // size - margin-top: 70px; - height: 325px; - // font - font-size: $contextFontSize; - letter-spacing: $contextLetterSpace; - line-height: 42px; - - @media screen and(max-width: 414px) { - margin-top: 30%; - width: 70%; - margin-bottom: 30%; - } - } - - .buttons { - // font - color: $fontColor; - font-size: $buttonFontSize; - font-weight: 900; - letter-spacing: $buttonLetterSpace; - line-height: 30px; - // size - margin-right: 37px; - padding: 12px 15px 12px 15px; - // box - background-color: #ffffff; - box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - transition-duration: 0.2s; - border: none; - border-radius: 8px; - // display - display: inline-block; - - position: relative; - z-index: 5; - - @media screen and (max-width: 414px) { - font-size: $mbuttonFontSize; - font-weight: 900; - letter-spacing: 0px; - color: $fontColor; - text-align: center; - opacity: 1; - border-radius: 6px; - padding: 10px 8px 10px 8px; - margin-right: 15px; - margin-top: 20px; - } - } - - .button-post { - // display - display: inline; - // size - margin-left: 40px; - margin-top: -20px; - - z-index: 2; - - @media screen and (max-width: 414px) { - width: 414px; - margin-left: 0px; - } - } - - .buttons:hover { - // box - background-color: $buttonHoverBg; - box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19); - // font - h3 { - color: $buttonHoverColor; - } - } - - .date { - // display - display: inline; - // size - margin-right: 35px; - // align - vertical-align: bottom; - line-height: 30px; - - @media screen and(max-width:414px){ - font-size: 30px; - margin-right: 10px; - line-height: 50px; - vertical-align:middle; - } - } -} - -h1, h2, h3, p, span { - font-family: $fontFamily; - color: $fontColor; -} - -h1 { - // font - font-size: $h1FontSize; - line-height: 70px; - font-weight: 900; - letter-spacing: $titleLetterSpace; - - .enlarge { - font-size: $enlargeFontSize; - @media screen and (max-width: 414px) { - line-height: 80px; - } - } - - .sub { - font-size: $subFontSize; - } - - @media screen and (max-width: 414px) { - line-height: 20px; - } -} - -.right { - text-align: left; - - @media screen and (max-width: 414px) { - text-align: right; - margin-right: 30%; - } -} - -h2 { - // font - font-size: $h2FontSize; - letter-spacing: $titleLetterSpace; - font-weight: 900; - line-height: 70px; - margin: 0px; -} - -h3 { - // Font - font-size: $h3FontSize; - letter-spacing: $titleLetterSpace; - font-weight: 900; - line-height: 15px; - margin: 0px; -} - -.about-section > .context { - margin-right: 50%; -} - -.topic-intro > .context { - margin-right: 30%; -} - -.context { - // font - font-size: $contextFontSize; - line-height: 30px; - letter-spacing: $contextLetterSpace; - font-weight: normal; -} - -.detail { - // display - display: inline; - // font - font-size: $contextFontSize; - line-height: 20px; - letter-spacing: $contextLetterSpace; - font-weight: normal; - // align - vertical-align: bottom; - // size - - @media screen and (max-width: 414px) { - margin-right: 25%; - line-height: 35px; - font-size: $mcontextFontSize; - } -} - -.context-span { - // font - font-size: $contextFontSize; - font-weight: 900; - letter-spacing: $contextLetterSpace; - line-height: 42px; -} - -.context-hyperlink { - // font - font-size: $hyperlinkFontSize; - letter-spacing: $hyperlinkLetterSpace; - color: $light-blue; - font-weight: normal; - line-height: 42px; -} - -p.tag { - // font - font-size: 14px; - line-height: 15px; - letter-spacing: 0; - font-weight: 900; - // align - text-align: center; - margin-top: 0px; - margin-bottom: 5px; - - @media screen and (max-width: 414px) { - font-size: 16px; - } -} - -p.tag.sub { - font-size: 12px; - line-height: 10px; - - @media screen and (max-width: 414px) { - font-size: 12px; - margin-top: 8px; - } -} - -p.small-tag { - margin-block-start: 0em; - margin-block-end: 0.5em; - font-size: 12px; - text-align: center; - - @media screen and (max-width: 414px) { - line-height:12px; - font-size: 10px; - } -} - -//NOTE: the size should be smaller, this temporary size is provided to support min font size of browser -.cfp-img { - // box - border-radius: 4px; - margin-bottom: 12px; - // size - width: 175px; - height: 118px; - box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - - @media screen and (max-width:414px){ - border-radius: 2px; - margin-bottom: 12px; - width: 111px; - height: 75px; - box-shadow: 0px 1px 6px rgba(89, 120, 206, 0.56); - } -} - -.thumbnails { - // box - margin-left: -20.5px; - - @media screen and (max-width:414px){ - margin-left: -9px; - } -} - -.img-table { - // box - border-style: none; - border-spacing: 25.5px 0px; //25.5 - text-align: center; - width: 640px; - - @media screen and (max-width: 414px) { - width: 87%; - align-content: center; - border-spacing: 0px 0px; - } -} - -.td-width { - vertical-align: top; - - @media screen and (max-width: 414px){ - text-align: center; - width: 123px; - } -} - -.tag-table{ - // box - border-style: none; - border-spacing: 0px 0px; //25.5 - // size - width: 500px; -} - -.first-box { - box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - border-radius: 60px; - transform: rotate(15deg); - margin-bottom: -800px; - margin-left: -200px; - margin-top: -300px; - z-index: 1; - - @media screen and(max-width: 960px){ - border-radius: 40px; - margin-bottom: -800px; - transform: rotate(13deg); - } - - @media screen and(max-width: 414px){ - border-radius: 27px; - margin-top: 200px; - margin-bottom: -870px; - margin-left: -150px; - transform:scale(1); - transform: rotate(12deg); - } -} - -.second-box { - box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - border-radius: 32px; - transform: rotate(15deg); - margin-top: 270px; - margin-bottom: -1900px; - margin-left: -700px; - z-index: 1; - - @media screen and(max-width: 414px){ - box-shadow: -10px 30px 30px 0 rgba(135, 152, 199, 0.56); - margin-top: 5px; - margin-left: -415px; - margin-bottom: -1560px; - transform: rotate(12deg) scale(0.6); - z-index: 2; - } -} - -.hiden-box { - position: absolute; - margin-top: 1200px; - margin-left:-300px; - margin-bottom: 0px; - z-index: -1; - @media screen and(max-width: 414px){ - margin-top: 1400px; - transform: rotate(12deg); - z-index: -1; - } -} - -.box-back { - z-index: 2; - - @media screen and(max-width: 960px) { - margin-top: -10%; - margin-left: -10%; - } - - @media screen and(max-width: 414px) { - margin-top: -10%; - margin-left: -10%; - } -} - -.box-back2 { - z-index: 2; - - @media screen and(max-width: 960px) { - margin-top: -10%; - margin-left: -10%; - } - - @media screen and(max-width: 414px) { - margin-top: -10%; - margin-left: -10%; - } -} - -.SITCON-text-path { - transform: scale(0.7); - padding-left: 300px; - margin-right: -550px; - margin-bottom: -600px; - padding-top: 300px; - z-index: 2; - @media screen and(max-width: 414px) { - z-index: -2; - } -} - -.des-text-path { - //background: url(../../assets/images/cfp/Path_762.svg) no-repeat; - transform: scale(0.7); - margin-bottom: -565px; - padding-top: 65px; - margin-left: -350px; - z-index: 2; - - @media screen and(max-width: 960px){ - margin-left: -150px; - margin-bottom: -545px; - } - - @media screen and(max-width: 414px){ - //background-image: url(../../assets/images/cfp/Mobile/Path_763.svg); - margin-top: 40px; - margin-left: -80px; - transform: scale(0.9); - background: url(./assets/images/cfp/Mobile/Path_763.svg) no-repeat; - padding-top: -565px; - margin-bottom: -665px; - } - -} - -.des-blue-bar { - transform: rotate(15deg); - margin-left: -400px; - margin-top: 360px; - margin-bottom: -1360px; - - @media screen and(max-width: 414px){ - margin-left: -600px; - margin-top: 160px; - transform: rotate(12deg) scale(0.6); - } -} - -.paper-image { - transform: scale(0.75); - margin-top: -240px; - margin-left: 270px; - margin-bottom: -710px; - z-index: 1; - - @media screen and(max-width: 414px){ - z-index: 3; - margin-top: -890px; - margin-left: -150px; - margin-bottom: -1030px; - transform: rotate(-7deg) scale(0.35); - } -} - -.background { - //background: url(../../assets/images/cfp/Background.svg) no-repeat; - //content: url("../../assets/images/cfp/Background.svg") no-repeat; - position: absolute; - top: 0; - width:200%; - //max-height: 2000px; - margin-left: -69%; - margin-top: -30%; - text-align: center; - z-index: -2; - - @media screen and(max-width: 414px){ - //content: url() no-repeat;//../../assets/images/cfp/Mobile/Mobile-background.svg - //visibility: hidden; - background: url(./assets/images/cfp/Mobile/Mobile-background.svg) !important; - object-position: -99999px 99999px; - overflow: hidden; - margin-left: -20%; - margin-top: -20%; - z-index: -1; - transform: scale(1); - } -} - -.ellipse { - position: absolute; - width: 100%; - margin-top: -75%; - margin-left: -14%; - align-content: center; - transform: scale(0.31); - - @media screen and(max-width: 414px){ - margin-top: -20%; - transform: scale(0.60); - } -} - -.sitcon-icon { - position: absolute; - width: 100%; - margin-top: -98%; - margin-left: -14%; - align-content: center; - transform: scale(0.14); - - @media screen and(max-width: 414px){ - margin-top: -42%; - transform: scale(0.3); - } -} - -.sitcon-pic-2021 { - position: absolute; - width: 100%; - margin-top: -49%; - margin-left: -14%; - align-content: center; - transform: scale(0.18); - - @media screen and(max-width: 414px){ - margin-top: -40%; - transform: scale(0.5); - } -} - -.sitcon-title-zh { - position: absolute; - width: 100%; - margin-top: -46%; - margin-left: -14%; - align-content: center; - transform: scale(0.11); - - @media screen and(max-width: 414px){ - margin-top: -30%; - transform: scale(0.4); - } -} - -.sitcon-topic { - position: absolute; - width: 100%; - margin-top: -45%; - margin-left: -14%; - align-content: center; - transform: scale(0.23); - - @media screen and(max-width: 414px){ - margin-top: -20%; - transform: scale(0.65); - } -} - -.sitcon-date { - position: absolute; - width: 100%; - margin-top: -31%; - margin-left: -44%; - transform: scale(0.13); - - @media screen and(max-width: 414px){ - margin-top: 65%; - transform: scale(0.35); - } -} - -.sitcon-place { - position: absolute; - width: 100%; - margin-top: -36.5%; - margin-left: -44%; - transform: scale(0.13); - - @media screen and(max-width: 414px){ - margin-top: 73%; - margin-left: -40%; - transform: scale(0.45); - } -} - -.sitcon-qeury { - position: absolute; - width: 100%; - margin-top: -18.5%; - margin-left: -13%; - transform: scale(0.2); - - @media screen and(max-width: 414px){ - margin-top: 50%; - transform: scale(0.6); - } -} \ No newline at end of file diff --git a/src/assets/scss/CFP/CFP.scss b/src/assets/scss/CFP/header.scss similarity index 100% rename from src/assets/scss/CFP/CFP.scss rename to src/assets/scss/CFP/header.scss diff --git a/src/assets/scss/CFP/intro.scss b/src/assets/scss/CFP/intro.scss new file mode 100644 index 0000000..354eb05 --- /dev/null +++ b/src/assets/scss/CFP/intro.scss @@ -0,0 +1,691 @@ +// font +$fontFamily: 'Noto Sans TC', sans-serif; +$fontStyle: normal; +$light-blue: #3d93e9; +$fontColor: #226bb4; +$buttonHoverColor: #ffffff; +@mixin Font() { + font-family: $fontFamily; +} +@mixin hyperlinkFont() { + text-decoration: underline; +} +// font size +$h1FontSize: 30px; +$h2FontSize: 24px; +$h3FontSize: 16px; +$contextFontSize: 13px; +$buttonFontSize: 24px; + +$mh1FontSize: 26px; +$mh2FontSize: 20px; +$mh3FontSize: 14px; +$mcontextFontSize: 14px; +$mbuttonFontSize: 18px; +$hyperlinkFontSize: 14px; + +$enlargeFontSize: 55px; +$subFontSize: 30px; +// letter spacing +$titleLetterSpace: 0; +$contextLetterSpace: 0.2px; +$buttonLetterSpace: 0; +$hyperlinkLetterSpace: 0; + +// background +$buttonHoverBg: #226bb4; + +#cfp { + .introduction-container { + overflow-x: hidden; + overflow-y: hidden; + margin: -8px; + position: relative; + } + + .introduction { + // flex + display: flex; + flex-direction: column; + align-items: left; + // font + @include Font; + color: $fontColor; + // size + margin-left: 15%; + margin-top: 50%; + + @media screen and(max-width: 414px) { + width: 100%; + } + } + + .about-section { + // font + font-size: $contextFontSize; + letter-spacing: $contextLetterSpace; + line-height: 42px; + width: 90%; + + @media screen and(max-width: 414px) { + font-size: $mcontextFontSize; + width: 160%; + } + } + + .discuss-section { + font-size: $contextFontSize; + letter-spacing: $contextLetterSpace; + line-height: 42px; + + @media screen and(max-width: 414px) { + font-size: $mcontextFontSize; + width: 80%; + } + } + + .topic-intro { + // size + margin-top: 130px; + // font + font-size: $contextFontSize; + letter-spacing: $contextLetterSpace; + line-height: 42px; + + width: 1100px; + + @media screen and(max-width: 414px) { + margin-top: 60%; + width: 110%; + } + } + + .last-part { + // size + margin-top: 70px; + height: 325px; + // font + font-size: $contextFontSize; + letter-spacing: $contextLetterSpace; + line-height: 42px; + + @media screen and(max-width: 414px) { + margin-top: 30%; + width: 70%; + margin-bottom: 30%; + } + } + + .buttons { + // font + color: $fontColor; + font-size: $buttonFontSize; + font-weight: 900; + letter-spacing: $buttonLetterSpace; + line-height: 30px; + // size + margin-right: 37px; + padding: 12px 15px 12px 15px; + // box + background-color: #ffffff; + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); + transition-duration: 0.2s; + border: none; + border-radius: 8px; + // display + display: inline-block; + + position: relative; + z-index: 5; + + @media screen and (max-width: 414px) { + font-size: $mbuttonFontSize; + font-weight: 900; + letter-spacing: 0px; + color: $fontColor; + text-align: center; + opacity: 1; + border-radius: 6px; + padding: 10px 8px 10px 8px; + margin-right: 15px; + margin-top: 20px; + } + } + + .button-post { + // display + display: inline; + // size + margin-left: 40px; + margin-top: -20px; + + z-index: 2; + + @media screen and (max-width: 414px) { + width: 414px; + margin-left: 0px; + } + } + + .buttons:hover { + // box + background-color: $buttonHoverBg; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19); + // font + h3 { + color: $buttonHoverColor; + } + } + + .date { + // display + display: inline; + // size + margin-right: 35px; + // align + vertical-align: bottom; + line-height: 30px; + + @media screen and(max-width:414px) { + font-size: 30px; + margin-right: 10px; + line-height: 50px; + vertical-align: middle; + } + } +} + +#cfp-intro { + h1, + h2, + h3, + p, + span { + font-family: $fontFamily; + color: $fontColor; + } + + h1 { + // font + font-size: $h1FontSize; + line-height: 70px; + font-weight: 900; + letter-spacing: $titleLetterSpace; + + .enlarge { + font-size: $enlargeFontSize; + @media screen and (max-width: 414px) { + line-height: 80px; + } + } + + .sub { + font-size: $subFontSize; + } + + @media screen and (max-width: 414px) { + line-height: 20px; + } + } + + .right { + text-align: left; + + @media screen and (max-width: 414px) { + text-align: right; + margin-right: 30%; + } + } + + h2 { + // font + font-size: $h2FontSize; + letter-spacing: $titleLetterSpace; + font-weight: 900; + line-height: 70px; + margin: 0px; + } + + h3 { + // Font + font-size: $h3FontSize; + letter-spacing: $titleLetterSpace; + font-weight: 900; + line-height: 15px; + margin: 0px; + } + + .about-section > .context { + margin-right: 50%; + } + + .topic-intro > .context { + margin-right: 30%; + } + + .context { + // font + font-size: $contextFontSize; + line-height: 30px; + letter-spacing: $contextLetterSpace; + font-weight: normal; + } + + .detail { + // display + display: inline; + // font + font-size: $contextFontSize; + line-height: 20px; + letter-spacing: $contextLetterSpace; + font-weight: normal; + // align + vertical-align: bottom; + // size + + @media screen and (max-width: 414px) { + margin-right: 25%; + line-height: 35px; + font-size: $mcontextFontSize; + } + } + + .context-span { + // font + font-size: $contextFontSize; + font-weight: 900; + letter-spacing: $contextLetterSpace; + line-height: 42px; + } + + .context-hyperlink { + // font + font-size: $hyperlinkFontSize; + letter-spacing: $hyperlinkLetterSpace; + color: $light-blue; + font-weight: normal; + line-height: 42px; + } + + p.tag { + // font + font-size: 14px; + line-height: 15px; + letter-spacing: 0; + font-weight: 900; + // align + text-align: center; + margin-top: 0px; + margin-bottom: 5px; + + @media screen and (max-width: 414px) { + font-size: 16px; + } + } + + p.tag.sub { + font-size: 12px; + line-height: 10px; + + @media screen and (max-width: 414px) { + font-size: 12px; + margin-top: 8px; + } + } + + p.small-tag { + margin-block-start: 0em; + margin-block-end: 0.5em; + font-size: 12px; + text-align: center; + + @media screen and (max-width: 414px) { + line-height: 12px; + font-size: 10px; + } + } + + //NOTE: the size should be smaller, this temporary size is provided to support min font size of browser + .cfp-img { + // box + border-radius: 4px; + margin-bottom: 12px; + // size + width: 175px; + height: 118px; + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); + + @media screen and (max-width: 414px) { + border-radius: 2px; + margin-bottom: 12px; + width: 111px; + height: 75px; + box-shadow: 0px 1px 6px rgba(89, 120, 206, 0.56); + } + } + + .thumbnails { + // box + margin-left: -20.5px; + + @media screen and (max-width: 414px) { + margin-left: -9px; + } + } + + .img-table { + // box + border-style: none; + border-spacing: 25.5px 0px; //25.5 + text-align: center; + width: 640px; + + @media screen and (max-width: 414px) { + width: 87%; + align-content: center; + border-spacing: 0px 0px; + } + } + + .td-width { + vertical-align: top; + + @media screen and (max-width: 414px) { + text-align: center; + width: 123px; + } + } + + .tag-table { + // box + border-style: none; + border-spacing: 0px 0px; //25.5 + // size + width: 500px; + } + + .first-box { + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); + border-radius: 60px; + transform: rotate(15deg); + margin-bottom: -800px; + margin-left: -200px; + margin-top: -300px; + z-index: 1; + + @media screen and(max-width: 960px) { + border-radius: 40px; + margin-bottom: -800px; + transform: rotate(13deg); + } + + @media screen and(max-width: 414px) { + border-radius: 27px; + margin-top: 200px; + margin-bottom: -870px; + margin-left: -150px; + transform: scale(1); + transform: rotate(12deg); + } + } + + .second-box { + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); + border-radius: 32px; + transform: rotate(15deg); + margin-top: 270px; + margin-bottom: -1900px; + margin-left: -700px; + z-index: 1; + + @media screen and(max-width: 414px) { + box-shadow: -10px 30px 30px 0 rgba(135, 152, 199, 0.56); + margin-top: 5px; + margin-left: -415px; + margin-bottom: -1560px; + transform: rotate(12deg) scale(0.6); + z-index: 2; + } + } + + .hiden-box { + position: absolute; + margin-top: 1200px; + margin-left: -300px; + margin-bottom: 0px; + z-index: -1; + @media screen and(max-width: 414px) { + margin-top: 1400px; + transform: rotate(12deg); + z-index: -1; + } + } + + .box-back { + z-index: 2; + + @media screen and(max-width: 960px) { + margin-top: -10%; + margin-left: -10%; + } + + @media screen and(max-width: 414px) { + margin-top: -10%; + margin-left: -10%; + } + } + + .box-back2 { + z-index: 2; + + @media screen and(max-width: 960px) { + margin-top: -10%; + margin-left: -10%; + } + + @media screen and(max-width: 414px) { + margin-top: -10%; + margin-left: -10%; + } + } + + .SITCON-text-path { + transform: scale(0.7); + padding-left: 300px; + margin-right: -550px; + margin-bottom: -600px; + padding-top: 300px; + z-index: 2; + @media screen and(max-width: 414px) { + z-index: -2; + } + } + + .des-text-path { + //background: url(../../assets/images/cfp/Path_762.svg) no-repeat; + transform: scale(0.7); + margin-bottom: -565px; + padding-top: 65px; + margin-left: -350px; + z-index: 2; + + @media screen and(max-width: 960px) { + margin-left: -150px; + margin-bottom: -545px; + } + + @media screen and(max-width: 414px) { + //background-image: url(../../assets/images/cfp/Mobile/Path_763.svg); + margin-top: 40px; + margin-left: -80px; + transform: scale(0.9); + background: url(./assets/images/cfp/Mobile/Path_763.svg) no-repeat; + padding-top: -565px; + margin-bottom: -665px; + } + } + + .des-blue-bar { + transform: rotate(15deg); + margin-left: -400px; + margin-top: 360px; + margin-bottom: -1360px; + + @media screen and(max-width: 414px) { + margin-left: -600px; + margin-top: 160px; + transform: rotate(12deg) scale(0.6); + } + } + + .paper-image { + transform: scale(0.75); + margin-top: -240px; + margin-left: 270px; + margin-bottom: -710px; + z-index: 1; + + @media screen and(max-width: 414px) { + z-index: 3; + margin-top: -890px; + margin-left: -150px; + margin-bottom: -1030px; + transform: rotate(-7deg) scale(0.35); + } + } + + .background { + //background: url(../../assets/images/cfp/Background.svg) no-repeat; + //content: url("../../assets/images/cfp/Background.svg") no-repeat; + position: absolute; + top: 0; + width: 200%; + //max-height: 2000px; + margin-left: -69%; + margin-top: -30%; + text-align: center; + z-index: -2; + + @media screen and(max-width: 414px) { + //content: url() no-repeat;//../../assets/images/cfp/Mobile/Mobile-background.svg + //visibility: hidden; + background: url(./assets/images/cfp/Mobile/Mobile-background.svg) !important; + object-position: -99999px 99999px; + overflow: hidden; + margin-left: -20%; + margin-top: -20%; + z-index: -1; + transform: scale(1); + } + } + + .ellipse { + position: absolute; + width: 100%; + margin-top: -75%; + margin-left: -14%; + align-content: center; + transform: scale(0.31); + + @media screen and(max-width: 414px) { + margin-top: -20%; + transform: scale(0.6); + } + } + + .sitcon-icon { + position: absolute; + width: 100%; + margin-top: -98%; + margin-left: -14%; + align-content: center; + transform: scale(0.14); + + @media screen and(max-width: 414px) { + margin-top: -42%; + transform: scale(0.3); + } + } + + .sitcon-pic-2021 { + position: absolute; + width: 100%; + margin-top: -49%; + margin-left: -14%; + align-content: center; + transform: scale(0.18); + + @media screen and(max-width: 414px) { + margin-top: -40%; + transform: scale(0.5); + } + } + + .sitcon-title-zh { + position: absolute; + width: 100%; + margin-top: -46%; + margin-left: -14%; + align-content: center; + transform: scale(0.11); + + @media screen and(max-width: 414px) { + margin-top: -30%; + transform: scale(0.4); + } + } + + .sitcon-topic { + position: absolute; + width: 100%; + margin-top: -45%; + margin-left: -14%; + align-content: center; + transform: scale(0.23); + + @media screen and(max-width: 414px) { + margin-top: -20%; + transform: scale(0.65); + } + } + + .sitcon-date { + position: absolute; + width: 100%; + margin-top: -31%; + margin-left: -44%; + transform: scale(0.13); + + @media screen and(max-width: 414px) { + margin-top: 65%; + transform: scale(0.35); + } + } + + .sitcon-place { + position: absolute; + width: 100%; + margin-top: -36.5%; + margin-left: -44%; + transform: scale(0.13); + + @media screen and(max-width: 414px) { + margin-top: 73%; + margin-left: -40%; + transform: scale(0.45); + } + } + + .sitcon-qeury { + position: absolute; + width: 100%; + margin-top: -18.5%; + margin-left: -13%; + transform: scale(0.2); + + @media screen and(max-width: 414px) { + margin-top: 50%; + transform: scale(0.6); + } + } +} diff --git a/src/assets/scss/CFP/schedule.scss b/src/assets/scss/CFP/schedule.scss deleted file mode 100644 index a1b0c36..0000000 --- a/src/assets/scss/CFP/schedule.scss +++ /dev/null @@ -1,126 +0,0 @@ -@import '@/assets/scss/breakpoint.scss'; -@import '@/assets/scss/color.scss'; -@import '@/assets/scss/font.scss'; - -$fontFamily: Noto Sans CJK TC, monospace; - -#info-schedule { - max-width: 80vw; - margin: 0 auto; - - font-family: $fontFamily; - font-size: 20px; - line-height: 2.1em; - letter-spacing: 0.2px; - color: $mid-blue; - - * { - position: relative; - } - - a { - color: $mid-blue; - text-decoration: underline; - } - - h1 { - font-size: 48px; - line-height: 70px; - margin: 15px 0; - } - - h2 { - font-size: 36px; - line-height: 70px; - } - - h3 { - font-size: 24px; - line-height: 30px; - } - - h1, h2, h3 { - font-weight: 900; - } - - ul { - li { - &::before { - content: "•"; - margin: 2px; - line-height: 42px; - } - } - } - - section:not(:last-of-type), article:not(:last-of-type) { - margin-bottom: 55px; - } - - #theme-example { - > p { - padding: 20px 0; - } - } - - #theme-example ~ p { - padding: 20px 0; - } - - #presentation-example, #espresso-example { - > p { - padding-bottom: 40px; - } - - .agenda.card.container { - display: grid; - grid-template-columns: repeat(4, 1fr); - column-gap: 62px; - row-gap: 40px; - } - } -} - -#code-of-conduct a { - font-weight: 900; -} - - -@include md { - #info-schedule { - margin: 0 auto; - font-size: 14px; - - h1, h2 { - font-size: 26px; - line-height: 2.69em; - } - - h3 { - font-size: 20px; - line-height: 30px; - } - - h1, h2, h3 { - margin: 0; - } - - #schedule { - margin-bottom: unset; - } - - #theme-example ~ p { - padding: 15px 0; - } - - #presentation-example, #espresso-example { - margin-bottom: unset; - .agenda.card.container { - grid-template-columns: repeat(2, 1fr); - column-gap: 42px; - row-gap: 30px; - } - } - } - -} \ No newline at end of file diff --git a/src/assets/scss/CFP/topic.scss b/src/assets/scss/CFP/topic.scss deleted file mode 100644 index 629e8cb..0000000 --- a/src/assets/scss/CFP/topic.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import '@/assets/scss/breakpoint.scss'; -@import '@/assets/scss/color.scss'; - -.topic { - padding: 30px 0; - - display: grid; - grid-template-columns: 256px min-content 1fr; - - h3.title { - line-height: 1.67em; - } - - .divider { - width: 0; - height: 100%; - border-left: 2px $mid-blue solid; - margin: 0 37px; - } - - .title, .description { - display: flex; - align-items: center; - } -} - -@include md { - .topic { - grid-template-columns: 1fr; - padding: 20px 0; - - h3.title { - br[data-delimiter="："] { - display: none; - } - } - - .divider { - width: 100%; - height: 0; - border-bottom: none; - border-top: 2px $mid-blue solid; - margin: 15px 0; - } - } -} \ No newline at end of file diff --git a/src/assets/scss/color.scss b/src/assets/scss/color.scss index f8a0778..6689b38 100644 --- a/src/assets/scss/color.scss +++ b/src/assets/scss/color.scss @@ -1,2 +1,6 @@ $mid-blue: #226bb4; $white: white; +$pale-grey: #f0f7fd; +$dark-slate-blue: #1f4163; +$dark-sky-blue: #3d93e9; +$slate-blue: #5f7a95; \ No newline at end of file diff --git a/src/assets/scss/footer.scss b/src/assets/scss/footer.scss index d32a2fc..805fbd3 100644 --- a/src/assets/scss/footer.scss +++ b/src/assets/scss/footer.scss @@ -1,4 +1,4 @@ -@import './breakpoint.scss'; +@import 'breakpoint.scss'; // varible declare $fontColor: white; diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 1904279..e8fe555 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -1,15 +1,16 @@ // global -@import './reset.scss'; -@import './variable.scss'; -@import './color.scss'; -@import './util.scss'; +@import 'reset.scss'; +@import 'variable.scss'; +@import 'color.scss'; +@import 'util.scss'; +@import 'font.scss'; // components -@import './footer.scss'; -@import './CFP/cfp_introduction.scss'; -@import './CFP/CFP.scss'; -@import './CFP/cfpSubNew.scss'; -@import "./news.scss"; +// @import './footer.scss'; +// @import './CFP/cfp_introduction.scss'; +// @import './CFP/CFP.scss'; +// @import './CFP/cfpSubNew.scss'; +// @import "./news.scss"; .sitcon-burnfont { color: $mid-blue; diff --git a/src/assets/scss/CFP/cfpSubNew.scss b/src/assets/scss/news/agenda.scss similarity index 81% rename from src/assets/scss/CFP/cfpSubNew.scss rename to src/assets/scss/news/agenda.scss index a5dad19..c03edbf 100644 --- a/src/assets/scss/CFP/cfpSubNew.scss +++ b/src/assets/scss/news/agenda.scss @@ -1,15 +1,21 @@ -//import google font -@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); +@import '../color'; -//my variable -$color-pale-grey: #f0f7fd; -$color-dark-slate-blue: #1f4163; -$color-dark-sky-blue: #3d93e9; -$color-white: #ffffff; -$color-slate-blue: #5f7a95; -$color-mid-blue: #226bb4; +$fontColor: #226bb4; // added to solve unnamed color error -$fontFamily-NotoSansTC: "Noto Sans TC"; +// import google font +// This font has been imported in main.scss linked to App.vue; no need to import +// @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); + +// my variable +// There colors have been moved to scss/color.scss to share with others +// $color-pale-grey: #f0f7fd; +// $color-dark-slate-blue: #1f4163; +// $color-dark-sky-blue: #3d93e9; +// $color-white: #ffffff; +// $color-slate-blue: #5f7a95; +// $color-mid-blue: #226bb4; + +$fontFamily-NotoSansTC: 'Noto Sans TC'; //@mixin @mixin clearFloat() { @@ -38,7 +44,7 @@ $limitWidth: 80vw; line-height: 1.9; letter-spacing: normal; text-align: left; - color: $color-mid-blue; + color: $mid-blue; margin: 10px 0; } &__content { @@ -52,7 +58,7 @@ $limitWidth: 80vw; line-height: 2.1; letter-spacing: 0.2px; text-align: left; - color: $color-mid-blue; + color: $mid-blue; } strong { @@ -72,7 +78,7 @@ $limitWidth: 80vw; height: 4px; width: 4px; transform: translate(-200%, -150%); - background-color: $color-mid-blue; + background-color: $mid-blue; border-radius: 50%; } } @@ -90,7 +96,7 @@ $limitWidth: 80vw; line-height: 2.2; letter-spacing: normal; text-align: left; - color: $color-mid-blue; + color: $mid-blue; margin: 10px 0; } } @@ -110,14 +116,14 @@ $limitWidth: 80vw; &__itemBox { width: 330px; border-radius: 13px; - background-color: $color-mid-blue; + background-color: $mid-blue; padding: 26px 20px 34px 20px; @media screen and (max-width: 1200px) { width: 90%; margin: 20px auto; } &-title { - color: $color-white; + color: $white; display: inline-block; text-align: center; width: 100%; @@ -128,17 +134,16 @@ $limitWidth: 80vw; letter-spacing: normal; text-align: center; font-size: 34px; - } &-text { width: 100%; //height: 172px; margin: 0 auto; text-align: left; - + font-size: 19px; - P { - color: $color-white; + p { + color: $white; font-family: $fontFamily-NotoSansTC; margin: 15px 0; } @@ -147,21 +152,19 @@ $limitWidth: 80vw; } } - // p { - // color: $color-white; - // font-family: $fontFamily-NotoSansTC; - // font-size: 19px; - // font-weight: 500; - // font-stretch: normal; - // font-style: normal; - // line-height: 2.1; - // letter-spacing: 0.2px; - // } - // - // } + // p { + // color: $color-white; + // font-family: $fontFamily-NotoSansTC; + // font-size: 19px; + // font-weight: 500; + // font-stretch: normal; + // font-style: normal; + // line-height: 2.1; + // letter-spacing: 0.2px; + // } + // + // } } - - // &__itemBox { // float: left; @@ -217,7 +220,7 @@ $limitWidth: 80vw; &__itemBox { border-radius: 29px; box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - background-color: $color-white; + background-color: $white; margin: 20px 0; padding: 10px 20px; cursor: pointer; @@ -282,4 +285,4 @@ $limitWidth: 80vw; // } // } // } -} \ No newline at end of file +} diff --git a/src/assets/scss/news/card.scss b/src/assets/scss/news/card.scss new file mode 100644 index 0000000..7cbc1b2 --- /dev/null +++ b/src/assets/scss/news/card.scss @@ -0,0 +1,34 @@ +@import '../breakpoint'; +@import '../color'; + +.agenda.card:not(.container) { + a.image.container { + display: inline-block; + width: 100%; + line-height: 0; // prevent background overflow + background-color: #ffffff; + border-radius: 11px; + box-shadow: 0 3px 15px 0 rgba(89, 120, 206, 0.56); + + // smooth transition from hover -> default state + will-change: transform; + transform: scale(1); + transition-duration: 0.25s; + + img { + border-radius: 11px; + width: 100%; + } + + &:hover { + transform: scale(1.04); + transition-duration: 0.25s; + } + } + + p.description { + line-height: 1.55em; + text-align: center; + font-weight: 900; + } +} diff --git a/src/assets/scss/news.scss b/src/assets/scss/news/header.scss similarity index 94% rename from src/assets/scss/news.scss rename to src/assets/scss/news/header.scss index aa7ffbb..9419632 100644 --- a/src/assets/scss/news.scss +++ b/src/assets/scss/news/header.scss @@ -1,5 +1,5 @@ -@import './hyperpoint.scss'; -@import './color.scss'; +@import '../hyperpoint'; +@import '../color'; // desktop mode #news-header { @@ -27,14 +27,22 @@ 0px 0px 10px 0px rgba(0, 0, 0, 0.2); @keyframes jump { - 0% {position: relative;bottom: 0px;} - 50% {position: relative;bottom: 20px;} - 100% {position: relative;bottom: 0px;} + 0% { + position: relative; + bottom: 0px; + } + 50% { + position: relative; + bottom: 20px; + } + 100% { + position: relative; + bottom: 0px; + } } &:hover { - animation: jump .6s ease-in 0s infinite reverse; - + animation: jump 0.6s ease-in 0s infinite reverse; } .text-wrapper { diff --git a/src/assets/scss/news/schedule.scss b/src/assets/scss/news/schedule.scss new file mode 100644 index 0000000..cecffe1 --- /dev/null +++ b/src/assets/scss/news/schedule.scss @@ -0,0 +1,133 @@ +@import '../breakpoint'; +@import '../color'; +// No need to import font; the fonts have been imported in App.vue +// @import '@/assets/scss/font'; + +$fontFamily: Noto Sans CJK TC, monospace; + +#news-schedule { + max-width: 80vw; + margin: 0 auto; + + font-family: $fontFamily; + font-size: 20px; + line-height: 2.1em; + letter-spacing: 0.2px; + color: $mid-blue; + + * { + position: relative; + } + + a { + color: $mid-blue; + text-decoration: underline; + } + + h1 { + font-size: 48px; + line-height: 70px; + margin: 15px 0; + } + + h2 { + font-size: 36px; + line-height: 70px; + } + + h3 { + font-size: 24px; + line-height: 30px; + } + + h1, + h2, + h3 { + font-weight: 900; + } + + ul { + li { + &::before { + content: '•'; + margin: 2px; + line-height: 42px; + } + } + } + + section:not(:last-of-type), + article:not(:last-of-type) { + margin-bottom: 55px; + } + + #theme-example { + > p { + padding: 20px 0; + } + } + + #theme-example ~ p { + padding: 20px 0; + } + + #presentation-example, + #espresso-example { + > p { + padding-bottom: 40px; + } + + .agenda.card.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: 62px; + row-gap: 40px; + } + } +} + +#code-of-conduct a { + font-weight: 900; +} + +@include md { + #news-schedule { + margin: 0 auto; + font-size: 14px; + + h1, + h2 { + font-size: 26px; + line-height: 2.69em; + } + + h3 { + font-size: 20px; + line-height: 30px; + } + + h1, + h2, + h3 { + margin: 0; + } + + #schedule { + margin-bottom: unset; + } + + #theme-example ~ p { + padding: 15px 0; + } + + #presentation-example, + #espresso-example { + margin-bottom: unset; + .agenda.card.container { + grid-template-columns: repeat(2, 1fr); + column-gap: 42px; + row-gap: 30px; + } + } + } +} diff --git a/src/assets/scss/news/topic.scss b/src/assets/scss/news/topic.scss new file mode 100644 index 0000000..8b19f84 --- /dev/null +++ b/src/assets/scss/news/topic.scss @@ -0,0 +1,47 @@ +@import '../breakpoint'; +@import '../color'; + +.topic { + padding: 30px 0; + + display: grid; + grid-template-columns: 256px min-content 1fr; + + h3.title { + line-height: 1.67em; + } + + .divider { + width: 0; + height: 100%; + border-left: 2px $mid-blue solid; + margin: 0 37px; + } + + .title, + .description { + display: flex; + align-items: center; + } +} + +@include md { + .topic { + grid-template-columns: 1fr; + padding: 20px 0; + + h3.title { + br[data-delimiter='：'] { + display: none; + } + } + + .divider { + width: 100%; + height: 0; + border-bottom: none; + border-top: 2px $mid-blue solid; + margin: 15px 0; + } + } +} diff --git a/src/components/CFP/Header.vue b/src/components/CFP/Header.vue index e70cf10..4b2715b 100644 --- a/src/components/CFP/Header.vue +++ b/src/components/CFP/Header.vue @@ -77,3 +77,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class CfpHeader extends Vue {} + + diff --git a/src/components/CFP/IntrodContainer.vue b/src/components/CFP/Intro.vue similarity index 99% rename from src/components/CFP/IntrodContainer.vue rename to src/components/CFP/Intro.vue index 15dea85..4b30ddf 100644 --- a/src/components/CFP/IntrodContainer.vue +++ b/src/components/CFP/Intro.vue @@ -152,3 +152,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class IntrodContainer extends Vue {} + + diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 8466b2b..6561434 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -68,4 +68,8 @@ export default class CFP extends Vue { } ]; } - \ No newline at end of file + + + diff --git a/src/components/CFP/Agenda.vue b/src/components/news/Agenda.vue similarity index 84% rename from src/components/CFP/Agenda.vue rename to src/components/news/Agenda.vue index b4ea9b5..2759283 100644 --- a/src/components/CFP/Agenda.vue +++ b/src/components/news/Agenda.vue @@ -209,41 +209,50 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; @Component({}) export default class Agenda extends Vue { private QA = [ - { - Q: '先備知識與目標受眾有何不同？', - A: '「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。', - v: false - }, - { - Q: '投稿主題是否有必要切合年會主題（算盤的後裔）？', - A: '不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。', - v: false - }, - { - Q: '先備知識與目標受眾有何不同？', - A: '若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。', - v: false - }, - { - Q: '如果我的稿件預計會有多個講者，投稿時需要注意什麼？', - A: '請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。', - v: false - }, - { - Q: '如果我入選第二階段，可以提供哪些補充資料？', - A: '您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。', - v: false - }, - { - Q: '還有疑問怎麼辦？', - A: '歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。', - v: false - } + { + Q: '先備知識與目標受眾有何不同？', + A: + '「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。', + v: false + }, + { + Q: '投稿主題是否有必要切合年會主題（算盤的後裔）？', + A: + '不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。', + v: false + }, + { + Q: '先備知識與目標受眾有何不同？', + A: + '若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。', + v: false + }, + { + Q: '如果我的稿件預計會有多個講者，投稿時需要注意什麼？', + A: + '請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。', + v: false + }, + { + Q: '如果我入選第二階段，可以提供哪些補充資料？', + A: + '您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。', + v: false + }, + { + Q: '還有疑問怎麼辦？', + A: + '歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。', + v: false + } ]; private fade = (index: number) => { - this.QA[index].v = !this.QA[index].v; + this.QA[index].v = !this.QA[index].v; } - } - \ No newline at end of file + + + diff --git a/src/components/CFP/AgendaCard.vue b/src/components/news/AgendaCard.vue similarity index 94% rename from src/components/CFP/AgendaCard.vue rename to src/components/news/AgendaCard.vue index 619a194..c40951c 100644 --- a/src/components/CFP/AgendaCard.vue +++ b/src/components/news/AgendaCard.vue @@ -20,5 +20,5 @@ export default class AgendaCard extends Vue { \ No newline at end of file diff --git a/src/components/NewsHeader.vue b/src/components/news/Header.vue similarity index 97% rename from src/components/NewsHeader.vue rename to src/components/news/Header.vue index dcf5d4b..ed74bc0 100644 --- a/src/components/NewsHeader.vue +++ b/src/components/news/Header.vue @@ -114,3 +114,7 @@ export default class CfpHeader extends Vue { } } + + diff --git a/src/components/CFP/Schedule.vue b/src/components/news/Schedule.vue similarity index 98% rename from src/components/CFP/Schedule.vue rename to src/components/news/Schedule.vue index fb1fd7f..cbcb88e 100644 --- a/src/components/CFP/Schedule.vue +++ b/src/components/news/Schedule.vue @@ -1,5 +1,5 @@