css refinements

phoenixbf · Feb 1, 2025 · 083e024 · 083e024
1 parent 0d1c2eb
commit 083e024
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/public/dist/ATON.min.js b/public/dist/ATON.min.js
diff --git a/public/res/css/main.css b/public/res/css/main.css
@@ -398,11 +398,24 @@ canvas:active {
 }
 
 .aton-scene-card:hover {
-    transform: scale(1.1);
+    /*transform: scale(1.1);*/
+
     /*border: 1px solid rgba(var(--bs-body-color-rgb), 1);*/
     /*box-shadow: 0px 0px 10px rgba(var(--bs-body-color-rgb), 0.5);*/
 }
 
+.aton-card-cover {
+    overflow: hidden;
+}
+
+.aton-card-cover img {
+    transform-origin: 50% 50%;
+    transition: transform .5s, visibility .5s ease-in;
+}
+.aton-card-cover img:hover {
+    transform: scale(1.5);
+}
+
 .aton-scene-card-small {
     margin: 8px;
     width: 150px;

diff --git a/public/src/ATON.ui.js b/public/src/ATON.ui.js
@@ -757,7 +757,7 @@ UI.createSceneCard = (options)=>{
 
     // Cover    
     //if (options.onpress) el.innerHTML += "<img src='"+cover+"' class='card-img-top'>";
-    el.innerHTML += "<a href='"+ATON.PATH_FE+options.sid+"'><img src='"+cover+"' class='card-img-top'></a>";
+    el.innerHTML += "<div class='aton-card-cover'><a href='"+ATON.PATH_FE+options.sid+"'><img src='"+cover+"' class='card-img-top'></a></div>";
 
     // Body
     let elbody = document.createElement('div');

diff --git a/services/views/v2/home.ejs b/services/views/v2/home.ejs
@@ -45,7 +45,7 @@ window.addEventListener( 'load', ()=>{
 
                 ATON.UI.createPublicScenesGallery({
                         containerid: "pubscenes",
-                        size:"small",
+                        //size:"small",
                         entries: entries,
                         <% if (samples) { %> samples: true <% } %>
                 });
@@ -129,11 +129,11 @@ window.addEventListener( 'load', ()=>{
 </script>
 </head>
 
-<body>
+<body style="padding-top:50px;">
         <!-- Navbar -->
         <%- include('frags/navbar'); %>
 
-        <div style="margin-top: 40px;"></div>
+        <!-- <div style="margin-top: 40px;"></div>  -->
 
         <!-- Hero section -->
         <div id="hero">