Make top page mobile-friendly

Author: yasulab

_config.yml

@@ -10,7 +10,7 @@ description: >- # this means to ignore newlines until "baseurl:"
 url: https://dojocon2021.coderdojo.jp
 date_published: 2021年11月13日
 date_event: 2021年12月18日（土曜）10:00〜
-venue: オンライン (メインセッションは YouTube Live で行います。)
+venue: "オンライン<br><small>(セッションは <a href='https://www.youtube.com/channel/UCX3tz875ZDtU85rFkYuwl5w' style='text-decoration: underline' target='_blank' rel='noopener'>YouTube</a> でライブ配信します)</small>"
 price: 無料
 
 twitter:  DojoConJapan

_sass/_global.scss

@@ -250,55 +250,70 @@ footer {
 }
 
 
-  //フッターのシェアボタン
-  .share {
-    a {
-      float: left;
-      line-height: 60px;
-      height: 60px;
-      width: 50%;
-      text-decoration-line: none;
-    }
-    &::after {
-      content: '';
-      clear: both;
-      display: block;
-    }
-    .share-twitter,
-    .share-facebook {
-      display: block;
-    }
+//フッターのシェアボタン
+.share {
+  a {
+    float: left;
+    line-height: 60px;
+    height: 60px;
+    width: 50%;
+    text-decoration-line: none;
+  }
+  &::after {
+    content: '';
+    clear: both;
+    display: block;
   }
+  .share-twitter,
   .share-facebook {
-    background-color: $facebook-color;
+    display: block;
   }
-  .share-twitter {
-    background-color: $twitter-color;
+}
+.share-facebook {
+  background-color: $facebook-color;
+}
+.share-twitter {
+  background-color: $twitter-color;
+}
+.share-line {
+  background-color: $line-color;
+  display: none;
+}
+@media screen and (max-width: 800px) {
+  .share a {
+    width: 100%;
   }
   .share-line {
-    background-color: $line-color;
-    display: none;
-  }
-  @media screen and (max-width: 800px) {
-    .share a {
-      width: 100%;
-    }
-    .share-line {
-      display: block;
-    }
+    display: block;
   }
+}
 
-  .bg-main{
-    background-color: $main-color;
-  }
+.bg-main{
+  background-color: $main-color;
+}
 
-  .title-text{
-    font-family: 'Noto Sans JP', sans-serif;
-    font-weight: bold;
+.title-text{
+  font-family: 'Noto Sans JP', sans-serif;
+  font-weight: bold;
+}
+  
+/* 改行位置の調整 */
+.ignore-pc {
+  display: none;
+}
+.ignore-sp {
+  display: inline;
+}
+@media screen and (max-width: 640px) {
+  .ignore-pc {
+    display: inline;
+  }
+  .ignore-sp {
+    display: none;
   }
+}  
 
 // テーブル
-
 table {
   border-collapse: collapse;
   border-spacing: 0;

index.md

@@ -6,7 +6,7 @@ layout: default
   <div class="top">
     <div class="top-texts">
       <h1>DojoCon Japan <br>{{ site.year }}</h1>
-      <h2 class="text-center">{{ site.subtitle }}</h2>
+      <h2 class="text-center">見渡す <br class='ignore-pc'>- the 10th anniversary -</h2>
       <h3 class="text-center">December 18th / ONLINE</h3>
     </div>
   </div>