About fix, blog redesign
This commit is contained in:
parent
c06e0d2547
commit
10f7a6c840
4 changed files with 59 additions and 14 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -30,6 +30,11 @@ const techologydata = [
|
|||
link: 'https://alpinelinux.org/',
|
||||
image: 'alpine-linux',
|
||||
},
|
||||
{
|
||||
title: 'Ubuntu',
|
||||
link: 'https://ubuntu.com/',
|
||||
image: 'ubuntu',
|
||||
},
|
||||
]
|
||||
|
||||
const description =
|
||||
|
|
BIN
static/technologies/ubuntu.webp
Normal file
BIN
static/technologies/ubuntu.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.9 KiB |
Loading…
Reference in a new issue