Adjust the eyebrow dot

Author: pusewicz

_sass/_page-header.scss

@@ -65,14 +65,17 @@
   text-transform: uppercase;
   color: var(--color-red);
   margin-bottom: 20px;
-}
 
-.page-header__eyebrow-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--color-red);
-  flex-shrink: 0;
+  &::before {
+    content: "";
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-red);
+    flex-shrink: 0;
+    transform: translateY(-1px);
+  }
 }
 
 /* ------------------------------------------------------------

about/index.html

@@ -6,7 +6,6 @@
 <section class="page-header">
   <div class="page-header__inner">
     <div class="page-header__eyebrow">
-      <span class="page-header__eyebrow-dot"></span>
       Project
     </div>
     <h1 class="page-header__heading">About mruby</h1>

docs/index.html

@@ -9,7 +9,6 @@
   <div class="page-header__inner">
     <div class="page-header__content">
       <div class="page-header__eyebrow">
-        <span class="page-header__eyebrow-dot"></span>
         Documentation
       </div>
       <h1 class="page-header__heading">Learn mruby</h1>

downloads/index.html

@@ -22,7 +22,6 @@
 <section class="page-header page-header--plain">
   <div class="page-header__inner">
     <div class="page-header__eyebrow">
-      <span class="page-header__eyebrow-dot"></span>
       Downloads
     </div>
     <h1 class="page-header__heading">Get mruby</h1>

index.html

@@ -8,7 +8,7 @@
 <section class="page-header">
   <div class="page-header__inner">
     <div class="page-header__content">
-      <span class="page-header__eyebrow"><span class="page-header__eyebrow-dot"></span> OPEN SOURCE · LIGHTWEIGHT · EMBEDDABLE</span>
+      <span class="page-header__eyebrow">OPEN SOURCE · LIGHTWEIGHT · EMBEDDABLE</span>
       <h1 class="page-header__heading">Lightweight Ruby for Everywhere</h1>
       <p class="page-header__description">
         mruby is the lightweight implementation of the Ruby language, complying with part of the ISO standard. Designed to be embedded within your application.

libraries/index.html

@@ -9,7 +9,6 @@
   <div class="page-header__inner">
     <div class="page-header__content">
       <div class="page-header__eyebrow">
-        <span class="page-header__eyebrow-dot"></span>
         Libraries
       </div>
       <h1 class="page-header__heading">mrbgems</h1>

team/index.html

@@ -7,7 +7,6 @@
   <div class="page-header__inner">
     <div class="page-header__content">
       <div class="page-header__eyebrow">
-        <span class="page-header__eyebrow-dot"></span>
         Team
       </div>
       <h1 class="page-header__heading">The people behind mruby</h1>