From db679d67adaafbd2b492624f968533af47ea32d9 Mon Sep 17 00:00:00 2001 From: Segundo Fdez Date: Sat, 26 Feb 2022 14:01:37 +0100 Subject: [PATCH] udpate basic layout for post details --- ...s_abdeb689137b085b8cf50bb0fe96e360.content | 66 ++++++++++++++++++- src/themes/oscar/assets/css/main.css | 1 + src/themes/oscar/assets/css/modules/posts.css | 64 ++++++++++++++++++ src/themes/oscar/assets/css/variables.css | 6 +- .../oscar/layouts/_default/summary.html | 8 +-- src/themes/oscar/layouts/index.html | 5 +- .../oscar/layouts/partials/posts/info.html | 5 +- .../oscar/layouts/partials/posts/title.html | 3 +- src/themes/oscar/layouts/posts/single.html | 8 +-- src/themes/tale/layouts/_default/summary.html | 16 ++--- 10 files changed, 153 insertions(+), 29 deletions(-) create mode 100644 src/themes/oscar/assets/css/modules/posts.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 7796771..edb07ee 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-medium: #535353; --color-link: #0161f0; --color-link-hover:#575757; @@ -313,7 +314,7 @@ template { /* Font sizes names */ --font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand); --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand); - --font-body: var(--font-size-2) / 1.38 var(--font-brand); + --font-body: var(--font-size-2) / 1.46 var(--font-brand); --font-caption: var(--font-size-1) / 1.37 var(--font-brand); /* ========================================================================== @@ -325,6 +326,8 @@ template { --spacing-4: 2rem; --spacing-5: 2.5rem; --spacing-6: 3rem; + --spacing-7: 4rem; + --spacing-8: 5rem; /* ========================================================================== Size @@ -337,6 +340,7 @@ template { :root { --background-main: #292929; --color-main: #F0F0F0; + --color-main-medium: #a3a3a3; --color-link: #02A4FF; --color-link-hover:#9e9e9e; } @@ -420,6 +424,66 @@ i, em { display: flex; gap: var(--spacing-2); } +/* POST LIST */ +.posts-container { +} +.post-item { + display: block; + margin-bottom: var(--spacing-7); +} +.post-item .post-item-title { + transition: ease-in-out 200ms; + font-size: clamp(var(--font-size-2), 2.5vw, var(--font-size-3)); + margin-left: 0; + } +.post-item .post-item-title::before { + content: "»"; + margin-right: var(--spacing-1); + opacity: .5; + position: relative; + } +.post-item .post-item-date { + display: block; + font: var(--font-caption); + color: var(--color-main); + margin-top: calc(var(--spacing-1) / 2); + } +.post-item .post-item-summary { + font: var(--font-body); + color: var(--color-main-medium); + } +.post-item:hover .post-item-title { + color: var(--color-main); + margin-left: var(--spacing-1); + } +/* POST DETAIL */ +.post-detail { + font: var(--font-body); + color:var(--color-main-medium); +} +.post-detail img{ + max-width: 100%; + width: auto; + } +.post-detail pre { + overflow-x: scroll; + border: 1px solid var(--color-main-medium); + padding: var(--spacing-3); + border-radius: 4px; + } +.post-detail ul { + padding-left: 1rem; + } +.post-detail .post-detail-info { + font: var(--font-caption); + color:var(--color-main); + margin-bottom: var(--spacing-3); + } +.post-detail .post-detail-title { + color: var(--color-link); + font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4)); + margin-bottom: 0; + } .footer { padding: var(--spacing-6) var(--spacing-3); font: var(--font-caption); diff --git a/src/themes/oscar/assets/css/main.css b/src/themes/oscar/assets/css/main.css index 575a58a..c0c0169 100644 --- a/src/themes/oscar/assets/css/main.css +++ b/src/themes/oscar/assets/css/main.css @@ -10,6 +10,7 @@ /* Modules */ @import 'assets/css/modules/header.css'; +@import 'assets/css/modules/posts.css'; @import 'assets/css/modules/footer.css'; /* Specific pages */ diff --git a/src/themes/oscar/assets/css/modules/posts.css b/src/themes/oscar/assets/css/modules/posts.css new file mode 100644 index 0000000..8b4091a --- /dev/null +++ b/src/themes/oscar/assets/css/modules/posts.css @@ -0,0 +1,64 @@ +/* POST LIST */ +.posts-container { +} + +.post-item { + display: block; + margin-bottom: var(--spacing-7); + .post-item-title { + transition: ease-in-out 200ms; + font-size: clamp(var(--font-size-2), 2.5vw, var(--font-size-3)); + margin-left: 0; + &::before { + content: "»"; + margin-right: var(--spacing-1); + opacity: .5; + position: relative; + } + } + .post-item-date { + display: block; + font: var(--font-caption); + color: var(--color-main); + margin-top: calc(var(--spacing-1) / 2); + } + .post-item-summary { + font: var(--font-body); + color: var(--color-main-medium); + } + &:hover { + .post-item-title { + color: var(--color-main); + margin-left: var(--spacing-1); + } + } +} + +/* POST DETAIL */ +.post-detail { + font: var(--font-body); + color:var(--color-main-medium); + img{ + max-width: 100%; + width: auto; + } + pre { + overflow-x: scroll; + border: 1px solid var(--color-main-medium); + padding: var(--spacing-3); + border-radius: 4px; + } + ul { + padding-left: 1rem; + } + .post-detail-info { + font: var(--font-caption); + color:var(--color-main); + margin-bottom: var(--spacing-3); + } + .post-detail-title { + color: var(--color-link); + font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4)); + margin-bottom: 0; + } +} \ 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 5a1c965..4ded575 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-medium: #535353; --color-link: #0161f0; --color-link-hover:#575757; @@ -35,7 +36,7 @@ /* Font sizes names */ --font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand); --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand); - --font-body: var(--font-size-2) / 1.38 var(--font-brand); + --font-body: var(--font-size-2) / 1.46 var(--font-brand); --font-caption: var(--font-size-1) / 1.37 var(--font-brand); /* ========================================================================== @@ -47,6 +48,8 @@ --spacing-4: 2rem; --spacing-5: 2.5rem; --spacing-6: 3rem; + --spacing-7: 4rem; + --spacing-8: 5rem; /* ========================================================================== Size @@ -61,6 +64,7 @@ :root { --background-main: #292929; --color-main: #F0F0F0; + --color-main-medium: #a3a3a3; --color-link: #02A4FF; --color-link-hover:#9e9e9e; } diff --git a/src/themes/oscar/layouts/_default/summary.html b/src/themes/oscar/layouts/_default/summary.html index d5dce30..727b0df 100644 --- a/src/themes/oscar/layouts/_default/summary.html +++ b/src/themes/oscar/layouts/_default/summary.html @@ -1,8 +1,8 @@ -
+
- -

{{ .Title }}

-

+

{{ .Title }}

+ +

{{ if isset .Params "summary" }}{{ .Params.Summary | markdownify }}{{ else }}{{ .Summary }}{{ end }}

diff --git a/src/themes/oscar/layouts/index.html b/src/themes/oscar/layouts/index.html index d4119dc..94d0778 100644 --- a/src/themes/oscar/layouts/index.html +++ b/src/themes/oscar/layouts/index.html @@ -2,12 +2,11 @@
-
-

List: Index

+
{{ range (.Paginate (where .Site.RegularPages "Type" "posts")).Pages }} {{ .Render "summary" }} {{ end }} -
+