12 feat add previousnext buttons

t29-project-1/src/App.css

@@ -1,184 +1,155 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
+/* Accessible layout without extra div containers */
+.app-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 }
 
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
+/* Favorites button aligned to top-right */
+.top-bar {
+  display: flex;
+  justify-content: flex-end;
+}
 
-  .framework,
-  .vite {
-    position: absolute;
-  }
+/* Star-only button wrapper */
+.star-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: transform 0.15s ease;
+}
 
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
+.star-btn:hover {
+  transform: scale(1.05);
+}
 
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
+.star-btn:active {
+  transform: scale(0.95);
 }
 
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
+/* The actual rounded star SVG */
+.star-svg {
+  width: 50px;
+  height: 50px;
+  overflow: visible;
+  fill: #FFF4C8;
+  stroke: #7D5D75;
+  stroke-width: 1.2px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  transition: fill 0.15s ease, stroke 0.15s ease;
 }
 
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
+/* Invert colors on BOTH hover and keyboard focus */
+.star-btn:hover .star-svg,
+.star-btn:focus-visible .star-svg {
+  fill: #7D5D75;
+  stroke: #FFF4C8;
+}
 
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
+.star-btn:active .star-svg {
+  fill: #7D5D75;
+  stroke: #7D5D75;
+}
 
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
+/* WCAG Requirement: Accessible keyboard focus outline */
+.star-btn:focus-visible {
+  outline: 3px solid #005fcc;
+  outline-offset: 4px;
 }
 
-#docs {
-  border-right: 1px solid var(--border);
+/* --- NAVIGATION & CARD SECTION --- */
 
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
+/* Pushes the navigation and card further down the viewport */
+.nav-layout {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 2rem;
+  margin-top: 4rem; /* Moves the section further down from the top bar */
 }
 
-#next-steps ul {
-  list-style: none;
-  padding: 0;
+/* Content area placeholder (Card Element) */
+.content-placeholder {
+  min-height: 380px; /* Increased card height */
+  border: 2px dashed #ccc;
+  border-radius: 12px;
   display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
+  align-items: center;
+  justify-content: center;
+  background-color: #fafafa;
+}
 
-  .logo {
-    height: 18px;
-  }
+/* Triangle navigation buttons (No circles/borders) */
+.nav-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%; /* For clean circular WCAG focus rings */
+  transition: transform 0.15s ease;
+}
 
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
+.nav-btn:hover {
+  transform: scale(1.1);
+}
 
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
+.nav-btn:active {
+  transform: scale(0.95);
+}
 
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
+/* Arrow SVG styling (Matching the star's color palette & sizing) */
+.arrow-svg {
+  width: 64px; /* Scaled up arrow dimensions */
+  height: 64px;
+  overflow: visible;
+  fill: #FFF4C8;
+  stroke: #7D5D75;
+  stroke-width: 1px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  transition: fill 0.15s ease, stroke 0.15s ease;
+}
 
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
+/* Responsive color inversion on hover and focus */
+.nav-btn:hover .arrow-svg,
+.nav-btn:focus-visible .arrow-svg {
+  fill: #7D5D75;
+  stroke: #FFF4C8;
 }
 
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
+.nav-btn:active .arrow-svg {
+  fill: #7D5D75;
+  stroke: #7D5D75;
 }
 
-.ticks {
-  position: relative;
-  width: 100%;
+/* WCAG Focus Ring for Keyboard Users */
+.nav-btn:focus-visible {
+  outline: 3px solid #005fcc;
+  outline-offset: 4px;
+}
 
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
+/* Responsive breakpoint for mobile devices */
+@media (max-width: 500px) {
+  .nav-layout {
+    grid-template-columns: 1fr 1fr;
+    margin-top: 2rem;
   }
 
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
+  .content-placeholder {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    min-height: 300px;
   }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}
+}