bascht
/
bascht.com
1
0
Fork 0
Code Releases Activity

Fix up a few flexbox glitches

This commit is contained in:
Sebastian Schulze 2020-07-09 21:08:31 +02:00
parent da31636e66
commit eda44a2e7d
Signed by: bascht
GPG Key ID: 5BCB1D3B4D38A35A
8 changed files with 47 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/instagram_image/summary.html
View File

@ -1,4 +1,4 @@
<a href="{{.Permalink}}" class="summary instagram_image h-entry u-url">
<a href="{{.Permalink}}" class="summary instagram_image">
<h2 class="p-name"><span class="social_logo">{{ partial "social_logo" . }}</span>{{.Title | default "Untitled" }}</h2>
<p><img src="{{ .Params.media_url }}" ></p>
<small>{{ .Date.Format "January, 02th 2006" }}</small>

2
layouts/instagram_video/summary.html
View File

@ -1,4 +1,4 @@
<a href="{{.Permalink}}" class="summary instagram_video u-url h-entry">
<a href="{{.Permalink}}" class="summary instagram_video u-url">
<h2 class="p-name"><span class="social_logo">{{ partial "social_logo" . }}</span> {{.Title}}</h2>
{{ if .Params.preview_url }}<p><img src="{{ .Params.preview_url }}" ></p>{{ end }}
<small>{{ .Date.Format "January, 02th 2006" }}</small>

3
layouts/mastodon_toot/summary.html
View File

@ -1,5 +1,6 @@
<a class="u-url h-entry" href="{{.Permalink}}">
<a class="u-url mastodon_toot" href="{{.Permalink}}">
<h2 class="p-name">{{ partial "social_logo" . }} {{.Title}}</h2>
{{ if .Params.media_url }}<p><img src="{{ .Params.media_url }}" ></p>{{ end }}
<small>{{ .Date.Format "January, 02th 2006" }}</small>
<a class="hidden u-syndication syn-link" rel="syndication" href="{{ .Params.original_url }}">{{ .Params.original_url }}</a>
</a>

2
layouts/pinboard/summary.html
View File

@ -1,4 +1,4 @@
<a class="u-url h-entry" href="{{.Permalink}}">
<a class="u-url" href="{{.Permalink}}">
<h2 class="p-name"><span class="social_logo">{{ partial "social_logo" . }}</span>{{.Title | truncate 50}}</h2>
<small>{{ .Date.Format "January, 02th 2006" }}</small>
</a>

2
layouts/pocket_favourite/summary.html
View File

@ -1,4 +1,4 @@
<a class="u-url h-entry" href="{{.Permalink}}">
<a class="u-url" href="{{.Permalink}}">
<h2 class="p-name"><span class="social_logo">{{ partial "social_logo" . }}</span>{{.Title | truncate 50}}</h2>
<small>{{ .Date.Format "January, 02th 2006" }}</small>
</a>

4
layouts/section/posts.html
View File

@ -8,7 +8,9 @@
<h2>{{ .Key }}</h2>
<div class="posts summary clearfix">
{{ range .Pages.ByDate.Reverse }}
{{ .Render "summary" }}
<div class="h-entry {{ .Params.type }}">
{{ .Render "summary" }}
</div>
{{ end }}
</div>
{{ end }}

5
layouts/twitter_tweet/summary.html
View File

@ -1,5 +1,6 @@
<a class="u-url h-entry" href="{{.Permalink}}">
<h2 class="p-name">{{ partial "social_logo" . }} {{.Title}}</h2>
<a class="u-url" href="{{.Permalink}}">
<h2 class="p-name">{{ partial "social_logo" . }} {{.Params.text}}</h2>
{{ if .Params.media_url }}<p><img src="{{ .Params.media_url }}" ></p>{{ end }}
<small>{{ .Date.Format "January, 02th 2006" }}</small>
<a class="hidden u-syndication syn-link" rel="syndication" href="{{ .Params.original_url }}">{{ .Params.original_url }}</a>
</a>

48
static/css/bascht.com.css
View File

@ -225,31 +225,50 @@ article.summary a.anchor {
align-content: stretch;
}
.posts a {
overflow: hidden;
text-decoration: none;
color: inherit;
/* border: 2px solid red; */
height: 100%;
width: 100%;
display: block;
}
.posts div.h-entry {
padding: 1em;
box-sizing: border-box;
margin: 1em;
width: 20%;
/* height: 10px; */
flex: 1 auto;
/* float: left; */
/* height: 50px; */
flex: 2 auto;
border: 1px solid #cdcdcd;
border-radius: 5px;
overflow: hidden;
text-decoration: none;
color: inherit;
background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff 100%);
background: -webkit-linear-gradient(top, #f2f2f2 0%,#ffffff 100%);
background: linear-gradient(to bottom, #f2f2f2 0%,#ffffff 100%);
}
.posts.summary a h2 {
white-space: nowrap;
.posts .h-entry.foursquare_checkin {
height: 20%;
}
.posts .h-entry.pinboard {
height: 20%;
}
.posts .h-entry.mastodon_toot {
width: 30%;
}
.posts .h-entry.twitter_tweet {
width: 30%;
}
.posts .h-entry.instagram_image {
/* width: 40%; */
}
.posts.summary .h-entry h2 {
/* white-space: nowrap; */
overflow: hidden;
}
.posts a:hover {
.posts .h-entry:hover {
background: #f2f2f2;
background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff 31%);
background: -webkit-linear-gradient(top, #f2f2f2 0%,#ffffff 31%);
@ -258,9 +277,12 @@ article.summary a.anchor {
}
.posts .summary.instagram_video img,
.posts div.twitter_tweet img,
.posts div.mastodon_toot img,
.posts .summary.instagram_video img,
.posts .summary.instagram_image img {
width: 85%;
width: 90%;
background-color: #fff;
}
.posts.summary .spotify_like {
width: 300px