diff --git a/src/includes/blocks/baseline.njk b/src/includes/blocks/baseline.njk
index 2f898e485..17ea955d2 100644
--- a/src/includes/blocks/baseline.njk
+++ b/src/includes/blocks/baseline.njk
@@ -1,29 +1,29 @@
-
Поддержка в браузерах
+
Поддержка в браузерах:
{% for browser in baseline.keys %}
-
{% if baseline.supported[browser] %}
- {{ baseline.names[browser] }} {{ baseline.versions[browser] }}, Поддерживается
+ {{ baseline.names[browser] }} {{ baseline.versions[browser] }}, поддерживается
- {{ baseline.versions[browser] }}
+ {{ baseline.versions[browser] }}
{% elif baseline.flagged[browser] %}
- {{ baseline.names[browser] }} {{ baseline.versions[browser] }}, За флагом
+ {{ baseline.names[browser] }} {{ baseline.versions[browser] }}, за флагом
-
+
{% elif baseline.preview[browser] %}
- {{ baseline.names[browser] }}, Превью
+ {{ baseline.names[browser] }}, превью
- class="wdi-browser-compat__version" data-compat="preview"
+
{% else %}
- {{ baseline.names[browser] }}, Не поддерживается
+ {{ baseline.names[browser] }}, не поддерживается
-
+
{% endif %}
{% endfor %}
diff --git a/src/styles/blocks/baseline.css b/src/styles/blocks/baseline.css
index e3e90d76f..784a34b5a 100644
--- a/src/styles/blocks/baseline.css
+++ b/src/styles/blocks/baseline.css
@@ -1,23 +1,18 @@
.wdi-browser-compat {
max-width: 87.5%;
+ margin-block-start: 40px;
align-items: center;
- color: var(--wdi-text-color, #585b63);
+ color: var(--color-light);
display: flex;
flex-wrap: wrap;
}
-.wdi-browser-compat__label {
- color: var(--wdi-text-color, #585b63);
- flex: 0 0 100%;
- font-style: normal;
- margin-right: 1rem;
- width: 100%;
-}
-
.wdi-browser-compat__items {
display: flex;
- margin: 1rem 1rem 1rem 0;
+ flex-wrap: wrap;
+ margin: 1rem 0;
padding: 0;
+ gap: 24px;
list-style: none;
}
@@ -30,7 +25,6 @@
.wdi-browser-compat__icon {
display: inline-block;
height: 24px;
- margin-left: 24px;
margin-right: 6px;
width: 24px;
background-repeat: no-repeat no-repeat;
@@ -114,3 +108,9 @@
margin-left: auto;
}
}
+
+@media (min-width: 600px) {
+ .wdi-browser-compat__label {
+ margin-right: 24px;
+ }
+}