fix header on safari and added basic changes on posts

feature/oscar-theme
Segundo Fdez 2022-03-02 13:48:50 +01:00
parent afddfe3469
commit e3f63afad4
4 changed files with 23 additions and 7 deletions

View File

@ -396,7 +396,7 @@ i, em {
@media (min-width: 480px) {
.header {
display: flex;
align-items: end;
align-items: flex-end;
position: sticky;
top: 0;
z-index: 1;
@ -431,10 +431,17 @@ i, em {
display: block;
margin-bottom: var(--spacing-7);
}
.post-item::after {
display: block;
content: "";
width: var(--spacing-3);
height: 1px;
background-color: var(--color-main-medium);
}
.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;
margin-bottom: var(--spacing-1);
}
.post-item .post-item-title::before {
content: "»";
@ -446,7 +453,8 @@ i, em {
display: block;
font: var(--font-caption);
color: var(--color-main);
margin-top: calc(var(--spacing-1) / 2);
margin-top: 0;
/* margin-top: calc(var(--spacing-1) / 2); */
}
.post-item .post-item-summary {
font: var(--font-body);

View File

@ -2,7 +2,7 @@
padding: var(--spacing-3);
@media (--screen-xs) {
display: flex;
align-items: end;
align-items: flex-end;
position: sticky;
top: 0;
z-index: 1;

View File

@ -5,10 +5,17 @@
.post-item {
display: block;
margin-bottom: var(--spacing-7);
&::after {
display: block;
content: "";
width: var(--spacing-3);
height: 1px;
background-color: var(--color-main-medium);
}
.post-item-title {
transition: ease-in-out 200ms;
font-size: clamp(var(--font-size-2), 2.5vw, var(--font-size-3));
margin-left: 0;
margin-bottom: var(--spacing-1);
&::before {
content: "»";
margin-right: var(--spacing-1);
@ -20,7 +27,8 @@
display: block;
font: var(--font-caption);
color: var(--color-main);
margin-top: calc(var(--spacing-1) / 2);
margin-top: 0;
/* margin-top: calc(var(--spacing-1) / 2); */
}
.post-item-summary {
font: var(--font-body);

View File

@ -1,5 +1,5 @@
<article class="post-item">
<a href="{{ .Permalink }}" class="catalogue-item">
<a href="{{ .Permalink }}" class="post-item-link">
<h3 class="post-item-title">{{ .Title }}</h3>
<time datetime="{{ .PublishDate }}" class="post-item-date">{{ i18n "publishdate" . }}</time>
<p class="post-item-summary">