1

Frintest · Aug 7, 2024 · eb13ea5 · eb13ea5
1 parent 1f623d5
commit eb13ea5
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 9 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -154,21 +154,29 @@
    flex-direction: column;
 }
 
-.content__item--label > .content__wrap {
+.content__item--label .label__name {
    margin-top: 8px;
+   margin-left: 10px;
+}
+
+.label__links {
+   margin-top: 28px;
+}
+
+.label__links .content__link {
+   margin-left: 10px;
 }
 
-.content__item--label > .content__wrap > .content__link {
+.label__links .content__link + .content__link {
    margin-top: 12px;
 }
 
-.content__item--song > .content__wrap {
-   margin-top: 20px;
+.content__item--song > .content__wrap + .content__wrap {
+   margin-top: 16px;
 }
 
 .label__name {
    font-size: 32px;
    font-weight: 700;
    color: #1d4ed8;
-   margin-bottom: 16px;
 }
diff --git a/src/css/media.css b/src/css/media.css
@@ -16,3 +16,53 @@
       margin-top: 35px;
    }
 }
+
+@media (max-width: 550px) {
+   .content__item--label > .content__wrap {
+      flex-direction: row;
+   }
+
+   .content__item + .content__item {
+      margin-top: 30px;
+   }
+
+   .label__name {
+      font-size: 16px;
+   }
+
+   .content__item--label .label__name {
+      margin-top: 0;
+      margin-left: 10px;
+   }
+
+   .label__links {
+      margin-top: 20px;
+   }
+
+   .cassette {
+      width: 400px;
+   }
+
+   .cassette__glass {
+      width: 372px;
+      top: 11px;
+      left: 14px;
+   }
+
+   .cassette__disc {
+      width: 25px;
+      top: 66px;
+   }
+
+   .cassette__disc--left {
+      left: 144px;
+   }
+
+   .cassette__disc--right {
+      right: 144px;
+   }
+
+   .cassette__controls {
+      top: 183px;
+   }
+}
diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,7 @@
    <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta name="theme-color" content="#000" />
+      <meta name="theme-color" content="#1d4ed8" />
       <title>Финистер Радио</title>
       <link rel="icon" type="image/png" href="./img/favicon.png" />
    </head>
@@ -15,6 +15,7 @@
                   <img
                      class="cassette"
                      src="./img/cassette-wrap.svg"
+                     width="510"
                      alt="Кассетный проигрыватель"
                   />
                   <img
@@ -27,7 +28,11 @@
                      class="cassette__disc cassette__disc--right"
                      width="32.5"
                   />
-                  <img src="./img/glass.png" class="cassette__glass" />
+                  <img
+                     src="./img/glass.png"
+                     width="474"
+                     class="cassette__glass"
+                  />
 
                   <ul class="cassette__controls">
                      <li class="cassette__button">
@@ -51,9 +56,12 @@
 
             <ul class="content__list">
                <li class="content__item content__item--label">
-                  <h2 class="content__name">Лейбл:</h2>
-                  <div class="content__wrap content__value">
+                  <div class="content__wrap">
+                     <h2 class="content__name">Лейбл:</h2>
                      <h1 class="label__name">tapes for slaves</h1>
+                  </div>
+
+                  <div class="label__links">
                      <a
                         class="content__link"
                         href="https://vk.com/tapesforslaves"