Try this new logo

meyer-lab · Nov 29, 2024 · 6367bfa · 6367bfa
1 parent 7cc0e9b
commit 6367bfa
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -9,7 +9,12 @@
     <div class="container azul">
       <header class="top row gutters{% if page.title == "Home" %} fadeInLeft animated{% endif %}">
         <div class="col span_2 center">
-        <div id="logo"></div>
+        <!-- <div id="logo"></div> //-->
+
+        <div class="animated-logo">
+          <div class="animated-circle"></div>
+        </div>
+
         </div>
         {% include navigation.html %}
       </header>

diff --git a/public/css/main.scss b/public/css/main.scss
@@ -231,6 +231,34 @@ footer {
   font-size: 8rem;
 }
 
+.animated-logo {
+  width: 100px;
+  height: 100px;
+  position: relative;
+}
+
+.animated-circle {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fillAndStroke 1s forwards;
+}
+
+@keyframes fillAndStroke {
+  0% {
+    background-color: transparent;
+    box-shadow: 0 0 0 0 rgba(0, 103, 161, 0);
+  }
+  100% {
+    background-color: #000;
+    box-shadow: 0 0 0 35px rgba(0, 103, 161, 0.3);
+  }
+}
+
 dl,
 .clearfix:before,
 .clearfix:after {