diff --git a/district/templates/district/base.html b/district/templates/district/base.html
index 114cf7595665c00da64f5c400c8b3ec1ada030c0..b771203a282ea6461f34f4fdbbcd7a8712859b97 100644
--- a/district/templates/district/base.html
+++ b/district/templates/district/base.html
@@ -22,7 +22,6 @@
<link rel="stylesheet" href="https://styleguide.pirati.cz/2.10.x/css/styles.css">
<link href="{% static "shared/vendor/fancybox/jquery.fancybox.min.css" %}" rel="stylesheet">
<link rel="stylesheet" href="{% static "shared/css/helpers.css" %}">
- <link rel="stylesheet" href="{% static "shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.css" %}">
{% block styles %}{% endblock %}
@@ -373,6 +372,8 @@
<script src="{% static "shared/vendor/jquery/jquery-3.4.1.min.js" %}"></script>
<script src="{% static "shared/vendor/lazysizes/lazysizes.min.js" %}"></script>
<script src="{% static "shared/vendor/fancybox/jquery.fancybox.min.js" %}"></script>
+ <script src="{% static "shared/vendor/vue-shadow-dom-1.4.3/js/shadow.min.js" %}"></script>
+ <script src="{% static "shared/js/vue-shadow-dom-helper.js" %}"></script>
{% include "maps_utils/includes/scripts.html" %}
diff --git a/senat_campaign/templates/senat_campaign/base.html b/senat_campaign/templates/senat_campaign/base.html
index e8ae9f5b9f6ba6faa038be2535b62d163992561b..b1b407356297ba95e588bdc8ffcda7173ec87d13 100644
--- a/senat_campaign/templates/senat_campaign/base.html
+++ b/senat_campaign/templates/senat_campaign/base.html
@@ -32,7 +32,6 @@
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static "shared/vendor/bootstrap-4.4.1/css/bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "shared/vendor/fancybox/jquery.fancybox.min.css" %}">
- <link rel="stylesheet" href="{% static "shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.css" %}">
<!-- Styles -->
<link href="{% static "senat_campaign/assets/css/style.css" %}" rel="stylesheet">
diff --git a/shared/models.py b/shared/models.py
index 77ff8dca920deccae974e3a9079e7a00e4745d4c..de99fa96c22d62839bb4a6ff0c94472d176f4725 100644
--- a/shared/models.py
+++ b/shared/models.py
@@ -117,11 +117,15 @@ class Mastodon(MastodonImageMixin):
self.download_image(user["icon"]["url"], f'{user["preferredUsername"]}.jpg')
if "orderedItems" in toots and toots["orderedItems"] != None:
+ toots["orderedItems"] = toots["orderedItems"][:6]
for toot in toots["orderedItems"]:
toot["published"] = parse_datetime(toot["published"]).strftime(
"%-H:%M %-d.%-m.%Y"
)
- if "attachment" in toot["object"] and toot["object"]["attachment"] != None:
+ if (
+ "attachment" in toot["object"]
+ and toot["object"]["attachment"] != None
+ ):
for attachment in toot["object"]["attachment"]:
mastodon_attachment: MastodonAttachment = (
MastodonAttachment.objects.create(mastodon=self)
diff --git a/shared/static/shared/css/helpers.css b/shared/static/shared/css/helpers.css
index c30a4e3b2ae399d832cbc9dde6befeeceb863b1f..ed5cbd098799e8fd382338932fd3695c12a05a6e 100644
--- a/shared/static/shared/css/helpers.css
+++ b/shared/static/shared/css/helpers.css
@@ -39,15 +39,3 @@ table caption {
.content-block {
clear: both;
}
-
-.mt-container {
- height: 40rem;
-}
-
-.mt-container .toot-date {
- color: #fff;
-}
-
-.mt-container .mt-body {
- white-space: normal;
-}
diff --git a/shared/static/shared/css/mastodon-embed-feed-timeline-helpers.css b/shared/static/shared/css/mastodon-embed-feed-timeline-helpers.css
new file mode 100644
index 0000000000000000000000000000000000000000..c500195c62696b5b76cdb98a3a8ea5799601d323
--- /dev/null
+++ b/shared/static/shared/css/mastodon-embed-feed-timeline-helpers.css
@@ -0,0 +1,26 @@
+* {
+ --bg-color:#282c37;
+ --bg-hover-color:#313543;
+ --line-gray-color:#393f4f;
+ --content-text:#fff;
+ --link-color:#8c8dff;
+ --error-text-color:#fe6c6c
+}
+
+.mt-container {
+ height: 40rem;
+ max-width: 28rem;
+}
+
+.mt-container .toot-date {
+ color: #fff;
+ margin-top: 0.5rem;
+}
+
+.mt-container .mt-body {
+ white-space: normal;
+}
+
+.mt-container .mt-user {
+ margin-bottom: 1rem;
+}
diff --git a/shared/static/shared/js/vue-shadow-dom-helper.js b/shared/static/shared/js/vue-shadow-dom-helper.js
new file mode 100644
index 0000000000000000000000000000000000000000..7ff818d8f17db43b2387c27cd62d6b4ac3f9c02e
--- /dev/null
+++ b/shared/static/shared/js/vue-shadow-dom-helper.js
@@ -0,0 +1 @@
+Vue.use(shadow)
diff --git a/shared/static/shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.css b/shared/static/shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.css
deleted file mode 100644
index 08e4ed62da75c735e773948c67a138f20a76616c..0000000000000000000000000000000000000000
--- a/shared/static/shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.css
+++ /dev/null
@@ -1,260 +0,0 @@
-/* Mastodon embed feed timeline v3.4.2 */
-/* More info at: */
-/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
-/* Changes were made to ensure this script is safe, removed :root rules */
-/* Variables */
-
-/* Main container */
-.mt-timeline {
- --bg-color: #282c37;
- --bg-hover-color: #313543;
- --line-gray-color: #393f4f;
- --content-text: #fff;
- --link-color: #8c8dff;
- --error-text-color: #fe6c6c;
-
- height: 100%;
- overflow-y: auto;
- position: relative;
- background: var(--bg-color);
- scrollbar-color: var(--bg-hover-color) rgba(0, 0, 0, 0.1);
-}
-.mt-timeline a:link,
-.mt-timeline a:active,
-.mt-timeline a {
- text-decoration: none;
- color: var(--link-color);
-}
-.mt-timeline a:hover {
- text-decoration: underline;
-}
-.mt-timeline::-webkit-scrollbar {
- width: 0.75rem;
- height: 0.75rem;
-}
-.mt-timeline::-webkit-scrollbar-corner {
- background: transparent;
-}
-.mt-timeline::-webkit-scrollbar-thumb {
- border: 0 var(--content-text);
- border-radius: 2rem;
- background: var(--bg-hover-color);
-}
-.mt-timeline::-webkit-scrollbar-track {
- border: 0 var(--content-text);
- border-radius: 0;
- background: rgba(0, 0, 0, 0.1);
-}
-
-.mt-body {
- padding: 1rem 1.5rem;
- white-space: pre-wrap;
- word-wrap: break-word;
-}
-.mt-body .invisible {
- font-size: 0;
- line-height: 0;
- display: inline-block;
- width: 0;
- height: 0;
- position: absolute;
-}
-
-/* Toot container */
-.mt-toot {
- margin: 0.25rem;
- padding: 1rem 0.5rem 2rem 4rem;
- position: relative;
- min-height: 3.75rem;
- background-color: transparent;
- border-bottom: 1px solid var(--line-gray-color);
-}
-.mt-toot:hover,
-.mt-toot:focus {
- cursor: pointer;
- background-color: var(--bg-hover-color);
-}
-.mt-toot p:last-child {
- margin-bottom: 0;
-}
-
-/* User icon */
-.mt-avatar {
- position: absolute;
- top: 1rem;
- left: 5px;
- width: 3rem;
- height: 3rem;
- background-color: transparent;
- background-repeat: no-repeat;
- background-position: 50% 50%;
- background-size: contain;
- background-color: var(--bg-color);
- border-radius: 5px;
-}
-.mt-avatar-boosted {
- width: 2.5rem;
- height: 2.5rem;
-}
-.mt-avatar-booster {
- width: 1.5rem;
- height: 1.5rem;
- top: 1.5rem;
- left: 1.5rem;
-}
-.mt-user {
- display: table;
- font-weight: 600;
-}
-.mt-user > a {
- color: var(--content-text) !important;
-}
-
-/* Text */
-.toot-text {
- margin-bottom: 0.25rem;
- color: var(--content-text);
-}
-.toot-text .spoiler-link {
- display: inline-block;
- border-radius: 2px;
- background-color: var(--bg-hover-color);
- border: 0;
- color: var(--content-text);
- font-weight: 700;
- font-size: 0.7rem;
- padding: 0 0.35rem;
- text-transform: uppercase;
- line-height: 1.25rem;
- cursor: pointer;
- vertical-align: top;
-}
-.toot-text .spoiler-text {
- display: none;
-}
-.toot-text.truncate {
- display: -webkit-box;
- overflow: hidden;
- -webkit-line-clamp: var(--text-max-lines);
- -webkit-box-orient: vertical;
-}
-.toot-text:not(.truncate) .ellipsis::after {
- content: "...";
-}
-
-.mt-error {
- position: absolute;
- display: flex;
- flex-direction: column;
- height: calc(100% - 3.5rem);
- width: calc(100% - 4.5rem);
- justify-content: center;
- align-items: center;
- color: var(--error-text-color);
- padding: 0.75rem;
- text-align: center;
-}
-
-/* Poll */
-.toot-poll {
- margin-bottom: 0.25rem;
- color: var(--content-text);
-}
-.toot-poll ul {
- list-style: none;
- padding: 0;
- margin: 0;
-}
-.toot-poll ul li {
- font-size: 0.9rem;
- margin-bottom: 0.5rem;
-}
-.toot-poll ul li:not(:last-child) {
- margin-bottom: 0.25rem;
-}
-.toot-poll ul li:before {
- content: "◯";
- padding-right: 0.5rem;
-}
-
-/* Medias */
-.toot-media {
- overflow: hidden;
- margin-bottom: 0.25rem;
-}
-.toot-media-preview {
- position: relative;
- margin-top: 0.25rem;
- height: auto;
- text-align: center;
- width: 100%;
-}
-.toot-media-spoiler > img {
- filter: blur(2rem);
-}
-.toot-media-preview a {
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-}
-
-.img-ratio14_7 {
- position: relative;
- padding-top: 48.95%; /* 14:7 */
- width: 100%;
-}
-.img-ratio14_7 > img {
- width: 100%;
- height: auto;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
-}
-
-/* Date */
-.toot-date {
- font-size: 0.75rem;
-}
-
-/* Loading-spinner */
-.mt-body > .loading-spinner {
- position: absolute;
- width: 3rem;
- height: 3rem;
- margin: auto;
- top: calc(50% - 1.5rem);
- right: calc(50% - 1.5rem);
-}
-.loading-spinner {
- height: 100%;
- background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-position: center center;
- background-color: transparent;
- background-size: min(2.5rem, calc(100% - 0.5rem));
-}
-
-/* Footer (See more link) */
-.mt-footer {
- margin: 1rem auto 2rem auto;
- padding: 0 2rem;
- text-align: center;
-}
-
-/* Hidden element */
-.visually-hidden {
- position: absolute !important;
- width: 1px !important;
- height: 1px !important;
- padding: 0 !important;
- margin: -1px !important;
- overflow: hidden !important;
- clip: rect(0, 0, 0, 0) !important;
- white-space: nowrap !important;
- border: 0 !important;
-}
diff --git a/shared/static/shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css b/shared/static/shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css
new file mode 100644
index 0000000000000000000000000000000000000000..3f7f679facb7a2bb0c00cefe4cb6950124fc424a
--- /dev/null
+++ b/shared/static/shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css
@@ -0,0 +1 @@
+:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--content-text:#000;--link-color:#3a3bff;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-timeline{height:100%;overflow-y:auto;position:relative;background:var(--bg-color);scrollbar-color:var(--bg-hover-color) rgba(0,0,0,.1)}.mt-timeline a,.mt-timeline a:active,.mt-timeline a:link{text-decoration:none;color:var(--link-color)}.mt-timeline a:hover{text-decoration:underline}.mt-timeline::-webkit-scrollbar{width:.75rem;height:.75rem}.mt-timeline::-webkit-scrollbar-corner{background:0 0}.mt-timeline::-webkit-scrollbar-thumb{border:0 var(--content-text);border-radius:2rem;background:var(--bg-hover-color)}.mt-timeline::-webkit-scrollbar-track{border:0 var(--content-text);border-radius:0;background:rgba(0,0,0,.1)}.mt-body{padding:1rem 1.5rem;white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem 2rem 4rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-avatar{position:absolute;top:1rem;left:5px;width:3rem;height:3rem;background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:var(--bg-color);border-radius:5px}.mt-avatar-boosted{width:2.5rem;height:2.5rem}.mt-avatar-booster{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem}.mt-user{display:table;font-weight:600}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block;border-radius:2px;background-color:var(--bg-hover-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.toot-text .spoiler-text{display:none}.toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.toot-text:not(.truncate) .ellipsis::after{content:"..."}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.toot-poll{margin-bottom:.25rem;color:var(--content-text)}.toot-poll ul{list-style:none;padding:0;margin:0}.toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.toot-poll ul li:not(:last-child){margin-bottom:.25rem}.toot-poll ul li:before{content:"◯";padding-right:.5rem}.toot-media{overflow:hidden;margin-bottom:.25rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media-spoiler>img{filter:blur(2rem)}.toot-media-preview a{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.img-ratio14_7{position:relative;padding-top:48.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.toot-date{font-size:.75rem}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{height:100%;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
diff --git a/shared/static/shared/vendor/vue-shadow-dom-1.4.3/js/shadow.min.js b/shared/static/shared/vendor/vue-shadow-dom-1.4.3/js/shadow.min.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0f496f623fdaea9d51f0abd59241d279ce9f852
--- /dev/null
+++ b/shared/static/shared/vendor/vue-shadow-dom-1.4.3/js/shadow.min.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],e):e((t=t||self).shadow={},t.Vue)}(this,(function(t,e){"use strict";function o(t){s(t,t.childNodes)}function s(t,e){const o=document.createDocumentFragment();for(const t of e)o.appendChild(t);t.attachShadow({mode:"open"}).appendChild(o)}const n=(e=e&&e.hasOwnProperty("default")?e.default:e).extend({template:'<component :is="tag"><slot v-if="pstatic"></slot><component :is="tag" :class="slotClass" :id="slotId" v-else><slot></slot></component></component>',props:{abstract:{type:Boolean,default:!1},static:{type:Boolean,default:!1},tag:{type:String,default:"div"},slotTag:{type:String,default:"div"},slotClass:{type:String},slotId:{type:String}},data:()=>({pabstract:!1,pstatic:!1}),beforeMount(){this.pabstract=this.abstract,this.pstatic=this.static},mounted(){this.pabstract?s(this.$el.parentElement,this.$el.childNodes):o(this.$el)}});function a(t){t.component("shadow-root",n),t.directive("shadow",{bind(t){o(t)}})}null!=typeof window&&window.Vue&&a(window.Vue);var i={ShadowRoot:n,shadow_root:n,install:a};t.ShadowRoot=n,t.default=i,t.install=a,t.shadow_root=n,Object.defineProperty(t,"__esModule",{value:!0})}));
diff --git a/shared/templates/shared/mastodon_feed_toots_snippet.html b/shared/templates/shared/mastodon_feed_toots_snippet.html
index 5e511fb5e507bcf81d7eeacead27beaf462fdf32..a62e785167c12e48e873609f9b7d50120498fa97 100644
--- a/shared/templates/shared/mastodon_feed_toots_snippet.html
+++ b/shared/templates/shared/mastodon_feed_toots_snippet.html
@@ -1,30 +1,36 @@
-<div class="mt-container max-w-md h-80">
- <div class="mt-timeline">
- <div class="mt-body">
- {% for toot in mastodon.toots %}
- <article class="mt-toot" aria-posinset="{{ forloop.counter }}" aria-setsize="{{ mastodon.toots|length }}">
- <a href="{{ mastodon.url }}" class="mt-avatar" style="background-image:url({{ mastodon.image.url }});">
- <span class="visually-hidden">Avatar</span>
- </a>
- <div class="mt-user">
- <a href="{{ mastodon.url }}" rel="nofollow noopener noreferrer" target="_blank">{{ mastodon.user.preferredUsername }}</a>
- </div>
- <div class="toot-text">
- {{ toot.object.content|striptags }}
- </div>
- {% for attachment in toot.object.attachment %}
- <div class="toot-media img-ratio14_7">
- <img src="{{ attachment.image.url }}">
+{% load static %}
+
+<div v-shadow>
+ <link rel="stylesheet" href="{% static "shared/css/mastodon-embed-feed-timeline-helpers.css" %}">
+ <link rel="stylesheet" href="{% static "shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.min.css" %}">
+ <div class="mt-container">
+ <div class="mt-timeline">
+ <div class="mt-body">
+ {% for toot in mastodon.toots %}
+ <article class="mt-toot" aria-posinset="{{ forloop.counter }}" aria-setsize="{{ mastodon.toots|length }}">
+ <a href="{{ mastodon.url }}" class="mt-avatar" style="background-image:url({{ mastodon.image.url }});">
+ <span class="visually-hidden">Avatar</span>
+ </a>
+ <div class="mt-user">
+ <a href="{{ mastodon.url }}" rel="nofollow noopener noreferrer" target="_blank">{{ mastodon.user.preferredUsername }}</a>
</div>
- {% endfor %}
- <div class="toot-date">
- {{ toot.published }}
- </div>
- </article>
- {% endfor %}
- </div>
- <div class="mt-footer">
- <a href="{{ mastodon.url }}" class="btn">Zobrazit další tooty</a>
+ <div class="toot-text">
+ {{ toot.object.content|striptags }}
+ </div>
+ {% for attachment in toot.object.attachment %}
+ <div class="toot-media img-ratio14_7">
+ <img src="{{ attachment.url }}">
+ </div>
+ {% endfor %}
+ <div class="toot-date">
+ {{ toot.published }}
+ </div>
+ </article>
+ {% endfor %}
+ </div>
+ <div class="mt-footer">
+ <a href="{{ mastodon.url }}" class="btn">Zobrazit další tooty</a>
+ </div>
</div>
</div>
</div>
diff --git a/uniweb/templates/uniweb/base.html b/uniweb/templates/uniweb/base.html
index a050282dfb6016256b62735d6bfc014f8288df63..94ad2b9720f572eac65396abbcff069cf6f8518d 100644
--- a/uniweb/templates/uniweb/base.html
+++ b/uniweb/templates/uniweb/base.html
@@ -20,7 +20,6 @@
<link href="https://styleguide.pirati.cz/2.11.x/css/styles.css" rel="stylesheet" media="all" />
<link href="https://styleguide.pirati.cz/2.11.x/css/pattern-scaffolding.css" rel="stylesheet" media="all" />
<link href="{% static "shared/vendor/fancybox/jquery.fancybox.min.css" %}" rel="stylesheet">
- <link rel="stylesheet" href="{% static "shared/vendor/mastodon-embed-feed-timeline/css/mastodon-timeline.css" %}">
<style type="text/css">
.head-alt-md, .head-alt-lg {