Redesign project site

style.css

@@ -19,7 +19,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.btn {
+.button {
   display: inline-block;
   padding: 1rem 2rem;
   font-size: 1rem;
@@ -28,56 +28,30 @@
   text-decoration: none;
 }
 
-.btn-outline {
+.button-outline {
   box-shadow: inset 0 0 0 1px currentColor;
 }
 
-.icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  box-sizing: content-box;
+.lh-none {
+  line-height: 0;
 }
 
-.icon [stroke] {
+.ellipse {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  grid-gap: 1rem;
+}
+
+.svg [stroke] {
   stroke: currentColor;
 }
 
-.icon [fill]:not([fill=none]) {
+.svg [fill]:not([fill=none]) {
   fill: currentColor;
-}
-
-.tooltip {
-  position: absolute;
-  top: calc(100% + 1rem);
-  left: 50%;
-  transform: translateX(-50%) scale(0.75);
-  transform-origin: 50% -1rem;
-  opacity: 0;
-  visibility: hidden;
-  cursor: default;
-  z-index: 1;
-  transition-property: opacity, visibility, transform;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
-}
-
-/* tooltip arrow */
-.tooltip::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -1rem);
-  display: block;
-  width: 2.5rem;
-  height: 1.5rem;
-  background-image: url("assets/tooltip-arrow.svg");
-  background-size: 100%;
-}
-
-.icon:hover .tooltip {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(-50%) scale(1);
-  transition-delay: 0.15s;
 }