diff --git a/task_1_html_css/src/card.css b/task_1_html_css/src/card.css
index 73860a3..d44516a 100644
--- a/task_1_html_css/src/card.css
+++ b/task_1_html_css/src/card.css
@@ -1,23 +1,64 @@
+/* new */
+body {
+ display: flex;
+ justify-content: space-between;
+}
+
+/* new */
+article:has(footer) {
+ & main {
+ & img {
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ }
+ }
+}
+
+/* new */
+article:has(header) {
+ & main {
+ & img {
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+ }
+ }
+}
+
article {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
width: 350px;
line-height: 1.5rem;
+ /* new */
+ height: min-content;
& header {
border-bottom: 1px solid var(--border-color);
padding: var(--space);
+ /* new */
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
& a {
text-decoration: none;
+ /* new */
+ display: flex;
+ align-items: center;
}
}
& main {
padding: var(--space);
width: inherit;
+
+ /* new */
+ &:has(img) {
+ padding: 0;
+ }
+
& img {
width: inherit;
+ /* new */
+ border-radius: var(--border-radius);
}
}
@@ -26,6 +67,25 @@ article {
& ul {
padding: 0;
list-style: none;
+ /* new */
+ /* I realize how janky this is, but it works. */
+ display: flex;
+ justify-content: space-between;
+ & li {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ }
+ & li:not(:has(+ li)) {
+ justify-content: center;
+ }
+ & li:has(+ li)::before {
+ content: "";
+ }
+ & li:has(+ li)::after {
+ content: "|";
+ }
}
}
}
diff --git a/task_1_html_css/src/package-lock.json b/task_1_html_css/src/package-lock.json
index 7c34de0..c3f9e2d 100644
--- a/task_1_html_css/src/package-lock.json
+++ b/task_1_html_css/src/package-lock.json
@@ -441,9 +441,9 @@
}
},
"node_modules/nanoid": {
- "version": "3.3.6",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
- "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+ "version": "3.3.11",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+ "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
"dev": true,
"funding": [
{
@@ -451,6 +451,7 @@
"url": "https://github.com/sponsors/ai"
}
],
+ "license": "MIT",
"bin": {
"nanoid": "bin/nanoid.cjs"
},
@@ -459,15 +460,16 @@
}
},
"node_modules/picocolors": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
- "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
- "dev": true
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+ "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+ "dev": true,
+ "license": "ISC"
},
"node_modules/postcss": {
- "version": "8.4.27",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
- "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
+ "version": "8.5.6",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+ "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"dev": true,
"funding": [
{
@@ -483,10 +485,11 @@
"url": "https://github.com/sponsors/ai"
}
],
+ "license": "MIT",
"dependencies": {
- "nanoid": "^3.3.6",
- "picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "nanoid": "^3.3.11",
+ "picocolors": "^1.1.1",
+ "source-map-js": "^1.2.1"
},
"engines": {
"node": "^10 || ^12 || >=14"
@@ -508,10 +511,11 @@
}
},
"node_modules/rollup": {
- "version": "3.28.0",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.0.tgz",
- "integrity": "sha512-d7zhvo1OUY2SXSM6pfNjgD5+d0Nz87CUp4mt8l/GgVP3oBsPwzNvSzyu1me6BSG9JIgWNTVcafIXBIyM8yQ3yw==",
+ "version": "3.29.5",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
+ "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
"dev": true,
+ "license": "MIT",
"bin": {
"rollup": "dist/bin/rollup"
},
@@ -524,10 +528,11 @@
}
},
"node_modules/source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+ "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"dev": true,
+ "license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
}
@@ -546,10 +551,11 @@
}
},
"node_modules/vite": {
- "version": "4.4.9",
- "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
- "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+ "version": "4.5.14",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.14.tgz",
+ "integrity": "sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"esbuild": "^0.18.10",
"postcss": "^8.4.27",