oscarmlage
/
oscarmlage.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

udpate basic layout for post details

feature/oscar-theme
Segundo Fdez 2022-02-26 14:01:37 +01:00
parent 977e62b265
commit db679d67ad
10 changed files with 153 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content
View File

@ -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);

1
src/themes/oscar/assets/css/main.css
View File

@ -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 */

64
src/themes/oscar/assets/css/modules/posts.css Normal file
View File

@ -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;
}
}

6
src/themes/oscar/assets/css/variables.css
View File

@ -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;
}

8
src/themes/oscar/layouts/_default/summary.html
View File

@ -1,8 +1,8 @@
<article>
<article class="post-item">
<a href="{{ .Permalink }}" class="catalogue-item">
<time datetime="{{ .PublishDate }}" class="catalogue-time">{{ i18n "publishdate" . }}</time>
<h3>{{ .Title }}</h3>
<p>
<h3 class="post-item-title">{{ .Title }}</h3>
<time datetime="{{ .PublishDate }}" class="post-item-date">{{ i18n "publishdate" . }}</time>
<p class="post-item-summary">
{{ if isset .Params "summary" }}{{ .Params.Summary | markdownify }}{{ else }}{{ .Summary }}{{ end }}
</p>
</a>

5
src/themes/oscar/layouts/index.html
View File

@ -2,12 +2,11 @@
<main class="main wrapper">
<section class="catalogue">
<h2>List: Index</h2>
<div class="posts-container">
{{ range (.Paginate (where .Site.RegularPages "Type" "posts")).Pages }}
{{ .Render "summary" }}
{{ end }}
</section>
</div>
<div class="pagination">
{{ partial "pagination.html" . }}

5
src/themes/oscar/layouts/partials/posts/info.html
View File

@ -1,4 +1,4 @@
<div class="post-info">
<div class="post-detail-info">
<span>{{ i18n "writtenBy" }}</span>
{{- if .Params.Author }}
{{ .Params.Author }}
@ -7,7 +7,6 @@
{{- end }}
{{- if .PublishDate }}
<br>
<span>{{ i18n "on" }}&nbsp;</span><time datetime="{{ .PublishDate }}">{{ i18n "publishdate" . }}</time>
<span>{{ i18n "on" }}</span> <time datetime="{{ .PublishDate }}">{{ i18n "publishdate" . }}</time>
{{- end }}
</div>

3
src/themes/oscar/layouts/partials/posts/title.html
View File

@ -1,2 +1 @@
<h1 class="post-title">{{ .Title }}</h1>
<div class="post-line"></div>
<h1 class="post-detail-title">{{ .Title }}</h1>

8
src/themes/oscar/layouts/posts/single.html
View File

@ -1,11 +1,9 @@
{{ define "main" }}
<main>
<h1>Single one: Post</h1>
<div class="post">
{{ partial "posts/info.html" . }}
<main class="main wrapper">
<div class="post-detail">
{{ partial "posts/title.html" . }}
{{ partial "posts/info.html" . }}
{{ partial "posts/header.html" . }}
<!-- raw html -->

16
src/themes/tale/layouts/_default/summary.html
View File

@ -1,11 +1,7 @@
<a href="{{ .Permalink }}" class="catalogue-item">
<div>
<time datetime="{{ .PublishDate }}" class="catalogue-time">{{ i18n "publishdate" . }}</time>
<h2 class="catalogue-title">{{ .Title }}</h2>
<div class="catalogue-line"></div>
<p>
{{ if isset .Params "summary" }}{{ .Params.Summary | markdownify }}{{ else }}{{ .Summary }}{{ end }}
</p>
</div>
<a href="{{ .Permalink }}" class="post-item">
<h2 class="post-item-title">{{ .Title }}</h2>
<time datetime="{{ .PublishDate }}" class="post-item-date ">{{ i18n "publishdate" . }}</time>
<p class="post-item-summary">
{{ if isset .Params "summary" }}{{ .Params.Summary | markdownify }}{{ else }}{{ .Summary }}{{ end }}
</p>
</a>