Fixed announcement bar styles

This commit is contained in:
squidfunk 2020-04-05 14:55:26 +02:00
parent 329d452c7f
commit 1f66ab43f9
2 changed files with 15 additions and 10 deletions

View File

@ -14,8 +14,8 @@
<meta property="og:url" content="{{ page.canonical_url }}"> <meta property="og:url" content="{{ page.canonical_url }}">
<meta property="og:image" content="{{ image }}"> <meta property="og:image" content="{{ image }}">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1080"> <meta property="og:image:width" content="1200">
<meta property="og:image:height" content="568"> <meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@squidfunk"> <meta name="twitter:site" content="@squidfunk">
<meta name="twitter:creator" content="@squidfunk"> <meta name="twitter:creator" content="@squidfunk">
@ -24,7 +24,7 @@
<meta name="twitter:image" content="{{ image }}"> <meta name="twitter:image" content="{{ image }}">
{% endblock %} {% endblock %}
{% block announce %} {% block announce %}
<style>.md-announce a{color:currentColor}.md-announce a:hover{color:#40bf79}.md-announce strong{display:inline-block}</style> <style>.md-announce{transition:background-color 125ms}.md-announce:focus-within{background-color:var(--md-accent-fg-color)}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}</style>
<a href="https://ginseng.ai/blog/the-cognitive-complexity-of-css/"> <a href="https://ginseng.ai/blog/the-cognitive-complexity-of-css/">
Check out <strong>squidfunk</strong>'s latest blog post Check out <strong>squidfunk</strong>'s latest blog post
<strong> <strong>

View File

@ -41,8 +41,8 @@
<meta property="og:url" content="{{ page.canonical_url }}" /> <meta property="og:url" content="{{ page.canonical_url }}" />
<meta property="og:image" content="{{ image }}" /> <meta property="og:image" content="{{ image }}" />
<meta property="og:image:type" content="image/png" /> <meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1080" /> <meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="568" /> <meta property="og:image:height" content="630" />
<!-- Twitter meta tags --> <!-- Twitter meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
@ -56,14 +56,19 @@
<!-- Announcement bar --> <!-- Announcement bar -->
{% block announce %} {% block announce %}
<style> <style>
.md-announce a { .md-announce {
transition: background-color 125ms;
}
.md-announce:focus-within {
background-color: var(--md-accent-fg-color);
}
.md-announce a,
.md-announce a:focus,
.md-announce a:hover {
color: currentColor; color: currentColor;
} }
.md-announce a:hover {
color: #40bf79;
}
.md-announce strong { .md-announce strong {
display: inline-block; white-space: nowrap;
} }
</style> </style>
<a href="https://ginseng.ai/blog/the-cognitive-complexity-of-css/"> <a href="https://ginseng.ai/blog/the-cognitive-complexity-of-css/">