diff --git a/README.md b/README.md index 98549832..f6e904ca 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,53 @@ # Portfolio -Your starting portfolio, to iterate on. +Module 1 iteration of your portfolio. We've got a lot of new concepts here so you might want to work through this in your study group, or bring to class for help. + +_Keep your changes simple!_ + +We are using a different type of pull request workflow from your main coursework. We're doing this because we need lots of practice with Git to be ready to contribute to shared repos like professional developers. In previous cohorts, we only opened PRs to main all the way through the course, and then in Final Projects it was really hard to learn real branching and merging. So let's practice a different workflow now. ## Learning Objectives -- Customise the starting portfolio with your professional details -- Iterate on your portfolio every module -- Review your colleague's portfolio +- [ ] Branch from a branch in Git +- [ ] PR from a branch to a branch in GitHub +- [ ] Create a personal case study for a project ## Requirements -At Code Your Future, we expect everyone to graduate with a unique professional portfolio. Begin building this portfolio as soon as you begin our Software Development Course. At first, your portfolio will be a simple HTML/CSS page deployed to Github Pages or Netlify. This is your MVP. +Your case study should be a short description of the project, including: the problem it solves, the technologies used, the approach taken, a link to the deployed project, and a link to the code on GitHub. + +Explain the problem and your solution in your own words, and don't just copy and paste the project brief. The point of a portfolio is to make _you stand out_, so write in your own voice. It's fine to choose something that you didn't work on all by yourself, but make sure you explain what part you did. + +## Git Ready: Putting our code in the right place + +The instructions here are given for the command line, but you could just as easily do this in GitHub Desktop or GitKraken. + +1. Switch into the branch called `git checkout Module-HTML-CSS` to access this Readme +1. From `Module-HTML-CSS`, create a new branch `git checkout -b your-name-portfolio` +1. Make a new directory `mkdir your-name-portfolio` +1. Move your starter files into this directory `mv index.html style.css your-name-portfolio` +1. Change into the new directory `cd your-name-portfolio` +1. Check you are in the right branch `git branch --show-current` + +## Git Set: Making changes + +1. Open the project in your code editor +1. Make your changes +1. Check your changes with `git status` +1. Add your files to the staging area `git add index.html style.css` . _Remember, don't `git add .` or you could add files you don't mean to._ +1. Commit your changes often `git commit -m "YOUR COMMIT MESSAGE"` + +## Git Go: Making a pull request -Every module, you will _iterate_ on your portfolio, adding a new project and improving your design and presentation. By the time you apply to Final Projects, your portfolio will help you show you are ready to be accepted on to a Final Projects team. +1. Stage your files: `git add index.html style.css` . _Remember, don't `git add .` or you could add files you don't mean to._ +1. Commit your changes `git commit -m "YOUR COMMIT MESSAGE"` +1. Push your changes to GitHub `git push origin your-name-portfolio` +1. Open a pull request to merge your branch into `Module-HTML-CSS` . If you have the [GitHub CLI](https://cli.github.com/manual/gh_pr_create) installed, you can do this with `gh pr create --base Module-HTML-CSS --head your-name-portfolio`. Otherwise do it in the GitHub UI or your Git client. ## Acceptance Criteria - [ ] My portfolio introduces me and my work -- [ ] The design and code is my own, not a template or tutorial +- [ ] The design and code is my own, not a template or tutorial (you can use this code as a starting point) - [ ] Each project is linked to my code on Github and the deployed project - [ ] I have published my professional contact information on my portfolio - [ ] My Accessibility and SEO scores are 100 on Lighthouse @@ -26,6 +56,6 @@ Every module, you will _iterate_ on your portfolio, adding a new project and imp ## Resources -- [Josh Comeau on building your early career profile](https://www.youtube.com/watch?v=OXiaEXfkAec) -- [How to Build an Effective Dev Portfolio](https://www.joshwcomeau.com/effective-portfolio/) -- [CYF Graduate Module](https://module-graduates.codeyourfuture.io/) +- [Powerful Git Completion with ohmyzsh](https://github.com/ohmyzsh/ohmyzsh) +- [GitKraken](https://www.gitkraken.com/) +- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens/) diff --git a/index.html b/example-name-portfolio/index.html similarity index 64% rename from index.html rename to example-name-portfolio/index.html index 7b0d8b5a..b76f5bbc 100644 --- a/index.html +++ b/example-name-portfolio/index.html @@ -59,12 +59,37 @@

My Name

Projects Showcase

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi - excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi - commodi minima ullam necessitatibus, cumque blanditiis, nihil magni - amet consectetur? -

+

Contact me

diff --git a/example-name-portfolio/style.css b/example-name-portfolio/style.css new file mode 100644 index 00000000..ec5097cb --- /dev/null +++ b/example-name-portfolio/style.css @@ -0,0 +1,151 @@ +/* Design tokens. +With tokens, stick to communicating the PURPOSE not the VALUE. +Code should explain, not mystify, your design. +*/ +:root { + --paper: hsla(251, 28%, 88%, 0.99); + --ink: hsla(244, 16%, 17%, 0.95); + --brand: hsla(0, 79%, 63%, 0.9); + --font: "Raleway", system-ui, sans-serif; + --gap: 20px; + --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px); + /* https://web.dev/accessible-tap-targets/ */ + --tap-target: 48px; + --box: clamp(280px, 50vw + 2px, 530px); +} + +/* Hey look, dark mode is +so easy with design tokens done this way +*/ +@media (prefers-color-scheme: dark) { + :root { + --ink: hsla(252, 38%, 92%, 0.99); + --paper: hsla(244, 16%, 17%, 1); + } +} + +/* General styles */ +html, +body { + scroll-behavior: smooth; + background: var(--paper); + color: var(--ink); + font-family: var(--font); +} +body { + display: grid; + margin: auto; + min-height: 100vh; + gap: var(--gap); + max-width: var(--container); +} +a, +a:any-link { + color: currentColor; + text-decoration: none; + border-bottom: 2px solid transparent; + transition: border-color ease-in-out 0.3s; +} +a:hover, +a:focus { + color: var(--brand); + border-color: currentColor; +} +p a:any-link { + border-color: var(--brand); +} +/* Site header and navigation +https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46 +*/ +body > header { + background: var(--paper); + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + z-index: 1; +} +nav ul { + display: flex; + list-style: none; + gap: var(--gap); +} + +/* Text readability +https://baymard.com/blog/line-length-readability +*/ +section p { + line-height: 1.5; + max-width: 55ch; +} +/* targeted resets +We're resetting elements with a class - ANY class +- on the grounds that if you added a class, +you added your own styles +*/ +h3[class] { + margin: 0 auto 0 0; +} +ul[class], +li[class] { + margin: 0; + padding: 0; +} + +/* Basic image rules +Don't size images in css, size their containers +Just make images take up the entire space you give them +in every context +*/ +svg { + height: 100%; + width: auto; + min-width: var(--tap-target); +} + +img { + width: 100%; + height: 100%; + max-width: 100%; + object-fit: cover; +} + +picture { + height: auto; + overflow: hidden; +} +/* +I would start breaking this up into component files now btw! +*/ +.showcase { + display: flex; + flex-flow: row wrap; + gap: var(--gap); +} +/* +Here's an example of a grid layout. Notice there's no margin, padding, or sizes given on elements +All the spacing and sizing is set on the template, and the elements +are just slotted in. +The little dots are how we precisely place and size white-space +https://www.interaction-design.org/literature/article/the-power-of-white-space +*/ + +.project { + display: grid; + grid-template: + "picture picture picture" var(--box) + "....... ....... ......." calc(var(--gap) / 2) + "....... heading ......." min-content + "....... blurb ......." auto / + var(--gap) var(--box) var(--gap); +} +.project__picture { + grid-area: picture; +} +.project__heading { + grid-area: heading; +} +.project__blurb { + grid-area: blurb; +} diff --git a/rashaad-ebrahim-portfolio/img/background.svg b/rashaad-ebrahim-portfolio/img/background.svg new file mode 100644 index 00000000..5df1d526 --- /dev/null +++ b/rashaad-ebrahim-portfolio/img/background.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rashaad-ebrahim-portfolio/img/bose.jpg b/rashaad-ebrahim-portfolio/img/bose.jpg new file mode 100644 index 00000000..6134c984 Binary files /dev/null and b/rashaad-ebrahim-portfolio/img/bose.jpg differ diff --git a/rashaad-ebrahim-portfolio/img/form-controls.jpg b/rashaad-ebrahim-portfolio/img/form-controls.jpg new file mode 100644 index 00000000..43e8371e Binary files /dev/null and b/rashaad-ebrahim-portfolio/img/form-controls.jpg differ diff --git a/rashaad-ebrahim-portfolio/img/hometown.jpg b/rashaad-ebrahim-portfolio/img/hometown.jpg new file mode 100644 index 00000000..9e8ebe1c Binary files /dev/null and b/rashaad-ebrahim-portfolio/img/hometown.jpg differ diff --git a/rashaad-ebrahim-portfolio/index.html b/rashaad-ebrahim-portfolio/index.html new file mode 100644 index 00000000..ecf5a26b --- /dev/null +++ b/rashaad-ebrahim-portfolio/index.html @@ -0,0 +1,538 @@ + + + + + + My Portfolio + + + + + + + + + + +
+
+

Rashaad Ebrahim

+ +
+
+
+
+
+
+

Rashaad Ebrahim

+

Web Developer

+
+
+ + + +

+ I build stuff for the web and I love it. +

+ + + +
+
+
+ +
+
+
+
+ +
+
+
+

About Me

+
+
+
+

Get to know me

+

+ I'm am fueled by curiosity and the thrill of bringing visions to + life on the web. +

+ I aim to create sites and applications that look great, feel + amazing and perform phenomincally. +

+ I'm excited about future opportunities to grow and create + impactful work! +

+ For me, coding isn't just about problem-solving - it's about + crafting experiences people will remember. +

+
+
+
+

My Skills

+
    +
  • HTML
    • +
  • CSS
    • +
  • SASS
    • +
  • JavaScript
    • +
  • Git
    • +
  • Github
    • +
  • Responsive Design
    • +
  • Terminal
    • +
+
+
+
+
+
+ +
+
+ +
+

Projects

+
+ +
+ +
+ + + + + + + +
+ +
+ +
+
+ Snippet of My Hometown website +
+

+ A webpage detailing some information about my hometown, + Johannesburg. The page features an image carousel implemented + with JavaScript. +

+
+
    +
  • HTML
    • +
  • CSS
    • +
  • JavaScript
    • +
  • Git
    • +
  • Github
    • +
+
+
+
+ +
+
+
+ Snippet of a e-commerce form +
+

+ An desktop-first e-commerce form for custom t-shirt orders. + Includes form validation, and JavaScript elements. +

+
+
    +
  • HTML
    • +
  • CSS
    • +
  • JavaScript
    • +
  • Git
    • +
  • Responsive Design
    • +
+
+
+
+ +
+
+
+ Snippet of Bose landing website +
+

+ Bose landing page showcasing responsive design and SASS. +

+
+
    +
  • HTML
    • +
  • CSS
    • +
  • SASS
    • +
  • JavaScript
    • +
  • Git
    • +
  • Responsive Design
    • +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/rashaad-ebrahim-portfolio/script.js b/rashaad-ebrahim-portfolio/script.js new file mode 100644 index 00000000..561e3e7b --- /dev/null +++ b/rashaad-ebrahim-portfolio/script.js @@ -0,0 +1,21 @@ +"use strict"; + +// Project card tab component + +const btnTabsContainer = document.querySelector(".projects-tabs__btns-container"); +const cardsContent = document.querySelectorAll(".project-card"); +const btnTabs = document.querySelectorAll(".projects-tabs__btn"); + +btnTabsContainer.addEventListener("click", function (e) { + const clicked = e.target.closest(".projects-tabs__btn"); + + if (!clicked) return; + btnTabs.forEach((btn) => btn.classList.remove("projects-tabs__btn--active")); + cardsContent.forEach((card) => card.classList.remove("project-card--active")); + + clicked.classList.add("projects-tabs__btn--active"); + + document + .querySelector(`.project-card-${clicked.dataset.btn}`) + .classList.add("project-card--active"); +}); diff --git a/rashaad-ebrahim-portfolio/style.css b/rashaad-ebrahim-portfolio/style.css new file mode 100644 index 00000000..d2edba0d --- /dev/null +++ b/rashaad-ebrahim-portfolio/style.css @@ -0,0 +1,594 @@ +/* ##### GENERAL ##### */ +/* Design tokens */ +:root { + /* --paper: #cad2d3; Primary */ + --paper: #8097a2; + --paperShade: #95a5a6; + --paperTint: #95a5a6; + + --ink: #262626; /* Secondary */ + --inkShade: #222; + --inkTint: #909090; + + --brand: #e74c3c; + --brandTint: #f3a69e; + + --accent: #bebdc2; + --secondary: #9b8199; + --font: "Raleway", system-ui, sans-serif; + --gap: 40px; + --icon-size: 28px; + --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px); + --header-bg: #bdbdbd; +} + +/* Global reset */ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Typography */ + +html { + font-size: 62.5%; +} + +body { + font-size: 1.8rem; + line-height: 1.6; + color: var(--ink); +} + +h1 { + font-size: 7.2rem; + line-height: 1.2; +} + +h2 { + font-size: 5.4rem; + line-height: 1.3; +} + +h3 { + font-size: 3.2rem; +} + +h4 { + font-size: 2rem; /* 24px */ +} + +p { + font-size: 1.8rem; /* 16px */ + margin-bottom: 1rem; /* Spacing between paragraphs */ +} + +a { + font-size: 1.8rem; + color: inherit; + text-decoration: none; +} + +strong { + font-weight: bold; +} + +/* Reusable hover effect class */ +/* + Ensure element has padding: 1.2rem; +*/ +.hover-effect { + position: relative; + transition: all 0.3s ease; +} + +/* Changes color of element hover is applied to */ + +/* Setup effect elements */ +.hover-effect::before, +.hover-effect::after { + content: ""; + height: 15px; + width: 15px; + position: absolute; + transition: all 0.3s ease-in-out; + opacity: 0; +} + +/* Set up hover elements end position */ +.hover-effect::before { + right: 0; + top: 0; + border-top: 4px solid var(--brand); + border-right: 4px solid var(--brand); + transform: translate(-100%, 50%); +} + +.hover-effect::after { + left: 0; + bottom: 0; + border-bottom: 4px solid var(--brand); + border-left: 4px solid var(--brand); + transform: translate(100%, -50%); +} + +/* Set element starting position */ +.hover-effect:hover::before, +.hover-effect:hover::after { + opacity: 1; + transform: translate(0, 0); +} + +/* Section header decoration */ +/* Effect is appied to the h2 element in the section header */ + +.section__header { + padding: 2rem 4rem; + margin-bottom: 4.4rem; + display: inline-block; + position: relative; +} + +.section__header::before, +.section__header::after { + content: ""; + height: 45px; + width: 45px; + position: absolute; +} + +.section__header::before { + right: 0; + top: 0; + transform: translate(50%, -50%); + border-top: 12px solid var(--brand); + border-right: 12px solid var(--brand); +} + +.section__header::after { + left: 0; + bottom: 0; + transform: translate(-50%, 50%); + border-bottom: 12px solid var(--brand); + border-left: 12px solid var(--brand); +} + +/* Reuseable blocks*/ +.skills__heading { + margin-bottom: 1.6rem; +} + +.skills__item { + font-size: 1.6rem; + font-weight: 500; + margin: 5px; + padding: 10px 15px; + font-weight: 500; + border-radius: 8px; + color: var(--inkShade); + background-color: #9b8199; + display: inline-block; + transition: all 0.3s; +} + +.skills__item:hover { + transform: translateY(-5%); + box-shadow: 0 8px 15px 1px rgba(0, 0, 0, 0.2); +} + +.icon { + width: var(--icon-size); + height: var(--icon-size); +} + + +/* General Styles */ + +html, +body { + scroll-behavior: smooth; + background: var(--paper); + color: var(--ink); + font-family: var(--font); +} + +html { + scroll-padding: var(--scroll-padding, 80.475px); +} + +body { + background: linear-gradient( + to left, + rgba(149, 165, 166, 0.7), + rgba(155, 129, 153, 0.5) + ), + url(./img/background.svg); +} + +/* HEADER */ +.header { + display: flex; + align-items: center; + justify-content: center; + min-height: 80px; + padding: 0 5%; + background-color: var(--header-bg, #bdbdbd); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 1; +} + +.header__content { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 128rem; + width: 100%; + flex-wrap: wrap; +} + +.header__title { + font-size: 4rem; +} + +.header__nav ul { + display: flex; + list-style: none; + gap: var(--gap); +} + +.nav__link { + font-weight: 600; + padding: 1.2rem; + text-decoration: none; +} + +.nav__link:hover, +.nav__link:focus, +.nav__link:active { + color: var(--brand); +} + +/* HERO */ +.section-hero { + padding: 4.4rem 0; + min-height: 80vh; +} + +.section-hero__content { + max-width: var(--container); + margin: 0 auto; + padding: 6rem; + display: flex; + flex-direction: column; + height: 100%; +} + +.section-hero__text { + align-self: center; + padding: 40px 80px; + position: relative; +} + +.section-hero__text::before, +.section-hero__text::after { + content: ""; + height: 120px; + width: 120px; + position: absolute; +} + +.section-hero__text::before { + right: 0; + top: 0; + border-top: 32px solid var(--brand); + border-right: 32px solid var(--brand); + transform: translate(50%, -50%); +} + +.section-hero__text::after { + left: 0; + bottom: 0; + border-bottom: 32px solid var(--brand); + border-left: 32px solid var(--brand); + transform: translate(-50%, 50%); +} + +.section-hero__title { + font-size: 7.2rem; +} + +.section-hero__subtitle { + font-size: 2.4rem; + font-weight: 500; +} + +.section-hero__quote { + margin-top: 4rem; + display: flex; + align-self: flex-end; +} + +.section-hero__quote-text { + font-size: 2.8rem; + font-weight: 500; +} + +.section-hero__quote-icon, +.section-hero__quote-icon--flip { + width: 32px; + height: 32px; + color: var(--brand); +} + +.section-hero__quote-icon--flip { + transform: rotate(180deg); +} + +.section-hero__contacts { + margin-top: 9.6rem; + margin-left: -6.8rem; +} + +/* ABOUT */ + +.section-about { + padding: 5.2rem 0; + background-color: rgba(128, 151, 162, 0.4); +} + +.section-about__content { + margin: 0 auto; + max-width: var(--container); +} + +.section-about__title { + font-size: 6rem; + /* margin-bottom: 4.4rem; */ +} + +.section-about__summary { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--gap); + padding: 0 1.6rem; +} + +.section-about__summary h3 { + text-align: center; + padding: 1.8rem 0; +} + +.section-about__text { + padding: 0 2.4rem; +} + +.section-about__heading { + font-size: 3.2rem; + margin-bottom: 1.6rem; +} + +/* Projects */ +.projects { + padding: 5.2rem 0 9.4rem; + /* background-color: rgba(128, 151, 162, 0.4); */ +} + +.projects__content { + margin: 0 auto; + max-width: var(--container); +} + +.project__title { + font-size: 6rem; + /* margin-bottom: 4.4rem; */ +} + +.projects-tabs { + padding: 0 var(--gap); +} + +.projects-tabs__btns-container { + display: flex; + justify-content: space-evenly; +} + +.projects-tabs__btn { + font-size: 16px; + padding: 15px 10px; + width: 180px; + border-radius: 100px; + transform: translateY(50%); + border: none; + background-color: var(--accent); + color: var(--inkShade); + transition: all 0.2s; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.9); +} + +.projects-tabs__btn:active { + transform: translateY(60%); + box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.9); +} + +.projects-tabs__btn:hover { + background-color: var(--paperShade); + /* background-color: #dbd8e9; */ +} + +.projects-tabs__btn--active { + background-color: var(--brand); + color: #0f0d0f; + transform: translateY(35%); + box-shadow: 0 20px 25px 0 rgba(0, 0, 0, 0.9); + transition: all 0.3s; +} + +.project-tabs__contents-container { + /* box-shadow: 0 0 10px #000; */ + border-radius: 12px; + background-color: rgba(128, 151, 162, 0.6); + margin: 0 auto; +} + +.project-card { + display: none; + opacity: 0; + padding: 50px; + margin: 0 auto; + transition: all 0.3s; +} + +.project-card--active { + display: block; + opacity: 1; + /* transition: all 0.3s; */ +} + +.project-card__summary { + display: flex; + gap: 20px; + max-height: 180px; + /* background-color: var(--accent); */ + border-radius: 12px; + overflow: hidden; + margin-top: 20px; + border: 2px solid #e74c3c; + /* box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1); */ +} + +.project-card__information { + padding: 0 0.8rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + +.project-card__img { + display: block; + width: 320px; + height: 180px; +} + +.project-card__links { + display: flex; + justify-content: center; + gap: var(--gap); + list-style: none; + margin-top: 60px; +} + +.project-card__link { + font-weight: 600; + color: var(--ink); + display: flex; + text-decoration: none; + gap: 10px; + justify-content: center; + align-items: center; + width: 192px; + height: 48px; + border-radius: 100px; + background-color: var(--accent); + transition: all 0.3s; +} + +.project-card__link--view { + background-color: var(--brand); + color: #0f0d0f; +} + +.project-card__link:hover, +.project-card__link:active, +.project-card__link:focus { + transform: scale(1.05); +} + +/* CONTACT */ + +.section-contact { + /* border-top: px solid var(--accent); */ + padding: 120px 0; + /* background-color: rgba(231, 77, 60, 0.2); */ +} + +.section-contact__contacts { + max-width: var(--container); + margin: 0 auto; + padding: 2.4rem; + text-align: center; + /* background-color: #fff; */ +} + +.contacts { + display: inline-block; + padding: 2rem 4rem; + background-color: rgba(128, 151, 162, 0.6); + border-radius: 8px; + position: relative; +} + +.contacts__links { + display: flex; + justify-content: space-evenly; + gap: 2rem; + list-style: none; +} + +.contacts__link { + color: var(--ink); + display: flex; + justify-content: center; + align-items: center; + width: 4.8rem; + height: 4.8rem; + border-radius: 6px; + background-color: #c4c4d4; + transition: all 0.3s ease-in-out; +} + +.contacts__link:hover, +.contacts__link:active, +.contacts__link:focus { + transform: scale(1.1); +} + +/* Footer */ +.footer * { + margin: 0; + color: var(--brand); +} +.footer { + /* background-color: var(--ink); */ + padding: var(--gap); +} + +.footer-container { + padding: 0 60px; + display: flex; + justify-content: space-between; +} + +.read-me { + display: flex; + align-items: center; + gap: 20px; +} + +.read-me-link { + text-decoration: none; + color: inherit; +} + +.read-me-text { + font-size: 18px; + text-transform: uppercase; +} + +.hidden { + display: none; +} diff --git a/style.css b/style.css deleted file mode 100644 index c911f90c..00000000 --- a/style.css +++ /dev/null @@ -1,57 +0,0 @@ -/* Design tokens */ -:root { - --paper: hsla(251, 28%, 88%, 0.99); - --ink: hsla(244, 16%, 17%, 0.95); - --brand: hsla(0, 79%, 63%, 0.9); - --font: "Raleway", system-ui, sans-serif; - --gap: 20px; - --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px); -} -/* General Styles */ -html, -body { - scroll-behavior: smooth; - background: var(--paper); - color: var(--ink); - font-family: var(--font); -} -body { - display: grid; - margin: auto; - min-height: 100vh; - gap: var(--gap); - max-width: var(--container); -} -a, -a:any-link { - color: currentColor; - text-decoration: none; - border-bottom: 2px solid transparent; - transition: border-color ease-in-out 0.3s; -} -a:hover, -a:focus { - color: var(--brand); - border-color: currentColor; -} -/* Site header and navigation */ -body > header { - background: var(--paper); - display: flex; - justify-content: space-between; - align-items: center; - position: sticky; - top: 0; - z-index: 1; -} -nav ul { - display: flex; - list-style: none; - gap: var(--gap); -} - -/* Text readability */ -section p { - line-height: 1.5; - max-width: 55ch; -}