{
guides.map(guide => (
diff --git a/src/pages/notizie/index.astro b/src/pages/notizie/index.astro
index ce8002c..e1a0767 100644
--- a/src/pages/notizie/index.astro
+++ b/src/pages/notizie/index.astro
@@ -7,7 +7,7 @@ const news = await getCollection('news')
---
- Notizie
+
{
news.map(newsItem => (
diff --git a/src/styles/pages.scss b/src/styles/pages.scss
index 115de11..cb2ad80 100644
--- a/src/styles/pages.scss
+++ b/src/styles/pages.scss
@@ -462,6 +462,12 @@
}
.notizie {
+ h1 > a {
+ &:hover {
+ text-decoration: underline 3px solid;
+ }
+ }
+
main {
justify-self: center;
@@ -508,6 +514,12 @@
}
.guide {
+ h1 > a {
+ &:hover {
+ text-decoration: underline 3px solid;
+ }
+ }
+
main {
justify-self: center;
@@ -531,6 +543,40 @@
margin-top: 3rem;
margin-bottom: 6rem;
+ position: relative;
+
+ .metadata {
+ position: absolute;
+ top: -2px;
+ left: calc(100% + 2rem);
+ width: 15rem;
+
+ display: grid;
+ grid-auto-flow: row;
+ gap: 1rem;
+
+ justify-items: start;
+
+ .metadata-item {
+ background: var(--card-base);
+
+ display: grid;
+ grid-template-rows: auto auto;
+ justify-items: start;
+ gap: 0.25rem;
+
+ padding: 0.75rem 1rem;
+
+ @include neo-brutalist-card($size: 3px);
+
+ .tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ }
+ }
+ }
+
@media screen and (max-width: $screen-desktop-min) {
box-shadow: none;
border: none;
@@ -538,6 +584,15 @@
max-width: none;
margin: 0 auto;
+
+ .metadata {
+ position: static;
+ padding: 0;
+ width: auto;
+ margin: 0;
+
+ --card-base: color-mix(in lab, var(--guide-base), #fff 30%);
+ }
}
}
}
diff --git a/src/styles/typography.scss b/src/styles/typography.scss
index 5bcf26b..b357615 100644
--- a/src/styles/typography.scss
+++ b/src/styles/typography.scss
@@ -194,6 +194,11 @@
ol,
ul {
margin-bottom: var(--paragraph-margin, 1rem);
+ padding-left: 1.5rem;
+
+ p {
+ --paragraph-margin: 0.5rem;
+ }
}
a,
@@ -218,6 +223,14 @@
}
}
+ hr {
+ max-width: calc(100vw - 4rem);
+ width: 40ch;
+ margin: 3rem auto 2.75rem;
+ border: none;
+ border-top: 2px solid #0003;
+ }
+
@media screen and (max-width: $screen-desktop-min) {
& > * {
margin: 0 0.75rem;