Update

emadadel4 · Oct 1, 2024 · 5398eb7 · 5398eb7
1 parent fd1ed79
commit 5398eb7
Show file tree

Hide file tree

Showing 14 changed files with 79 additions and 51 deletions.
diff --git a/content/ar/itt.md b/content/ar/itt.md
@@ -27,7 +27,7 @@ irm bit.ly/emadadel | iex
 {{< /copycode >}}
 
 
-{{< video "https://img.youtube.com/vi/QmO82OTsU5c/hqdefault.jpg" "https://youtu.be/QmO82OTsU5c" "Watch Demo" >}}
+{{< video "https://img.youtube.com/vi/QmO82OTsU5c/hqdefault.jpg" "https://www.youtube.com/embed/QmO82OTsU5c" "Watch Demo" >}}
 
 {{< download "https://github.com/emadadel4/ITT" "Source code" >}}
 

diff --git a/content/en/itt.md b/content/en/itt.md
@@ -27,5 +27,8 @@ irm bit.ly/emadadel | iex
 {{< /copycode >}}
 
 
+{{< video "https://img.youtube.com/vi/QmO82OTsU5c/hqdefault.jpg" "https://www.youtube.com/embed/QmO82OTsU5c" "Watch Demo" >}}
+
 {{< download "https://github.com/emadadel4/ITT" "Source code" >}}
 
+{{< donation "https://www.buymeacoffee.com/emadadel" "https://cdn.buymeacoffee.com/buttons/default-orange.png" >}}
diff --git a/layouts/partials/aside-content.html b/layouts/partials/aside-content.html
@@ -1,8 +1,5 @@
 <div class="left-content" id="card">
     <h4>Suggested videos</h4>
-    <small>
-        Video is more accurate than 100% of the western mainstream media and news outlets
-    </small>
     <iframe src="https://www.youtube.com/embed/UcyNg1B8FJI" title="Average MIDDLE EAST Fighter" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
     <h4>How to use ITT</h4>

diff --git a/layouts/shortcodes/donation.html b/layouts/shortcodes/donation.html
@@ -1,4 +1,4 @@
-<div class="download" id="card">
+<div class="download" id="card" style="margin-top: 20px;">
     <h2 style="margin-bottom: 25px;">{{ i18n "donation" }}</h2>
     <a href="{{ .Get 0 }}">
         <img src="{{ .Get 1 }}" alt="donation" height="40">

diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
@@ -1,6 +1,4 @@
-<div class="Video" id="card" style="margin-top: 25px; margin-bottom: 25px;">
+<div class="Video" style="margin-top: 25px; margin-bottom: 25px;">
     <h2>{{ .Get 2 }}</h2>
-    <a href="{{ .Get 1 }}">
-        <img src="{{ .Get 0 }}" alt="video" width="400">
-    </a>
+    <iframe src="{{ .Get 1 }}" title="Average MIDDLE EAST Fighter" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
diff --git a/public/ar/index.html b/public/ar/index.html
@@ -123,9 +123,6 @@ <h1 style="margin-bottom: 25px;">
         <aside>
             <div class="left-content" id="card">
     <h4>Suggested videos</h4>
-    <small>
-        Video is more accurate than 100% of the western mainstream media and news outlets
-    </small>
     <iframe src="https://www.youtube.com/embed/UcyNg1B8FJI" title="Average MIDDLE EAST Fighter" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
     <h4>How to use ITT</h4>

diff --git a/public/ar/itt/index.html b/public/ar/itt/index.html
@@ -123,11 +123,9 @@ <h4 id="متوفر-فقط-على-نظام-ويندوز-10-و-11">متوفر فق
     </div>
 </div>
 
-<div class="Video" id="card" style="margin-top: 25px; margin-bottom: 25px;">
+<div class="Video" style="margin-top: 25px; margin-bottom: 25px;">
     <h2>Watch Demo</h2>
-    <a href="https://youtu.be/QmO82OTsU5c">
-        <img src="https://img.youtube.com/vi/QmO82OTsU5c/hqdefault.jpg" alt="video" width="400">
-    </a>
+    <iframe src="https://www.youtube.com/embed/QmO82OTsU5c" title="Average MIDDLE EAST Fighter" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
 
 <section class="download" id="card">
@@ -137,7 +135,7 @@ <h1>روابط</h1>
     </ul>
 </section>
 
-<div class="download" id="card">
+<div class="download" id="card" style="margin-top: 20px;">
     <h2 style="margin-bottom: 25px;">الدعم المدي</h2>
     <a href="https://www.buymeacoffee.com/emadadel">
         <img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="donation" height="40">
@@ -156,9 +154,6 @@ <h2 style="margin-bottom: 25px;">الدعم المدي</h2>
         <aside>
             <div class="left-content" id="card">
     <h4>Suggested videos</h4>
-    <small>
-        Video is more accurate than 100% of the western mainstream media and news outlets
-    </small>
     <iframe src="https://www.youtube.com/embed/UcyNg1B8FJI" title="Average MIDDLE EAST Fighter" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
     <h4>How to use ITT</h4>

diff --git a/public/assets/css/globals.css b/public/assets/css/globals.css
@@ -13,19 +13,20 @@
     --link: blue;
     --hover:#7882ee;
     --footer:black;
+    --glow: rgb(212, 212, 212);
 }
 
 body.light {
 
-    --bg: #2b2d31;
-    --FGColor: #3c3f44;
+    --bg: #24292e;
+    --FGColor: #2f363d;
     --text: white;
     --textSoft: white;
     --button:gold;
     --link:#098fd4;
     --hover:gold;
     --footer:white;
-
+    --glow: #24292e;
 }
 
 body {
@@ -119,7 +120,7 @@ select:hover {
 /* Custom */
 #card{
     background-color: var(--FGColor);
-    box-shadow: 1px 1px 50px rgba(17, 17, 17, 0.1);
+    box-shadow: 0px 0px 5px 0.1px var(--glow);
     border-radius: 5px;
     padding: 15px;
 }
@@ -178,16 +179,14 @@ select:hover {
 }
 
 iframe {
-    display: block;    
-    margin: 10px 0;
+    display: block;  
     width: 100%;
+    height: 100%;
 }
-
-
 /* End Custom */
 
 /* Mobile % Tablet Screen */
-@media (max-width:900px) {
+@media (max-width:768px) {
 
     .container {
         grid-template-columns: 1fr;
@@ -204,8 +203,8 @@ iframe {
     }
 
     article img{
-        width: 100%;
-        height: 100%;
+        width: 50%;
+        height: 50%;
 
     }
 

diff --git a/public/assets/css/post.css b/public/assets/css/post.css
@@ -9,3 +9,22 @@ article {
 
 }
 
+.prevImage img{
+    width: 80%;
+    height: 100%;
+
+}
+
+.Video iframe {
+    height: 500px;
+    width: 100%;
+    padding: 20px;
+
+}
+
+@media (max-width: 768px) {
+    .Video iframe {
+        width: 100%; 
+        height: auto;
+    }
+}
diff --git a/public/index.html b/public/index.html
@@ -123,9 +123,6 @@ <h1 style="margin-bottom: 25px;">
         <aside>
             <div class="left-content" id="card">
     <h4>Suggested videos</h4>
-    <small>
-        Video is more accurate than 100% of the western mainstream media and news outlets
-    </small>
     <iframe src="https://www.youtube.com/embed/UcyNg1B8FJI" title="Average MIDDLE EAST Fighter" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
     <h4>How to use ITT</h4>

diff --git a/public/itt/index.html b/public/itt/index.html
@@ -124,13 +124,24 @@ <h4 id="on-windows-1011">On Windows 10/11</h4>
     </div>
 </div>
 
+<div class="Video" style="margin-top: 25px; margin-bottom: 25px;">
+    <h2>Watch Demo</h2>
+    <iframe src="https://www.youtube.com/embed/QmO82OTsU5c" title="Average MIDDLE EAST Fighter" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+</div>
+
 <section class="download" id="card">
     <h1>Links</h1>
     <ul>
         <li><a href="https://github.com/emadadel4/ITT">Source code</a></li>
     </ul>
 </section>
 
+<div class="download" id="card" style="margin-top: 20px;">
+    <h2 style="margin-bottom: 25px;">Support</h2>
+    <a href="https://www.buymeacoffee.com/emadadel">
+        <img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="donation" height="40">
+    </a>
+</div>
 
             </p>
 
@@ -144,9 +155,6 @@ <h1>Links</h1>
         <aside>
             <div class="left-content" id="card">
     <h4>Suggested videos</h4>
-    <small>
-        Video is more accurate than 100% of the western mainstream media and news outlets
-    </small>
     <iframe src="https://www.youtube.com/embed/UcyNg1B8FJI" title="Average MIDDLE EAST Fighter" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
     <h4>How to use ITT</h4>

diff --git a/public/soura/index.html b/public/soura/index.html
@@ -128,9 +128,6 @@ <h1>Links</h1>
         <aside>
             <div class="left-content" id="card">
     <h4>Suggested videos</h4>
-    <small>
-        Video is more accurate than 100% of the western mainstream media and news outlets
-    </small>
     <iframe src="https://www.youtube.com/embed/UcyNg1B8FJI" title="Average MIDDLE EAST Fighter" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
     <h4>How to use ITT</h4>

diff --git a/static/assets/css/globals.css b/static/assets/css/globals.css
@@ -13,19 +13,20 @@
     --link: blue;
     --hover:#7882ee;
     --footer:black;
+    --glow: rgb(212, 212, 212);
 }
 
 body.light {
 
-    --bg: #2b2d31;
-    --FGColor: #3c3f44;
+    --bg: #24292e;
+    --FGColor: #2f363d;
     --text: white;
     --textSoft: white;
     --button:gold;
     --link:#098fd4;
     --hover:gold;
     --footer:white;
-
+    --glow: #24292e;
 }
 
 body {
@@ -119,7 +120,7 @@ select:hover {
 /* Custom */
 #card{
     background-color: var(--FGColor);
-    box-shadow: 1px 1px 50px rgba(17, 17, 17, 0.1);
+    box-shadow: 0px 0px 5px 0.1px var(--glow);
     border-radius: 5px;
     padding: 15px;
 }
@@ -178,16 +179,14 @@ select:hover {
 }
 
 iframe {
-    display: block;    
-    margin: 10px 0;
+    display: block;  
     width: 100%;
+    height: 100%;
 }
-
-
 /* End Custom */
 
 /* Mobile % Tablet Screen */
-@media (max-width:900px) {
+@media (max-width:768px) {
 
     .container {
         grid-template-columns: 1fr;
@@ -204,8 +203,8 @@ iframe {
     }
 
     article img{
-        width: 100%;
-        height: 100%;
+        width: 50%;
+        height: 50%;
 
     }
 

diff --git a/static/assets/css/post.css b/static/assets/css/post.css
@@ -9,3 +9,22 @@ article {
 
 }
 
+.prevImage img{
+    width: 80%;
+    height: 100%;
+
+}
+
+.Video iframe {
+    height: 500px;
+    width: 100%;
+    padding: 20px;
+
+}
+
+@media (max-width: 768px) {
+    .Video iframe {
+        width: 100%; 
+        height: auto;
+    }
+}