Fixing styles

boytchev · Jul 24, 2024 · 461b189 · 461b189
1 parent d1106fd
commit 461b189
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -89,11 +89,24 @@ h1:not([id])+p {
 
 
 .gallery {
-	text-align: jutify;
+	display: block;
+	text-align: center;
 }
 
-.gallery img {
+.style-block {
+	display: inline-block;
+	width: 18%;
+	text-align: center;
+	cursor: pointer;
+	text-decoration: none;
+}
+
+.style-block img {
 	width: 18%;
 	border: gray 1px dotted;
 	padding: 2px;
+}
+
+.style-block:hover img {
+	border: black 1px solid;
 }
diff --git a/index.md b/index.md
@@ -12,11 +12,26 @@ at [Sofia University](https://www.uni-sofia.bg/index.php/eng).
 Click on an image to open a live demo.
 
 <div class="gallery">
-	[<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-posture.jpg" width="125">](https://boytchev.github.io/mannequin.js/docs/example-posture.html)
-	[<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-figure-types.jpg" width="125">](https://boytchev.github.io/mannequin.js/docs/example-figure-types.html)
-	[<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-custom-body-parts.jpg" width="125">](https://boytchev.github.io/mannequin.js/docs/example-custom-body-parts.html)
-	[<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-point.jpg" width="125">](https://boytchev.github.io/mannequin.js/docs/example-point.html)
-	[<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-scene.jpg" width="125">](https://boytchev.github.io/mannequin.js/docs/example-scene.html)
+
+	<a class="style-block" href="https://boytchev.github.io/mannequin.js/docs/example-posture.html">
+		<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-posture.jpg">
+	</a>
+
+	<a class="style-block" href="https://boytchev.github.io/mannequin.js/docs/example-figure-types.html">
+		<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-figure-types.jpg">
+	</a>
+
+	<a class="style-block" href="https://boytchev.github.io/mannequin.js/docs/example-custom-body-parts.html">
+		<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-custom-body-parts.jpg">
+	</a>
+
+	<a class="style-block" href="https://boytchev.github.io/mannequin.js/docs/example-point.html">
+		<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-point.jpg">
+	</a>
+
+	<a class="style-block" href="https://boytchev.github.io/mannequin.js/docs/example-scene.html">
+		<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-scene.jpg">
+	</a>
 </div>
 
 * [API documentation](https://boytchev.github.io/mannequin.js/docs/api.html) (in English)