From 13b18eaa51691501eea9bea72dc7d5e2ee8e663b Mon Sep 17 00:00:00 2001 From: Segundo Fdez Date: Mon, 7 Mar 2022 22:33:31 +0100 Subject: [PATCH] improve archive layout, home and pagination. Also add some extra space in posts --- ...s_abdeb689137b085b8cf50bb0fe96e360.content | 88 +++++++++++++++++-- src/themes/oscar/assets/css/common.css | 12 +-- src/themes/oscar/assets/css/main.css | 1 + .../oscar/assets/css/modules/header.css | 31 +++++++ .../oscar/assets/css/modules/pagination.css | 15 ++++ src/themes/oscar/assets/css/modules/posts.css | 35 ++++++++ src/themes/oscar/assets/css/variables.css | 2 + src/themes/oscar/layouts/index.html | 15 +++- src/themes/oscar/layouts/partials/header.html | 4 +- .../oscar/layouts/partials/pagination.html | 4 +- .../layouts/partials/posts/pagination.html | 6 +- .../oscar/layouts/sections/archive.html | 17 ++-- 12 files changed, 200 insertions(+), 30 deletions(-) create mode 100644 src/themes/oscar/assets/css/modules/pagination.css diff --git a/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content index 6f316bf..255cc7c 100644 --- a/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content +++ b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content @@ -295,6 +295,7 @@ template { ========================================================================== */ --background-main: #F0F0F0; --color-main: #292929; + --color-main-dark: #3d3d3d; --color-main-medium: #535353; --color-link: #0161f0; --color-link-hover:#575757; @@ -341,6 +342,7 @@ template { --background-main: #292929; --color-main: #F0F0F0; --color-main-medium: #a3a3a3; + --color-main-dark: #4e4e4e; --color-link: #02A4FF; --color-link-hover:#9e9e9e; } @@ -360,13 +362,13 @@ body { background-color: var(--background-main); color: var(--color-main); } -body a { - color: var(--color-link); - text-decoration: none; +a { + color: var(--color-link); + text-decoration: none; +} +a:hover { + color: var(--color-link-hover); } -body a:hover { - color: var(--color-link-hover); - } h1, h2, h3, h4, h5, h6, b, strong { font-weight: var(--fw-bold); @@ -424,6 +426,34 @@ i, em { display: flex; gap: var(--spacing-2); } +.main-nav a.is-active { + color: var(--color-main); + border-bottom: 1px solid var(--color-main); + } +/* promo hero */ +.hero .is-active, + .hero div { + display: none; + } +.hero .hero-title { + font: var(--font-title); + color: var(--color-main); + margin-bottom: calc(var(--spacing-8) * 2); + } +.hero .hero-img { + display: inline-block; + width: 100%; + height: 100%; + max-width: 250px; + background-color: var(--color-link); + border-radius: 50%; + aspect-ratio: 1; + overflow: hidden; + } +.hero .hero-img img { + width: 100%; + mix-blend-mode: overlay; + } /* POST LIST */ .posts-container { } @@ -492,6 +522,52 @@ i, em { font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4)); margin-bottom: 0; } +.post-detail p, .post-detail li { + margin-bottom: var(--spacing-3); + } +/* Archive */ +.post h2 { + font: var(--font-heading); + margin: 0; + display: flex; + aling-items: center; + border-bottom: 1px solid var(--color-main-dark); + padding-bottom: var(--spacing-1); + } +.post h2 span { + font: var(--font-heading); + color: var(--color-main-medium); + vertical-align: middle; + } +.post h2 span:first-child { + margin-right: var(--spacing-2); + color: var(--color-main); + } +.post h2:first-child { + margin-top: var(--spacing-7); + } +.post ul { + padding-left: 1rem; + } +.post ul:not(:last-child) { + margin-bottom: var(--spacing-6); + + } +.pagination { + border-top: 1px solid var(--color-main-medium); + border-bottom: 1px solid var(--color-main-medium); + padding-block: var(--spacing-3); + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--spacing-3); +} +.pagination a { + font: var(--font-heading); + } +.pagination span { + font: var(--font-body); + } .footer { padding: var(--spacing-6) var(--spacing-3); font: var(--font-caption); diff --git a/src/themes/oscar/assets/css/common.css b/src/themes/oscar/assets/css/common.css index bc748de..a38125c 100644 --- a/src/themes/oscar/assets/css/common.css +++ b/src/themes/oscar/assets/css/common.css @@ -10,12 +10,12 @@ body { text-rendering: auto; background-color: var(--background-main); color: var(--color-main); - a { - color: var(--color-link); - text-decoration: none; - &:hover { - color: var(--color-link-hover); - } +} +a { + color: var(--color-link); + text-decoration: none; + &:hover { + color: var(--color-link-hover); } } h1, h2, h3, h4, h5, h6, diff --git a/src/themes/oscar/assets/css/main.css b/src/themes/oscar/assets/css/main.css index c0c0169..ce54f0c 100644 --- a/src/themes/oscar/assets/css/main.css +++ b/src/themes/oscar/assets/css/main.css @@ -11,6 +11,7 @@ /* Modules */ @import 'assets/css/modules/header.css'; @import 'assets/css/modules/posts.css'; +@import 'assets/css/modules/pagination.css'; @import 'assets/css/modules/footer.css'; /* Specific pages */ diff --git a/src/themes/oscar/assets/css/modules/header.css b/src/themes/oscar/assets/css/modules/header.css index b0f7e68..a59cb4f 100644 --- a/src/themes/oscar/assets/css/modules/header.css +++ b/src/themes/oscar/assets/css/modules/header.css @@ -29,4 +29,35 @@ display: flex; gap: var(--spacing-2); } + a.is-active { + color: var(--color-main); + border-bottom: 1px solid var(--color-main); + } +} + +/* promo hero */ +.hero { + .is-active, + div { + display: none; + } + .hero-title { + font: var(--font-title); + color: var(--color-main); + margin-bottom: calc(var(--spacing-8) * 2); + } + .hero-img { + display: inline-block; + width: 100%; + height: 100%; + max-width: 250px; + background-color: var(--color-link); + border-radius: 50%; + aspect-ratio: 1; + overflow: hidden; + img { + width: 100%; + mix-blend-mode: overlay; + } + } } diff --git a/src/themes/oscar/assets/css/modules/pagination.css b/src/themes/oscar/assets/css/modules/pagination.css new file mode 100644 index 0000000..388aee5 --- /dev/null +++ b/src/themes/oscar/assets/css/modules/pagination.css @@ -0,0 +1,15 @@ +.pagination { + border-top: 1px solid var(--color-main-medium); + border-bottom: 1px solid var(--color-main-medium); + padding-block: var(--spacing-3); + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--spacing-3); + a { + font: var(--font-heading); + } + span { + font: var(--font-body); + } +} \ No newline at end of file diff --git a/src/themes/oscar/assets/css/modules/posts.css b/src/themes/oscar/assets/css/modules/posts.css index 4d5889d..f7669ca 100644 --- a/src/themes/oscar/assets/css/modules/posts.css +++ b/src/themes/oscar/assets/css/modules/posts.css @@ -5,6 +5,7 @@ .post-item { display: block; margin-bottom: var(--spacing-7); + &::after { display: block; content: ""; @@ -69,4 +70,38 @@ font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4)); margin-bottom: 0; } + p, li { + margin-bottom: var(--spacing-3); + } +} + +/* Archive */ +.post { + h2 { + font: var(--font-heading); + margin: 0; + display: flex; + aling-items: center; + border-bottom: 1px solid var(--color-main-dark); + padding-bottom: var(--spacing-1); + span { + font: var(--font-heading); + color: var(--color-main-medium); + vertical-align: middle; + &:first-child { + margin-right: var(--spacing-2); + color: var(--color-main); + } + } + &:first-child { + margin-top: var(--spacing-7); + } + } + ul { + padding-left: 1rem; + &:not(:last-child) { + margin-bottom: var(--spacing-6); + + } + } } \ No newline at end of file diff --git a/src/themes/oscar/assets/css/variables.css b/src/themes/oscar/assets/css/variables.css index 4ded575..0c3db86 100644 --- a/src/themes/oscar/assets/css/variables.css +++ b/src/themes/oscar/assets/css/variables.css @@ -17,6 +17,7 @@ ========================================================================== */ --background-main: #F0F0F0; --color-main: #292929; + --color-main-dark: #3d3d3d; --color-main-medium: #535353; --color-link: #0161f0; --color-link-hover:#575757; @@ -65,6 +66,7 @@ --background-main: #292929; --color-main: #F0F0F0; --color-main-medium: #a3a3a3; + --color-main-dark: #4e4e4e; --color-link: #02A4FF; --color-link-hover:#9e9e9e; } diff --git a/src/themes/oscar/layouts/index.html b/src/themes/oscar/layouts/index.html index cc574f1..8c1f0ad 100644 --- a/src/themes/oscar/layouts/index.html +++ b/src/themes/oscar/layouts/index.html @@ -4,7 +4,7 @@
{{ range (where .Site.Pages "Type" "heros") }} -
+
{{ if .Params.link }}{{ end }} {{ if .Params.image }} {{ end }}
{{ end }} + + + {{ range (where .Site.Pages "Type" "heros") }} + {{ if .Params.image }} +
+ {{ .Content | plainify | htmlUnescape | truncate 10 }} +
+ {{ end }} + {{ end }} +

Este es el primer texto dinámico del hero y mejor con el enlace a twich aquí, no global ⚡.

+
@@ -25,3 +37,4 @@ {{ end }} + diff --git a/src/themes/oscar/layouts/partials/header.html b/src/themes/oscar/layouts/partials/header.html index 41c41f4..82b685b 100644 --- a/src/themes/oscar/layouts/partials/header.html +++ b/src/themes/oscar/layouts/partials/header.html @@ -15,9 +15,9 @@ {{ $currentPage := . }} {{ range .Site.Menus.main }}
  • - + {{ .Pre }} - {{ .Name }} + {{ .Name }} {{ .Post }}
    • diff --git a/src/themes/oscar/layouts/partials/pagination.html b/src/themes/oscar/layouts/partials/pagination.html index a22f5ce..13ac081 100644 --- a/src/themes/oscar/layouts/partials/pagination.html +++ b/src/themes/oscar/layouts/partials/pagination.html @@ -1,7 +1,7 @@ {{ if .Paginator.HasPrev }} - + {{ end }} {{ .Paginator.PageNumber }} {{ if .Paginator.HasNext }} - + {{ end }} diff --git a/src/themes/oscar/layouts/partials/posts/pagination.html b/src/themes/oscar/layouts/partials/posts/pagination.html index 0a36333..cdbdf62 100644 --- a/src/themes/oscar/layouts/partials/posts/pagination.html +++ b/src/themes/oscar/layouts/partials/posts/pagination.html @@ -1,7 +1,7 @@ {{- if .NextInSection }} - ← {{ .NextInSection.Title }} + ⇠ {{ .NextInSection.Title }} {{- end }} {{- if .PrevInSection }} - | {{ .PrevInSection.Title }} → - {{- end }} + | {{ .PrevInSection.Title }} ⇢ + {{- end }} \ No newline at end of file diff --git a/src/themes/oscar/layouts/sections/archive.html b/src/themes/oscar/layouts/sections/archive.html index 77eeb88..f8424cf 100644 --- a/src/themes/oscar/layouts/sections/archive.html +++ b/src/themes/oscar/layouts/sections/archive.html @@ -2,18 +2,15 @@

    Archive

    + {{ .Content }}
    - - {{ .Content }} - {{ range (where .Site.RegularPages "Type" "posts").GroupByDate "2006" }} -

    {{ .Key }}

    -

    {{ len .Pages }} posts

    -
      - {{ range .Pages }} -
    • {{ .Title }} - {{ .Date.Format "January 2" }}
      • - {{ end }} -
    +

    {{ .Key }}{{ len .Pages }} posts

    +
      + {{ range .Pages }} +
    • {{ .Title }} - {{ .Date.Format "January 2" }}
      • + {{ end }} +
    {{ end }}