Blog style updated
This commit is contained in:
parent
247f07a4e5
commit
cd294ddfb2
2 changed files with 39 additions and 1 deletions
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue