update name projects and style example

criar-art · Jun 18, 2024 · c65f6fc · c65f6fc
1 parent d8501bf
commit c65f6fc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/src/app/views/about/about.component.html b/src/app/views/about/about.component.html
@@ -14,23 +14,23 @@
         src="assets/logos/logo-vue.svg"
         width="50"
         alt="Vue.js Logo"
-      />SlideContent Vue.js
+      />SlideContentVue
     </a>
     <a
       href="https://slidecontent-ember.web.app"
       target="_blank"
       class="example"
     >
       <img src="assets/logos/logo-ember.svg" width="80" alt="Ember Logo" />
-      SlideContent Ember
+      SlideContentEmber
     </a>
     <a
       href="https://slidecontent-reactjs.web.app"
       target="_blank"
       class="example"
     >
       <img src="assets/logos/logo-react.svg" width="90" alt="React Logo" />
-      SlideContent React
+      SlideContentReact
     </a>
   </div>
 </section>
diff --git a/src/app/views/about/about.component.scss b/src/app/views/about/about.component.scss
@@ -10,35 +10,40 @@ section {
     margin: 0 auto;
     display: flex;
     justify-content: center;
-    align-items: center;
     flex-direction: row;
-    @include mobile() {
+    align-items: stretch;
+
+    @include mobile {
       flex-direction: column;
     }
   }
+
   .example {
     display: flex;
+    flex: 1;
     align-items: center;
+    justify-content: center;
     flex-direction: column;
-    margin-bottom: 20px;
     padding: 1rem 2rem 2rem;
     border-radius: 10px;
-    margin: 2rem 0.5rem;
+    margin: 2rem 0.5rem 0;
     text-decoration: none;
     color: var(--main-color);
     border: 2px solid #eee;
-    width: 90%;
     font-weight: bold;
+    box-shadow:
+      0 10px 10px rgb(0 0 0 / 6%),
+      0 0 0 2px #fff;
     transition: 0.3s all;
-    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.06), 0 0 0 2px #fff;
-    transition: .3s all;
     background: #fff;
+
     &:hover {
       transform: scale(1.1);
     }
-  }
-  .example img {
-    height: 80px;
-    margin-bottom: 10px;
+
+    img {
+      height: 80px;
+      margin-bottom: 10px;
+    }
   }
 }