From 7795ed041a9c374f6aa1cee1d0f32d8e9039ec8d Mon Sep 17 00:00:00 2001
From: devuri <devuriko@gmail.com>
Date: Sat, 5 Dec 2020 03:03:03 -0500
Subject: [PATCH] refactor: CSS Update

---
 assets/css/igfeed-gird.css          | 96 +++++++++++++++++++++++++++++
 assets/css/simsocial-photo-gird.css | 58 -----------------
 sim-social.php                      |  2 +-
 3 files changed, 97 insertions(+), 59 deletions(-)
 create mode 100644 assets/css/igfeed-gird.css
 delete mode 100644 assets/css/simsocial-photo-gird.css

diff --git a/assets/css/igfeed-gird.css b/assets/css/igfeed-gird.css
new file mode 100644
index 0000000..c33a1dc
--- /dev/null
+++ b/assets/css/igfeed-gird.css
@@ -0,0 +1,96 @@
+.igfeed-container {
+  margin: 0 auto;
+}
+
+.igfeed {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  /* justify-content: flex-start; */
+  justify-content: center;
+  align-content: stretch;
+  padding: 0;
+}
+
+.igfeed-item {
+    display: block;
+    float: left;
+    flex: 0 0 auto;
+	padding: 2px;
+	position: relative;
+}
+
+/* item description */
+.igfeed-item-info {
+	display: none;
+	font-size: small;
+	padding: 8px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0);
+	transform: translate(-50%, -50%);
+	transition: background-color 300ms linear;
+}
+
+.igfeed-item-info p {
+    font-weight: 600;
+	vertical-align: middle;
+	color: rgba(255, 255, 255, 0);
+	text-align: center;
+	transition: color 300ms linear;
+	position: relative;
+	top: 50%;
+	-ms-transform: translateY(-50%);
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+.igfeed-item:hover .igfeed-item-info,
+.igfeed-item:focus .igfeed-item-info {
+	display: block;
+    background-color: rgba(0, 0, 0, .6);
+}
+
+.igfeed-item-info:hover p {
+  color: rgba(255, 255, 255, 1);
+}
+
+/* item description */
+
+@media screen and (min-width: 1024px) {
+  .igfeed-item {
+    width: calc(100%/6);
+    height: calc(100%/6);
+  }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1024px) {
+  .igfeed-item {
+    width: calc(100%/4);
+    height: calc(100%/4);
+  }
+}
+
+@media screen and (min-width: 481px) and (max-width: 768px) {
+  .igfeed-item {
+    width: calc(100%/3);
+    height: calc(100%/3);
+  }
+}
+
+@media screen and (min-width: 321px) and (max-width: 480px) {
+  .igfeed-item {
+    width: calc(100%/2);
+    height: calc(100%/2);
+  }
+}
+
+@media screen  and (max-width: 320px) {
+  .igfeed-item {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/assets/css/simsocial-photo-gird.css b/assets/css/simsocial-photo-gird.css
deleted file mode 100644
index 8a50365..0000000
--- a/assets/css/simsocial-photo-gird.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.ig-photo-container {
-  margin: 0 auto;
-}
-
-.ig-photo-feed {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-content: stretch;
-  padding: 0;
-}
-
-.ig-photo-feed img {
-    display: block;
-    float: left;
-    flex: 0 0 auto;
-		padding-right: 2px;
-		padding-left:2px;
-    padding-bottom: 4px;
-    padding-top: 0px;
-}
-
-
-@media screen and (min-width: 1024px) {
-  .ig-photo-feed img {
-    width: calc(100%/6);
-    height: calc(100%/6);
-  }
-}
-
-@media screen and (min-width: 769px) and (max-width: 1024px) {
-  .ig-photo-feed img {
-    width: calc(100%/4);
-    height: calc(100%/4);
-  }
-}
-
-@media screen and (min-width: 481px) and (max-width: 768px) {
-  .ig-photo-feed img {
-    width: calc(100%/3);
-    height: calc(100%/3);
-  }
-}
-
-@media screen and (min-width: 321px) and (max-width: 480px) {
-  .ig-photo-feed img {
-    width: calc(100%/2);
-    height: calc(100%/2);
-  }
-}
-
-@media screen  and (max-width: 320px) {
-  .ig-photo-feed img {
-    width: 100%;
-    height: 100%;
-  }
-}
diff --git a/sim-social.php b/sim-social.php
index c3f350b..6ce9511 100644
--- a/sim-social.php
+++ b/sim-social.php
@@ -93,7 +93,7 @@
 	// register styles.
     add_action( 'init', function() {
 
-	    	wp_register_style( 'sim-social-feed-grid', plugin_dir_url( __FILE__ ) . 'assets/css/simsocial-photo-gird.css', array(), '1.4.3', 'all' );
+	    	wp_register_style( 'igfeed-grid', plugin_dir_url( __FILE__ ) . 'assets/css/igfeed-gird.css', array(), '1.6.3', 'all' );
 	    }
 	);