Blog style updated

This commit is contained in:
Firq 2023-03-15 00:58:54 +01:00
parent 247f07a4e5
commit cd294ddfb2
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
2 changed files with 39 additions and 1 deletions

View file

@ -16,6 +16,7 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
--- ---
<a href={url} rel="noopener noreferrer"> <a href={url} rel="noopener noreferrer">
<div class="circle"></div>
<article> <article>
<h2>{title}</h2> <h2>{title}</h2>
<h3>{date}</h3> <h3>{date}</h3>
@ -24,7 +25,38 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
</a> </a>
<style> <style>
.circle {
display: none;
}
@media (min-width: 900px) {
.circle {
margin: 1rem 1rem 1rem 0rem;
position: relative;
display: flex;
visibility: visible;
height: 1.5rem;
width: 1.5rem;
border-radius: 50%;
background-color: var(--c-darkpurple);
}
a:hover > .circle {
translate: -3px 0%;
border-radius: 50% 0% 0% 50%;
transform: none;
}
}
@media (min-width: 1200px) {
a:hover > .circle {
translate: 0px 0%;
transform: none;
}
}
a { a {
align-items: center;
justify-content: center;
display: flex; display: flex;
text-decoration: none; text-decoration: none;
height: auto; height: auto;

View file

@ -67,7 +67,13 @@ const { title } = Astro.props
font-size: 1em; font-size: 1em;
position: relative; position: relative;
} }
@media (min-width: 512px) { @media (min-width: 900px) {
.drop {
margin-left: 1.5rem;
}
.line {
margin-left: 2.1rem;
}
} }
@media (min-width: 1500px) { @media (min-width: 1500px) {
.wrapper { .wrapper {