[optimize] sponsor page sample rwd

This commit is contained in:
mysper 2021-04-01 14:38:08 +08:00
parent c3c9dc9d98
commit 2a33b7dece
2 changed files with 36 additions and 12 deletions

View File

@ -1,43 +1,69 @@
@import './breakpoint';
$fontFamily: "Noto Serif CJK TC -SemiBold";
@mixin RWDFontSize {
font-size: 14pt;
@media screen and (max-width: $max-width-medium-0) {
font-size: 12pt;
}
@media screen and (max-width: $max-width-small-0) {
font-size: 10pt;
}
@media screen and (max-width: $max-width-small-2) {
font-size: 8pt
}
}
@mixin RWDWidth {
width: 60%;
@media screen and (max-width: $max-width-medium-0) {
width: 70%;
}
@media screen and (max-width: $max-width-small-0) {
width: 85%;
}
@media screen and (max-width: $max-width-small-2) {
width: 90%;
}
}
#sponsor {
line-height: 2em;
font-family: $fontFamily;
h2 {
line-height: normal;
font-size: 36pt;
color: #4e4e4e;
}
.main-container {
width: 75%;
@include RWDWidth;
margin: 0 auto;
padding-top: 100px;
padding-top: 100px;
padding-bottom: 240px;
}
.info-wrapper {
.content-wrapper {
display: flex;
flex-direction: row;
.info-left-button-wrapper {
padding-right: 10%;
// padding-right: 10%;
}
.info-content {
@include RWDFontSize;
p:not(:first-child) {
margin-top: 3em;
}
}
.info-right-button-wrapper {
padding-left: 10%;
// padding-left: 10%;
}
}
.button-wrapper {
margin: 3em;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
.button {
color: white;
background: #1060ff;
@ -48,14 +74,12 @@
}
}
}
.deep-ploughing {
.image-wrapper {
margin-top: 8em;
display: flex;
flex-direction: row;
justify-content: space-between;
img {
width: 307px;
height: 251px;

View File

@ -10,7 +10,7 @@
學生計算機年會為學生自發組成籌辦的研討會秉持著以學生為主軸的核心價值提供一個經驗交流與資訊技術實務分享的平台進而達到學以致用教學相長的目標
</p>
<p>
維繫這樣的交流平台需要多人的努力及貢獻亦十分需要在資金上的支持<br />
維繫這樣的交流平台需要多人的努力及貢獻亦十分需要在資金上的支持
希望能藉由您的一份力量來促成活動的舉行讓更多學生能在舞台上展現自我成長<br />
歡迎您參與贊助支持
SITCON讓我們將每年的活動辦得盡善盡美