Final first web

aranroig/app/assets/css/colors.scss

@@ -2,6 +2,7 @@ $themes: (
     dark: (
         background: #1e1e1e,
         background-line: #2e2e2e,
+        background-fore: #0f0f10,
         border-color: #5a5a5a,
         text: #ffffff,
         link: #ff7d74,
@@ -9,6 +10,7 @@ $themes: (
     light: (
         background: #ffffff,
         background-line: #f0f0f0,
+        background-fore: #ffffff,
         border-color: #e0e0e0,
         text: #1e1e1e,
         link: #ff7d74,
@@ -22,13 +24,9 @@ $themes: (
 }
 
 :root {
-  @include theme-vars(map-get($themes, light));
-}
-
-[data-theme="dark"] {
   @include theme-vars(map-get($themes, dark));
 }
 
-[data-theme="ocean"] {
+[data-theme="light"] {
-  @include theme-vars(map-get($themes, ocean));
+  @include theme-vars(map-get($themes, light));
 }

aranroig/app/assets/css/main.scss

@@ -12,6 +12,8 @@ body {
   display: flex;
 }
 
+
+
 * {
   color: var(--color-text);
   font-family: 'Hurmit';
@@ -26,8 +28,9 @@ body {
 
 ul {
   list-style: none; /* Remove default bullets */
+  margin: 8px 0;
 }
-ul > li {padding: 10px 25px} /* Stretching li elements a little so it looks prettier */
+ul > li {padding: 0px 25px} /* Stretching li elements a little so it looks prettier */
 li {
   position: relative;
 }
@@ -37,7 +40,7 @@ li::before {
     height: 8px;
     background-color: var(--color-text);
     position: absolute;
-    top: 16px;
+    top: 6px;
     left: 4px;
 }
 

aranroig/app/components/Container.vue

@@ -15,8 +15,8 @@ $separation: 2px;
 
 .card{
   position: relative;
-  background: #0f0f10;
+  background: var(--color-background-fore);
-  padding: 24px;
+  padding: 8px 24px;
   color: white;
   border: 1px solid var(--color-border-color);
 }

aranroig/app/pages/index.vue

@@ -3,11 +3,15 @@
     
     <Container>
     <img ref="redDragon" class="pixelated" id="red-dragon" src="/sprites/dragon/frame1.png" width="180">
-      <p>Hi, I'm Aran!</p>
+      <p>Hi, I'm Aran!
-      <p>Welcome to my website! It is still under construction, so come back later!</p>
+        <br>Welcome to my website! It is still under intense development, so I recommend to come back later!
+      </p>
+      <p>
         <ul>
-        <li>You can view my resume <a href="https://cv.aranroig.com">here</a></li>
+            <li>You can check my resume <a href="https://cv.aranroig.com">here</a></li>
+            <li>Or check out my projects on <a href="https://github.com/BinarySandia04">GitHub</a></li>
         </ul>
+        </p>
     </Container>
 </template>