silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix bib preview mobile (#2359) 

[Reference](https://github.com/alshedivat/al-folio/pull/2352#issuecomment-2067965077)

I'm not sure if the removal of `max-width: 90vw;` for all images causes
any side issues.
I could at least not find any. But having this properties will produce
unaligned preview sizes.
Help/testing is more than welcome.


# Before
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 17 51"
src="https://github.com/alshedivat/al-folio/assets/1998723/5ad1a4d7-dfe6-43f8-98ec-eae19dd991c2">

# After

<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 21 53"
src="https://github.com/alshedivat/al-folio/assets/1998723/fb942403-a01f-42ec-95c6-697378ed0d92">
...
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 22 03"
src="https://github.com/alshedivat/al-folio/assets/1998723/1ddf43d8-98a8-421d-9f64-3352190c4bb8">
This commit is contained in:
CheariX 2024-04-28 17:33:55 +00:00 committed by GitHub
parent 492c509646
commit 86a6b03259
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 3 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_layouts/bib.liquid
View File

@ -2,7 +2,7 @@
--- ---
<div class="row"> <div class="row">
{% if site.enable_publication_thumbnails %} {% if site.enable_publication_thumbnails %}
<div class="col-sm-2 abbr"> <div class="col col-sm-2 abbr">
{%- if entry.abbr -%} {%- if entry.abbr -%}
{%- if site.data.venues[entry.abbr] -%} {%- if site.data.venues[entry.abbr] -%}
{% assign venue_style = null %} {% assign venue_style = null %}
@ -10,7 +10,7 @@
{% assign venue_style = site.data.venues[entry.abbr].color | prepend: 'style="background-color:' | append: '"' %} {% assign venue_style = site.data.venues[entry.abbr].color | prepend: 'style="background-color:' | append: '"' %}
{%- endif -%} {%- endif -%}
<abbr <abbr
class="badge rounded" class="badge rounded w-100"
{% if venue_style %} {% if venue_style %}
{{ venue_style }} {{ venue_style }}
{% endif -%} {% endif -%}
@ -22,7 +22,7 @@
{% endif %} {% endif %}
</abbr> </abbr>
{% else %} {% else %}
<abbr class="badge rounded">{{ entry.abbr }}</abbr> <abbr class="badge rounded w-100">{{ entry.abbr }}</abbr>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if entry.preview %} {% if entry.preview %}

11
_sass/_base.scss
View File

@ -55,11 +55,6 @@ table.table a {
} }
} }
figure,
img {
max-width: 90vw;
}
blockquote { blockquote {
background: var(--global-bg-color); background: var(--global-bg-color);
border-left: 5px solid var(--global-theme-color); border-left: 5px solid var(--global-theme-color);
@ -665,7 +660,6 @@ footer.sticky-bottom {
border-top: 1px solid var(--global-divider-color); border-top: 1px solid var(--global-divider-color);
padding-top: 1rem; padding-top: 1rem;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: -2rem;
text-align: right; text-align: right;
} }
@ -678,20 +672,15 @@ footer.sticky-bottom {
margin-bottom: 1rem; margin-bottom: 1rem;
.preview { .preview {
width: 100%;
min-width: 80px;
max-width: 200px;
} }
.abbr { .abbr {
height: 2rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
abbr { abbr {
display: inline-block; display: inline-block;
background-color: var(--global-theme-color); background-color: var(--global-theme-color);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
width: 100%;
a { a {
color: white; color: white;