Merge branch 'wft-dont-use-px-with-font-size' into dev2

This commit is contained in:
hyperbola
2021-01-19 22:00:25 +08:00
4 changed files with 352 additions and 164 deletions

View File

@@ -1,9 +1,7 @@
<template>
<main class="introduction-container">
<div class="introduction">
<img src="@/assets/images/cfp/Ellipse 5.svg" class="ellipse"/>
<main class="introduction-container">
<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/Path 733.svg" class="sitcon-pic-2021"/>
<img src="@/assets/images/cfp/Path 734.svg" class="sitcon-title-zh"/>
@@ -19,65 +17,72 @@
<svg width="1200" height="1000" class="first-box">
<rect width="1200" height="1000" style="fill:#ffffff;" />
</svg>
<div class="box-back">
<h1>關於 SITCON</h1>
<div class="about-section">
<p class="context">
學生計算機年會SITCON 2013
年發起以學生為本由學生自發舉辦長期投身學生資訊教育與推廣開源精神希望引領更多學子踏入資訊的殿堂更冀望所有對資訊有興趣的學生能夠在年會裏齊聚一堂彼此激盪傳承啟發達到學以致用教學相長的實際展現
</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 class="box-back box">
<div class="about-sitcon">
<h2>關於 SITCON</h2>
<p>
學生計算機年會SITCON 2013
年發起以學生為本由學生自發舉辦長期投身學生資訊教育與推廣開源精神希望引領更多學子踏入資訊的殿堂更冀望所有對資訊有興趣的學生能夠在年會裏齊聚一堂彼此激盪傳承啟發達到學以致用教學相長的實際展現
</p>
</div>
<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>
<!-- first part -->
<!-- second part -->
<img src="@/assets/images/cfp/Path_762.svg" class="des-text-path"/> <!---->
<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 mt-1">
<a
rel="noopener"
target="_blank"
class="btn btn-primary mr-2"
href="https://groups.google.com/g/sitcon-general"
>SITCON 論壇</a
>
<a
rel="noopener"
target="_blank"
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>
@@ -87,65 +92,93 @@
<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"></h1> -->
<h1 class="right">
2021 年會主題<br/>
<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='/cfp/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 class="box-back2 box" style="margin-top: 1000px">
<div class="topic-intro">
<div class="about-topic">
<h2>2021 年會主題</h2>
<h1>算盤的後裔</h1>
<p>
千年以前的人類發明了各式各樣輔助算術的工具在世界各地的文明中皆能找到廣義上的算盤隨著時代演進那些原始的工具逐步進化成為現代的計算機與電腦更進一步發展為隨處可見的智慧型裝置俗話說站在巨人的肩膀上前人的智慧成果成為墊腳石讓站在其之上的後人可以看得更高更遠科技層層疊疊承先啟後文明才能跨越時空持續成長
</p>
<p>
人們不再需要重新發明輪子只要善用前人的成果就能造出更有效率的工具並擁有更好的生活生於現代的我們每天寫著電腦程式把玩著智慧型手機徜徉在網際網路上沒有邊際的資訊大海奠基於科技的現有成果對科技的未來持續做出貢獻的我們都是算盤的後裔
</p>
</div>
<!-- TODO This cover the button -->
<img
src="@/assets/images/cfp/paper/paper.png"
class="paper-image"
style="z-index: 999"
/>
<div class="cfp-deadline">
<h3>徵稿時間</h3>
<div class="cfp-deadline-content">
<span class="h3">01/15 02/22</span
><span class="ml-2 mr-2">詳細時程請見</span
><a class="btn btn-primary mr-2" rel="noopener" href="/news"
>投稿資訊</a
><a
class="btn btn-primary"
rel="noopener"
target="_blank"
href="https://forms.gle/XoXJSD2P8dL8X8s2A"
><!-- TODO Omit some characters to fit the size -->快讓我投稿</a
>
</div>
<!--
<div>
<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>
<button
class="buttons"
onclick="window.location.href='https://forms.gle/XoXJSD2P8dL8X8s2A'"
>
<h3>不用說了快讓我投稿</h3>
</button>
</div>
</div>
-->
</div>
</div>
</main>
<div class="give-me-money">
<p class="whisper">最後...</p>
<h2>SITCON 贊助徵求</h2>
<p>
SITCON 的舉辦除了有賴眾多志工的努力也需要金錢的支持<br />
如果您認同 SITCON 的理念歡迎以行動支持 SITCON
的運作讓更多交流產生
</p>
<p>
企業合作歡迎聯繫
<a
class="context-hyperlink"
href="mailto:contact@sitcon.org"
rel="noopener"
target="_blank"
>contact@sitcon.org</a
>
</p>
<div>
<a
class="btn btn-primary"
rel="noopener"
target="_blank"
href="http://bit.ly/donatesitcon2021"
>個人贊助方案</a
>
</div>
</div>
</div>
</div>
</main>
</template>
<script lang="ts">
@@ -155,5 +188,5 @@ export default class IntrodContainer extends Vue {}
</script>
<style lang="scss">
@import '@/assets/scss/CFP/intro';
@import "@/assets/scss/CFP/intro";
</style>