Skip to content

Commit 86b585d

Browse files
author
Ankita Yadav
committed
added card section
1 parent c39cf97 commit 86b585d

File tree

9 files changed

+234
-5
lines changed

9 files changed

+234
-5
lines changed

‎themes/egghead-theme/_config.yml‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,11 @@ favicon: /img/favicon.ico
1818
email: [email protected]
1919

2020
# copyright start year
21-
since_year: 2018
21+
since_year: 2018
22+
23+
# atricle truncation
24+
excerpt_render: true
25+
excerpt_length: 150
26+
excerpt_link: Read more...
27+
mathjax: true
28+
archive_yearly: true

‎themes/egghead-theme/layout/_partial/article-excerpt.ejs‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<div class="post" id="post" class="post-stub" onclick="location.href=' <%= theme.excerpt_link %>';">
2+
3+
<!-- Title -->
4+
5+
<div id="post" class="post-stub" onclick="location.href=' <%= theme.excerpt_link %>';" onclick="hide()">
6+
<img class="post-img" src="<%- theme.avatar %>" alt="">
7+
<h2 class="post-title">
8+
<a href="<%- config.root %><%- item.path %>" class="post-title-h2 ">
9+
<%- item.title %>
10+
</a>
11+
</h2>
12+
<div class="date-tag">
13+
<!-- Date and Author -->
14+
<p class="post-meta" style="width: 140px;">
15+
<%= item.date.format(config.date_format) %>
16+
17+
18+
</p>
19+
<div class="tags">
20+
<a href="https://chetansachdev.com/tags/js/" class="button-js"><% if(item.author) { %>
21+
<%- item.author %>
22+
<% } %></a>
23+
</div>
24+
</div>
25+
26+
</div>
27+
28+
<!-- Content -->
29+
<%#- item.excerpt || item.content %>
30+
   
31+
<!-- Only display the Read More link if we are displaying an excerpt-->
32+
<% if(item.excerpt) { %>
33+
<p>
34+
<a href="<%- config.root %><%- item.path %>">
35+
<%= theme.excerpt_link %>
36+
</a>
37+
</p>
38+
<% } %>
39+
<script>
40+
function hide(){
41+
42+
}
43+
</script>
44+
</div>

‎themes/egghead-theme/layout/_partial/article.ejs‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div class="content-post ">
2+
3+
<div class="post-header">
4+
<!-- Title -->
5+
<h2 class="content-post-title ">
6+
<a href="<%- config.root %><%- item.path %>">
7+
<%- item.title || item.link%>
8+
</a>
9+
</h2>
10+
<!-- Date and Author -->
11+
<p class="content-post-meta">Published on
12+
<%= item.date.format(config.date_format) %>
13+
<% if(item.author) { %>
14+
by <%- item.author %>
15+
<% } %>
16+
</p>
17+
</div>
18+
19+
<!-- Content -->
20+
<div class="item-content " >
21+
<%- item.content %>
22+
</div>
23+
<!-- Tags and Categories links -->
24+
<%- partial('article-tags', {item: item}) %>
25+
<%- partial('article-categories', {item: item}) %>
26+
<section class="comments" id="comments">
27+
<div id="disqus_thread"></div>
28+
<script>
29+
var disqus_shortname = 'chetansachdev';
30+
lazyScripts.push('//' + disqus_shortname + '.disqus.com/embed.js')
31+
</script>
32+
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
33+
</section>
34+
35+
</div>

‎themes/egghead-theme/layout/_partial/header.ejs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<div class="flex">
44
<a class="" href="#">
55
<span class="flex">
6-
<img class="h-8 w-8" src="/img/favicon.ico" alt="">
7-
<p class="align-middle font-extrabold text-xl ml-1">chetansachdev.com</p>
6+
<!-- <img class="h-8 w-8" src="/img/favicon.ico" alt=""> -->
7+
<p class="align-middle font-extrabold text-xl ml-1">🌱chetansachdev.com</p>
88
</span>
99
</a>
1010
<a class="align-middle text-sm mt-1 mx-6" href="<%- url_for(page.title) %> "> <span class="text-gray-600">〈/〉</span> <%- theme.menu.topics.text %> </a>

‎themes/egghead-theme/layout/index.ejs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<%
2+
var posts = [];
3+
page.posts.each(function(item){ %>
4+
<%- partial('_partial/article-excerpt', {item: item}) %>
5+
<% }); %>
6+
7+
<% page.posts.each(function(item){ %>
8+
<%- partial('_partial/article-excerpt', {item: item}) %>
9+
<% }); %>

‎themes/egghead-theme/layout/layout.ejs‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,29 @@
99
<%- partial('_partial/header') %>
1010
<%- partial('_partial/search-bar') %>
1111
<%- partial('_partial/intro') %>
12+
<div class="card-container">
13+
<div class="main-head-container">
14+
<div class="main-head">
15+
<span class="main-head-s1">What's New</span>
16+
<span class="main-head-s2">Latest published posts</span>
17+
</div>
18+
<div>
19+
<button class="Browse-all">browse all <span> ▸</span>
20+
21+
</button>
22+
</div>
23+
24+
</div>
25+
<div class="post-container">
26+
<%- body %>
27+
</div>
28+
</div>
1229
</div>
30+
</section>
31+
</div>
32+
<div>
1333

14-
</section>
1534
</div>
16-
<div></div>
1735
</div>
1836
</body>
1937
</html>

‎themes/egghead-theme/layout/page.ejs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<%- partial('_partial/article', {item: page}) %>

‎themes/egghead-theme/layout/post.ejs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<%- partial('_partial/article', {item: page}) %>

‎themes/egghead-theme/source/css/style.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,118 @@ body{
8080
-moz-border-radius: 100%;
8181
-ms-border-radius: 100%;
8282
-o-border-radius: 100%;
83+
}
84+
.card-container{
85+
background-color: #f4f7f9;
86+
padding-top: 64px;
87+
padding-bottom: 64px;
88+
}
89+
.main-head{
90+
display: flex;
91+
flex-direction: column;
92+
}
93+
.main-head-container{
94+
display: flex;
95+
justify-content: space-between;
96+
margin: 0 40px 0 40px;
97+
}
98+
.main-head-s1{
99+
color: #141618;
100+
font-size: 2.25rem;
101+
font-weight: 400;
102+
}
103+
.main-head-s2{
104+
color: rgba(0,0,0,.6);
105+
font-size: 1rem;
106+
font-weight: 400;
107+
}
108+
.Browse-all{
109+
background-color: #316aff;
110+
border-color: #316aff;
111+
font-size: .875rem;
112+
font-weight: 500;
113+
border-width: 1px;
114+
text-transform: uppercase;
115+
justify-content: center;
116+
align-items: center;
117+
padding: 16px 24px;
118+
transition: all .1s ease-in-out;
119+
color:#fff;
120+
border-radius: 0.5rem;
121+
-webkit-border-radius: 0.5rem;
122+
-moz-border-radius: 0.5rem;
123+
-ms-border-radius: 0.5rem;
124+
-o-border-radius: 0.5rem;
125+
}
126+
.post-container{
127+
margin:48px 40px 0 40px;
128+
display: grid;
129+
grid-template-columns: 383px 383px 383px;
130+
grid-template-rows: 480px 480px 480px;
131+
gap: 30px;
132+
133+
134+
}
135+
.post-stub{
136+
background-color: #fff;
137+
text-align: center;
138+
width: 383px;
139+
height: 480px;
140+
141+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
142+
border-radius: 0.5rem;
143+
-webkit-border-radius: 0.5rem;
144+
-moz-border-radius: 0.5rem;
145+
-ms-border-radius: 0.5rem;
146+
-o-border-radius: 0.5rem;
147+
}
148+
.post-title-h2, .button-js {
149+
text-decoration: none;
150+
}
151+
.date-tag{
152+
display: flex;
153+
justify-content: space-between;
154+
align-items: flex-end;
155+
margin: 50px 0px 0 0px;
156+
}
157+
.tags{
158+
font-size: 14px;
159+
border-radius: 0.2rem;
160+
margin-top: 8px;
161+
width: 80px;
162+
height: 25px;
163+
text-align: center;
164+
background-color: #316aff;
165+
margin-right: 20px;
166+
padding:8px 10px 8px 10px;
167+
-webkit-border-radius: 0.2rem;
168+
-moz-border-radius: 0.2rem;
169+
-ms-border-radius: 0.2rem;
170+
-o-border-radius: 0.2rem;
171+
}
172+
.button-js{
173+
text-align: center;
174+
font-weight: 700;
175+
height: 20px;
176+
color:#fff;
177+
padding:px 10px 8px 10px;
178+
}
179+
.post-meta{
180+
align-self: flex-end;
181+
}
182+
.post-img{
183+
width: 230px;
184+
height: 230px;
185+
margin-top: 48px;
186+
border-radius: 9999px;
187+
-webkit-border-radius: 9999px;
188+
-moz-border-radius: 9999px;
189+
-ms-border-radius: 9999px;
190+
-o-border-radius: 9999px;
191+
}
192+
.post-title-h2{
193+
height: 56px;
194+
color: #141618;
195+
font-size: 22px;
196+
font-weight: 400;
83197
}

0 commit comments

Comments
 (0)