maciejpedzich/maciejpedzi.ch
1
0
Fork 0
mirror of https://github.com/maciejpedzich/maciejpedzi.ch.git synced 2024-11-27 23:55:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add global styling for post list and article links

Browse Source
This commit is contained in:
Maciej Pędzich 2023-04-27 08:48:05 +02:00
parent 550f361792
commit e97a8217bd
3 changed files with 133 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/blog/index.astro
View File

@ -26,11 +26,10 @@ const posts = (
<main> <main>
<section> <section>
<h2>My blog</h2> <h2>My blog</h2>
<ul> <ul class="post-list">
{ {
posts.map((post) => ( posts.map((post) => (
<li> <li>
<FormattedDate date={post.data.pubDate} />
<a href={`/blog/${post.slug}/`}>{post.data.title}</a> <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
</li> </li>
)) ))

100
src/pages/index.astro
View File

@ -14,50 +14,55 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
<body> <body>
<Header title={SITE_TITLE} /> <Header title={SITE_TITLE} />
<main> <main>
<h2>Welcome to my website!</h2> <section>
<p> <h2>Welcome to my website</h2>
My name is <strong>Maciej</strong>, but if you don't know how to <p>
pronounce it, then you can call me <strong>Mac</strong>. I'm an My name is <strong>Maciej</strong>, but if you're not sure how to
eighteen-year-old frontend developer from <strong>Poland</strong>. pronounce it, then you can call me <strong>Mac</strong>. I'm an
Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for eighteen-year-old frontend developer from <strong>Poland</strong>.
my projects, I'm also familiar with <strong>Alpine</strong> and <strong Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for
>Astro</strong my projects, I'm also familiar with <strong>Alpine</strong> and <strong
>. >Astro</strong
</p> >.
<h3>My blog</h3> </p>
<p> </section>
It serves as a means of documenting the development process and inner <section>
workings of <a href="/projects">my applications</a>. Check out my latest <h3>My blog</h3>
posts below: <p>
</p> It serves as a means of documenting the development process and inner
<ul> workings of <a href="/projects">my applications</a>. Check out the
<li> latest posts below:
<FormattedDate date={new Date()} /> </p>
<a href="#">Lorem Ipsum</a> <ul class="post-list">
</li> <li>
<li> <a href="#">This link leads nowhere</a>
<FormattedDate date={new Date()} /> </li>
<a href="#">Lorem Ipsum</a> <li>
</li> <a href="#"
<li> >And so does this one. But why is that, some of you may ask</a
<FormattedDate date={new Date()} /> >
<a href="#">Lorem Ipsum</a> </li>
</li> <li>
</ul> <a href="#">The answer is simple. They're placeholders</a>
<h3>Enjoy my work?</h3> </li>
<p> </ul>
If so, then make sure to follow me on <a </section>
href="https://github.com/maciejpedzich" <section>
target="_blank" <h3>Enjoy my work?</h3>
rel="noopener noreferrer">GitHub</a <p>
>, <a If so, make sure to follow me on <a
href="https://twitter.com/MaciejPedzich" href="https://github.com/maciejpedzich"
target="_blank" target="_blank"
rel="noopener noreferrer">Twitter</a rel="noopener noreferrer">GitHub</a
>, or <a rel="me" href="https://notacult.social/@macindahaus" >, <a
>Mastodon</a href="https://twitter.com/MaciejPedzich"
>. target="_blank"
</p> rel="noopener noreferrer">Twitter</a
>, or <a rel="me" href="https://notacult.social/@macindahaus"
>Mastodon</a
>.
</p>
</section>
</main> </main>
<Footer /> <Footer />
<style> <style>
@ -65,9 +70,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
text-align: center; text-align: center;
} }
h2, section {
h3 { margin-bottom: 1.25rem;
text-transform: none;
} }
h3 { h3 {
@ -75,7 +79,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
} }
p { p {
margin: 0.5rem 0 1rem 0; margin: 0 0 1rem 0;
} }
</style> </style>
</body> </body>

100
src/styles/global.css
View File

@ -4,19 +4,24 @@
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/ */
body { body {
margin: 0 auto;
padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: min(65ch, 90%); max-width: min(65ch, 90%);
height: 100vh; height: 100vh;
line-height: 1.8;
font-size: 1rem;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
padding: 0;
background-color: #485870; background-color: #485870;
color: #fff; color: #fff;
text-align: left; text-align: left;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
line-height: 1.8; }
main {
flex: 1 1 auto;
} }
h1, h1,
@ -34,7 +39,7 @@ a:visited {
a:hover, a:hover,
a:active { a:active {
color: rgba(255, 255, 255, 0.4); color: #bbb;
} }
a:focus { a:focus {
@ -46,30 +51,22 @@ p {
text-align: left; text-align: left;
} }
main {
flex: 1 1 auto;
}
a:visited { a:visited {
color: unset; color: unset;
} }
ul { ul {
list-style-type: none; list-style: none;
padding: unset;
} }
ul li { ul li {
display: flex; text-align: left;
justify-content: center;
} }
ul li::before { li::before {
content: '-'; content: '\25A1';
} font-size: 1.2em;
margin-right: 3px;
ul li time {
flex: 0 0 112px;
} }
textarea { textarea {
@ -131,7 +128,7 @@ h1.cmr2-text {
.cmr2-text > span, .cmr2-text > span,
.cmr2-text > a { .cmr2-text > a {
border-left-width: 0.05em; border-left-width: 1px;
border-left-style: solid; border-left-style: solid;
text-align: center; text-align: center;
} }
@ -149,7 +146,7 @@ h1.cmr2-text {
} }
.cmr2-text > a { .cmr2-text > a {
padding: 0.05em 0.7em; padding: 0 0.7em;
} }
.cmr2-text > span:first-of-type, .cmr2-text > span:first-of-type,
@ -161,3 +158,66 @@ h1.cmr2-text {
.cmr2-text > a:focus { .cmr2-text > a:focus {
color: #fff; color: #fff;
} }
/* The following styling rules have been adopted from: https://github.com/codrops/LineHoverStyles/ */
.post-list a {
position: relative;
outline: none;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
}
.post-list a:focus {
outline: 2px solid #bbb;
outline-offset: 3px;
}
.post-list a:focus:not(:focus-visible) {
background: transparent;
}
a:focus-visible {
outline: 2px solid #bbb;
outline-offset: 3px;
background: transparent;
}
.post-list a:hover {
outline: none;
color: #bbb;
}
.post-list a::before,
.post-list a::after {
position: absolute;
width: 100%;
height: 1px;
background: currentColor;
top: 100%;
left: 0;
pointer-events: none;
}
.post-list a::before {
content: '';
transform-origin: 0% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s;
}
.post-list a:hover::before {
transform: scale3d(1, 1, 1);
}
.post-list a::after {
content: '';
top: calc(100% + 4px);
transition: transform 0.3s;
transform-origin: 100% 50%;
}
.post-list a:hover::after {
transform: scale3d(0, 1, 1);
}