セッションページのスライドへのリンクのデザインを修正 (#135)

スライドのアイコンは自作しました。

Author: yebis0942

assets/scss/index.scss

@@ -5,6 +5,7 @@
 @import "partials/staff.scss";
 @import "partials/live_panels.scss";
 
+@import "sessions/single.scss";
 @import "staffs/list.scss";
 @import "schedule/list.scss";
 

assets/scss/sessions/single.scss

@@ -0,0 +1,35 @@
+body.sessions {
+  .talkLinks {
+    margin: var(--space-4) 0;
+    padding: 0;
+    list-style: none;
+    text-align: center;
+
+    .talkLinks_link {
+      display: inline;
+      margin-left: var(--space-3);
+      margin-right: var(--space-3);
+
+      a {
+        display: inline-flex;
+        align-items: center;
+
+        margin: var(--space-4);
+        padding: .25em 1em;
+        border-radius: 1em;
+
+        background: var(--primary);
+        color: var(--primary-txt);
+        font-size: 125%;
+        
+        .icon {
+          width: 1em;
+        }
+        
+        &:hover {
+          box-shadow: .0625em .0625em .125em var(--darken-3);
+        }
+      }
+    }
+  }
+}

i18n/en.toml

@@ -113,4 +113,11 @@ other = "Partner Session Speakers"
 ##########
 
 [staff_green]
-other = "Green Partner Staffs"
+other = "Green Partner Staffs"
+
+############
+# Sessions #
+############
+
+[session_slides]
+other = "Slides"

i18n/ja.toml

@@ -116,4 +116,11 @@ other = "スポンサーセッションスピーカー"
 ##########
 
 [staff_green]
-other = "グリーンスポンサースタッフ"
+other = "グリーンスポンサースタッフ"
+
+############
+# Sessions #
+############
+
+[session_slides]
+other = "スライド"

layouts/sessions/single.html

@@ -66,14 +66,21 @@ <h1 class="text">{{ .Title }}</h1>
 			        title="YouTube Video"></iframe>
 		</div>
 		{{ end }}
+	</div>
 
-		{{ if .Params.presentation }}
-		<a class="social-slides"
-		   href="{{ .Params.presentation }}"
-		   rel="noreferrer"
-		   target="_blank">Voir les slides</a>
-		{{ end }}
-
+	<div>
+		<ul class="talkLinks">
+			{{ if .Params.Slides }}
+				<li class="talkLinks_link">
+					<a href="{{ .Params.Slides }}"
+						rel="noreferrer"
+						target="_blank">
+						<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 16.933 16.933"><g transform="translate(-.334 .167)"><rect style="fill:#fff;fill-opacity:0;fill-rule:nonzero;stroke:currentColor;stroke-width:1.05833;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="15" height="11.25" x="1.301" y="2.675" ry=".087" fill="none"/><rect style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:#000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none" width="7" height="1" x="5.301" y="6.502" ry="0"/><rect style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:#000;stroke-width:0;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none" width="9" height="1" x="4.301" y="9.166" ry="0"/></g></svg>
+						{{ i18n "session_slides" }}
+					</a>
+				</li>
+			{{ end }}
+		</ul>
 	</div>
 
 </section>