About fix, blog redesign

This commit is contained in:
Firq 2023-03-14 20:34:51 +01:00
parent c06e0d2547
commit 10f7a6c840
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
4 changed files with 59 additions and 14 deletions

View file

@ -25,28 +25,29 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
<style>
a {
display: flex;
text-decoration: none;
height: auto;
margin: 0.5rem;
width: 100%;
}
p {
color: white;
padding: 0em 0.5em;
text-align: left;
font-size: 1.1em;
margin: 0.5em;
}
article > h2 {
margin: 0.3em 0px;
margin: 0.3rem 0.5rem;
color: var(--c-darkpurple);
font-size: 1.3em;
font-size: 1.5rem;
line-height: normal;
text-decoration: none;
}
article > h3 {
margin: 0.2em;
margin: 0.2em 0.5rem;
color: white;
font-size: 0.8em;
font-size: 1rem;
line-height: normal;
text-decoration: none;
}
@ -55,17 +56,16 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
flex: 1;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
align-items: flex-start;
align-content: flex-start;
justify-content: baseline;
justify-content: center;
background-color: var(--c-darkergray);
padding: 10px;
text-align: center;
transition: transform var(--speed) var(--ease);
min-height: 100%;
width: 11rem;
}
a:hover {
transform: scale(var(--hover-scale));
transform: scale(102%);
}
</style>

View file

@ -8,12 +8,43 @@ const { title } = Astro.props
<section>
<h1>{title}</h1>
<div>
<div class="holder">
<div class="line"></div>
<slot />
<div class="circle"></div>
</div>
</section>
<style>
.circle {
display: flex;
position: absolute;
visibility: visible;
left: 0;
right: 0;
bottom: -20%;
margin-left: auto;
margin-right: auto;
height: 1.5rem;
width: 1.5rem;
border-radius: 0% 50% 50% 50%;
transform: rotate(45deg);
background-color: var(--c-darkpurple);
}
.line {
display: flex;
position: absolute;
visibility: visible;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background-color: var(--c-darkpurple);
height: 120%;
translate: 0% 7.5%;
width: 0.25rem;
z-index: -1;
}
h1 {
color: white;
margin: 0.5rem 0px 0.5rem 0.5em;
@ -21,9 +52,10 @@ const { title } = Astro.props
width: max-content;
background-color: var(--c-darkgray);
}
div {
.holder {
margin: 2rem 3rem 0.5rem 3rem;
display: flex;
flex-flow: row wrap;
flex-flow: column wrap;
row-gap: 1em;
column-gap: 1em;
align-self: center;
@ -32,10 +64,18 @@ const { title } = Astro.props
padding: 1em;
color: white;
font-size: 1em;
position: relative;
}
@media (min-width: 512px) {
div {
justify-content: left;
}
@media (min-width: 1500px) {
.holder {
margin-left: 15rem;
margin-right: 15rem;
}
h1 {
margin-left: 15rem;
margin-right: 15rem;
}
}
</style>

View file

@ -30,6 +30,11 @@ const techologydata = [
link: 'https://alpinelinux.org/',
image: 'alpine-linux',
},
{
title: 'Ubuntu',
link: 'https://ubuntu.com/',
image: 'ubuntu',
},
]
const description =

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB