Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

emoji is displaying not in original size in # Site Author section #1554

Closed
2 of 6 tasks
kyxap opened this issue Feb 26, 2018 · 5 comments
Closed
2 of 6 tasks

emoji is displaying not in original size in # Site Author section #1554

kyxap opened this issue Feb 26, 2018 · 5 comments

Comments

@kyxap
Copy link

kyxap commented Feb 26, 2018

  • This is a question about using the theme.
  • This is a feature request or enhancement.
  • I believe this to be a bug with the theme.
    • I am using the latest version of the theme.
    • I have updated all gems with bundle update.
    • I have tested locally with bundle exec jekyll build.

Environment informations

  • Minimal Mistakes version: 4.10.0
  • Jekyll version: n/a
  • GitHub Pages hosted: yes
  • Operating system: n/a

Expected behavior

Want to use original img size of emoji in # Site Author section.

Img resized. Please check screenshot:
image

Html:

<p class="author__bio" itemprop="description">
        QA Automation Engineer, Originally from Kyiv, Ukraine <img class="emoji" title=":ukraine:" alt=":ukraine:" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f1fa-1f1e6.png" height="20" width="20">
      </p>

Steps to reproduce the behavior

Add emoji to Site Author column like (by editing the _config.yml):

# Site Author
author:
  name             : "Roman Kukharuk"
  avatar           : "/assets/images/bio-photo.jpg"
  bio              : "QA Automation Engineer, Originally from Kyiv, Ukraine :ukraine:"
@mmistakes
Copy link
Owner

You'll likely need to add some CSS to style the width of these elements. Use your browser's web development tools to inspect them and see if they have a common class name you can apply styling to.

Without seeing the actual markup I have no clue what a potential fix would be. If I had to guess those images have width: 100% which is scaling them up to fill their parent.

@kyxap
Copy link
Author

kyxap commented Feb 26, 2018

@mmistakes html added. seems like height="20" width="20" ignored.

@mmistakes
Copy link
Owner

HTML attributes aren't going to fix it as this line is stretching it:

.sidebar img {
    width: 100%;
}

Either add inline CSS to your emoji img elements

<img src="whatever.png" style="width: 20px; height: 20px;">

Or use the .emoji class and add to the global stylesheet.

.sidebar img.emoji {
    width: 20px;
    height: 20px;
}

@kyxap
Copy link
Author

kyxap commented Feb 26, 2018

Fixed with adding this into _sidebar.scss > .sidebar :

  img.emoji {
     width: 20px;
     height: 20px;
  }

Not sure why there 100% width for all images on side bar, maybe it can be deleted?
Bc without this emoji will work out of the box.

@mmistakes
Copy link
Owner

mmistakes commented Feb 26, 2018

It's there to scale sidebar images like in this test post.

If more people have a use for .emoji in the sidebar then I'd happily accept a PR adding the styles above. Though doesn't seem like that's the case as this is the first I've heard of the issue.

@kyxap kyxap closed this as completed Feb 26, 2018
pateskinasy added a commit to pateskinasy/Minimal-mistakes-kickstarter that referenced this issue Jun 27, 2018
Had the same issue as in mmistakes#1554

So should there be more demand for having emojis in sidebar, this style changes fix it
pateskinasy added a commit to pateskinasy/Minimal-mistakes-kickstarter that referenced this issue Aug 10, 2018
Had the same issue as in mmistakes#1554

So should there be more demand for having emojis in sidebar, this style change fixes it
mmistakes pushed a commit that referenced this issue Aug 10, 2018
* Fixing scaling issue w. emoji in Sidebar Author Profile

Had the same issue as in #1554

So should there be more demand for having emojis in sidebar, this style change fixes it

* Fix indendation and nesting
eigenfoo added a commit to eigenfoo/old-eigenfoo.github.io that referenced this issue Jan 3, 2019
* New comment (mmistakes#1715)

* New comment (mmistakes#1716)

* Update french labels (mmistakes#1741)

* Update CHANGELOG and history

* Add note about updating Gemfile when forking theme

* Fix link

* Update font awesome (mmistakes#1754)

* Update scripts.html

* update to 5.2.0

REF: https://github.com/FortAwesome/Font-Awesome/releases

* Update CHANGELOG and history

* Allow time to be shown with a header image overlay (mmistakes#1756)

Fix `read_time` logic in header image overlay

* Update CHANGELOG and history

* Add french translations (mmistakes#1769)

* Update CHANGELOG and history

* remove the slash at the beginning of the 'path' in staticman.yml's example (mmistakes#1772)

* Remove slash at the beginning of `path` in staticman.yml example

* Bump dependencies

* Release 4.12.1 💎

* Update CHANGELOG and history

* Add `{{ content }}` to `home` layout (mmistakes#1775)

* Add `{{ content }}` to `home` layout

Allow the author to add content which will appear above the list of
recent posts. This also allows the `home` layout to be extended.

Add text to index.html in tests to indicate that the content appears in
the correct spot.

* Add paragraph markup

Since this is a HTML file, proper paragraph markup is needed.

* Update CHANGELOG and history

* Improve side navigation spacing in relation to masthead

* Style archive links with appropriate link color

* Adjust feature row spacing and font-sizes

* Use sentence case for better readability

* Increase font-size to improve readability

* Update CHANGELOG and history

* Increase navigation min-height

* Switch `$nav-height` to a relative unit

* Update Staticman commit message to include name

* Adjust height of navigation toggle

* Add test menu items

* Fixing scaling issue w. emoji in Sidebar Author Profile (mmistakes#1780)

* Fixing scaling issue w. emoji in Sidebar Author Profile

Had the same issue as in mmistakes#1554

So should there be more demand for having emojis in sidebar, this style change fixes it

* Fix indendation and nesting

* Update CHANGELOG and history

* Fix: use relative links for menu items when possible (mmistakes#1783) (mmistakes#1784)

* Update CHANGELOG and history

* Fix capitalization

* Reduce padding and adjust toc `font-size`

Fit more text to handle indentation better.

Ref: mmistakes#1782

* Allow heading levels 1-6 in table of contents

Adjust minimum and maximum levels to allow all headings and fix CSS to style indentation and nested lists properly in jekyll-toc and Kramdown generated table of contents.

Fixes mmistakes#1782

* Add table of contents test posts

* Add table of contents test post

* Update jekyll-toc to v1.0.5

* Update CHANGELOG and history

* Add table of contents test posts

* Adjust toc indents

* Fix heading levels in comments section

* Fix TOC icon

* Wrap Liquid tag with `{% raw %}`

* New comment by Richard Rich Steinmetz (mmistakes#1796)

* Add Italian translation for search (mmistakes#1793)

* Add missing translation texts

* Update CHANGELOG and history

* Release 4.12.2 💎

* Update CHANGELOG and history

* Place `:hover` declarations after `:visited` to fix hover animation

Fixes mmistakes#1820

* Update CHANGELOG and history

* Fix sidebar navigation list toggle.

Prettier managled `@include breakpoint` media queries causing the input/checkbox toggle hack styles to go missing.

Fixes mmistakes#1819

* Add support to gallery helper for defining column layout

e.g. `{% include gallery id="gallery" layout="half" caption="2 column gallery caption" %}

Fixes mmistakes#1821

* Add header `actions` array support for multiple call to action links

```
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  og_image: /assets/images/page-header-og-image.png
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "Learn More"
      url: "https://unsplash.com"
```

Fixes mmistakes#1461

* Improve author link flexibility

Deprecate social networking links in `_config.yml` in favor or new `author.links` array for any link and in any order. All of Font Awesome's icons are available for use.

```
author:
  links:
    - label: "Your Website"
      icon: "fas fa-fw fa-link"
      url: "https://your-site.com"
    - label: "Twitter"
      icon: "fab fa-fw fa-twitter-square"
      url: "https://twitter.com/username"
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      url: "https://github.com/username"
    - label: "Instagram"
      icon: "fab fa-fw fa-instagram"
      url: "https://instagram.com/username"
```

Fixes mmistakes#1581

* Improve footer link flexibility

Deprecate hardcoded footer links in favor or new `footer.links` array for any link and in any order. All of Font Awesome's icons are available for use.

```
footer:
  links:
    - label: "Twitter"
      icon: "fab fa-fw fa-twitter-square"
      url: "https://twitter.com/username"
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      url: "https://github.com/username"
    - label: "Instagram"
      icon: "fab fa-fw fa-instagram"
      url: "https://instagram.com/username"
```

* Update CHANGELOG and history

* Add social icon colors for Reddit and Mastodon

* Update ui-text.yml with Romanian translation (mmistakes#1814)

* Update ui-text.yml with Romanian translation

Added the translations for Romanian

* Update ui-text.yml

Corrected „less_than” with a proper translation for the context where it is being used

* Update docs

Added Romanian to the languages list

* Add Romanian localized UI text strings

* Release 4.13.0 💎

* Remove deprecated `base_path` include helper

* Properly apply `relative_url` filter to internal links in header overlay `actions` array

* Always load Google 404 Linkhelp script over HTTPS (mmistakes#1829)

Also removed unneeded type

* Update CHANGELOG and history

* Update Font Awesome to latest version (mmistakes#1830)

* Update CHANGELOG and history

* Remove unneeded HandheldFriendly and MobileOptimized meta tags (mmistakes#1837)

Fixes: mmistakes#1835

* Update CHANGELOG and history

* Update algolia-search-scripts.html (mmistakes#1836)

not needed for HTML5 and saves a few bytes by removing

* Update CHANGELOG and history

* Allow custom Staticman endpoints (mmistakes#1845)

* Update CHANGELOG and history

* Change GitHub issue templates

* New comment by Bobby (mmistakes#1863)

* Make entire archive/feature item "clickable" (mmistakes#1864)

* Make entire feature item "clickable"

Use a pseudo element on the call to action button to cover the entire feature item and make it "clickable".

* Make entire archive item "clickable"

Use a pseudo element on the `<a>` element to cover the entire archive item and make it "clickable".

* Update CHANGELOG and history

* Reference issue

* Cache "static" includes to improve build performance (mmistakes#1874)

* Add jekyll-include-cache plugin
* Cache "static" includes to improve build performance
* Update CHANGELOG and history

"Static" refers to those includes that don't rely on data passed from the page content.

* Add notice for fixing `Unknown tag 'include_cached'`

Fixes mmistakes#1875

* Add jekyll-include-cache to docs `Gemfile`

* Move jekyll-include-cache notice up

* Fix Lunr search index merging words (mmistakes#1884)

Close mmistakes#1883

* Update CHANGELOG and history

* Update LUNR to 2.3.3 (mmistakes#1885)

Close mmistakes#1882

* Update CHANGELOG and history

* Update license (mmistakes#1886)

* Fix license path

* Fix Algolia search link positioning (mmistakes#1904)

* Add link for testing purposes
* Fix excerpt link positioning in Algolia search results
* Fix Algolia search input color
* Update CHANGELOG and history

Fixes mmistakes#1903

* Revert caching for comments and analytics. Fixes mmistakes#1905 (mmistakes#1907)

* Update history

* Hindi Translation of ui-text mmistakes#1887 (mmistakes#1888)

* Hindi Translation of ui-text mmistakes#1887
* Update README.md and about.md

* Update CHANGELOG and history

* New comment by Jair G (mmistakes#1911)

* Fix breadcrumb navigation alignment

Fixes mmistakes#1917

* Improve color contrast of primary buttons and links

* Remove unnecessary closing bracket (mmistakes#1915)

* Update CHANGELOG and history

* Fix link

* Fix link

* Fix broken link in layout documentation

Close mmistakes#1940

* add integrity hash for Font Awesome script (mmistakes#1922)

* add integrity hash for Font Awesome script

As the script is loaded from an external CDN (use.fontawesome.com), its integrity must be ensured mainly for security reasons.
This hash must be updated together with the exact version of Font Awesome, as given on their website.

* Update to FontAwesome 5.5.0

* Update CHANGELOG and history

* Add rel attribute to social media links in author profile and fotter (mmistakes#1924)

* Update CHANGELOG and history

* Add `crossorigin` attribute to FontAwesome script

ref mmistakes#1922

* Fix FontAwesome script

ref mmistakes#1922

* Add `jekyll-include-cache` installation instructions

* Update 05-configuration.md (mmistakes#1956)

* Update last modified time

* Added missing ref attribute (mmistakes#1959)

As suggested by @mmistakes in mmistakes#1948 (comment)

* Use privacy aware embed options for YouTube & Vimeo (mmistakes#1964)

* Update CHANGELOG and history

* Punjabi Translation of ui-text (mmistakes#1962)

* Punjabi Translation of ui-text

There are more than 100 million native speakers of Punjabi language. I am one of them. More details about [punjabi on wikipedia](https://en.wikipedia.org/wiki/Punjabi_language).
All the punjabi translations are perfect with the following exceptions-
  - in the variable name (_config.yml and words_per_minute) which are intentionally left in english.
  - meta_label is empty

* Update CHANGELOG and history

* Add support for utterances (mmistakes#1966)

* Add support for utterances
* Add utterances config documentation
* Update CHANGELOG and history

Close mmistakes#1909

* Update localized text list

* Update README.md

* Update theme documentation

* Increase font-size

* Increase padding

* Add focus color

* Adjust navigation toggles

* Use dark syntax highlighting

* Update CHANGELOG and history

* Add Google Drive as video provider (mmistakes#1967)

* Add Google Drive provider documentation

* Update CHANGELOG and history

* Changed schema.org to secure links (https) (mmistakes#1969)

* Update CHANGELOG and history

* Prevent current post from showing in the "You may also enjoy" (related (mmistakes#1976)

posts) section

* Update CHANGELOG and history

* Change teaser image

* Disable comments

* Add hover state

* Release 4.14.0 💎

* Update CHANGELOG

* Fix closed navicon on hover

* Release 4.14.1 gem

* Update NPM dependencies

cc/ mmistakes#1977

* Change remaining schema.org markup to `https` (mmistakes#1978)

* Update CHANGELOG and history

* Update about.md (mmistakes#1981)

Just a minor addition, the word Hindi written in devnagri script (the script used for this language). Makes it easier to visually understand what script we are talking about.

* Update README.md (mmistakes#1982)

Just a minor addition, the word Hindi written in devnagri script (the script used for this language). Makes it easier to visually understand what script we are talking about.

* Fix function name for Google Custom Search (mmistakes#1983)

fbafe58 renamed the function in the
scripts file, but did not rename the call sites.

* Update CHANGELOG and history

* Allow sidebar navs with custom sidebar content

Multiple sidebar navs can also be included on a page:

```
sidebar:
  - title: Navigation 1
    nav: nav1
  - title: Navigation 2
    nav: nav2
```

Fixes mmistakes#1986

* Update test post

* Update CHANGELOG and history

* Update YAML example

* Fix broken image

Close mmistakes#1994

* Fix broken image

* HTTPS Twitter short link (mmistakes#2001)

* Fixed Netlify typo (mmistakes#2013)

* update font awesome (mmistakes#1995)

REF: https://fontawesome.com/changelog/latest

* Update CHANGELOG and history

* Remove unused variables (mmistakes#1996)

* Update CHANGELOG and history

* [Bug fix]: Added missing Staticman Spanish UI text (mmistakes#1997)

Taken from line 91 of 5d-eu/messages.php@ec56008

* Update CHANGELOG and history

* Persian Translation of UI Elements (mmistakes#2004)

* Add Persian translation to ui-text.yml
* Mention the added Persian translation in the documentation

* Update CHANGELOG and history

* shorter IE conditional statement (mmistakes#2006)

saves 5 bytes :-)

* Update CHANGELOG and history

* Fix typo

* lunr 2.3.5 update (mmistakes#2010)

* Update CHANGELOG and history

* Fix wide tables that overflow parent container

Close mmistakes#2008

* Accessibility: Add aria-label to the search button (mmistakes#2014)

* Accessibility: Add aria-label to the search button
* Update button aria text
* Add aria text to menu toggle
* Add span for search toggle
* Update span for menu label & remove aria
* Update ui-text.yml to add search_label

* Update

* Update CHANGELOG and history

* Update copyright year

* Release 4.14.2 💎

* MAINT: remove .github directory

* BUG: fixed minor typo
kkunapuli pushed a commit to kkunapuli/kkunapuli.github.io that referenced this issue May 30, 2019
* Fixing scaling issue w. emoji in Sidebar Author Profile

Had the same issue as in mmistakes#1554

So should there be more demand for having emojis in sidebar, this style change fixes it

* Fix indendation and nesting
sumeetmondal pushed a commit to sumeetmondal/sumeetmondal.github.io that referenced this issue Sep 10, 2019
* Fixing scaling issue w. emoji in Sidebar Author Profile

Had the same issue as in mmistakes#1554

So should there be more demand for having emojis in sidebar, this style change fixes it

* Fix indendation and nesting
jchwenger pushed a commit to jchwenger/jchwenger.github.io that referenced this issue May 5, 2023
* Fixing scaling issue w. emoji in Sidebar Author Profile

Had the same issue as in mmistakes#1554

So should there be more demand for having emojis in sidebar, this style change fixes it

* Fix indendation and nesting
okitem pushed a commit to okmalls/okmalls.github.io that referenced this issue Mar 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants