fix weird safari text resizing

This commit is contained in:
facundoolano 2024-03-02 10:53:27 -03:00
parent 8921006641
commit fd87093621
8 changed files with 26 additions and 22 deletions

View file

@ -46,6 +46,8 @@
</head> </head>
<body> <body>
{{ content }} <div class="content">
{{ content }}
</div>
</body> </body>
</html> </html>

View file

@ -3,7 +3,7 @@ layout: base
--- ---
{% include nav.html %} {% include nav.html %}
<div class="content layout-{{ page.layout }}"> <div class="layout-{{ page.layout }}">
{% if page.title %}<h2>{{page.title}}</h2>{% endif %} {% if page.title %}<h2>{{page.title}}</h2>{% endif %}
{{ content }} {{ content }}
<br/> <br/>

View file

@ -3,7 +3,7 @@ layout: base
--- ---
{% include nav.html %} {% include nav.html %}
<div class="content layout-{{ page.layout }}" lang="{{ page.lang | default:site.config.lang | default:'en' }}"> <div class="layout-{{ page.layout }}" lang="{{ page.lang | default:site.config.lang | default:'en' }}">
<header {% if page.cover-img %}class="with-cover"{% endif %}> <header {% if page.cover-img %}class="with-cover"{% endif %}>
<h1 class="title">{{ page.title }}</h1> <h1 class="title">{{ page.title }}</h1>
{% if page.subtitle %}<h3 class="subtitle">{{ page.subtitle }}</h3>{% endif %} {% if page.subtitle %}<h3 class="subtitle">{{ page.subtitle }}</h3>{% endif %}

View file

@ -16,6 +16,14 @@ body {
flex-direction: column; flex-direction: column;
} }
.content {
/* https://stackoverflow.com/a/38347131/993769 */
text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
.footer { .footer {
padding: 2rem 0 1rem; padding: 2rem 0 1rem;
margin-top: auto; margin-top: auto;
@ -148,14 +156,6 @@ pre {
display: none; display: none;
} }
/*
hack to fix height weirdness in code snippets
https://github.com/alecthomas/chroma/issues/617#issuecomment-1063251066
*/
code > span[style^="display:flex;"] {
display: inline !important;
}
/* There are several code rendering scenarios that need to be handled reasonably: /* There are several code rendering scenarios that need to be handled reasonably:
- light vs dark preferred color scheme - light vs dark preferred color scheme
- pre code blocks vs inline code spans - pre code blocks vs inline code spans

View file

@ -46,7 +46,9 @@
</head> </head>
<body> <body>
{{ content }} <div class="content">
{{ content }}
</div>
<p class="center-block footer"> <p class="center-block footer">
{% if page.date %}<span class="date">{{ page.date | date: "%d/%m/%Y" }}</span> {% if page.date %}<span class="date">{{ page.date | date: "%d/%m/%Y" }}</span>
<span class="tags"> <span class="tags">

View file

@ -2,7 +2,7 @@
layout: base layout: base
--- ---
{% include nav.html %} {% include nav.html %}
<div class="content layout-{{ page.layout }}"> <div class="layout-{{ page.layout }}">
{% if page.title %}<h2>{{page.title}}</h2>{% endif %} {% if page.title %}<h2>{{page.title}}</h2>{% endif %}
{{ content }} {{ content }}
<br/> <br/>

View file

@ -3,7 +3,7 @@ layout: base
--- ---
{% include nav.html %} {% include nav.html %}
<div class="content layout-{{ page.layout }}" lang="{{ page.lang | default:site.config.lang | default:'en' }}"> <div class="layout-{{ page.layout }}" lang="{{ page.lang | default:site.config.lang | default:'en' }}">
<header {% if page.cover-img %}class="with-cover"{% endif %}> <header {% if page.cover-img %}class="with-cover"{% endif %}>
<h1 class="title">{{ page.title }}</h1> <h1 class="title">{{ page.title }}</h1>
{% if page.subtitle %}<h3 class="subtitle">{{ page.subtitle }}</h3>{% endif %} {% if page.subtitle %}<h3 class="subtitle">{{ page.subtitle }}</h3>{% endif %}

View file

@ -16,6 +16,14 @@ body {
flex-direction: column; flex-direction: column;
} }
.content {
/* https://stackoverflow.com/a/38347131/993769 */
text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
.footer { .footer {
padding: 2rem 0 1rem; padding: 2rem 0 1rem;
margin-top: auto; margin-top: auto;
@ -152,14 +160,6 @@ pre {
display: none; display: none;
} }
/*
hack to fix height weirdness in code snippets
https://github.com/alecthomas/chroma/issues/617#issuecomment-1063251066
*/
code > span[style^="display:flex;"] {
display: inline !important;
}
/* There are several code rendering scenarios that need to be handled reasonably: /* There are several code rendering scenarios that need to be handled reasonably:
- light vs dark preferred color scheme - light vs dark preferred color scheme
- pre code blocks vs inline code spans - pre code blocks vs inline code spans