video embed: moved external link to inside of card

rosenpass · Aug 13, 2024 · b95e517 · b95e517
1 parent 0366fc1
commit b95e517
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/layouts/shortcodes/blocks/video-embed.html b/layouts/shortcodes/blocks/video-embed.html
@@ -14,7 +14,6 @@
 		<div class="h4 mb-0 col-6">
 			Presentation Video
 		</div>
-            <p class="presentation-download"><span class="pt-0 download-button btn-primary" data-toggle="tooltip" title="Rosenpass is not liable for externally hosted content."><a href="{{ $hostpg }}" target="_blank"><i class="fa-solid fa-up-right-from-square"></i></a></span></p>
 	</div>
 </section>
 <div id="video-card" class="td-card card mb-4 border-0">
@@ -37,9 +36,7 @@
                     </div>
                   </div>
                   <img src="/{{ $screenshot }}" id="video-screenshot" width="100%">
-                </button>
-                <!-- <iframe id="video" class="border" width="100%" src="{{ $href }}" frameborder="0" allowfullscreen></iframe> -->
-            </div>
+                </button>            </div>
     </div>
     <div class="row justify-content-between">
         <div class="col-9">
@@ -61,12 +58,12 @@ <h6 class="mb-2 ps-3 text-muted">
                 {{ end }}
             </h6>
                 {{ with $.Get "host"}}
-            <p id="video-host" class="ps-3 mb-1 mt-2 text-muted">Hosted by: {{ $.Get "host" }} <a target="_blank" href="{{$privacy}}" class="privacy-link"><i class="fa-solid fa-circle-info" data-toggle="tooltip" title="Privacy Information"></i></a></p>
+            <p id="video-host" class="ps-3 mb-1 mt-2 text-muted">Hosted by: {{ $.Get "host" }} <a target="_blank" href="{{$privacy}}" class="privacy-link"><i class="fa-solid fa-circle-info" data-toggle="tooltip" title="Privacy and Licensing Information"></i></a></p>
                 {{ end }}
             {{ end }}
         </div>
         <div class="col-2 me-1 mt-1 align-content-center d-flex">
-            <i class="fa-solid fa-user-shield video-info" data-toggle="tooltip" title="All video content is hosted by outside providers and we cannot guarantee that those providors do not collect user data."></i>
+            <a href="{{ $hostpg }}" target="_blank"><i class="fa-solid fa-up-right-from-square video-info" data-toggle="tooltip" title="Rosenpass is not liable for externally hosted content."></i></a>
         </div>
     </div>
   </div>

diff --git a/static/css/rosenpass.css b/static/css/rosenpass.css
@@ -638,15 +638,21 @@ margin-left: 1rem;
 }
 
 
+a:has(i.video-info){
+  display: contents;
+  color: inherit;
+}
+
 i.video-info{
 border-radius: 100%;
 padding: 0.7rem;
-margin: auto 1.5rem auto auto;
+margin: auto 1.5rem 2.5rem auto;
 background-color: #00000020;
 }
 
 i.video-info:hover{
   transition: all 1.5s;
+  color: var(--bs-link-color);
   background-color: #00000040;
 }
 
@@ -785,6 +791,11 @@ background-color: #00000095;
   margin-top: -0.5em;
 }
 
+.privacy-link:hover i{
+  transition: all 1s;
+  color: var(--bs-link-color);
+}
+
 /* video data accept */
 
 #video-card.data-accept{
@@ -1057,8 +1068,8 @@ align-self: center;
 }
 
 .download-button { 
-    background-color: var(--bs-primary);  
-    color: var(--bs-white);  
+    /* background-color: var(--bs-primary);  
+    color: var(--bs-white);   */
     width: 9rem; 
     border-radius:2rem;
     padding: 0.5rem 1rem!important;