Styling & content

This commit is contained in:
tsmitty11 2023-05-18 17:08:07 +02:00
parent fb1cae2401
commit 19f3806803
3 changed files with 107 additions and 70 deletions

View file

@ -7,7 +7,7 @@
{{ partial "navbar.html" . }} {{ partial "navbar.html" . }}
<main> <main>
<section class="teal-bg"> <section class="teal-bg">
<div class="container one-box"> <div class="container one-box">
<div class="row"> <div class="row">
@ -35,7 +35,8 @@
<a href="{{ .RelPermalink }}"><h3>{{ .Title }}</h3></a> <a href="{{ .RelPermalink }}"><h3>{{ .Title }}</h3></a>
<span class="grid-gray small">Published: {{ .Date.Format "02/01/2006" }}</span><br> <span class="grid-gray small">Published: {{ .Date.Format "02/01/2006" }}</span><br>
<span class="grid-gray small">Categories: {{ range .Params.categories }}<a class="grid-gray" href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>, {{ end }}</span> <span class="grid-gray small">Categories: {{ range .Params.categories }}<a class="grid-gray" href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>, {{ end }}</span>
<span class="preview-content small mt-2">{{ .Content }}</span> <span class="preview-content small mt-2">{{ trim .Summary 5 | plainify }}</span>
<a class="read-more" href="{{ .RelPermalink }}">Read More</a>
</div> </div>
</div> </div>
</a> </a>
@ -48,49 +49,73 @@
</div> </div>
</div> </div>
</main> </main>
<footer> <footer>
{{- partial "footer-content.html" . -}} {{- partial "footer-content.html" . -}}
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
</footer> </footer>
</body> </body>
<style> <style>
.preview-content{ .preview-content {
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 3; -webkit-line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} text-overflow: ellipsis;
color: #fff;
}
.featured-image { .featured-image {
width: 100%; width: 100%;
height: 100px; height: 100px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.blog-listing{ .blog-listing {
border: 1px solid #949494; border: 1px solid #949494;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
display: flex;
flex-direction: column;
min-height: 400px; min-height: 400px;
} }
.blog-listing:hover{ .content-wrapper {
flex-grow: 1;
}
.blog-col {
display: flex;
}
.blog-listing:hover {
background-color: #252525 !important; background-color: #252525 !important;
} }
h3{ h3 {
font-size: 28px; font-size: 28px;
line-height: 34px; line-height: 34px;
} }
p{ p {
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
} }
.read-more {
display: block;
margin-top: 10px;
font-size: 14px;
color: #00ffd0;
text-align: left;
}
.read-more:hover{
color: #e1e1e1;
}
.sidebar { .sidebar {
flex: 0 0 30%; flex: 0 0 30%;

View file

@ -50,4 +50,8 @@
img{ img{
max-width: 100%; max-width: 100%;
} }
code{
color:#ff7ba7;
}
</style> </style>

View file

@ -35,4 +35,12 @@
line-height:12px; line-height:12px;
} }
.sidebar-list a{
color: #fff;
}
.sidebar-list a:hover{
color: #00ffd0;
}
</style> </style>