diff --git a/src/assets/scss/CFP/card.scss b/src/assets/scss/CFP/card.scss deleted file mode 100644 index c7d37e7..0000000 --- a/src/assets/scss/CFP/card.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import '../breakpoint.scss'; -@import '../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/intro.scss b/src/assets/scss/CFP/intro.scss index 10e217e..e3267d4 100644 --- a/src/assets/scss/CFP/intro.scss +++ b/src/assets/scss/CFP/intro.scss @@ -1,7 +1,7 @@ // font $fontFamily: 'Noto Sans TC', sans-serif; $fontStyle: normal; -$light-blue: #3D93E9; +$light-blue: #3d93e9; $fontColor: #226bb4; $buttonHoverColor: #ffffff; @mixin Font() { @@ -33,14 +33,14 @@ $buttonLetterSpace: 0; $hyperlinkLetterSpace: 0; // background -$buttonHoverBg: #226BB4; +$buttonHoverBg: #226bb4; #cfp { .introduction-container { overflow-x: hidden; - overflow-y: hidden; + overflow-y: hidden; margin: -8px; - position:relative; + position: relative; } .introduction { @@ -56,7 +56,7 @@ $buttonHoverBg: #226BB4; margin-top: 50%; @media screen and(max-width: 414px) { - width:100%; + width: 100%; } } @@ -65,11 +65,11 @@ $buttonHoverBg: #226BB4; font-size: $contextFontSize; letter-spacing: $contextLetterSpace; line-height: 42px; - width:90%; + width: 90%; @media screen and(max-width: 414px) { font-size: $mcontextFontSize; - width:160%; + width: 160%; } } @@ -80,7 +80,7 @@ $buttonHoverBg: #226BB4; @media screen and(max-width: 414px) { font-size: $mcontextFontSize; - width:80%; + width: 80%; } } @@ -132,7 +132,7 @@ $buttonHoverBg: #226BB4; border-radius: 8px; // display display: inline-block; - + position: relative; z-index: 5; @@ -184,139 +184,144 @@ $buttonHoverBg: #226BB4; vertical-align: bottom; line-height: 30px; - @media screen and(max-width:414px){ + @media screen and(max-width:414px) { font-size: 30px; margin-right: 10px; line-height: 50px; - vertical-align:middle; + vertical-align: middle; } } } -h1, h2, h3, p, span { - font-family: $fontFamily; - color: $fontColor; -} +#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; + 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; + } - .enlarge { - font-size: $enlargeFontSize; @media screen and (max-width: 414px) { - line-height: 80px; + line-height: 20px; } } - .sub { - font-size: $subFontSize; + .right { + text-align: left; + + @media screen and (max-width: 414px) { + text-align: right; + margin-right: 30%; + } } - @media screen and (max-width: 414px) { - line-height: 20px; + h2 { + // font + font-size: $h2FontSize; + letter-spacing: $titleLetterSpace; + font-weight: 900; + line-height: 70px; + margin: 0px; } -} -.right { - text-align: left; + h3 { + // Font + font-size: $h3FontSize; + letter-spacing: $titleLetterSpace; + font-weight: 900; + line-height: 15px; + margin: 0px; + } - @media screen and (max-width: 414px) { - text-align: right; + .about-section > .context { + margin-right: 50%; + } + + .topic-intro > .context { 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 { + // font + font-size: $contextFontSize; + line-height: 30px; + letter-spacing: $contextLetterSpace; + font-weight: normal; } -} -.context-span { - // font - font-size: $contextFontSize; - font-weight: 900; - letter-spacing: $contextLetterSpace; - line-height: 42px; -} + .detail { + // display + display: inline; + // font + font-size: $contextFontSize; + line-height: 20px; + letter-spacing: $contextLetterSpace; + font-weight: normal; + // align + vertical-align: bottom; + // size -.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; + @media screen and (max-width: 414px) { + margin-right: 25%; + line-height: 35px; + font-size: $mcontextFontSize; + } } -} -p.tag.sub { + .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; @@ -324,359 +329,359 @@ p.tag.sub { 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: -25.5px; - - @media screen and (max-width:414px){ - margin-left: -9px; - } -} - -.img-table { - // box - border-style: none; - border-spacing: 25.5px 0px; //25.5 - - @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){ + p.small-tag { + margin-block-start: 0em; + margin-block-end: 0.5em; + font-size: 12px; 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: -900px; - 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) { + line-height: 12px; + font-size: 10px; + } } - @media screen and(max-width: 414px){ - border-radius: 27px; - margin-top: 200px; - margin-bottom: -870px; - margin-left: -150px; - transform:scale(1); - transform: rotate(12deg); + //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); + } } -} -.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; + .thumbnails { + // box + margin-left: -25.5px; - @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); + @media screen and (max-width: 414px) { + margin-left: -9px; + } + } + + .img-table { + // box + border-style: none; + border-spacing: 25.5px 0px; //25.5 + + @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: -900px; + 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; - } -} -.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; - } -} + @media screen and(max-width: 960px) { + margin-top: -10%; + margin-left: -10%; + } -.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%; + } } - @media screen and(max-width: 414px) { - margin-top: -10%; - margin-left: -10%; - } -} + .box-back2 { + z-index: 2; -.box-back2 { - z-index: 2; + @media screen and(max-width: 960px) { + margin-top: -10%; + margin-left: -10%; + } - @media screen and(max-width: 960px) { - margin-top: -10%; - margin-left: -10%; + @media screen and(max-width: 414px) { + 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; + .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; + } } - @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-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; + .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); + @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; + .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); + @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){ + .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%; - transform: scale(0.4); + 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: -14%; + transform: scale(0.2); + + @media screen and(max-width: 414px) { + margin-top: 50%; + transform: scale(0.6); + } } } - -.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: -14%; - 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/topic.scss b/src/assets/scss/CFP/topic.scss deleted file mode 100644 index ae36d91..0000000 --- a/src/assets/scss/CFP/topic.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import '../breakpoint.scss'; -@import '../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/CFP/agenda.scss b/src/assets/scss/news/agenda.scss similarity index 93% rename from src/assets/scss/CFP/agenda.scss rename to src/assets/scss/news/agenda.scss index f5d404f..c03edbf 100644 --- a/src/assets/scss/CFP/agenda.scss +++ b/src/assets/scss/news/agenda.scss @@ -1,4 +1,4 @@ -@import '../color.scss'; +@import '../color'; $fontColor: #226bb4; // added to solve unnamed color error @@ -15,7 +15,7 @@ $fontColor: #226bb4; // added to solve unnamed color error // $color-slate-blue: #5f7a95; // $color-mid-blue: #226bb4; -$fontFamily-NotoSansTC: "Noto Sans TC"; +$fontFamily-NotoSansTC: 'Noto Sans TC'; //@mixin @mixin clearFloat() { @@ -134,16 +134,15 @@ $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 { + p { color: $white; font-family: $fontFamily-NotoSansTC; margin: 15px 0; @@ -153,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; @@ -288,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 cca02b7..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/CFP/schedule.scss b/src/assets/scss/news/schedule.scss similarity index 98% rename from src/assets/scss/CFP/schedule.scss rename to src/assets/scss/news/schedule.scss index 2089cef..cecffe1 100644 --- a/src/assets/scss/CFP/schedule.scss +++ b/src/assets/scss/news/schedule.scss @@ -5,7 +5,7 @@ $fontFamily: Noto Sans CJK TC, monospace; -#info-schedule { +#news-schedule { max-width: 80vw; margin: 0 auto; @@ -91,7 +91,7 @@ $fontFamily: Noto Sans CJK TC, monospace; } @include md { - #info-schedule { + #news-schedule { margin: 0 auto; font-size: 14px; 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/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 207a02d..2759283 100644 --- a/src/components/CFP/Agenda.vue +++ b/src/components/news/Agenda.vue @@ -209,45 +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; } - } diff --git a/src/components/CFP/AgendaCard.vue b/src/components/news/AgendaCard.vue similarity index 95% rename from src/components/CFP/AgendaCard.vue rename to src/components/news/AgendaCard.vue index 6aa05df..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 48cff68..cbcb88e 100644 --- a/src/components/CFP/Schedule.vue +++ b/src/components/news/Schedule.vue @@ -1,5 +1,5 @@