-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (108 loc) · 4.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
---
layout: blog
title: Dashboard
---
<div id="dashboard" class="content">
<div class="w-full *:mt-16 md:*:mt-20">
<!-- Dashboard -->
<section id="hero" class="px-8 sm:px-14 flex flex-col justify-center items-center">
<div class="h-full w-full flex flex-col justify-center items-center">
<div class="text-center">
<h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">Welcome to Kadafi's Blog</h1>
<p class="text-xs sm:text-base text-center my-3 sm:my-4">
This blog is a place for me to share my knowledge related to computer science
</p>
</div>
{% include link-btn.html href="https://rizkikadafi.github.io/" blank=true text="About Me" %}
</div>
</section>
<!-- end Dashboard -->
<!-- Categories -->
<section id="categories">
<div class="mx-auto bg-card border-primary/10 border-2 py-5 px-5 sm:px-0 rounded-md shadow-2xl">
<div class="mb-5 text-center">
{% include header-title.html title='Categories' %}
</div>
<div class="swiper category-swiper mx-auto sm:w-[95%]">
<div class="swiper-wrapper">
{% for category in site.data.blog-category limit: 5 %}
{% include blog-category-swiper.html category=category %}
{% endfor %}
</div>
</div>
<div class="w-full flex justify-between items-center mt-3 sm:px-4 lg:px-5">
<div class="flex">
<div class="group button-prev mr-3">
<i class="bi bi-arrow-left-circle text-3xl group-hover:hidden"></i>
<i class="hidden bi bi-arrow-left-circle-fill text-3xl group-hover:block"></i>
</div>
<div class="group button-next">
<i class="bi bi-arrow-right-circle text-3xl group-hover:hidden"></i>
<i class="hidden bi bi-arrow-right-circle-fill text-3xl group-hover:block"></i>
</div>
</div>
<a href="{{site.baseurl}}/categories" class="group flex justify-center items-center text-sm hover:underline">
<span class="block mr-2">view all category</span>
<i class="bi bi-arrow-right block mt-[4px] group-hover:translate-x-2 transition-transform"></i>
</a>
</div>
</div>
</section>
<!-- end Categories -->
<!-- Recent Posts -->
<section id='recent'>
{% include header-title.html title='Recent Posts' %}
{% if site.posts == empty %}
<div class="flex justify-center">
{% include alert.html type="info" message="No Posts Available" %}
</div>
{% else %}
<div class="mt-5 flex flex-col sm:flex-row gap-5 sm:*:w-1/2">
<div class="flex flex-col gap-5">
{% for post in site.posts limit: 3 %}
{% include blog-post-card.html post=post %}
{% endfor %}
</div>
<div class="flex flex-col gap-5">
{% for post in site.posts limit: 3 offset: continue %}
{% include blog-post-card.html post=post %}
{% endfor %}
</div>
</div>
{% endif %}
</section>
<!-- end Recent Posts -->
<!-- Post Series -->
<section id="series">
<div class="mx-auto bg-card border-primary/10 border-2 py-5 px-5 sm:px-0 rounded-md shadow-2xl">
<div class="mb-5 text-center">
{% include header-title.html title='Blog Series' %}
</div>
<div class="swiper series-swiper mx-auto sm:w-[95%]">
<div class="swiper-wrapper">
{% for series in site.data.blog-series %}
{% include blog-series-swiper.html series=series %}
{% endfor %}
</div>
</div>
<div class="w-full flex justify-between items-center mt-3 sm:px-4 lg:px-5">
<div class="flex">
<div class="group series-button-prev mr-3">
<i class="bi bi-arrow-left-circle text-3xl group-hover:hidden"></i>
<i class="hidden bi bi-arrow-left-circle-fill text-3xl group-hover:block"></i>
</div>
<div class="group series-button-next">
<i class="bi bi-arrow-right-circle text-3xl group-hover:hidden"></i>
<i class="hidden bi bi-arrow-right-circle-fill text-3xl group-hover:block"></i>
</div>
</div>
<a href="{{site.baseurl}}/series" class="group flex justify-center items-center text-sm hover:underline">
<span class="block mr-2">view all series</span>
<i class="bi bi-arrow-right block mt-[4px] group-hover:translate-x-2 transition-transform"></i>
</a>
</div>
</div>
</section>
<!-- end Post Series -->
</div>
</div>