Changed gif to webm

kristofersxyz/settings.py

@@ -125,7 +125,6 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/4.0/howto/static-files/
 
-# STATIC_URL = Path.joinpath(BASE_DIR, "static")
 STATIC_URL = "/static/"
 STATIC_ROOT = BASE_PATH.joinpath("static")
 MEDIA_ROOT = BASE_PATH.joinpath("media")

static/main/css/colors.css

@@ -2,7 +2,7 @@
     --color-scale-black: #010409;
     --color-scale-white: #ffffff;
 
-    --color-scale-white-transparent-7: #ffffffbc;
+    --color-scale-white-transparent-70: #ffffffbc;
 
     --color-scale-gray-0: #f0f6fc;
     --color-scale-gray-1: #c9d1d9;
@@ -42,12 +42,12 @@
     --color-border-muted: var(--color-scale-gray-7);
 
     --color-header-bg-default: var(--color-scale-gray-8);
-    --color-header-bg-transparent: var(--color-scale-gray-8-transparent-5);
-    --color-header-text: var(--color-scale-white-transparent-7);
+    --color-header-bg-transparent: var(--color-scale-gray-8-transparent-50);
+    --color-header-text: var(--color-scale-white-transparent-70);
 
     --color-btn-text: var(--color-scale-gray-1);
     --color-btn-bg: var(--color-scale-gray-7);
-    --color-btn-border: var(--color-scale-gray-0-transparent-1);
+    --color-btn-border: var(--color-scale-gray-0-transparent-10);
     --color-btn-hover-bg: var(--color-scale-gray-6);
     --color-btn-hover-border: var(--color-scale-gray-3);
     --color-btn-active-border: var(--color-scale-gray-5);

static/main/css/index.css

@@ -15,12 +15,12 @@
 .landing-title {
     position: absolute;
     margin: 1rem;
-    padding: 1rem;
     left: 0;
     right: 0;
     top: 30%;
 }
-img {
+
+video {
     width: clamp(20rem, 50%, 70rem);
 }
 

templates/main/index.html

@@ -14,10 +14,9 @@
 {% block content %}
     <div id="landing">
         <div class="landing-title">
-            <div class="">
-                <img src="https://media.giphy.com/media/xTiIzJSKB4l7xTouE8/giphy.gif"
-                     alt="Hello there.">
-            </div>
+            <video autoplay loop>
+                <source src="{% static 'main/img/hello-there.webm' %}" type="video/webm">
+            </video>
             <h1 class="text">
                 I&#39;m <span id="swap-text">Kristofers Solo</span>
             </h1>