[Add] import font style, and update tag structure in home
This commit is contained in:
barrystone
parent
05cc585797
commit
63c6980a58
BIN
src/assets/font/Letter Gothic Std Bold.ttf
Normal file
BIN
src/assets/font/Letter Gothic Std Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/font/NotoSerifCJKtc-Black.otf
Normal file
BIN
src/assets/font/NotoSerifCJKtc-Black.otf
Normal file
Binary file not shown.
BIN
src/assets/font/NotoSerifCJKtc-Bold.otf
Normal file
BIN
src/assets/font/NotoSerifCJKtc-Bold.otf
Normal file
Binary file not shown.
BIN
src/assets/font/NotoSerifCJKtc-SemiBold.otf
Normal file
BIN
src/assets/font/NotoSerifCJKtc-SemiBold.otf
Normal file
Binary file not shown.
@ -1,4 +1,24 @@
|
||||
// import web font
|
||||
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
|
||||
|
||||
@font-face {
|
||||
font-family: "Noto Serif CJK TC -Bold";
|
||||
src: url("~@/assets/font/NotoSerifCJKtc-Bold.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Noto Serif CJK TC -Black";
|
||||
src: url("~@/assets/font/NotoSerifCJKtc-Black.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Noto Serif CJK TC -SemiBold";
|
||||
src: url("~@/assets/font/NotoSerifCJKtc-SemiBold.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Letter Gothic Std Bold";
|
||||
src: url("~@/assets/font/Letter Gothic Std Bold.ttf");
|
||||
}
|
||||
|
||||
$fontFamily: Noto Sans TC, monospace;
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
@import "../color.scss";
|
||||
@import "./color.scss";
|
||||
$font-header-link: "Noto Serif CJK TC -Bold";
|
||||
$font-header-apply: "Noto Serif CJK TC -Black";
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
@ -35,6 +37,7 @@
|
||||
}
|
||||
|
||||
&-links {
|
||||
font-family: $font-header-link;
|
||||
float: right;
|
||||
width: 600px;
|
||||
margin-right: 92px;
|
||||
@ -75,6 +78,7 @@
|
||||
}
|
||||
|
||||
&-apply {
|
||||
font-family: $font-header-apply;
|
||||
width: 92px;
|
||||
height: 38px;
|
||||
border-radius: 38px;
|
||||
@ -1,33 +1,40 @@
|
||||
$font-home: "Noto Serif CJK TC -SemiBold";
|
||||
$font-home-h1: "Noto Serif CJK TC -Bold";
|
||||
$font-home-h2: "Letter Gothic Std Bold";
|
||||
|
||||
.section {
|
||||
&-title {
|
||||
margin-top: 150px;
|
||||
height: 500px;
|
||||
// background-color: chartreuse;
|
||||
}
|
||||
&-content {
|
||||
height: 1000px;
|
||||
// background-color: cornsilk;
|
||||
}
|
||||
}
|
||||
|
||||
.home {
|
||||
// font-family: "Courier New", Courier, monospace;
|
||||
font-family: $font-home;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
&__title {
|
||||
width: 500px;
|
||||
width: 600px;
|
||||
// background-color: cornflowerblue;
|
||||
margin: 0 auto;
|
||||
padding-top: 10px;
|
||||
position: relative;
|
||||
|
||||
&-box1 {
|
||||
position: relative;
|
||||
|
||||
margin-top: 100px;
|
||||
margin: 0 auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 20px;
|
||||
// background-color: chocolate;
|
||||
height: 80px;
|
||||
width: 500px;
|
||||
span {
|
||||
font-size: 16pt;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
width: 600px;
|
||||
p {
|
||||
font-size: 18pt;
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,9 +44,37 @@
|
||||
&-box2 {
|
||||
// background-color: chocolate;
|
||||
height: 80px;
|
||||
width: 500px;
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
margin-top: 80px;
|
||||
p {
|
||||
font-size: 16pt;
|
||||
font-size: 18pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: 60%;
|
||||
// background-color: darkseagreen;
|
||||
margin: 0 auto;
|
||||
|
||||
&-container {
|
||||
width: 95%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
&-title {
|
||||
// background-color: darkgray;
|
||||
height: 100px;
|
||||
|
||||
h1 {
|
||||
font-family: $font-home-h1;
|
||||
font-size: 26pt;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: $font-home-h2;
|
||||
font-size: 28pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -117,5 +117,5 @@ export default class Header extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/scss/home/header";
|
||||
@import "@/assets/scss/header";
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<section class="section-title">
|
||||
<div class="home__title">
|
||||
<div class="home__title-box1">
|
||||
<span>SITCON 學生計算機年會 2021</span>
|
||||
<p>SITCON 學生計算機年會 2021</p>
|
||||
</div>
|
||||
<div class="home__title-topic">
|
||||
<img
|
||||
@ -22,6 +22,68 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section-content">
|
||||
<section class="home__info">
|
||||
<div class="home__info-container">
|
||||
<div class="home__info-title">
|
||||
<h1>算盤的後裔</h1>
|
||||
<h2>Descendants of the abacus</h2>
|
||||
</div>
|
||||
<div class="home__info-paragraph">
|
||||
<p>
|
||||
千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
|
||||
俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
|
||||
人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user