tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

deal with phone screens!

Browse Source
This commit is contained in:
Tom 2023-10-10 13:31:34 +02:00
parent 34daa97151
commit 1b03abe1f6
2 changed files with 34 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
_sass/blogroll.scss
View File

@ -1,3 +1,6 @@
$image_size: 7em;
$left_pad: 8em;
h2.blogroll-title { h2.blogroll-title {
a { a {
text-decoration: none; text-decoration: none;
@ -11,50 +14,34 @@ figure.blogroll {
} }
article.blogroll { article.blogroll {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: row;
h2 {margin-top: 0;} h2 {margin-top: 0;}
// img { section.title {
// object-fit: cover; padding-left: $left_pad;
// width: 7em;
// height: 7em;
// margin-right: 1em;
// border-radius: 0.5em;
// }
// div.image-container {
// width: 7em;
// height: 7em;
// overflow:hidden;
// }
div.image-container {
margin-right: 1em;
flex-shrink: 0;
width: 7em;
height: 7em;
position: relative;
::after {
content: "";
display: block;
padding-bottom: 100%;
} }
summary {padding-left: $left_pad;}
img { img {
position: absolute; float:left;
width: auto; margin-right: 1em;
max-width: 100%; max-width: $image_size;
max-height: 100%; max-height: $image_size;
border-radius: 0.5em; border-radius: 0.5em;
} }
}
@media
only screen and (max-width: 500px)
{
article.blogroll {
summary {
padding-left: 0;
}
h2 {
font-size: 1.2em;
}
} }
} }

11
index.md
View File

@ -8,16 +8,17 @@ head: <script type="module" src="/assets/js/model-viewer.js"></script>
--- ---
{% for post in site.posts %} {% for post in site.posts %}
<article class="h-entry blogroll"> <article class="h-entry blogroll">
<div class="image-container">
<img class="u-photo" <img class="u-photo"
src = "{{ post.thumbnail | default: post.image }}" src = "{{ post.thumbnail | default: post.image }}"
alt="{{post.alt}}"> alt="{{post.alt}}">
</div>
<section class="blogroll"> <section class="title">
<h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2> <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
<time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time> <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
<summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
</section> </section>
<summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
</article> </article>
{% endfor %} {% endfor %}