From 2a33b7dece820b25c8826736c8b9225c15c1ea4f Mon Sep 17 00:00:00 2001
From: mysper <anthony.a3203@gmail.com>
Date: Thu, 1 Apr 2021 14:38:08 +0800
Subject: [PATCH] [optimize] sponsor page sample rwd

---
 src/assets/scss/sponsor.scss | 46 +++++++++++++++++++++++++++---------
 src/pages/Sponsor.vue        |  2 +-
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/assets/scss/sponsor.scss b/src/assets/scss/sponsor.scss
index 50c3705..7bc5e5c 100644
--- a/src/assets/scss/sponsor.scss
+++ b/src/assets/scss/sponsor.scss
@@ -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;
diff --git a/src/pages/Sponsor.vue b/src/pages/Sponsor.vue
index 0776b79..19ba1d4 100644
--- a/src/pages/Sponsor.vue
+++ b/src/pages/Sponsor.vue
@@ -10,7 +10,7 @@
 							學生計算機年會為學生自發組成籌辦的研討會，秉持著以學生為主軸的核心價值，提供一個經驗交流與資訊技術實務分享的平台，進而達到「學以致用、教學相長」的目標。
 						</p>
 						<p>
-							維繫這樣的交流平台，需要多人的努力及貢獻，亦十分需要在資金上的支持。<br />
+							維繫這樣的交流平台，需要多人的努力及貢獻，亦十分需要在資金上的支持。
 							希望能藉由您的一份力量，來促成活動的舉行，讓更多學生能在舞台上展現自我成長。<br />
 							歡迎您參與贊助，支持
 							SITCON、讓我們將每年的活動辦得盡善盡美！