[Update] complete home without RWD
This commit is contained in:
parent
63c6980a58
commit
87467524e1
BIN
src/assets/images/home/home-sponsors.png
Normal file
BIN
src/assets/images/home/home-sponsors.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 125 KiB |
@ -1,26 +1,27 @@
|
|||||||
|
@import "../color.scss";
|
||||||
$font-home: "Noto Serif CJK TC -SemiBold";
|
$font-home: "Noto Serif CJK TC -SemiBold";
|
||||||
$font-home-h1: "Noto Serif CJK TC -Bold";
|
$font-home-h1: "Noto Serif CJK TC -Bold";
|
||||||
$font-home-h2: "Letter Gothic Std Bold";
|
$font-home-h2: "Letter Gothic Std Bold";
|
||||||
|
$font-home-button: "Noto Serif CJK TC -Black";
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
&-title {
|
&-title {
|
||||||
margin-top: 150px;
|
margin-top: 150px;
|
||||||
height: 500px;
|
height: 583px;
|
||||||
// background-color: chartreuse;
|
// background-color: chartreuse;
|
||||||
}
|
}
|
||||||
&-content {
|
&-content {
|
||||||
height: 1000px;
|
height: 1900px;
|
||||||
// background-color: cornsilk;
|
// background-color: cornsilk;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home {
|
.home {
|
||||||
// font-family: "Courier New", Courier, monospace;
|
|
||||||
font-family: $font-home;
|
font-family: $font-home;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
|
||||||
&__title {
|
&__title {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
|
text-align: center;
|
||||||
// background-color: cornflowerblue;
|
// background-color: cornflowerblue;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
@ -42,6 +43,7 @@ $font-home-h2: "Letter Gothic Std Bold";
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-box2 {
|
&-box2 {
|
||||||
|
text-align: center;
|
||||||
// background-color: chocolate;
|
// background-color: chocolate;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
@ -54,28 +56,94 @@ $font-home-h2: "Letter Gothic Std Bold";
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
width: 60%;
|
width: 75%;
|
||||||
|
padding-bottom: 75px;
|
||||||
// background-color: darkseagreen;
|
// background-color: darkseagreen;
|
||||||
|
// border: 1px solid blueviolet;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&-container {
|
&-container {
|
||||||
width: 95%;
|
width: 75%;
|
||||||
margin-left: 5%;
|
margin-left: 15%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
// background-color: darkgray;
|
// background-color: darkgray;
|
||||||
height: 100px;
|
// height: 100px;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: $font-home-h1;
|
font-family: $font-home-h1;
|
||||||
font-size: 26pt;
|
font-size: 26pt;
|
||||||
|
padding-top: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-family: $font-home-h2;
|
font-family: $font-home-h2;
|
||||||
font-size: 28pt;
|
// font-size: 32pt;
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-h2 {
|
||||||
|
&--small {
|
||||||
|
font-size: 19pt;
|
||||||
|
}
|
||||||
|
&--mid {
|
||||||
|
font-size: 23pt;
|
||||||
|
}
|
||||||
|
&--big {
|
||||||
|
font-size: 31pt;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-paragraph {
|
||||||
|
padding-top: 30px;
|
||||||
|
// background-color: yellow;
|
||||||
|
p {
|
||||||
|
font-size: 12pt;
|
||||||
|
line-height: 33px;
|
||||||
|
a {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: $indigo-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-buttonsBox {
|
||||||
|
height: 50px;
|
||||||
|
width: 245px;
|
||||||
|
margin-top: 40px;
|
||||||
|
// background-color: burlywood;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-button {
|
||||||
|
font-family: $font-home-button;
|
||||||
|
font-size: 12.5pt;
|
||||||
|
position: relative;
|
||||||
|
top: 15px;
|
||||||
|
color: $white;
|
||||||
|
background-color: $indigo-blue;
|
||||||
|
padding: 6px 17px 8px 17px;
|
||||||
|
border-radius: 32px;
|
||||||
|
box-shadow: 0 3px 10px 0 rgba(0, 0, 255, 0.18);
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-squareImg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-appleImg {
|
||||||
|
position: absolute;
|
||||||
|
top: -30px;
|
||||||
|
right: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-sponsorsImg {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -9,11 +9,7 @@
|
|||||||
<p>SITCON 學生計算機年會 2021</p>
|
<p>SITCON 學生計算機年會 2021</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="home__title-topic">
|
<div class="home__title-topic">
|
||||||
<img
|
<img src="~@/assets/images/home/home-topic.svg" width="500" />
|
||||||
class="sitcon-apple"
|
|
||||||
src="~@/assets/images/home/home-topic.svg"
|
|
||||||
width="500"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="home__title-box2">
|
<div class="home__title-box2">
|
||||||
<p>
|
<p>
|
||||||
@ -24,31 +20,62 @@
|
|||||||
</section>
|
</section>
|
||||||
<section class="section-content">
|
<section class="section-content">
|
||||||
<section class="home__info">
|
<section class="home__info">
|
||||||
|
<img
|
||||||
|
class="home-squareImg"
|
||||||
|
src="~@/assets/images/home/home-icon-square.svg"
|
||||||
|
width="120"
|
||||||
|
/>
|
||||||
<div class="home__info-container">
|
<div class="home__info-container">
|
||||||
<div class="home__info-title">
|
<div class="home__info-title">
|
||||||
<h1>算盤的後裔</h1>
|
<h1>算盤的後裔</h1>
|
||||||
<h2>Descendants of the abacus</h2>
|
<h2 class="home__info-title-h2--big">Descendants of the abacus</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="home__info-paragraph">
|
<div class="home__info-paragraph">
|
||||||
<p>
|
<p>
|
||||||
千年以前的人類,發明了各式各樣輔助算術的工具,在世界各地的文明中,皆能找到廣義上的「算盤」。隨著時代演進,那些原始的工具,逐步進化成為現代的計算機與電腦,更進一步地發展為隨處可見的智慧型裝置。
|
千年以前的人類,發明了各式各樣輔助算術的工具,在世界各地的文明中,皆能找到廣義上的「算盤」。隨著時代演進,那些原始的工具,逐步進化成為現代的計算機與電腦,更進一步地發展為隨處可見的智慧型裝置。
|
||||||
|
<br />
|
||||||
俗話說「站在巨人的肩膀上」,前人的智慧成果成為墊腳石,讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後,文明才能跨越時空持續成長。
|
俗話說「站在巨人的肩膀上」,前人的智慧成果成為墊腳石,讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後,文明才能跨越時空持續成長。
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
人們不再需要重新發明輪子,只要善用前人的成果,就能造出更有效率的工具,並擁有更好的生活。生於現代的我們,每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海,奠基於科技的現有成果,才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
|
人們不再需要重新發明輪子,只要善用前人的成果,就能造出更有效率的工具,並擁有更好的生活。生於現代的我們,每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海,奠基於科技的現有成果,才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="home__info">
|
||||||
|
<img
|
||||||
|
class="home-appleImg"
|
||||||
|
src="~@/assets/images/home/home-icon-apple.svg"
|
||||||
|
width="120"
|
||||||
|
/>
|
||||||
|
<div class="home__info-container">
|
||||||
|
<div class="home__info-title">
|
||||||
|
<h1>關於 SITCON</h1>
|
||||||
|
<h2 class="home__info-title-h2--small">
|
||||||
|
Students' Information Technology Conference
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="home__info-paragraph">
|
||||||
|
<p>
|
||||||
|
學生計算機年會(SITCON)自 2013
|
||||||
|
年發起,以學生為本、由學生自發舉辦,長期投身學生資訊教育與推廣開源精神,希望引領更多學子踏入資訊的殿堂,更冀望所有對資訊有興趣的學生,能夠在年會裏齊聚一堂,彼此激盪、傳承、啟發,達到「學以致用、教學相長」的實際展現。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<section class="home__info">
|
<section class="home__info">
|
||||||
<div class="home__info-container">
|
<div class="home__info-container">
|
||||||
<div class="home__info-title">
|
<div class="home__info-title">
|
||||||
<h1 class="home__info-title--1">算盤的後裔</h1>
|
<h1>行為準則</h1>
|
||||||
<h2 class="home__info-title--2">Descendants of the abacus</h2>
|
<h2 class="home__info-title-h2--mid">Code of Conduct</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="home__info-paragraph">
|
<div class="home__info-paragraph">
|
||||||
<p>
|
<p>
|
||||||
千年以前的人類,發明了各式各樣輔助算術的工具,在世界各地的文明中,皆能找到廣義上的「算盤」。隨著時代演進,那些原始的工具,逐步進化成為現代的計算機與電腦,更進一步地發展為隨處可見的智慧型裝置。
|
SITCON
|
||||||
俗話說「站在巨人的肩膀上」,前人的智慧成果成為墊腳石,讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後,文明才能跨越時空持續成長。
|
歡迎不同身分、來自不同背景的與會者,也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加
|
||||||
人們不再需要重新發明輪子,只要善用前人的成果,就能造出更有效率的工具,並擁有更好的生活。生於現代的我們,每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海,奠基於科技的現有成果,才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
|
SITCON,我們要求所有參與者閱讀年會的<a href=""
|
||||||
|
>行為準則(Code of Conduct)</a
|
||||||
|
>,共同創造一個友善的環境。
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -56,34 +83,34 @@
|
|||||||
<section class="home__info">
|
<section class="home__info">
|
||||||
<div class="home__info-container">
|
<div class="home__info-container">
|
||||||
<div class="home__info-title">
|
<div class="home__info-title">
|
||||||
<h1 class="home__info-title--1">算盤的後裔</h1>
|
<h1>參與討論</h1>
|
||||||
<h2 class="home__info-title--2">Descendants of the abacus</h2>
|
<h2 class="home__info-title-h2--mid">Join the community</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="home__info-paragraph">
|
<div class="home__info-paragraph">
|
||||||
<p>
|
<p>
|
||||||
千年以前的人類,發明了各式各樣輔助算術的工具,在世界各地的文明中,皆能找到廣義上的「算盤」。隨著時代演進,那些原始的工具,逐步進化成為現代的計算機與電腦,更進一步地發展為隨處可見的智慧型裝置。
|
SITCON
|
||||||
俗話說「站在巨人的肩膀上」,前人的智慧成果成為墊腳石,讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後,文明才能跨越時空持續成長。
|
是個開放的社群,許多籌備的相關事項都會在公開的郵件論壇上進行討論,如果有興趣參與,歡迎訂閱
|
||||||
人們不再需要重新發明輪子,只要善用前人的成果,就能造出更有效率的工具,並擁有更好的生活。生於現代的我們,每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海,奠基於科技的現有成果,才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
|
SITCON 的郵件論壇並貢獻你的想法!
|
||||||
</p>
|
<br />
|
||||||
</div>
|
<br />
|
||||||
</div>
|
若你想進一步了解過往討論的內容,也歡迎在 HackMD 上查看 SITCON 2021
|
||||||
</section>
|
的會議記錄。
|
||||||
<section class="home__info">
|
|
||||||
<div class="home__info-container">
|
|
||||||
<div class="home__info-title">
|
|
||||||
<h1 class="home__info-title--1">算盤的後裔</h1>
|
|
||||||
<h2 class="home__info-title--2">Descendants of the abacus</h2>
|
|
||||||
</div>
|
|
||||||
<div class="home__info-paragraph">
|
|
||||||
<p>
|
|
||||||
千年以前的人類,發明了各式各樣輔助算術的工具,在世界各地的文明中,皆能找到廣義上的「算盤」。隨著時代演進,那些原始的工具,逐步進化成為現代的計算機與電腦,更進一步地發展為隨處可見的智慧型裝置。
|
|
||||||
俗話說「站在巨人的肩膀上」,前人的智慧成果成為墊腳石,讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後,文明才能跨越時空持續成長。
|
|
||||||
人們不再需要重新發明輪子,只要善用前人的成果,就能造出更有效率的工具,並擁有更好的生活。生於現代的我們,每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海,奠基於科技的現有成果,才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="home__info-buttonsBox">
|
||||||
|
<a href="" class="home-button">郵件論壇</a>
|
||||||
|
<a href="" class="home-button">會議記錄</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<img
|
||||||
|
class="home-sponsorsImg"
|
||||||
|
src="~@/assets/images/home/home-sponsors.png"
|
||||||
|
width="100%"
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
<!-- <section class="section-sponsors">
|
||||||
|
</section> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user