aboutsummaryrefslogtreecommitdiff
path: root/src/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/BlogListLayout.astro14
-rw-r--r--src/layouts/BlogSingleLayout.astro5
-rw-r--r--src/layouts/HomePageLayout.astro20
-rw-r--r--src/layouts/Layout.astro35
4 files changed, 29 insertions, 45 deletions
diff --git a/src/layouts/BlogListLayout.astro b/src/layouts/BlogListLayout.astro
index dbc7f34..749259e 100644
--- a/src/layouts/BlogListLayout.astro
+++ b/src/layouts/BlogListLayout.astro
@@ -248,10 +248,8 @@ const schema = {
.tags-container {
margin-bottom: 2.5rem;
- padding: 1.5rem;
background: white;
border-radius: 0.75rem;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
h2 {
font-size: 1.5rem;
@@ -278,7 +276,6 @@ const schema = {
font-weight: 600;
font-family: v.$monoFontStack;
cursor: pointer;
- transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
&:hover {
@@ -297,7 +294,6 @@ const schema = {
.post-section {
margin-bottom: 3rem;
- transition: opacity 0.3s ease;
h2 {
font-size: 1.75rem;
@@ -318,26 +314,19 @@ const schema = {
}
.post-item {
- background: white;
+ background: v.$lightAlt;
padding: 1.25rem 1.5rem;
border-radius: 0.625rem;
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
- transition: all 0.25s ease;
display: flex;
flex-direction: column;
gap: 0.5rem;
- &:hover {
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
- }
-
> a {
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
color: v.$accentDark;
box-shadow: none !important;
- transition: color 0.2s ease;
&:hover {
color: v.$accent;
@@ -372,7 +361,6 @@ const schema = {
font-family: v.$monoFontStack;
text-decoration: none;
cursor: pointer;
- transition: all 0.2s ease;
&:hover {
background-color: rgba(0, 153, 255, 0.2);
diff --git a/src/layouts/BlogSingleLayout.astro b/src/layouts/BlogSingleLayout.astro
index 3e0c616..70b62c2 100644
--- a/src/layouts/BlogSingleLayout.astro
+++ b/src/layouts/BlogSingleLayout.astro
@@ -95,11 +95,9 @@ const schema = {
small {
display: block;
- margin-bottom: 2rem;
- padding-bottom: 1.5rem;
+ margin-bottom: 1.5rem;
font-size: 0.95rem;
color: hsl(209, 20%, 50%);
- border-bottom: 2px solid rgba(0, 102, 204, 0.15);
}
time {
@@ -133,7 +131,6 @@ const schema = {
font-family: v.$monoFontStack;
text-decoration: none;
box-shadow: none !important;
- transition: all 0.2s ease;
&:hover {
background-color: rgba(0, 153, 255, 0.2);
diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index b1356ce..e18aeea 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -34,13 +34,14 @@ const schema = {
<p>
En mi blog comparto mis reflexiones, aprendizajes y experiencias sobre los
temas que me interesan, además de hablar ocasionalmente sobre tecnología y
- desarrollo. Disfruto escribiendo sobre lo que aprendo y reflexiono, pudiendo
- plasmar mis ideas de forma clara y ordenada, y compartiéndolas con el mundo.
+ desarrollo. Disfruto escribiendo sobre lo que aprendo y reflexiono,
+ pudiendo plasmar mis ideas de forma clara y ordenada, y compartiéndolas
+ con el mundo.
</p>
</div>
<hr class="section-divider" />
-
+ <h2>Entradas recientes del blog</h2>
<ul class="blog-list">
{
blogCollection.slice(0, 5).map((p) => {
@@ -93,12 +94,6 @@ const schema = {
background: $lightAlt;
padding: 1rem 1.25rem;
border-radius: 0.5rem;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
- transition: box-shadow 0.2s ease;
-
- &:hover {
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
- }
time {
display: block;
@@ -125,23 +120,22 @@ const schema = {
.cta-button {
display: inline-block;
padding: 0.75rem 1.5rem;
- background: $accent;
+ background: $accentDark;
color: white !important;
text-decoration: none;
border-radius: 0.5rem;
font-weight: 600;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
- transition: all 0.2s ease;
&:hover {
- background: $accentDark;
+ background: $accent;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
&:focus {
outline: 3px solid $secondary;
outline-offset: 2px;
- background: $accentDark !important;
+ background: $accent !important;
}
}
</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e7b84ce..9e432bb 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -107,16 +107,13 @@ const { title, description, empty } = Astro.props;
display: flex;
flex-direction: column;
- gap: 1.5rem;
- background: linear-gradient(
- to bottom,
- #f0f8ff 0%,
- #e6f3ff 6rem,
- #d9edff 12rem,
- #d9edff 88%,
- #cce5ff 100%
- );
+ background: #c3d9ff;
+ background-image:
+ radial-gradient(at 0% 0%, hsla(210,100%,90%,1) 0, transparent 50%),
+ radial-gradient(at 50% 0%, hsla(210,100%,85%,1) 0, transparent 50%),
+ radial-gradient(at 100% 0%, hsla(210,100%,80%,1) 0, transparent 50%);
+ background-attachment: fixed;
color: $dark;
line-height: 1.6;
}
@@ -154,21 +151,29 @@ const { title, description, empty } = Astro.props;
main {
box-sizing: border-box;
- margin-bottom: auto;
+ margin-top: 2rem;
+ margin-bottom: 3rem;
align-self: center;
- max-width: min(75ch, 90vw);
- font-size: 1.125rem;
+ max-width: min(900px, 95vw);
+ width: 100%;
+ font-size: 1.1rem;
- padding-block-end: 3rem;
+ padding: 2.5rem;
+ background: #ffffff;
+ border: 1px solid #b4c7e7;
+ border-radius: 12px;
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
p > code {
word-break: break-word;
font-family: $monoFontStack;
-
+ padding: 0.2rem 0.4rem;
+ border-radius: 4px;
+ border: 1px solid #ddd;
color: $accentDark;
- background-color: #f6f6f6;
+ background-color: #f8f8f8;
}
p.meta {