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

Fix first paragraph in intro

Browse Source
This commit is contained in:
hyperbola 2021-01-19 21:14:32 +08:00
parent 70bf0dbecc
commit 6bbb985344
No known key found for this signature in database
GPG Key ID: D987B1D59478B51F
4 changed files with 310 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,11 +10,12 @@ $buttonHoverColor: #ffffff;
@mixin hyperlinkFont() { @mixin hyperlinkFont() {
text-decoration: underline; text-decoration: underline;
} }
// font size // font size
$h1FontSize: 30px; $h1FontSize: 42pt;
$h2FontSize: 24px; $h2FontSize: 27pt;
$h3FontSize: 16px; $h3FontSize: 20pt;
$contextFontSize: 13px; // $contextFontSize: 13px;
$buttonFontSize: 24px; $buttonFontSize: 24px;
$mh1FontSize: 26px; $mh1FontSize: 26px;
@ -36,6 +37,16 @@ $hyperlinkLetterSpace: 0;
$buttonHoverBg: #226bb4; $buttonHoverBg: #226bb4;
#cfp { #cfp {
h1,
h2,
h3 {
margin-bottom: 2em;
}
p {
line-height: 2;
}
.introduction-container { .introduction-container {
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
@ -62,24 +73,24 @@ $buttonHoverBg: #226bb4;
.about-section { .about-section {
// font // font
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%;
} }
} }
.discuss-section { .discuss-section {
font-size: $contextFontSize; // font-size: $contextFontSize;
letter-spacing: $contextLetterSpace; letter-spacing: $contextLetterSpace;
line-height: 42px; // line-height: 42px;
@media screen and(max-width: 414px) { @media screen and(max-width: 414px) {
font-size: $mcontextFontSize; // font-size: $mcontextFontSize;
width: 80%; width: 80%;
} }
} }
@ -88,9 +99,9 @@ $buttonHoverBg: #226bb4;
// size // size
margin-top: 130px; margin-top: 130px;
// font // font
font-size: $contextFontSize; // font-size: $contextFontSize;
letter-spacing: $contextLetterSpace; letter-spacing: $contextLetterSpace;
line-height: 42px; // line-height: 42px;
width: 1100px; width: 1100px;
@ -105,9 +116,9 @@ $buttonHoverBg: #226bb4;
margin-top: 70px; margin-top: 70px;
height: 325px; height: 325px;
// font // font
font-size: $contextFontSize; // font-size: $contextFontSize;
letter-spacing: $contextLetterSpace; letter-spacing: $contextLetterSpace;
line-height: 42px; // line-height: 42px;
@media screen and(max-width: 414px) { @media screen and(max-width: 414px) {
margin-top: 30%; margin-top: 30%;
@ -122,7 +133,7 @@ $buttonHoverBg: #226bb4;
font-size: $buttonFontSize; font-size: $buttonFontSize;
font-weight: 900; font-weight: 900;
letter-spacing: $buttonLetterSpace; letter-spacing: $buttonLetterSpace;
line-height: 30px; // line-height: 30px;
// size // size
margin-right: 37px; margin-right: 37px;
padding: 12px 15px 12px 15px; padding: 12px 15px 12px 15px;
@ -184,12 +195,12 @@ $buttonHoverBg: #226bb4;
margin-right: 35px; margin-right: 35px;
// align // align
vertical-align: bottom; vertical-align: bottom;
line-height: 30px; // line-height: 16pt;
@media screen and(max-width:414px) { @media screen and(max-width:414px) {
font-size: 30px; font-size: 16pt;
margin-right: 10px; margin-right: 10px;
line-height: 50px; //line-height: 1.5;
vertical-align: middle; vertical-align: middle;
} }
} }
@ -208,14 +219,14 @@ $buttonHoverBg: #226bb4;
h1 { h1 {
// font // font
font-size: $h1FontSize; font-size: $h1FontSize;
line-height: 70px; //@function: 70px;
font-weight: 900; font-weight: 900;
letter-spacing: $titleLetterSpace; letter-spacing: $titleLetterSpace;
.enlarge { .enlarge {
font-size: $enlargeFontSize; font-size: $enlargeFontSize;
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
line-height: 80px; // line-height: 80px;
} }
} }
@ -224,7 +235,7 @@ $buttonHoverBg: #226bb4;
} }
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
line-height: 20px; // line-height: 20px;
} }
} }
@ -239,20 +250,20 @@ $buttonHoverBg: #226bb4;
h2 { h2 {
// font // font
font-size: $h2FontSize; // font-size: $h2FontSize;
letter-spacing: $titleLetterSpace; letter-spacing: $titleLetterSpace;
font-weight: 900; font-weight: 900;
line-height: 70px; //line-height: 70px;
margin: 0px; // margin: 0px;
} }
h3 { h3 {
// Font // Font
font-size: $h3FontSize; // font-size: $h3FontSize;
letter-spacing: $titleLetterSpace; letter-spacing: $titleLetterSpace;
font-weight: 900; font-weight: 900;
line-height: 15px; //line-height: 15px;
margin: 0px; // margin: 0px;
} }
.about-section > .context { .about-section > .context {
@ -263,20 +274,22 @@ $buttonHoverBg: #226bb4;
margin-right: 30%; margin-right: 30%;
} }
/*
.context { .context {
// font // font
font-size: $contextFontSize; // font-size: $contextFontSize;
line-height: 30px; line-height: 30px;
letter-spacing: $contextLetterSpace; letter-spacing: $contextLetterSpace;
font-weight: normal; font-weight: normal;
} }
*/
.detail { .detail {
// display // display
display: inline; display: inline;
// font // font
font-size: $contextFontSize; // font-size: $contextFontSize;
line-height: 20px; // line-height: 20px;
letter-spacing: $contextLetterSpace; letter-spacing: $contextLetterSpace;
font-weight: normal; font-weight: normal;
// align // align
@ -285,17 +298,17 @@ $buttonHoverBg: #226bb4;
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
margin-right: 25%; margin-right: 25%;
line-height: 35px; //line-height: 35px;
font-size: $mcontextFontSize; // font-size: $mcontextFontSize;
} }
} }
.context-span { .context-span {
// font // font
font-size: $contextFontSize; // font-size: $contextFontSize;
font-weight: 900; font-weight: 900;
letter-spacing: $contextLetterSpace; letter-spacing: $contextLetterSpace;
line-height: 42px; //line-height: 42px;
} }
.context-hyperlink { .context-hyperlink {
@ -304,13 +317,13 @@ $buttonHoverBg: #226bb4;
letter-spacing: $hyperlinkLetterSpace; letter-spacing: $hyperlinkLetterSpace;
color: $light-blue; color: $light-blue;
font-weight: normal; font-weight: normal;
line-height: 42px; //line-height: 42px;
} }
p.tag { p.tag {
// font // font
font-size: 14px; font-size: 14px;
line-height: 15px; // line-height: 15px;
letter-spacing: 0; letter-spacing: 0;
font-weight: 900; font-weight: 900;
// align // align
@ -325,7 +338,7 @@ $buttonHoverBg: #226bb4;
p.tag.sub { p.tag.sub {
font-size: 12px; font-size: 12px;
line-height: 10px; // line-height: 10px;
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
font-size: 12px; font-size: 12px;
@ -340,7 +353,7 @@ $buttonHoverBg: #226bb4;
text-align: center; text-align: center;
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
line-height: 12px; // line-height: 12px;
font-size: 10px; font-size: 10px;
} }
} }
@ -366,7 +379,7 @@ $buttonHoverBg: #226bb4;
.thumbnails { .thumbnails {
// box // box
margin-left: -20.5px; // margin-left: -20.5px;
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
margin-left: -9px; margin-left: -9px;
@ -689,3 +702,79 @@ $buttonHoverBg: #226bb4;
} }
} }
} }
// General settings: font-size and paragraph spacing
#cfp-intro {
h1,
h2,
h3 {
margin-bottom: 1em;
}
p:not(:last-child) {
margin-bottom: 1em;
line-height: 1.75;
}
h1 {
font-size: 42pt;
}
h2 {
font-size: 26pt;
}
h3 {
font-size: 22pt;
}
}
#cfp-intro {
.box-back {
margin-top: -70px;
width: 600px;
.about-sitcon {
margin-bottom: 1em;
}
.past-sitcon {
margin-bottom: 1em;
.thumbnails {
display: flex;
flex-direction: row;
padding: 0.25em 0;
.thumb-wrapper {
.thumb-title,
.thumb-subtitle {
margin: 0;
font-size: 0.8em;
line-height: 1.75em;
font-weight: 900;
}
.small {
font-size: 0.6em;
}
&:not(:last-child) {
margin-right: 1em;
}
}
}
}
.join-discuss {
.link-group {
margin-top: 1em;
.btn {
&:not(:first-child) {
margin-left: 2em;
}
}
}
}
}
}

7
src/assets/scss/main.scss
View File

@ -23,13 +23,14 @@
body { body {
width: 100vw; width: 100vw;
height: 100vh;
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; font-size: 13pt;
font-size: 14pt;
margin:0;
} }
#app { #app {

27
src/assets/scss/util.scss
View File

@ -1,3 +1,5 @@
@import 'color';
.text-center { .text-center {
text-align: center; text-align: center;
.ignore { .ignore {
@ -33,3 +35,28 @@
.d-inline-block { .d-inline-block {
display: inline-block; display: inline-block;
} }
.btn {
display: inline-block;
padding: 0.85em 1.25em;
font-size: 1.1em;
font-weight: 900;
border: none;
border-radius: 8px;
&.btn-primary {
background-color: #ffffff;
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
transition-duration: 0.2s;
color: $mid-blue;
&:hover {
// box
background-color: $mid-blue;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19);
// font
color: $white;
}
}
}

297
src/components/CFP/Intro.vue
View File

@ -1,150 +1,155 @@
<template> <template>
<main class="introduction-container"> <main class="introduction-container">
<div class="introduction">
<div class="introduction"> <img src="@/assets/images/cfp/Ellipse 5.svg" class="ellipse" />
<img src="@/assets/images/cfp/Group 10.svg" class="sitcon-icon" />
<img src="@/assets/images/cfp/Ellipse 5.svg" class="ellipse"/> <img src="@/assets/images/cfp/Path 733.svg" class="sitcon-pic-2021" />
<img src="@/assets/images/cfp/Group 10.svg" class="sitcon-icon"/> <img src="@/assets/images/cfp/Path 734.svg" class="sitcon-title-zh" />
<img src="@/assets/images/cfp/Path 733.svg" class="sitcon-pic-2021"/> <img src="@/assets/images/cfp/Path 735.svg" class="sitcon-topic" />
<img src="@/assets/images/cfp/Path 734.svg" class="sitcon-title-zh"/> <img src="@/assets/images/cfp/Path 736.svg" class="sitcon-date" />
<img src="@/assets/images/cfp/Path 735.svg" class="sitcon-topic"/> <img src="@/assets/images/cfp/Path 737.svg" class="sitcon-place" />
<img src="@/assets/images/cfp/Path 736.svg" class="sitcon-date"/> <img src="@/assets/images/cfp/Path 738.svg" class="sitcon-qeury" />
<img src="@/assets/images/cfp/Path 737.svg" class="sitcon-place"/> <!-- ../../assets/images/cfp/Mobile/Mobile-background.svg -->
<img src="@/assets/images/cfp/Path 738.svg" class="sitcon-qeury"/> <img src="@/assets/images/cfp/Background.svg" class="background" />
<!-- ../../assets/images/cfp/Mobile/Mobile-background.svg --> <!-- src="@/assets/images/cfp/Background.svg" -->
<img src="@/assets/images/cfp/Background.svg" class="background"/> <!-- first part -->
<!-- src="@/assets/images/cfp/Background.svg" --> <img src="@/assets/images/cfp/Path 740.svg" class="SITCON-text-path" />
<!-- first part --> <svg width="890" height="900" class="first-box">
<img src="@/assets/images/cfp/Path 740.svg" class="SITCON-text-path"/> <rect width="1000" height="1000" style="fill: #ffffff" />
<svg width="890" height="900" class="first-box"> </svg>
<rect width="1000" height="1000" style="fill:#ffffff;" /> <div class="box-back">
</svg> <div class="about-sitcon">
<div class="box-back"> <h2>關於 SITCON</h2>
<h1>關於 SITCON</h1> <p>
<div class="about-section"> 學生計算機年會（SITCON）自 2013
<p class="context"> 年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
學生計算機年會（SITCON）自 2013 </p>
年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
</p>
</div>
<h2>歷屆年會網站</h2>
<div class="thumbnails">
<table class="img-table">
<tr>
<td class="td-width" onclick="window.location.href='/2020'">
<img class="cfp-img" src="@/assets/images/cfp/2020.png" />
<p class="tag">SITCON 2020<br /></p>
<p class="tag sub">#define</p>
</td>
<td class="td-width" onclick="window.location.href='/2019'">
<img class="cfp-img" src="@/assets/images/cfp/2019.png" />
<p class="tag">SITCON 2019<br /></p>
<p class="tag sub">開箱演算法</p>
</td>
<td class="td-width" onclick="window.location.href='/2018'">
<img class="cfp-img" src="@/assets/images/cfp/2018.png" />
<p class="tag">SITCON 2018<br /></p>
<p class="small-tag">POPULAR COMPUTER SCIENCE</p>
</td>
</tr>
</table>
</div>
<h2>參與討論！</h2>
<div class="discuss-section">
<p class="context">
SITCON 是個開放的社群，許多籌備的相關事項都會在公開的 Mailing list
上進行<br />
討論，如果有興趣參與，歡迎訂閱 SITCON 的 Mailing list
並貢獻你的想法！
</p>
<p class="context" style="margin-top: 22px; margin-bottom: 22px">
若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
的會議記錄。
</p>
</div>
<div>
<button
class="buttons"
onclick="window.location.href='https://groups.google.com/g/sitcon-general'"
><h3>SITCON 論壇</h3></button>
<button
class="buttons"
onclick="window.location.href='https://hackmd.io/@SITCON/SITCON2021'"
><h3>會議記錄</h3></button>
</div>
</div>
<!-- first part -->
<!-- second part -->
<img src="@/assets/images/cfp/Path_762.svg" class="des-text-path"/> <!---->
<svg width="1500" height="1500" class="second-box">
<rect width="1500" height="1500" style="fill:#ffffff;" />
</svg>
<svg width="2000" height="350" class="des-blue-bar">
<rect width="2000" height="350" style="fill:#226BB4;" />
</svg>
<svg width="1500" height="900" class="hiden-box">
<rect width="1500" height="900" style="fill:#ffffff;" />
</svg>
<div class="box-back2" style="margin-top: 1000px;">
<div class="topic-intro">
<h1 class="right">2021 年會主題</h1>
<h1 class="right">
<span class="enlarge">算盤的後裔</span>
</h1>
<p class="context">
千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步發展為隨處可見的智慧型裝置。俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
</p>
<p class="context">
人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海。奠基於科技的現有成果，對科技的未來持續做出貢獻的我們，都是「算盤的後裔」。
</p>
<img src="@/assets/images/cfp/paper/paper.png" class="paper-image" />
<h2>徵稿時間</h2>
<div>
<h2 class="date">01/15 ~ 02/22</h2>
<p class="detail">
詳細時程請見
</p>
<div class="button-post">
<button
class="buttons"
onclick="window.location.href='/news'"
><h3>投稿資訊</h3></button>
<!-- NOTE: this button's hover won't work because paper.png is too big -->
<button
class="buttons"
onclick="window.location.href='https://forms.gle/XoXJSD2P8dL8X8s2A'"
><h3>不用說了，快讓我投稿！</h3></button>
</div>
</div>
</div>
<div class="last-part">
<h3>最後...</h3>
<h1>SITCON 贊助徵求</h1>
<!--style="margin-top:-30px;"-->
<p class="context">
SITCON 的舉辦，除了有賴眾多志工的努力，也需要金錢的支持。<br />
如果您認同 SITCON 的理念，歡迎以行動支持 SITCON
的運作，讓更多交流產生！
</p>
<p class="context">
企業合作歡迎聯繫
<a class="context-hyperlink" href="mailto:contact@sitcon.org">contact@sitcon.org</a>
</p>
<div>
<button
class="buttons"
onclick="window.location.href='http://bit.ly/donatesitcon2021'"
><h3>個人贊助方案</h3></button>
</div>
</div>
<!-- second part -->
</div>
</div> </div>
</main> <div class="past-sitcon">
<h3>歷屆年會網站</h3>
<div class="thumbnails">
<div class="thumb-wrapper">
<img class="cfp-img" src="@/assets/images/cfp/2020.png" />
<p class="thumb-title text-center">SITCON 2020<br /></p>
<p class="thumb-subtitle text-center">#define</p>
</div>
<div class="thumb-wrapper">
<img class="cfp-img" src="@/assets/images/cfp/2019.png" />
<p class="thumb-title text-center">SITCON 2019<br /></p>
<p class="thumb-subtitle text-center">開箱演算法</p>
</div>
<div class="thumb-wrapper">
<img class="cfp-img" src="@/assets/images/cfp/2018.png" />
<p class="thumb-title text-center">SITCON 2018<br /></p>
<!-- TODO align not good -->
<p class="thumb-subtitle text-center small">
POPULAR COMPUTER SCIENCE
</p>
</div>
</div>
</div>
<div class="join-discuss">
<h3>參與討論！</h3>
<div class="discuss-section">
<p>
SITCON 是個開放的社群，許多籌備的相關事項都會在公開的 Mailing list
上進行討論，如果有興趣參與，歡迎訂閱 SITCON 的 Mailing list
並貢獻你的想法！
</p>
<p>
若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
的會議記錄。
</p>
</div>
<div class="link-group">
<a
class="btn btn-primary"
href="https://groups.google.com/g/sitcon-general"
>SITCON 論壇</a
>
<a
class="btn btn-primary"
href="https://hackmd.io/@SITCON/SITCON2021"
>會議記錄</a
>
</div>
</div>
</div>
<!-- first part -->
<!-- second part -->
<img src="@/assets/images/cfp/Path_762.svg" class="des-text-path" />
<!---->
<svg width="1500" height="1500" class="second-box">
<rect width="1500" height="1500" style="fill: #ffffff" />
</svg>
<svg width="2000" height="350" class="des-blue-bar">
<rect width="2000" height="350" style="fill: #226bb4" />
</svg>
<svg width="1500" height="900" class="hiden-box">
<rect width="1500" height="900" style="fill: #ffffff" />
</svg>
<div class="box-back2" style="margin-top: 1000px">
<div class="topic-intro">
<h2 class="right">2021 年會主題</h2>
<h1 class="right">算盤的後裔</h1>
<p class="context">
千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步發展為隨處可見的智慧型裝置。俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
</p>
<p class="context">
人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海。奠基於科技的現有成果，對科技的未來持續做出貢獻的我們，都是「算盤的後裔」。
</p>
<img src="@/assets/images/cfp/paper/paper.png" class="paper-image" />
<h3>徵稿時間</h3>
<div>
<!-- TODO is this header? -->
<h3 class="date">01/15 ~ 02/22</h3>
<p class="detail">詳細時程請見</p>
<div class="button-post">
<button class="buttons" onclick="window.location.href='/news'">
<h3>投稿資訊</h3>
</button>
<!-- NOTE: this button's hover won't work because paper.png is too big -->
<button
class="buttons"
onclick="window.location.href='https://forms.gle/XoXJSD2P8dL8X8s2A'"
>
<h3>不用說了，快讓我投稿！</h3>
</button>
</div>
</div>
</div>
<div class="last-part">
<!-- TODO this is not header -->
<h3>最後...</h3>
<h2>SITCON 贊助徵求</h2>
<!--style="margin-top:-30px;"-->
<p class="context">
SITCON 的舉辦，除了有賴眾多志工的努力，也需要金錢的支持。<br />
如果您認同 SITCON 的理念，歡迎以行動支持 SITCON
的運作，讓更多交流產生！
</p>
<p class="context">
企業合作歡迎聯繫
<a class="context-hyperlink" href="mailto:contact@sitcon.org"
>contact@sitcon.org</a
>
</p>
<div>
<button
class="buttons"
onclick="window.location.href='http://bit.ly/donatesitcon2021'"
>
<!-- TODO This is not header -->
<h3>個人贊助方案</h3>
</button>
</div>
</div>
<!-- second part -->
</div>
</div>
</main>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -154,5 +159,5 @@ export default class IntrodContainer extends Vue {}
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/assets/scss/CFP/intro'; @import "@/assets/scss/CFP/intro";
</style> </style>