Add communities link & intro

ref #1 連結到其他社群的連結與介紹於此 commit 完成。

_data/linux.json

@@ -13,7 +13,7 @@
             "text-color": "#fff"
         },
         {
-            "name": "OpenSUSE",
+            "name": "openSUSE",
             "url": "http://opensuse.linux.org.tw",
             "bgcolor": "#73BA25",
             "text-color": "#fff"
@@ -24,5 +24,30 @@
             "bgcolor": "#1793D1",
             "text-color": "#fff"
         }
+	],
+	"communities": [
+		{
+			"name": "TOSSUG",
+			"description": "台北開放原始碼軟體使用者社群（簡稱台北土虱社群）是一個愛好自由軟體與開放原始碼同好的聚會。",
+			"url": "http://www.tossug.org/",
+			"bgcolor": "#121212",
+			"text-color": "#fff"
+		},
+		{
+			"name": "Hacking Thursday",
+			"description": "Hacking Thursday 是由幾位居住於台北地區的自由軟體/開放原碼開發者所發起，每週四晚上會於特定咖啡店聚會。",
+			"url": "http://www.hackingthursday.org/",
+			"bgcolor": "#980618",
+			"text-color": "#fff"
+		}
+	],
+	"others": [
+		{
+			"name": "PTT Linux 板",
+			"description": "批踢踢 (Ptt) 是以學術性質為目的，以電子佈告欄系統為媒介的服務，你或許可以在這裡得到需要的資訊。",
+			"url": "https://www.ptt.cc/bbs/Linux/",
+			"bgcolor": "#335EFA",
+			"text-color": "#fff"
+		}
 	]
 }

index.html

@@ -20,19 +20,43 @@ <h2>學習資源</h2>
 </section>
 
 <section id="community">
-	<h2>社群列表</h2>
+	<h2>社群參與</h2>
 	<div class="content">
-		<ul>
+		<ul class="distro">
 		{% for distro in site.data.linux.distros %}
 	    <li>
-			<a href="{{ distro.url }}" style="background:{{ distro.bgcolor }};">
+			<a href="{{ distro.url }}" style="background: linear-gradient(#fff 1em, #fff calc(100% - 5px), {{ distro.bgcolor }} calc(100% - 5px));">
+
 				<div class="info">
-					<strong style="color: {{ distro.text-color }};">{{ distro.name }}</strong>
+					<strong style="color: {{ distro.bgcolor }};">{{ distro.name }}</strong>
 				</div>
 			</a>
 	    </li>
 	    {% endfor %}
 	</ul>
+	<h3>實體聚會</h3>
+	<ul class="community">
+		{% for community in site.data.linux.communities %}
+		<li>
+			<a href="{{ community.url }}">
+				<span class="title">{{ community.name }}</span>
+				<div class="description">{{ community.description }}</div>
+			</a>
+		</li>
+		{% endfor %}
+	</ul>
+	<h3>其他協助</h3>
+	<ul class="other">
+		{% for other in site.data.linux.others %}
+		<li>
+			<a href="{{ other.url }}">
+				<span class="title">{{ other.name }}</span>
+				<div class="description">{{ other.description }}</div>
+			</a>
+		</li>
+		{% endfor %}
+	</ul>
+
 	</div>
 </section>
 

style.scss

@@ -115,9 +115,10 @@ main {
 		padding: 3rem 0;
 		text-align: center;
 
-		h2 {
+		h2, h3 {
 			display: inline-block;
 			font-size: 1.75rem;
+			color: $main-color;
 		}
 
 		&:nth-child(odd)
@@ -133,10 +134,6 @@ main {
 		{
 			background-color: #fff;
 		}
-
-		h2 {
-			color: $main-color;
-		}
 	}
 }
 
@@ -191,22 +188,59 @@ main {
 }
 
 #community .content {
+	text-align: center;
+
 	ul {
-		padding: 0;
+		padding: 0 0 2rem;
+		margin: 0 auto;
 		list-style-type: none;
 
-		li {
+		&.distro li {
 			display: inline-block;
-			background-color: #fff;
-			margin: 0 .5rem;
-			min-width: 20%;
-			border: 1px solid #ccc;
-			border-radius: 3px;
+			margin: .5rem;
+			min-width: 12.5%;
 
 			a {
 				display: block;
-				padding: 2rem 3rem;
+				padding: 1rem;
 				text-decoration: none;
+
+				div	strong {
+					font-size: 1.5rem;
+				}
+			}
+		}
+
+		&.community, &.other {
+			width: 50%;
+			text-align: left;
+
+			li {
+				border-bottom: 1px solid #ccc;
+				margin: 0 1rem;
+
+				&:first-child {
+					border-top: 1px solid #ccc;
+				}
+
+
+				a {
+					display: block;
+					padding: 1rem;
+					font-size: 1.25rem;
+					line-height: 1.5rem;
+					text-decoration: none;
+
+					.title {
+						color: darken($main-color, 5%);
+						font-weight: 600;
+					}
+
+					.description {
+						color: #454545;
+
+					}
+				}
 			}
 		}
 	}