Timeline Step Navigation

by Nicholas Berlette

HTML

<div class="wrapper relative block !opacity-100">
  <div class="app top-rainbow">
  <h1 class="h1 title">Steps to rule the world</h1>
  <ul class="timeline !ml-4 !leading-6 !text-sm">
    <li class="step complete">
      1. Fork the repository
    </li>
    <li class="step complete">
      2. Create a feature branch
    </li>
    <li class="step complete">
      3. Make a focused set of changes
    </li>
    <li class="step current">
      4. Commit the changes
    </li>
    <li class="step incomplete">
      5. Open a pull request
    </li>
    <li class="step incomplete">
      6. ?????
    </li>
    <li class="step incomplete">
      7. World Domination
    </li>
  </ul>
  </div>
</div>
<script>
	window.windicssRuntimeOptions = {
		timing: 'immediate',
		// enabled preflight
		preflight: true,
		// scan the entire dom tree to infer the classnames on page loaded
		extractInitial: true,
		// generate mock classes for browser to do the auto-completeion 
		mockClasses: true,
		// the windi config you are used to put in `windi.config.js`
		config: {
			darkMode: 'media',
			shortcuts: {
				'app': 'w-full h-auto rounded-3xl px-8 sm:px-10 py-12 my-16 !leading-12 bg-white text-gray-900 dark:(bg-gray-800 text-gray-50 ring-offset-gray-800 ring-emerald-700/20) !opacity-100 shadow-xl hover:shadow-2xl transition-shadow duration-1000 ease-in',
				'wrapper': 'max-w-2xl mx-auto mt-20 px-2 sm:px-6',
				'title': 'text-2xl sm:text-3xl my-0 p-0 mb-8 flex flex-row justify-between place-items-center align-center !text-primary-500 tracking-tight font-bold !font-[Metropolis] uppercase',
				'ease-colors': 'transition-colors duration-300 ease-in',
        'step': 'text-sm sm:!text-base md:!text-lg',
        // 
        'indicator': 'my-[0.2rem] mx-[0.125rem] h-[100%] w-[0.125rem] flex-shrink-0 after:absolute after:-top-6 after:left-0 after:w-[0.125rem] before:border-[0.125rem] before:w-2 before:h-2 before:rounded-full before:absolute before:top-4 before:left-[-0.1875rem] before:z-2...

CSS

@import "https://unpkg.com/@typehaus/metropolis";

html,
body {
  font-family: 'Metropolis', sans-serif !important;
}

.wrapper {
  opacity: 0;
  transition: opacity 1.333s ease-in 0.666s;
}

ul.timeline {
  line-height: 1.5rem !important;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  text-size-adjust: 100%;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 10px 0 !important;
}

ul.timeline>.step {
  position: relative;
  padding: 0.4rem 0 0.7rem 2rem !important;
  text-transform: uppercase;
  font-family: 'Metropolis', sans-serif !important;
  font-weight: 300;
  user-select: none;
}

.step::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  position: absolute;
  box-sizing: border-box;
  top: 1rem;
  left: -0.1875rem;
  z-index: 2;
}

.step::after {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 0;
  width: 0.125rem;
  height: 100%;
}

.step>.indicator {
  margin: 0.2rem 0.125rem;
  height: 100%;
  width: 0.125rem;
  flex-shrink: 0;
  background: #e9e9e9;
  border: 0;
}

.step.complete {
  color: #666 !important;
}

.step.complete::before {
  border: 0.125rem solid rgb(17, 165, 147);
  background: rgb(17, 165, 147);
}

.step.complete::after {
  background: rgb(17, 165, 147);
}

.step.current::before {
  border: 0.125rem solid rgb(35, 230, 168);
  background: rgb(255, 255, 255);
}

.step.current::after {
  background: linear-gradient(to top, rgb(35, 230, 168), rgb(17, 165, 147) 60%);
}

.step.current {
  font-weight: 500 !important;
}

.step.incomplete::before {
  border: 0.125rem solid rgb(220, 220, 220);
  background: rgb(255, 255, 255);
}

.step.current+.step::after {
  background: linear-gradient(rgb(35, 230, 168), rgb(220, 220, 220) 80%);
}

.step.incomplete::after {
  background: rgb(220, 220, 220);
}

.step.incomplete>.indicator {
  margin: 0.1875rem 0.125rem;
  height: 100%;
  width: 0.125rem;
  flex-shrink: 0;
  background: rgb(220, 220,...