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

11
_sass/_base.scss
View File

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