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

improve archive layout, home and pagination. Also add some extra space in posts

feature/oscar-theme
Segundo Fdez 2022-03-07 22:33:31 +01:00
parent cf69ad4b70
commit 13b18eaa51
12 changed files with 200 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
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-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,11 +362,11 @@ body {
background-color: var(--background-main);
color: var(--color-main);
}
body a {
a {
color: var(--color-link);
text-decoration: none;
}
body a:hover {
}
a:hover {
color: var(--color-link-hover);
}
h1, h2, h3, h4, h5, h6,
@ -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);

4
src/themes/oscar/assets/css/common.css
View File

@ -10,13 +10,13 @@ body {
text-rendering: auto;
background-color: var(--background-main);
color: var(--color-main);
a {
}
a {
color: var(--color-link);
text-decoration: none;
&:hover {
color: var(--color-link-hover);
}
}
}
h1, h2, h3, h4, h5, h6,
b, strong {

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

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

31
src/themes/oscar/assets/css/modules/header.css
View File

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

15
src/themes/oscar/assets/css/modules/pagination.css Normal file
View File

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

35
src/themes/oscar/assets/css/modules/posts.css
View File

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

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

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

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

@ -4,7 +4,7 @@
<div class="hero">
{{ range (where .Site.Pages "Type" "heros") }}
<div {{ if .Params.current }}class="active"{{ end }}>
<div {{ if .Params.current }}class="is-active"{{ end }}>
{{ if .Params.link }}<a href="{{ .Params.link }}">{{ end }}
{{ if .Params.image }}
<img src="heros/{{ .Params.image }}"
@ -14,6 +14,18 @@
{{ if .Params.link }}</a>{{ end }}
</div>
{{ end }}
<!-- PROVISIONAL PROMO - @todo: change this -->
{{ range (where .Site.Pages "Type" "heros") }}
{{ if .Params.image }}
<div class="hero-img" >
<img src="heros/{{ .Params.image }}"
alt="{{ .Content | plainify | htmlUnescape | truncate 10 }}" />
</div>
{{ end }}
{{ end }}
<h2 class="hero-title">Este es el primer texto dinámico del hero y mejor con el <a href="">enlace a twich aquí</a>, no global ⚡.</h2>
<!-- / PROVISIONAL PROMO - @todo: change this -->
</div>
<div class="posts-container">
@ -25,3 +37,4 @@
</main>
{{ end }}

4
src/themes/oscar/layouts/partials/header.html
View File

@ -15,9 +15,9 @@
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<li>
<a href="{{ .URL }}" {{ if eq $currentPage.RelPermalink .URL }}class="active"{{ end }}>
<a href="{{ .URL }}" {{ if eq $currentPage.RelPermalink .URL }}class="is-active"{{ end }}>
{{ .Pre }}
<span>{{ .Name }}</span>
{{ .Name }}
{{ .Post }}
</a>
</li>

4
src/themes/oscar/layouts/partials/pagination.html
View File

@ -1,7 +1,7 @@
{{ if .Paginator.HasPrev }}
<a href="{{ .Paginator.Prev.URL }}" class="left arrow" rel="prev">&#8592;</a>
<a href="{{ .Paginator.Prev.URL }}" class="left arrow" rel="prev">⇠</a>
{{ end }}
<span>{{ .Paginator.PageNumber }}</span>
{{ if .Paginator.HasNext }}
<a href="{{ .Paginator.Next.URL }}" class="right arrow" rel="next">&#8594;</a>
<a href="{{ .Paginator.Next.URL }}" class="right arrow" rel="next">⇢</a>
{{ end }}

4
src/themes/oscar/layouts/partials/posts/pagination.html
View File

@ -1,7 +1,7 @@
{{- if .NextInSection }}
<a href="{{ .NextInSection.RelPermalink }}" class="left arrow">&#8592; {{ .NextInSection.Title }}</a>
<a href="{{ .NextInSection.RelPermalink }}" class="left arrow">⇠ <span>{{ .NextInSection.Title }}</span></a>
{{- end }}
{{- if .PrevInSection }}
| <a href="{{ .PrevInSection.RelPermalink }}" class="right arrow">{{ .PrevInSection.Title }} &#8594;</a>
| <a href="{{ .PrevInSection.RelPermalink }}" class="right arrow"><span>{{ .PrevInSection.Title }}</span> ⇢</a>
{{- end }}

7
src/themes/oscar/layouts/sections/archive.html
View File

@ -2,13 +2,10 @@
<main class="main wrapper">
<h1>Archive</h1>
<div class="post">
{{ .Content }}
<div class="post">
{{ range (where .Site.RegularPages "Type" "posts").GroupByDate "2006" }}
<h2>{{ .Key }}</h2>
<p>{{ len .Pages }} posts</p>
<h2><span>{{ .Key }}</span><span>{{ len .Pages }} posts</span></h2>
<ul>
{{ range .Pages }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a> - {{ .Date.Format "January 2" }}</li>