Add Projects section with inverted pendulum and real-time interface pages

layouts/partials/projects/styles.html

@@ -0,0 +1,60 @@
+<style>
+.project-filter { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; margin: 1.5em 0 1em; }
+.project-filter button {
+  font: inherit; font-size: .9em; cursor: pointer; padding: .25em .9em;
+  border: 1px solid #d5d8e0; border-radius: 999px; background: #fff; color: #34495e;
+}
+.project-filter button:hover { border-color: hsl(232, 61%, 64%); }
+.project-filter button.active { background: hsl(232, 61%, 64%); border-color: hsl(232, 61%, 64%); color: #fff; }
+
+.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5em; margin: 1.5em 0 2em; }
+.project-card {
+  display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e5ea; border-radius: 8px;
+  overflow: hidden; transition: box-shadow .2s, transform .2s;
+}
+.project-card:hover { box-shadow: 0 6px 18px rgba(40, 50, 90, .12); transform: translateY(-2px); }
+.project-card[hidden] { display: none; }
+.project-card-cover { display: block; aspect-ratio: 16 / 10; background: #eef0f5; overflow: hidden; border: 0; }
+.project-card-cover:hover { border: 0; }
+.project-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
+.project-card-cover.placeholder { display: flex; align-items: center; justify-content: center; padding: 0 .5em; text-align: center; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.8em; font-weight: 600; background: linear-gradient(135deg, hsl(232, 61%, 64%), hsl(232, 45%, 38%)); }
+.project-card-cover.placeholder:hover { color: #fff; }
+.project-card-body { display: flex; flex-direction: column; gap: .5em; padding: 1em 1.1em 1.1em; flex: 1; }
+.project-card-title { margin: 0; font-size: 1.2em; line-height: 1.25; }
+.project-card-title a { color: inherit; border: 0; }
+.project-card-title a:hover { color: hsl(232, 61%, 64%); border: 0; }
+.project-card-summary { margin: 0; color: #4a5568; font-size: .95em; line-height: 1.5; flex: 1; }
+.project-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .5em; font-size: .85em; margin-top: .3em; }
+.project-card-footer a { color: #c05b4d; white-space: nowrap; }
+
+.project-tags { display: flex; flex-wrap: wrap; gap: .35em; }
+.project-tag {
+  display: inline-block; padding: .05em .65em; font-size: .78em; font-weight: 600; letter-spacing: .02em;
+  border-radius: 999px; background: hsl(232, 61%, 94%); color: hsl(232, 45%, 40%);
+}
+.project-status { font-size: .85em; color: #8a8a8a; }
+.project-status::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .4em; background: #b0b4c0; }
+.project-status[data-status="active"]::before { background: #4caf7d; }
+.project-status[data-status="completed"]::before { background: hsl(232, 61%, 64%); }
+.project-status[data-status="in progress"]::before { background: #e0a030; }
+
+.project-summary { text-align: center; font-size: 1.1em; color: #4a5568; max-width: 40em; margin: .4em auto 1em; }
+.project-header .project-tags { justify-content: center; }
+.project-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6em 1.4em; margin: 1em 0 1.5em; font-size: .95em; color: #6b7280; }
+.project-btn {
+  display: inline-block; padding: .35em 1em; border-radius: 4px; border: 1px solid hsl(232, 61%, 64%);
+  color: hsl(232, 61%, 64%); font-size: .95em;
+}
+.project-btn:hover { background: hsl(232, 61%, 64%); color: #fff; border-color: hsl(232, 61%, 64%); }
+.project-btn.primary { background: hsl(232, 61%, 64%); color: #fff; }
+.project-btn.primary:hover { background: hsl(232, 61%, 54%); }
+.project-back { text-align: center; margin-top: 2em; }
+
+.project-content figure, figure.project-video { margin: 1.5em auto; text-align: center; }
+.project-content figure img { max-width: 100%; height: auto; }
+figure.project-video video { display: block; margin: 0 auto; width: 100%; max-width: 420px; max-height: 75vh; background: #000; border-radius: 6px; }
+figure.project-video.wide video { max-width: 100%; }
+figure.project-video figcaption, .project-content figcaption { margin-top: .5em; font-size: .9em; color: #6b7280; }
+.project-content table { margin: 1em auto; }
+@media (max-width: 600px) { .project-grid { grid-template-columns: 1fr; } }
+</style>