diff --git a/css/styles.css b/css/styles.css index 3281fb7..27071b6 100644 --- a/css/styles.css +++ b/css/styles.css @@ -97,6 +97,7 @@ body { padding: 10px 20px; border-radius: 8px; cursor: pointer; + margin-left: 250px } .edit-activity { @@ -117,14 +118,21 @@ body { color: white; } +.create-icon { + height: 20px; + width: 20px; + vertical-align: middle; + filter: invert(1) grayscale(1) brightness(9); +} + .activity-card { background-color: #f0f0f0; border-radius: 10px; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); position: absolute; - top: 50%; - left: 50%; + top: 50vh; + left: 50vw; transform: translate(-50%, -50%); display: none; opacity: 0; @@ -179,6 +187,8 @@ input { border-radius: 8px; } + + /* Media queries for responsiveness */ @keyframes slideIn { 0% { @@ -250,6 +260,9 @@ input { .welcome-text h1 { font-size: 24px; } + .create-activity { + margin-left: 5px; + } } @media (max-width: 480px) { @@ -277,4 +290,13 @@ input { color: white; transform: rotate(360deg); } + .create-activity { + margin-left: 5px; + } + .activity-card { + width: 200px; + padding: 10px; + margin-left: 0px; + } + } diff --git a/db.json b/db.json index 0813bb7..703ab84 100644 --- a/db.json +++ b/db.json @@ -1,19 +1,9 @@ { "habits": [ - { - "id": "49dd", - "name": "Swimming", - "startDate": "2024-05-31" - }, { "id": "eab9", "name": "Stop-Eating", "startDate": "2024-05-24" - }, - { - "id": "d658", - "name": "Double", - "startDate": "2024-05-29" } ] } \ No newline at end of file diff --git a/index.html b/index.html index 80c53b0..540f617 100644 --- a/index.html +++ b/index.html @@ -24,8 +24,11 @@