Skip to content

Commit

Permalink
asas
Browse files Browse the repository at this point in the history
  • Loading branch information
@imswarnil
imswarnil committed Jun 10, 2024
1 parent 2200897 commit ebaae6e
Show file tree
Hide file tree
Showing 9 changed files with 137 additions and 102 deletions.
1 change: 1 addition & 0 deletions _includes/ad/adsense.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
.square {
width: auto;
height: 250px;
border: 1px solid black;
}

@media (max-width: 799px) {
Expand Down
33 changes: 0 additions & 33 deletions _layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,39 +80,6 @@
</div>
</div>
</section>
<div class="container">
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="pagination-previous">Previous</a>
{% else %}
<a class="pagination-previous" disabled>Previous</a>
{% endif %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path }}" class="pagination-next">Next</a>
{% else %}
<a class="pagination-next" disabled>Next</a>
{% endif %}
<ul class="pagination-list">
{% for page in (1..paginator.total_pages) %}
<li>
{% if page == paginator.page %}
<a class="pagination-link is-current" aria-label="Page {{ page }}" aria-current="page">
{{- page -}}
</a>
{% else %}
<a
href="{{ paginator.paginate_path | replace: ':num', page }}"
class="pagination-link"
aria-label="Goto page {{ page }}"
>
{{- page -}}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>

{% include ad/adsense.html type="top-leaderboard" %}
{% unless page.hide_footer %}
Expand Down
2 changes: 1 addition & 1 deletion _layouts/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
---
<main class="section">
<div class="container">
{{ content }}
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1291242080282540"
Expand All @@ -17,6 +18,5 @@
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
{{ content }}
</div>
</main>
96 changes: 46 additions & 50 deletions _layouts/video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,53 +6,8 @@
<div class="content">
<h1 class="title">{{ page.title }}</h1>
<p class="subtitle">{{ page.description }}</p>
<nav class="level">
<div class="level-item has-text-centered">
<div>
<p class="heading">Source</p>
<p class="title">{{ page.video_source }}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Type</p>
<p class="title">{{ page.video_type }}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Duration</p>
<p class="title">{{ page.video_duration }}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Category</p>
<p class="title">{{ page.category }}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Start Time</p>
<p class="title">{{ page.start_time }}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">End Time</p>
<p class="title">{{ page.end_time }}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Date</p>
<p class="title">{{ page.date | date: '%B %d, %Y' }}</p>
</div>
</div>
</nav>

<div class="columns is-multiline">
<div class="column is-12">
<div class="column is-9">
{% if page.video_source == 'YouTube' %}
<div class="video-container">
<iframe
Expand All @@ -72,12 +27,53 @@ <h1 class="title">{{ page.title }}</h1>
</div>
{% endif %}
</div>
<div class="column is-3 is-12-mobile">
<aside class="menu widget">
<p class="menu-label">Timestamps</p>
<ul class="menu-list">
{% for ts in page.timestamps %}
<li style="list-style:none;">
<a href="#" class="has-text-black">
<span>
{{- ts.time }}
<span class="icon"> <i class="fas fa-clock has-text-primary"></i> </span
></span>
-
<span>{{ ts.title }}</span>
</a>
</li>
{% endfor %}
</ul>
</aside>
{% include ad/adsense.html type="square" %}
</div>
</div>

<div class="tags">
{% for tag in page.tags %}
<span class="tag">{{ tag }}</span>
{% endfor %}
<div class="columns is-multiline">
<div class="column is-9">
{{ content }}
</div>
<div class="column is-3">
<aside class="widget">
<h2 class="title is-5">My Other Videos</h2>
<div class="video-list">
{% for video in site.videos limit: 3 %}
<a href="{{ video.url }}" class="video-link">
<div class="column">
<figure class="image is-16by9">
<img
src="https://img.youtube.com/vi/{{ video.video_url | remove: 'https://www.youtube.com/watch?v=' }}/maxresdefault.jpg"
alt="{{ video.title }}"
class="video-thumbnail"
>
</figure>
<p class="title is-5 mt-2">{{ video.title }}</p>
</div>
</a>
{% endfor %}
</div>
</aside>
</div>
</div>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions _sass/_main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
// Import Bulma
@import "../node_modules/bulma/sass/index";


// Import custom Bulma extensions
@import "../_sass/extensions/switch";
@import "../_sass/extensions/sticky";

@import "./utility/text-highlighter";

// Custom styles and overrides
html {
scroll-behavior: smooth;
Expand Down
71 changes: 71 additions & 0 deletions _sass/utility/_text-highlighter.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
// Animation Keyframes for Background Movement
@keyframes highlightMovementAnimation {
100% {
background-position: -100% 0; // Start from left
}
0% {
background-position: 100% 0; // End at right
}
}

// Animation Keyframes for Background Color
@keyframes highlightColorAnimation {
0% {
background-color: rgba(255, 255, 0, 0.1); // Lightest yellow
}
10% {
background-color: rgba(255, 255, 0, 0.2);
}
20% {
background-color: rgba(255, 255, 0, 0.2);
}
30% {
background-color: rgba(255, 255, 0, 0.2);
}
40% {
background-color: rgba(255, 255, 0, 0.6);
}
50% {
background-color: rgba(255, 255, 0, 0.7);
}
60% {
background-color: rgba(255, 255, 0, 0.8);
}
70% {
background-color: rgba(255, 255, 0, 0.9);
}
80% {
background-color: rgba(255, 255, 0, 0.8);
}
90% {
background-color: rgba(255, 255, 0, 0.7);
}
100% {
background-color: rgba(255, 255, 0, 0.6); // Darkest yellow
}
}

// Highlighted Text Style with Changing Background
.is-highlighted {
position: relative;
color: black; // Default text color
display: inline-block;
background: linear-gradient(to right, rgba(255, 255, 0, 0.1), rgba(255, 255, 0, 0.9)); // Initial gradient background
background-size: 200% 100%; // Double the width for movement animation
animation: highlightMovementAnimation 3s forwards, highlightColorAnimation 5s infinite 3s; // Animation loop duration

&:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgba(255, 255, 0, 0.2); // Initial background color
z-index: -1;
opacity: 0.3;
border-radius: 3px; // Add some border radius for a softer look
}
}

15 changes: 0 additions & 15 deletions _videos/video-source.md
View file

This file was deleted.

15 changes: 13 additions & 2 deletions _videos/video1.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@ start_time: 00:00
end_time: 10:30
category: Tutorial
tags: [sample, tutorial]
timestamps:
- time: "00:00"
title: Introduction
- time: "02:15"
title: Main Topic 1
- time: "05:45"
title: Main Topic 2
- time: "08:20"
title: Conclusion
seo:
meta_title: Sample Video Tutorial | Learn [Your Topic] | Dummy Company
meta_description: Watch this sample video tutorial to learn [Your Topic]. Get started with Dummy Company's expert guidance. Perfect for beginners.
meta_keywords: sample video, tutorial, [Your Topic], Dummy Company, beginner tutorial, learning video
---

This is the content of the sample video. It includes all the details such as timestamps, duration, source, and type.
3 changes: 2 additions & 1 deletion index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ sidebar : false
<!-- Left Side with Text -->
<div class="column is-6 ml-4">
<p class="is-size-4">Hey, welcome to my blog</p>
<h1 class="title is-1">Hi, I'm Swarnil Singhai</h1>
<h1 class="title is-1 ">Hi, I'm Swarnil Singhai</h1>

<p class="is-size-4">I am an engineer and YouTuber.</p>
<p class="is-size-6 my-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh.</p>
<div class="buttons">
Expand Down

0 comments on commit ebaae6e

Please sign in to comment.