issue/stick-icon-validation: Improvements to the paperclip icon stick logic

Author: flaubert-dev

readme.txt

@@ -2,8 +2,8 @@
 Requires at least: WordPress 5.3
 Tested up to: WordPress 6.7
 Requires PHP: 7.0
-Version: 1.3.1
-Stable tag: 1.3.1
+Version: 1.3.2
+Stable tag: 1.3.2
 License: GPLv3 or later
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -66,6 +66,10 @@ Source:
 
 == Changelog ==
 
+= 1.3.2 - March 20 2025 =
+
+- Improvements to the paperclip icon stick logic
+
 = 1.3.1 - November 23 2024 =
 - Fixed: Stick icon paperclip
 - Updated: readme.txt

sass/_2_components/_1_components.scss

@@ -270,7 +270,6 @@
   padding: 5px 10px;
   position: absolute;
   right: 0px;
-  text-transform: capitalize;
 }
 
 .post-card .card-body a:hover,
@@ -282,25 +281,42 @@
   color: $blue-dark;
 }
 
-/* paperclip svg */
-.paperclip {
+/* post and sticky post */
+article.status-publish > .card-body div.paperclip:last-child,
+article.status-publish > .card-body div.paperclip:last-child svg {
+  background: transparent;
   display: none;
+  width: 0;
+  height: 0;
 }
 
-/* sticky post */
-.sticky {
-  background: $gray-5;
-  position: relative;
+article.post-card,
+article.post-card.sticky {
+  position: relative !important;
 }
 
-.sticky .paperclip {
-  /* paperclip svg */
-  color: $black;
-  display: block;
-  width: 20px;
-  position: absolute;
-  right: 8px;
-  top: 7px;
+article.post-card.sticky {
+  background: $gray-5 !important;
+}
+
+/* sticky post ( svg paperclip ) */
+article.post-card.sticky > .card-body div.paperclip:last-child,
+article.post-card.sticky > .card-body div.paperclip:last-child svg {
+  display: block !important;
+  width: 20px !important;
+  height: 20px !important;
+}
+
+article.post-card.sticky > .card-body div.paperclip:last-child svg {
+  color: $black !important;
+}
+
+article.post-card.sticky > .card-body div.paperclip:last-child {
+  background: transparent !important;
+  position: absolute !important;
+  right: 8px !important;
+  top: 7px !important;
+  z-index: 10 !important;
 }
 
 .updated:not(.published) {

sass/style.scss

@@ -4,7 +4,7 @@ Theme URI: https://github.com/flaubert-dev/really-simple-theme#really-simple-the
 Author: Flaubert Henriques
 Author URI: https://profiles.wordpress.org/flauberthenriques/
 Description: Really Simple is a theme for bloggers and writers who need a ultra light and fast theme. The theme focuses on simplicity and loading speed. Yes, Really Simple Theme is also fully AMP compatible. Check the >> readme.txt << file and leave the sidebar perfect after WordPress 5.8 update.
-Version: 1.3.1
+Version: 1.3.2
 Requires at least: WordPress 5.3
 Tested up to: WordPress 6.7
 Requires PHP: 7.0

style.css

@@ -5,7 +5,7 @@ Theme URI: https://github.com/flaubert-dev/really-simple-theme#really-simple-the
 Author: Flaubert Henriques
 Author URI: https://profiles.wordpress.org/flauberthenriques/
 Description: Really Simple is a theme for bloggers and writers who need a ultra light and fast theme. The theme focuses on simplicity and loading speed. Yes, Really Simple Theme is also fully AMP compatible. Check the >> readme.txt << file and leave the sidebar perfect after WordPress 5.8 update.
-Version: 1.3.1
+Version: 1.3.2
 Requires at least: WordPress 5.3
 Tested up to: WordPress 6.7
 Requires PHP: 7.0
@@ -965,7 +965,6 @@ textarea {
   padding: 5px 10px;
   position: absolute;
   right: 0px;
-  text-transform: capitalize;
 }
 
 .post-card .card-body a:hover,
@@ -977,25 +976,42 @@ textarea {
   color: #191970;
 }
 
-/* paperclip svg */
-.paperclip {
+/* post and sticky post */
+article.status-publish > .card-body div.paperclip:last-child,
+article.status-publish > .card-body div.paperclip:last-child svg {
+  background: transparent;
   display: none;
+  width: 0;
+  height: 0;
 }
 
-/* sticky post */
-.sticky {
-  background: #e2e6e9;
-  position: relative;
+article.post-card,
+article.post-card.sticky {
+  position: relative !important;
 }
 
-.sticky .paperclip {
-  /* paperclip svg */
-  color: #0f161a;
-  display: block;
-  width: 20px;
-  position: absolute;
-  right: 8px;
-  top: 7px;
+article.post-card.sticky {
+  background: #e2e6e9 !important;
+}
+
+/* sticky post ( svg paperclip ) */
+article.post-card.sticky > .card-body div.paperclip:last-child,
+article.post-card.sticky > .card-body div.paperclip:last-child svg {
+  display: block !important;
+  width: 20px !important;
+  height: 20px !important;
+}
+
+article.post-card.sticky > .card-body div.paperclip:last-child svg {
+  color: #0f161a !important;
+}
+
+article.post-card.sticky > .card-body div.paperclip:last-child {
+  background: transparent !important;
+  position: absolute !important;
+  right: 8px !important;
+  top: 7px !important;
+  z-index: 10 !important;
 }
 
 .updated:not(.published) {

template-parts/content.php

@@ -19,7 +19,6 @@
   <?php endif; ?><!-- .card-media --> 
 
   <div class="card-body">
-    
     <?php echo '<time>' . esc_html( get_the_date() ) . '</time>'; ?><!-- date/time -->
 
     <header class="entry-header">
@@ -46,16 +45,20 @@
       ?>
     </div><!-- .entry-content --> 
 
-    <?php the_author_posts_link(); ?><!-- author -->
+    <?php the_author_posts_link(); // author ?>
 
-    <svg xmlns="http://www.w3.org/2000/svg" 
-         fill="none" 
-         viewBox="0 0 24 24" 
-         stroke-width="1.5" 
-         stroke="currentColor" 
-         class="paperclip">
-      <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
-    </svg><!-- paperclip (sticky post) -->
+    <?php if ( is_sticky() ) : // sticky post ?>
+      <div class="paperclip" style="display: none;">
+        <svg xmlns="http://www.w3.org/2000/svg" 
+             fill="none" 
+             viewBox="0 0 24 24" 
+             stroke-width="1.5" 
+             stroke="currentColor"
+             style="display: none;">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+        </svg>
+      </div><!-- paperclip (sticky post) -->
+    <?php endif; ?>
   </div><!-- .card-body -->
 
-</article><!-- #post-<?php the_ID(); ?> -->
+</article>