Merge pull request #24 from joannachou713/test

Issue #12 加入 YouTube & Gathertown 連結
rubytaiwan · Jul 25, 2021 · 2c69b97 · 2c69b97
2 parents 3715ec5 + a967a8a
commit 2c69b97
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 26 deletions.
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -42,14 +42,33 @@
         <div class='col-lg home-order-2 brown-text'>
             <div class="home-text">
                 <div class='lh-lg' style="font-size: 35px;">Jul 31st ~ Aug 1st</div>
-                <div>TR 214 AAEON Building</div>
-                <div>NTUST, Taiwan</div>
+                <div class='mb-3'>Entirely virtual on <a class='gather-link' href="https://gather.town/app/mQNlmkUiXaY2GT5V/test">Gathertown</a> & Youtube</div>
+                <div><button class="home-btn btn" type="button" data-bs-toggle="modal" data-bs-target="#stream-modal">YouTube Live Stream</button></div>
             </div>
         </div>
-        <div class='col-lg home-order-1 col-lg text-center' id='logo-container' ><img src="/assets/logo_red.svg" /></div>
+        <div class='col-lg home-order-1 col-lg text-center' id='logo-container'><img src="/assets/logo_red.svg" /></div>
         <div class='col-lg home-order-3 col-lg brown-text home-text container'> </div>
     </div>
 
+    <!-- YouTube Modal -->
+    <div class="modal fade" id="stream-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg modal-dialog-centered">
+            <div class="modal-content p-3" style='height: 563px!important;'>
+                <div class="d-flex justify-content-between">
+                    <div class='text-center brown-text ps-3' style='font-family: "Marmelad", sans-serif;font-size: 18px;'>YouTube Live Stream</div>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+
+                    <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/xv43gIVvP54"
+                        title="YouTube video player" frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen></iframe>
+                </div>
+            </div>
+        </div>
+    </div>
+
 
     {{ content }}
 

diff --git a/assets/avatars-gather.png b/assets/avatars-gather.png
diff --git a/assets/black-gather-h.png b/assets/black-gather-h.png
diff --git a/assets/gathertown.png b/assets/gathertown.png
diff --git a/assets/main.scss b/assets/main.scss
@@ -1,4 +1,5 @@
 body {
+  font-family: "Marmelad", sans-serif;
   background-color: #fad9c7 !important;
   /* prevent bootstrap add overflow and padding when open modals*/
   overflow-y: scroll !important;
@@ -8,13 +9,14 @@ body {
   width: 33vw !important;
 }
 
-#logo-container, .home-text, .home-order-2 {
-  z-index: 300!important;
+#logo-container,
+.home-text {
+  z-index: 300 !important;
 }
 
 .bg-img {
   position: absolute !important;
-  height: 100vh!important;
+  height: 100vh !important;
 }
 #bg {
   background-image: url(bg.svg);
@@ -149,8 +151,8 @@ body {
   background-repeat: no-repeat;
 }
 
-#News{
-  margin-top: 5%!important;
+#News {
+  margin-top: 5% !important;
 }
 
 #news-container {
@@ -197,6 +199,60 @@ a:hover {
   font-size: 25px;
 }
 
+.home-btn {
+  font-family: "Marmelad", sans-serif;
+  font-size: 20px !important;
+  border-radius: 30px !important;
+  color: #fad9c7 !important;
+  background: rgb(222, 45, 44);
+  background: linear-gradient(
+    90deg,
+    rgba(222, 45, 44, 1) 0%,
+    rgba(229, 100, 84, 1) 100%
+  );
+  transition: color border 0.5s !important;
+}
+
+.home-btn:hover {
+  color: #730000 !important;
+  background: #fad9c7;
+  border: 1px solid #730000;
+}
+
+.gather-link {
+  color: #e50038 !important;
+  transition: all 0.5s !important;
+  display: inline-block;
+}
+
+.gather-link:hover {
+  color: #e50038 !important;
+}
+
+.gather-link::after {
+  content: "";
+  width: 0px;
+  height: 2px;
+  display: block;
+  background: #e50038;
+  transition: 300ms;
+}
+
+.gather-link:hover::after {
+  width: 100%;
+}
+
+.gather-img > a > img {
+  width: 100% !important;
+  transition: all 0.5s !important;
+}
+
+.gather-img > a > img:hover {
+  -webkit-transform: scale(1.02);
+  -ms-transform: scale(1.02);
+  transform: scale(1.02);
+}
+
 footer {
   font-family: "Marmelad", sans-serif;
   background: url(footer.svg);
@@ -228,6 +284,8 @@ footer {
 .agenda-content {
   background-color: rgba(255, 255, 255, 0.5);
 }
+
+.stream-toggler:hover,
 .agenda-content:hover,
 .news-block:hover {
   cursor: pointer;
@@ -267,6 +325,7 @@ footer {
 
 .talk-title,
 .talk-day {
+  font-family: "Marmelad", sans-serif;
   font-weight: 500;
   font-size: 20px;
 }
@@ -387,6 +446,10 @@ body > footer > div:nth-child(2) > li {
   transition: all 0.5s !important;
 }
 
+.home-order-2 {
+  z-index: 500 !important;
+}
+
 @media only screen and (max-width: 767px) {
   body {
     // background-color: lightblue!important;
@@ -603,8 +666,9 @@ body > footer > div:nth-child(2) > li {
   }
   .home-order-2 {
     position: absolute;
-    margin-left: 30vw;
-    margin-top: 10vh;
+    margin-left: -45vw;
+    margin-top: 10vh !important;
+    width: 500px !important;
   }
   .home-order-3 {
     position: absolute;
@@ -622,8 +686,8 @@ body > footer > div:nth-child(2) > li {
   }
 }
 
-@media only screen and (max-width:360px){
-  #home > div.col-lg.home-order-2.brown-text > div > div.lh-lg{
-    font-size: 29px!important;
+@media only screen and (max-width: 360px) {
+  #home > div.col-lg.home-order-2.brown-text > div > div.lh-lg {
+    font-size: 29px !important;
   }
-}
+}
diff --git a/index.html b/index.html
@@ -231,20 +231,26 @@ <h4>{{each.title_main}} {% if each.subtitle %} /<br> {{each.subtitle}}{% endif %
 
     <!-- Venue Section -->
     <div class='text-center block-title deco1' id='Venue'>Venue</div>
-    <div class='venue-flex align-items-center mb-3'>
-      <div class='d-flex'><img
-          src='https://upload.wikimedia.org/wikipedia/commons/7/73/%E5%9C%8B%E7%AB%8B%E5%8F%B0%E7%81%A3%E7%A7%91%E6%8A%80%E5%A4%A7%E5%AD%B8%E7%A0%94%E6%8F%9A%E5%A4%A7%E6%A8%93.JPG'
-          width='100%' /></div>
-      <div class='d-flex flex-column'>
-        <div class='brown-text venue-text'>TR 214 AAEON Building, NTUST</div>
-        <div style='color: #730000;font-size:18px; font-weight:400;'>研揚大樓 TR 214</div>
-        <div class='my-3 addr'>
-          <div>No. 43, Sec. 4, Keelung Rd., Da’an Dist., Taipei City</div>
-          <div>106台北市大安區基隆路四段43號</div>
+      <div>
+        <div class='pb-3 brown-text text-center talk-day'>YouTube Live Stream</div>
+        <div>
+          <iframe width="100%" height="70%" src="https://www.youtube-nocookie.com/embed/xv43gIVvP54"
+            title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen></iframe>
         </div>
-        <a href="https://goo.gl/maps/vDHfM1o7KbsmxvbG6" target="_blank"><button class="btn btn-primary"
-            type="button">Google Map</button></a>
       </div>
+      <div class='pt-5'>
+        <div class='py-3 brown-text text-center talk-day'>
+          <a href='https://gather.town/app/mQNlmkUiXaY2GT5V/test'>
+            <img style='color: #730000' height='40' src='/assets/black-gather-h.png'/>
+          </a>
+        </div>
+        <div class='gather-img text-center'>
+          <a href='https://gather.town/app/mQNlmkUiXaY2GT5V/test'>
+            <img src='/assets/gathertown.png'/>
+          </a>
+        </div>
     </div>
 
   </div>