Lecture + practice

2025-10-14 18:39:42 +03:00
parent 4dbed07682
commit ef32a25500
10 changed files with 270 additions and 0 deletions
--- a/lab/1/index.css
+++ b/lab/1/index.css
@@ -0,0 +1,146 @@
+/* fonts */
+@font-face {
+    font-family: 'Fira Sans';
+    src: local('Fira Sans'), url('fonts/FiraSans-Regular.ttf');
+}
+
+:root {
+    --tm-app-font-family: 'Fira Sans';
+    --tm-app-header-font-size: clamp(16px, 3vw, 48px);
+    --tm-app-tasklist-font-size-large: clamp(12px, 1.6vw, 36px);
+    --tm-app-tasklist-font-size-medium: clamp(16px, 1.25vw, 28px);
+}
+
+/* colors */
+:root {
+    --tm-app-cp-blue-10-op-45: #CBDFF473;
+    --tm-app-cp-blue-10-op-75: #CBDFF4BF;
+    --tm-app-cp-blue-10: #CBDFF4;
+    --tm-app-cp-blue-20: #93C4F5;
+    --tm-app-cp-blue-30: #7CBAF9;
+    --tm-app-cp-blue-50: #50A0F1;
+    --tm-app-cp-blue-70: #020275;
+    --tm-app-cp-blue-90: #01203F;
+
+    --tm-app-cp-seawave-30: #7FACAC;
+    --tm-app-cp-seawave-70: #053A47;
+
+    --tm-app-cp-white: #FFFFFF;
+
+    --tm-app-cp-black-op-12: #0000001F;
+
+    --tm-app-cp-grey-50: grey;
+}
+
+/* light-theme */
+:root {
+    --tm-app-body-bg-start: var(--tm-app-cp-blue-30);
+    --tm-app-body-bg-end: var(--tm-app-cp-seawave-30);
+    --tm-app-header-text-color: var(--tm-app-cp-blue-70);
+    --tm-app-tasklist-header-text-color: var(--tm-app-cp-blue-70);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: var(--tm-app-font-family);
+    font-weight: 400;
+}
+
+ul {
+    list-style: none;
+}
+
+body {
+    width: 100%;
+    min-height: 100vh;
+    background: linear-gradient(var(--tm-app-body-bg-start), var(--tm-app-body-bg-end));
+    background-attachment: fixed;
+}
+
+#tm-app-header {
+    width: 100%;
+    box-sizing: border-box;
+    padding: max(3vh, 30px) max(2.5vw, 80px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    font-size: var(--tm-app-header-font-size);
+    color: var(--tm-app-header-text-color);
+
+    & > #tm-app-name {
+        font-size: inherit;
+    }
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+
+    & > .user-info__avatar {
+        --avarar-size: clamp(40px, 6vw, 80px);
+        width: var(--avarar-size);
+        height: var(--avarar-size);
+        object-position: center;
+        object-fit: cover;
+        border-radius: 50%;
+        border: 2px solid var(--tm-app-cp-white);
+    }
+}
+
+#tm-app-base {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 max(2.5vw, 80px);
+}
+
+.tasklists-container {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    row-gap: 3vh;
+    column-gap: calc(8% / 3);
+
+    & > .tasklist {
+        width: 23%;
+        box-sizing: border-box;
+        padding: 14px;
+        border-radius: 10px;
+        background-color: var(--tm-app-cp-blue-10-op-75);
+        box-shadow: 2px 2px 4px var(--tm-app-cp-black-op-12);
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        &:last-child {
+            background-color: var(--tm-app-cp-blue-10-op-45);
+        }
+
+        & > .tasklist__name {
+            font-weight: 600;
+            color: var(--tm-app-tasklist-header-text-color);
+            font-size: var(--tm-app-tasklist-font-size-large);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        & > .tasklist__add-task-btn {
+            all: unset;
+            cursor: pointer;
+            font-size: var(--tm-app-tasklist-font-size-medium);
+            color: var(--tm-app-cp-grey-50);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            &:hover {
+                font-weight: 600;
+
+            }
+        }
+    }
+}