1

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

Hide file tree

Showing 3 changed files with 80 additions and 6 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -1,5 +1,6 @@
-.wrapper {
+.container {
    display: flex;
+   padding: 0 20px;
 }
 
 /* cassette */
@@ -131,6 +132,7 @@
 
 .content__value {
    margin-left: 10px;
+   line-height: 28px;
 }
 
 .content__name {
@@ -175,6 +177,15 @@
    margin-top: 16px;
 }
 
+.content__item--song .content__value {
+   max-width: 300px;
+}
+
+.content__item--song .content__name,
+.content__item--dev .content__name {
+   padding-top: 4px;
+}
+
 .label__name {
    font-size: 32px;
    font-weight: 700;

diff --git a/src/css/media.css b/src/css/media.css
@@ -1,5 +1,5 @@
 @media (max-width: 900px) {
-   .wrapper {
+   .container {
       flex-direction: column;
    }
 
@@ -18,6 +18,10 @@
 }
 
 @media (max-width: 550px) {
+   .container {
+      padding: 0 10px;
+   }
+
    .content__item--label > .content__wrap {
       flex-direction: row;
    }
@@ -66,3 +70,62 @@
       top: 183px;
    }
 }
+
+@media (max-width: 430px) {
+   .cassette {
+      width: 360px;
+   }
+
+   .cassette__glass {
+      width: 335px;
+      top: 10px;
+      left: 13px;
+   }
+
+   .cassette__disc {
+      width: 21.7px;
+      top: 60px;
+   }
+
+   .cassette__disc--left {
+      left: 130px;
+   }
+
+   .cassette__disc--right {
+      right: 130px;
+   }
+
+   .cassette__controls {
+      top: 164px;
+   }
+
+   .cassette__button-key,
+   .cassette__button-key::before {
+      width: 56px;
+      height: 73px;
+   }
+
+   .cassette__button-key {
+      margin-top: 16px;
+   }
+
+   .cassette__controls::before {
+      height: 82px;
+      top: 23px;
+   }
+
+   .cassette__button-name {
+      font-size: 12px;
+   }
+
+   .cassette {
+      margin-top: 18px;
+   }
+
+   .content__item + .content__item {
+      margin-top: 20px;
+   }
+}
+
+/* @media (max-width: 390px) {
+} */
diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,7 @@
    </head>
    <body>
       <main>
-         <div class="wrapper">
+         <div class="container">
             <div class="cassette">
                <div class="cassette__player">
                   <img
@@ -76,16 +76,16 @@ <h1 class="label__name">tapes for slaves</h1>
                <li class="content__item content__item--song">
                   <div class="content__wrap">
                      <h2 class="content__name">Песня:</h2>
-                     <p class="content__value songName">Entering the Castle</p>
+                     <p class="content__value songName"></p>
                   </div>
 
                   <div class="content__wrap">
                      <h2 class="content__name">Автор:</h2>
-                     <p class="content__value authorName">РСЛНДНГТВЗМ</p>
+                     <p class="content__value authorName"></p>
                   </div>
                </li>
 
-               <li class="content__item">
+               <li class="content__item content__item--dev">
                   <div class="content__wrap">
                      <h2 class="content__name">Разработчик:</h2>
                      <a