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

[Style] Reorganize

Browse Source
This commit is contained in:
hyperbola
2021-01-19 19:26:33 +08:00
parent ffdf3df1dd
commit e427a878d9
15 changed files with 613 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/assets/scss/CFP/card.scss
View File

@@ -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;
}
}

887
src/assets/scss/CFP/intro.scss
View File

@@ -1,7 +1,7 @@
// font // font
$fontFamily: 'Noto Sans TC', sans-serif; $fontFamily: 'Noto Sans TC', sans-serif;
$fontStyle: normal; $fontStyle: normal;
$light-blue: #3D93E9; $light-blue: #3d93e9;
$fontColor: #226bb4; $fontColor: #226bb4;
$buttonHoverColor: #ffffff; $buttonHoverColor: #ffffff;
@mixin Font() { @mixin Font() {
@@ -33,14 +33,14 @@ $buttonLetterSpace: 0;
$hyperlinkLetterSpace: 0; $hyperlinkLetterSpace: 0;
// background // background
$buttonHoverBg: #226BB4; $buttonHoverBg: #226bb4;
#cfp { #cfp {
.introduction-container { .introduction-container {
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
margin: -8px; margin: -8px;
position:relative; position: relative;
} }
.introduction { .introduction {
@@ -56,7 +56,7 @@ $buttonHoverBg: #226BB4;
margin-top: 50%; margin-top: 50%;
@media screen and(max-width: 414px) { @media screen and(max-width: 414px) {
width:100%; width: 100%;
} }
} }
@@ -65,11 +65,11 @@ $buttonHoverBg: #226BB4;
font-size: $contextFontSize; font-size: $contextFontSize;
letter-spacing: $contextLetterSpace; letter-spacing: $contextLetterSpace;
line-height: 42px; line-height: 42px;
width:90%; width: 90%;
@media screen and(max-width: 414px) { @media screen and(max-width: 414px) {
font-size: $mcontextFontSize; font-size: $mcontextFontSize;
width:160%; width: 160%;
} }
} }
@@ -80,7 +80,7 @@ $buttonHoverBg: #226BB4;
@media screen and(max-width: 414px) { @media screen and(max-width: 414px) {
font-size: $mcontextFontSize; font-size: $mcontextFontSize;
width:80%; width: 80%;
} }
} }
@@ -132,7 +132,7 @@ $buttonHoverBg: #226BB4;
border-radius: 8px; border-radius: 8px;
// display // display
display: inline-block; display: inline-block;
position: relative; position: relative;
z-index: 5; z-index: 5;
@@ -184,139 +184,144 @@ $buttonHoverBg: #226BB4;
vertical-align: bottom; vertical-align: bottom;
line-height: 30px; line-height: 30px;
@media screen and(max-width:414px){ @media screen and(max-width:414px) {
font-size: 30px; font-size: 30px;
margin-right: 10px; margin-right: 10px;
line-height: 50px; line-height: 50px;
vertical-align:middle; vertical-align: middle;
} }
} }
} }
h1, h2, h3, p, span { #cfp-intro {
font-family: $fontFamily; h1,
color: $fontColor; h2,
} h3,
p,
span {
font-family: $fontFamily;
color: $fontColor;
}
h1 { h1 {
// font // font
font-size: $h1FontSize; font-size: $h1FontSize;
line-height: 70px; line-height: 70px;
font-weight: 900; font-weight: 900;
letter-spacing: $titleLetterSpace; 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) { @media screen and (max-width: 414px) {
line-height: 80px; line-height: 20px;
} }
} }
.sub { .right {
font-size: $subFontSize; text-align: left;
@media screen and (max-width: 414px) {
text-align: right;
margin-right: 30%;
}
} }
@media screen and (max-width: 414px) { h2 {
line-height: 20px; // font
font-size: $h2FontSize;
letter-spacing: $titleLetterSpace;
font-weight: 900;
line-height: 70px;
margin: 0px;
} }
}
.right { h3 {
text-align: left; // Font
font-size: $h3FontSize;
letter-spacing: $titleLetterSpace;
font-weight: 900;
line-height: 15px;
margin: 0px;
}
@media screen and (max-width: 414px) { .about-section > .context {
text-align: right; margin-right: 50%;
}
.topic-intro > .context {
margin-right: 30%; margin-right: 30%;
} }
}
h2 { .context {
// font // font
font-size: $h2FontSize; font-size: $contextFontSize;
letter-spacing: $titleLetterSpace; line-height: 30px;
font-weight: 900; letter-spacing: $contextLetterSpace;
line-height: 70px; font-weight: normal;
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 { .detail {
// font // display
font-size: $contextFontSize; display: inline;
font-weight: 900; // font
letter-spacing: $contextLetterSpace; font-size: $contextFontSize;
line-height: 42px; line-height: 20px;
} letter-spacing: $contextLetterSpace;
font-weight: normal;
// align
vertical-align: bottom;
// size
.context-hyperlink { @media screen and (max-width: 414px) {
// font margin-right: 25%;
font-size: $hyperlinkFontSize; line-height: 35px;
letter-spacing: $hyperlinkLetterSpace; font-size: $mcontextFontSize;
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 { .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; font-size: 12px;
line-height: 10px; line-height: 10px;
@@ -324,359 +329,359 @@ p.tag.sub {
font-size: 12px; font-size: 12px;
margin-top: 8px; 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 p.small-tag {
.cfp-img { margin-block-start: 0em;
// box margin-block-end: 0.5em;
border-radius: 4px; font-size: 12px;
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){
text-align: center; text-align: center;
width: 123px;
}
}
.tag-table{ @media screen and (max-width: 414px) {
// box line-height: 12px;
border-style: none; font-size: 10px;
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){ //NOTE: the size should be smaller, this temporary size is provided to support min font size of browser
border-radius: 27px; .cfp-img {
margin-top: 200px; // box
margin-bottom: -870px; border-radius: 4px;
margin-left: -150px; margin-bottom: 12px;
transform:scale(1); // size
transform: rotate(12deg); 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 { .thumbnails {
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); // box
border-radius: 32px; margin-left: -25.5px;
transform: rotate(15deg);
margin-top: 270px;
margin-bottom: -1900px;
margin-left: -700px;
z-index: 1;
@media screen and(max-width: 414px){ @media screen and (max-width: 414px) {
box-shadow: -10px 30px 30px 0 rgba(135, 152, 199, 0.56); margin-left: -9px;
margin-top: 5px; }
margin-left: -415px; }
margin-bottom: -1560px;
transform: rotate(12deg) scale(0.6); .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; z-index: 2;
}
}
.hiden-box { @media screen and(max-width: 960px) {
position: absolute; margin-top: -10%;
margin-top: 1200px; margin-left: -10%;
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 { @media screen and(max-width: 414px) {
z-index: 2; margin-top: -10%;
margin-left: -10%;
@media screen and(max-width: 960px) { }
margin-top: -10%;
margin-left: -10%;
} }
@media screen and(max-width: 414px) { .box-back2 {
margin-top: -10%; z-index: 2;
margin-left: -10%;
}
}
.box-back2 { @media screen and(max-width: 960px) {
z-index: 2; margin-top: -10%;
margin-left: -10%;
}
@media screen and(max-width: 960px) { @media screen and(max-width: 414px) {
margin-top: -10%; margin-top: -10%;
margin-left: -10%; margin-left: -10%;
}
} }
@media screen and(max-width: 414px) { .SITCON-text-path {
margin-top: -10%; transform: scale(0.7);
margin-left: -10%; padding-left: 300px;
} margin-right: -550px;
} margin-bottom: -600px;
padding-top: 300px;
.SITCON-text-path { z-index: 2;
transform: scale(0.7); @media screen and(max-width: 414px) {
padding-left: 300px; z-index: -2;
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){ .des-text-path {
//background-image: url(../../assets/images/cfp/Mobile/Path_763.svg); //background: url(../../assets/images/cfp/Path_762.svg) no-repeat;
margin-top: 40px; transform: scale(0.7);
margin-left: -80px; margin-bottom: -565px;
transform: scale(0.9); padding-top: 65px;
background: url(~@/assets/images/cfp/Mobile/Path_763.svg) no-repeat; margin-left: -350px;
padding-top: -565px; z-index: 2;
margin-bottom: -665px;
@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 { .des-blue-bar {
transform: rotate(15deg); transform: rotate(15deg);
margin-left: -400px; margin-left: -400px;
margin-top: 360px; margin-top: 360px;
margin-bottom: -1360px; margin-bottom: -1360px;
@media screen and(max-width: 414px){ @media screen and(max-width: 414px) {
margin-left: -600px; margin-left: -600px;
margin-top: 160px; margin-top: 160px;
transform: rotate(12deg) scale(0.6); transform: rotate(12deg) scale(0.6);
}
} }
}
.paper-image { .paper-image {
transform: scale(0.75); transform: scale(0.75);
margin-top: -240px; margin-top: -240px;
margin-left: 270px; margin-left: 270px;
margin-bottom: -710px; margin-bottom: -710px;
z-index: 1; z-index: 1;
@media screen and(max-width: 414px){ @media screen and(max-width: 414px) {
z-index: 3; z-index: 3;
margin-top: -890px; margin-top: -890px;
margin-left: -150px; margin-left: -150px;
margin-bottom: -1030px; margin-bottom: -1030px;
transform: rotate(-7deg) scale(0.35); transform: rotate(-7deg) scale(0.35);
}
} }
}
.background { .background {
//background: url(../../assets/images/cfp/Background.svg) no-repeat; //background: url(../../assets/images/cfp/Background.svg) no-repeat;
//content: url("../../assets/images/cfp/Background.svg") no-repeat; //content: url("../../assets/images/cfp/Background.svg") no-repeat;
position: absolute; position: absolute;
top: 0; top: 0;
width:200%; width: 200%;
//max-height: 2000px; //max-height: 2000px;
margin-left: -69%; 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%; 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);
}
}

46
src/assets/scss/CFP/topic.scss
View File

@@ -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;
}
}
}

37
src/assets/scss/CFP/agenda.scss → src/assets/scss/news/agenda.scss
View File

@@ -1,4 +1,4 @@
@import '../color.scss'; @import '../color';
$fontColor: #226bb4; // added to solve unnamed color error $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-slate-blue: #5f7a95;
// $color-mid-blue: #226bb4; // $color-mid-blue: #226bb4;
$fontFamily-NotoSansTC: "Noto Sans TC"; $fontFamily-NotoSansTC: 'Noto Sans TC';
//@mixin //@mixin
@mixin clearFloat() { @mixin clearFloat() {
@@ -134,16 +134,15 @@ $limitWidth: 80vw;
letter-spacing: normal; letter-spacing: normal;
text-align: center; text-align: center;
font-size: 34px; font-size: 34px;
} }
&-text { &-text {
width: 100%; width: 100%;
//height: 172px; //height: 172px;
margin: 0 auto; margin: 0 auto;
text-align: left; text-align: left;
font-size: 19px; font-size: 19px;
P { p {
color: $white; color: $white;
font-family: $fontFamily-NotoSansTC; font-family: $fontFamily-NotoSansTC;
margin: 15px 0; margin: 15px 0;
@@ -153,21 +152,19 @@ $limitWidth: 80vw;
} }
} }
// p { // p {
// color: $color-white; // color: $color-white;
// font-family: $fontFamily-NotoSansTC; // font-family: $fontFamily-NotoSansTC;
// font-size: 19px; // font-size: 19px;
// font-weight: 500; // font-weight: 500;
// font-stretch: normal; // font-stretch: normal;
// font-style: normal; // font-style: normal;
// line-height: 2.1; // line-height: 2.1;
// letter-spacing: 0.2px; // letter-spacing: 0.2px;
// } // }
// //
// } // }
} }
// &__itemBox { // &__itemBox {
// float: left; // float: left;
@@ -288,4 +285,4 @@ $limitWidth: 80vw;
// } // }
// } // }
// } // }
} }

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

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

22
src/assets/scss/news.scss → src/assets/scss/news/header.scss
View File

@@ -1,5 +1,5 @@
@import 'hyperpoint.scss'; @import '../hyperpoint';
@import 'color.scss'; @import '../color';
// desktop mode // desktop mode
#news-header { #news-header {
@@ -27,14 +27,22 @@
0px 0px 10px 0px rgba(0, 0, 0, 0.2); 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
@keyframes jump { @keyframes jump {
0% {position: relative;bottom: 0px;} 0% {
50% {position: relative;bottom: 20px;} position: relative;
100% {position: relative;bottom: 0px;} bottom: 0px;
}
50% {
position: relative;
bottom: 20px;
}
100% {
position: relative;
bottom: 0px;
}
} }
&:hover { &:hover {
animation: jump .6s ease-in 0s infinite reverse; animation: jump 0.6s ease-in 0s infinite reverse;
} }
.text-wrapper { .text-wrapper {

4
src/assets/scss/CFP/schedule.scss → src/assets/scss/news/schedule.scss
View File

@@ -5,7 +5,7 @@
$fontFamily: Noto Sans CJK TC, monospace; $fontFamily: Noto Sans CJK TC, monospace;
#info-schedule { #news-schedule {
max-width: 80vw; max-width: 80vw;
margin: 0 auto; margin: 0 auto;
@@ -91,7 +91,7 @@ $fontFamily: Noto Sans CJK TC, monospace;
} }
@include md { @include md {
#info-schedule { #news-schedule {
margin: 0 auto; margin: 0 auto;
font-size: 14px; font-size: 14px;

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

@@ -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;
}
}
}

71
src/components/CFP/Agenda.vue → src/components/news/Agenda.vue
View File

@@ -209,45 +209,50 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({}) @Component({})
export default class Agenda extends Vue { export default class Agenda extends Vue {
private QA = [ private QA = [
{ {
Q: '先備知識與目標受眾有何不同？', Q: '先備知識與目標受眾有何不同？',
A: '「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。', A:
v: false '「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。',
}, v: false
{ },
Q: '投稿主題是否有必要切合年會主題（算盤的後裔）？', {
A: '不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。', Q: '投稿主題是否有必要切合年會主題（算盤的後裔）？',
v: false A:
}, '不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。',
{ v: false
Q: '先備知識與目標受眾有何不同？', },
A: '若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。', {
v: false Q: '先備知識與目標受眾有何不同？',
}, A:
{ '若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。',
Q: '如果我的稿件預計會有多個講者，投稿時需要注意什麼？', v: false
A: '請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。', },
v: false {
}, Q: '如果我的稿件預計會有多個講者，投稿時需要注意什麼？',
{ A:
Q: '如果我入選第二階段，可以提供哪些補充資料？', '請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。',
A: '您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。', v: false
v: false },
}, {
{ Q: '如果我入選第二階段，可以提供哪些補充資料？',
Q: '還有疑問怎麼辦？', A:
A: '歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。', '您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。',
v: false v: false
} },
{
Q: '還有疑問怎麼辦？',
A:
'歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。',
v: false
}
]; ];
private fade = (index: number) => { private fade = (index: number) => {
this.QA[index].v = !this.QA[index].v; this.QA[index].v = !this.QA[index].v;
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/assets/scss/CFP/agenda'; @import "@/assets/scss/news/agenda";
</style> </style>

2
src/components/CFP/AgendaCard.vue → src/components/news/AgendaCard.vue
View File

@@ -20,5 +20,5 @@ export default class AgendaCard extends Vue {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/assets/scss/CFP/card'; @import '@/assets/scss/news/card';
</style> </style>

4
src/components/NewsHeader.vue → src/components/news/Header.vue
View File

@@ -114,3 +114,7 @@ export default class CfpHeader extends Vue {
} }
} }
</script> </script>
<style lang="scss">
@import '@/assets/scss/news/header'
</style>

4
src/components/CFP/Schedule.vue → src/components/news/Schedule.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div id="info-schedule"> <div>
<!-- 重要時程 --> <!-- 重要時程 -->
<section id="schedule"> <section id="schedule">
<h1>重要時程</h1> <h1>重要時程</h1>
@@ -77,5 +77,5 @@ export default class Schedule extends Vue {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/assets/scss/CFP/schedule'; @import '@/assets/scss/news/schedule';
</style> </style>

2
src/components/CFP/Topic.vue → src/components/news/Topic.vue
View File

@@ -21,5 +21,5 @@ export default class Topic extends Vue {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/assets/scss/CFP/topic'; @import '@/assets/scss/news/topic';
</style> </style>

2
src/pages/CFP.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div id="cfp" class="cfp cfp-background"> <div id="cfp" class="cfp cfp-background">
<!-- CfpHeader id="cfp-header"/ --> <!-- CfpHeader id="cfp-header"/ -->
<IntrodContainer></IntrodContainer> <IntrodContainer id="cfp-intro"></IntrodContainer>
</div> </div>
</template> </template>

14
src/pages/News.vue
View File

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