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

fix header on safari and added basic changes on posts

Browse Source
This commit is contained in:
Segundo Fdez 2022-03-02 13:48:50 +01:00
parent afddfe3469
commit e3f63afad4
4 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -396,7 +396,7 @@ i, em {
@media (min-width: 480px) { @media (min-width: 480px) {
.header { .header {
display: flex; display: flex;
align-items: end; align-items: flex-end;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
@ -431,10 +431,17 @@ i, em {
display: block; display: block;
margin-bottom: var(--spacing-7); 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 { .post-item .post-item-title {
transition: ease-in-out 200ms; transition: ease-in-out 200ms;
font-size: clamp(var(--font-size-2), 2.5vw, var(--font-size-3)); 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 { .post-item .post-item-title::before {
content: "»"; content: "»";
@ -446,7 +453,8 @@ i, em {
display: block; display: block;
font: var(--font-caption); font: var(--font-caption);
color: var(--color-main); 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 { .post-item .post-item-summary {
font: var(--font-body); font: var(--font-body);

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

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

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

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

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

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