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>
|
<style>
|
||||||
a {
|
a {
|
||||||
|
display: flex;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0em 0.5em;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
}
|
}
|
||||||
article > h2 {
|
article > h2 {
|
||||||
margin: 0.3em 0px;
|
margin: 0.3rem 0.5rem;
|
||||||
color: var(--c-darkpurple);
|
color: var(--c-darkpurple);
|
||||||
font-size: 1.3em;
|
font-size: 1.5rem;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
article > h3 {
|
article > h3 {
|
||||||
margin: 0.2em;
|
margin: 0.2em 0.5rem;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 0.8em;
|
font-size: 1rem;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
@ -55,17 +56,16 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
|
||||||
flex: 1;
|
flex: 1;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
align-content: flex-start;
|
align-content: flex-start;
|
||||||
justify-content: baseline;
|
justify-content: center;
|
||||||
background-color: var(--c-darkergray);
|
background-color: var(--c-darkergray);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: transform var(--speed) var(--ease);
|
transition: transform var(--speed) var(--ease);
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
width: 11rem;
|
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
transform: scale(var(--hover-scale));
|
transform: scale(102%);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -8,12 +8,43 @@ const { title } = Astro.props
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
<div>
|
<div class="holder">
|
||||||
|
<div class="line"></div>
|
||||||
<slot />
|
<slot />
|
||||||
|
<div class="circle"></div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<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 {
|
h1 {
|
||||||
color: white;
|
color: white;
|
||||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||||
|
@ -21,9 +52,10 @@ const { title } = Astro.props
|
||||||
width: max-content;
|
width: max-content;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
}
|
}
|
||||||
div {
|
.holder {
|
||||||
|
margin: 2rem 3rem 0.5rem 3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: column wrap;
|
||||||
row-gap: 1em;
|
row-gap: 1em;
|
||||||
column-gap: 1em;
|
column-gap: 1em;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
@ -32,10 +64,18 @@ const { title } = Astro.props
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
@media (min-width: 512px) {
|
@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>
|
</style>
|
||||||
|
|
|
@ -30,6 +30,11 @@ const techologydata = [
|
||||||
link: 'https://alpinelinux.org/',
|
link: 'https://alpinelinux.org/',
|
||||||
image: 'alpine-linux',
|
image: 'alpine-linux',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Ubuntu',
|
||||||
|
link: 'https://ubuntu.com/',
|
||||||
|
image: 'ubuntu',
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const description =
|
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