assignment a4

assignments/a3/css/clean.css

@@ -0,0 +1,37 @@
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
+
+:root {
+  font-family: 'Inter', sans-serif;
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    font-family: 'Inter var', sans-serif;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  font-weight: normal;
+  font-size: 1em;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

assignments/a3/css/index.css

@@ -0,0 +1,242 @@
+@import 'clean.css';
+
+header {
+  border-bottom: 2px solid purple;
+  position: relative;
+
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+
+  & > p {
+    font-size: 2rem;
+    font-weight: 700;
+  }
+
+  & > div {
+    display: grid;
+    justify-content: end;
+
+    & > a {
+      padding: 1rem 2rem;
+      background-color: lightblue;
+      border-radius: 1rem;
+
+      &:hover,
+      &:focus {
+        background-color: blue;
+      }
+    }
+  }
+
+  & > #mobile-nav-menu {
+    padding: 1rem;
+    display: grid;
+    grid-template: repeat(4, 1fr) / 1fr;
+    gap: 0.5rem;
+
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 5rem;
+    margin: 0 auto;
+
+    min-width: 80%;
+
+    text-align: center;
+
+    border: 2px solid purple;
+    border-radius: 1rem;
+
+    & > p {
+      font-size: 2rem;
+      font-weight: 700;
+      border-bottom: 2px solid purple;
+    }
+
+    & > a {
+      font-size: 1.5rem;
+      color: blue;
+
+      &:hover,
+      &:focus {
+        color: lightblue;
+        text-decoration: underline;
+      }
+    }
+
+    &:not(:popover-open) {
+      display: none;
+    }
+  }
+
+  & > button {
+    height: 3rem;
+    width: 3.5rem;
+
+    background-color: lightblue;
+    border-radius: 1rem;
+    border-block: unset;
+    border-inline: unset;
+
+    display: grid;
+    justify-content: center;
+    align-items: center;
+
+    &:hover,
+    &:focus {
+      background-color: blue;
+      cursor: pointer;
+    }
+
+    & > svg {
+      height: 2rem;
+      width: 2rem;
+    }
+
+    & > svg:last-of-type {
+      display: none;
+    }
+
+    &:has(~ #mobile-nav-menu:popover-open) {
+      & > svg:first-of-type {
+        display: none;
+      }
+
+      & > svg:last-of-type {
+        display: block;
+      }
+    }
+  }
+
+  & > nav:not(#mobile-nav-menu) {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, auto) 1fr;
+    align-items: center;
+    gap: 0.5rem;
+
+    & > a > svg {
+      height: 3rem;
+      width: 3rem;
+    }
+
+    & > a {
+      font-size: 1.5rem;
+      color: black;
+
+      &:hover,
+      &:focus {
+        color: lightblue;
+      }
+    }
+
+    & > div {
+      display: grid;
+      justify-content: end;
+
+      & > a {
+        padding: 1rem 2rem;
+        background-color: lightblue;
+        border-radius: 1rem;
+
+        &:hover,
+        &:focus {
+          background-color: blue;
+        }
+      }
+    }
+  }
+
+  & > *:not(.mobile) {
+    display: none !important;
+  }
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr;
+
+    & > .mobile {
+      display: none;
+    }
+
+    & > *:not(.mobile) {
+      display: inherit !important;
+    }
+  }
+}
+
+main {
+  padding: 1rem;
+
+  & > img {
+    height: 100%;
+    width: 100%;
+    border-radius: 1rem;
+
+    @media (min-width: 768px) {
+      max-height: 60%;
+      aspect-ratio: 6/4;
+      overflow: hidden;
+      object-fit: cover;
+    }
+  }
+
+  & > h1 {
+    color: purple;
+    font-size: 2rem;
+  }
+}
+
+aside {
+  padding: 1rem;
+  margin: 1rem;
+  background-color: lightgray;
+  border-top: 2px solid purple;
+
+  display: grid;
+  gap: 2rem;
+
+  & > h3 {
+    color: purple;
+    font-size: 1.5rem;
+  }
+
+  & > article {
+    & > h4 {
+      font-weight: 700;
+    }
+  }
+
+  @media (min-width: 768px) {
+    order: -1;
+  }
+}
+
+footer {
+  padding: 2rem 1rem;
+  background-color: darkgray;
+  color: white;
+
+  display: grid;
+  justify-content: center;
+  align-items: center;
+
+  & > p {
+    font-weight: 600;
+  }
+}
+
+@media (min-width: 768px) {
+  body > section {
+    display: grid;
+    grid-template: 1fr / 1fr 3fr;
+
+    padding: 1rem 4rem;
+    max-width: 1280px;
+    margin: 0 auto;
+    gap: 2rem;
+  }
+}