adding more

Cyborgnetical · May 18, 2024 · 94611ac · 94611ac
1 parent 7fe2ca5
commit 94611ac
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 63 deletions.
diff --git a/src/layouts/styles.css b/src/layouts/styles.css
@@ -19,7 +19,7 @@
 }
 
 body{
-    background-color: black;
+    background-color: rgb(49, 56, 65);
     color: white;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

diff --git a/src/pages/Gallery/Image-Info.less b/src/pages/Gallery/Image-Info.less
@@ -5,78 +5,57 @@ hr{
 #Image-Info{
     display: grid;
     grid-template-areas:
-    "File Image"
     "Info Image"
-    "Desc Image"
+    "Info Image"
+    "Info Image"
     ;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 3fr 2fr 12fr;
+    grid-template-rows: 1fr;
     width: 100vw;
     height: 500px;
-    .none{
-        color: transparent;
-        width: 0;
-        height: 0;
-    }
-    & > *{
-        position: relative;
-        display: flex;
-        flex-wrap: wrap;
+}
 
-        background-color: grey;
+#Information{
+    display: grid;
+    grid-template-rows: 3fr 1fr 12fr;
+
+    height: 100%;
+
+    grid-area: Info;
+    align-self: stretch;
+
+    margin:25px;
+    padding: 5px;
+    border-radius: 10px;
+    box-sizing: border-box;
+
+    background:grey;
+
+    overflow-x: hidden;
+
+    *{
+        display: flex;
 
-        border-radius: 2vmin;
-        padding: 10px;
         margin: 5px;
 
-        overflow-x: hidden;
-    }
-    .shine{
-        top:0;
-        right: 0;
-        height: 100%;
-        transform: skewX(-25deg);
-        background-color: rgb(95, 175, 255);
-        z-index: 1;
-    }
-    & > *::before{
-        content: "";
-        position: absolute;
-        .shine();
-        width: 40px;
-    }
-    & > *::after{
-        content: "";
-        position: absolute;
-        .shine();
-        width: 10px;
-        right: 5%;
-        background-color: rgb(195, 225, 255);
+        border-radius: 5px;
+
+        background-color: rgb(29, 29, 29);
+        box-shadow: 0 0 5px white;
+
+        align-items: center;
+        justify-content: center;
     }
     h2{
-        font-family: "Electrolize";
-        font-size: 36px;
-    }
-    hr{
-        width: 100%;
-        height: 1px;
-        background-color: aquamarine;
-        border: none;
-    }
-    img{
-        background-color: rgb(49, 88, 103);
-        align-self: stretch;
-        justify-self: stretch;
-        &::before,&::after{
+        display: flex;
 
-            .none()
-        }
+        padding-left: 5px;
 
+        font-size: 36px;
+        background:linear-gradient(90deg,rgb(51, 51, 51),rgb(95, 94, 94) 90%);
     }
     p{
-        align-self: start;
-        justify-self: start;
+        font-family: monospace;
+        padding: 10px;
     }
-
-
 }
diff --git a/src/pages/Gallery/index.astro b/src/pages/Gallery/index.astro
@@ -23,10 +23,11 @@
 
     <div id="Image-Info">
         <img id="image" alt="placeHolder" style="grid-area: Image;">
-        <h2 id="file" style="grid-area: File;"><hr>Example.img<hr></h2>
-        <span id="info" style="grid-area: Info;">Extra info</span>
-        <p id="desc" style="grid-area: Desc;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus arcu bibendum at varius vel pharetra vel turpis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Tincidunt eget nullam non nisi est sit amet facilisis. Egestas pretium aenean pharetra magna ac placerat vestibulum. Lobortis feugiat vivamus at augue eget. Dictum sit amet justo donec enim. Id volutpat lacus laoreet non curabitur. Sit amet tellus cras adipiscing enim eu. Felis eget velit aliquet sagittis. Interdum velit laoreet id donec ultrices tincidunt. Eget arcu dictum varius duis at consectetur. Sed felis eget velit aliquet sagittis. Rhoncus urna neque viverra justo nec ultrices dui sapien eget. In metus vulputate eu scelerisque felis imperdiet proin. In fermentum posuere urna nec.</p>
-    </div>
+        <div id="Information">
+            <h2 id="file">Example.img</h2>
+            <span id="info">Extra info</span>
+            <p id="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus arcu bibendum at varius vel pharetra vel turpis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Tincidunt eget nullam non nisi est sit amet facilisis. Egestas pretium aenean pharetra magna ac placerat vestibulum. Lobortis feugiat vivamus at augue eget. Dictum sit amet justo donec enim. Id volutpat lacus laoreet non curabitur. Sit amet tellus cras adipiscing enim eu. Felis eget velit aliquet sagittis. Interdum velit laoreet id donec ultrices tincidunt. Eget arcu dictum varius duis at consectetur. Sed felis eget velit aliquet sagittis. Rhoncus urna neque viverra justo nec ultrices dui sapien eget. In metus vulputate eu scelerisque felis imperdiet proin. In fermentum posuere urna nec.</p>
+        </div>
     <script>
         console.log("sup")
     </script>