[PROJ-18.4/compl] layout-content-element

Adding adaptive behavior (up to @576px). Testing/mostly for "overflow".

Worth noting:
  - moment/unresolved with duplication of the "Done" button (when testing for "overflow").

FS-dev: B-3 / JS basic

Author: matowdev

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-4-layout-content-element/css/habbit-days.css

@@ -42,6 +42,7 @@
 .habbit-days__comment {
   font-weight: var(--medium, 500);
   font-size: 16px;
+  line-height: 130%;
   color: var(--secondary-color, #23235F);
 }
 
@@ -71,7 +72,7 @@
   display: flex;
   align-items: center;
   align-self: stretch;
-  column-gap: 15px;
+  gap: 15px 10px;
   padding: 10px 15px 10px 25px;
   width: 100%;
 }

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-4-layout-content-element/css/progress-bar.css

@@ -4,6 +4,7 @@
   row-gap: 12px;
   width: 100%;
   max-width: 235px;
+  cursor: help;
 }
 
 .progress-bar__heading-wrap {

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-4-layout-content-element/css/sidebar.css

@@ -82,6 +82,10 @@
   will-change: background;
 }
 
+.sidebar__add-btn:not(:last-of-type) {
+  margin-bottom: 25px;
+}
+
 .sidebar__add-btn:focus-visible {
   outline-color: var(--add-color-11, #a87ae4);
 }

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-4-layout-content-element/index.html

@@ -53,7 +53,6 @@
         </button>
       </div>
     </aside>
-
     <main class="content app__content" id="content" aria-label="Контент приложения">
       <header class="content__header">
         <h1 class="content__title">Отжимания</h1>