Modificando aspecto de landing

agarnung · agarnung · commit 3b062ae30ef7 · 2025-02-28T11:30:20.000+01:00
diff --git a/_includes/landing.html b/_includes/landing.html
@@ -1,5 +1,5 @@
-<div class="row justify-content-center align-items-center p-4">
-  <div class="col-md-6 text-center mt-4">
+<div class="row justify-content-center align-items-center p-0 m-0">
+  <div class="col-md-6 text-center mt-0">
 
     <!-- Fine Circle Responsive Image -->
     <div id="container" class="my-2">
@@ -11,14 +11,14 @@
 
     <div class="text-muted wow animated slideInUp" data-wow-delay=".2s">
       <div class="container mt-4">
-        <h3 class="font-weight-bold">Hi! Welcome to my website</h3>
+        <h3 class="font-weight-bold" style="margin-top: 0px">Hi! Welcome to my website</h3>
       </div>
     </div>
     
   </div>
 
 <section class="p-4 align-items-start" class="text-muted wow animated slideInUp" data-wow-delay=".1s">
-  <div class="col-lg-8 mx-auto markdown-body" style="text-align: justify; margin-top: 12px">
+  <div class="col-lg-8 mx-auto markdown-body" style="text-align: justify; margin-top: 0px">
     <p>
       I am Alejandro, <span id="age"></span> years old. Here, you can take a look at my (personal) <a href="/projects">projects</a> (I have selected several that are available on my GitHub profile), <a href="/blog">blog</a> (where I document and share insights about computer vision, image processing, math, geometry and engineering, among other topics), <a href="/publications">publications</a> (a mix of informal, formal, and quasi-formal documents I find valuable for anyone interested in my fields), and, if you'd like to know more about me, <a href="/about">additional information</a>.
     </p>
@@ -36,28 +36,12 @@ <h3 class="font-weight-bold">Hi! Welcome to my website</h3>
   </div>
 </section>
 
-
 </div>
 
-<div style="white-space: nowrap; overflow: hidden; position: relative; width: 100%; height: 50px; background-color: transparent;">
-  <div style="display: inline-block; position: absolute; animation: scroll-left 10s linear infinite; font-family: monospace; color: grey;">
+<div id="scroll-container">
+  <div id="scroll-text">
     &lt;div&gt; 🚀 {{ site.description }} 🚀 &lt;/div&gt;
   </div>
 </div>
 
-<style>
-  @keyframes scroll-left {
-    0% {
-      transform: translateX(200%);
-    }
-    100% {
-      transform: translateX(-100%);
-    }
-  }
-  
-    div[style*="animation: scroll-left"] {
-    white-space: nowrap;
-  }
-</style>
-
 <script src="{{ '/assets/js/age-calculator.js' | relative_url }}"></script>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,7 +12,7 @@
 
 <body class="h-100 d-flex flex-column">
 
-  <main class="flex-shrink-0 container mt-5">
+  <main class="flex-shrink-0 container mt-1">
     {% include navbar.html %}
     {{ content }}
   </main>
diff --git a/_sass/_footer.scss b/_sass/_footer.scss
@@ -26,6 +26,6 @@
   text-decoration: underline;
   text-decoration-color: yellow;
   text-align: right;
-  margin-top: 4em;
+  margin-top: 0.5em;
   margin-right: 2em;
 }
diff --git a/_sass/_landing.scss b/_sass/_landing.scss
@@ -6,14 +6,13 @@
   justify-content: center;
   align-items: center;
   position: relative;
-  width: 100%;
-  height: 0;
-  padding-bottom: 100%; /* Maintains a 1:1 aspect ratio */
+  width: auto; /* To adjust to the image */
+  height: auto; /* To adjust to the image */
   font-size: 0; /* Removes extra whitespace caused by inline-block elements */
 }
 
 #element {
-  position: absolute;
+  position: relative;
   top: 0;
   bottom: 0;
   left: 0;
@@ -23,14 +22,42 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%; 
+  height: 100%;
 }
 
 .circle-image {
-  width: 80%;
-  height: 80%;
+  width: 50%;
+  height: 50%;
   border-radius: 50%;
   object-fit: cover;
   object-position: center;
   display: block; /* Removes any space below the image */
 }
 
+#scroll-container {
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 50px;
+  background-color: transparent;
+  margin-top: 25px;
+}
+
+#scroll-text {
+  display: inline-block;
+  position: absolute;
+  animation: scroll-left 10s linear infinite;
+  font-family: monospace;
+  color: grey;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(200%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,6 @@`
`26`	`26`	`text-decoration: underline;`
`27`	`27`	`text-decoration-color: yellow;`
`28`	`28`	`text-align: right;`
`29`		`- margin-top: 4em;`
	`29`	`+ margin-top: 0.5em;`
`30`	`30`	`margin-right: 2em;`
`31`	`31`	`}`