version 10.2.4

Theme_Changelog.txt

@@ -34,4 +34,17 @@ Version 10.2.3
 02 Jan, 2024
 +===============================+
 # Minor improvements in sidebar region.
-# Added options for layout: container width, header, main, footer.
\ No newline at end of file
+# Added options for layout: container width, header, main, footer.
+# Other minor improvements.
+
+
++===============================+
+Version 10.2.4
+02 Jan, 2024
++===============================+
+# Remove material font icons.
+# Added fontawesome 5.
+# Added Bootstrap font icons.
+# Added option for Highlight Author Comments.
+# Added styling for full pager and mini pager.
+# Other minor improvements.
\ No newline at end of file

config/install/zuvi.settings.yml

@@ -29,16 +29,22 @@ slider_image_path: ''
 front_sidebar: 0
 
 # Content
-comment_user_pic: 1
 node_author_pic: 0
 node_tags: 0
-font_icon_fontawesome: 0
-font_icon_material: 0
 
 # Footer
 copyright_text: 1
 scrolltotop_on: 1
 
+# Comment
+comment_user_pic: 1
+highlight_author_comment: 0
+
+# Font Icons
+fontawesome_four: 0
+fontawesome_five: 0
+bootstrapicons: 0
+
 # Custom styling
 styling: 0
 styling_code: ''

css/sass/_base.scss

@@ -392,8 +392,7 @@ button:hover,
 [type="button"]:hover,
 [type="reset"]:hover,
 [type="submit"]:hover {
-  background: #020312;
-  background: var(--bg-header);
+  background-color: var(--bg-header);
 }
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,

css/sass/_components.scss

@@ -72,4 +72,46 @@
 }
 .scrolltop:hover .scrolltop-icon {
   background: var(--bg-body);
+}
+/* Pager
+------------------------*/
+.pager {
+  width: 100%;
+  margin-top: 1rem;
+}
+.pager-items {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pager-item,
+.pager-item a {
+  display: grid;
+  place-content: center;
+  height: 44px;
+  min-width: 44px;
+}
+.pager-item {
+  background-color: var(--color-primary);
+  color: #ffffff;
+  border-radius: 4px;
+  transition: all 0.4s ease-in-out;
+}
+.pager-item:hover {
+  background-color: var(--color-secondary);
+}
+.pager-item a {
+  color: #ffffff;
+}
+.pager-item-active {
+  background-color: var(--bg-header);
+}
+.pager-item-first,
+.pager-item-last {
+  padding: 0 4px;
 }
\ No newline at end of file

css/sass/_core.scss

@@ -39,4 +39,9 @@ button.toolbar-icon {
 .filter-wrapper {
   border: 1px solid #282d38;
   border: 1px solid var(--border-color);
+}
+
+/* contextual buttons */
+.contextual button:hover {
+  background-color: var(--color-primary);
 }
\ No newline at end of file

css/sass/_main.scss

@@ -233,37 +233,6 @@ li.node-readmore a:hover::after {
   width: 2em;
 }
 
-/* Main -> node -> pager */
-nav.pager {
-  position: relative;
-}
-.pager ul.pager__items {
-  position: relative;
-  margin: 0;
-  padding: 1em 0;
-  list-style: none;
-  list-style-type: none;
-}
-.pager__items {
-  clear: both;
-  text-align: center;
-}
-.pager__item {
-  display: inline-block;
-  padding: 12px 0;
-}
-.pager__item a {
-  padding: 8px 14px;
-  color: #ffffff;
-  background: #181a25;
-  background: var(--bg-content);
-  border-radius: 4px;
-}
-.pager__item a:hover,
-.pager__item.is-active a {
-  background: var(--color-primary);
-  color: #ffffff;
-}
 
 /* Node content (page or articles) */
 .field--name-body input[type="text"],

css/style.css

@@ -444,8 +444,7 @@ button:hover,
 [type=button]:hover,
 [type=reset]:hover,
 [type=submit]:hover {
-  background: #020312;
-  background: var(--bg-header);
+  background-color: var(--bg-header);
 }
 
 button::-moz-focus-inner,
@@ -1108,6 +1107,11 @@ button.toolbar-icon {
   border: 1px solid var(--border-color);
 }
 
+/* contextual buttons */
+.contextual button:hover {
+  background-color: var(--color-primary);
+}
+
 /* Drupal system message */
 .message {
   position: relative;
@@ -1195,6 +1199,56 @@ button.toolbar-icon {
   background: var(--bg-body);
 }
 
+/* Pager
+------------------------*/
+.pager {
+  width: 100%;
+  margin-top: 1rem;
+}
+
+.pager-items {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pager-item,
+.pager-item a {
+  display: grid;
+  place-content: center;
+  height: 44px;
+  min-width: 44px;
+}
+
+.pager-item {
+  background-color: var(--color-primary);
+  color: #ffffff;
+  border-radius: 4px;
+  transition: all 0.4s ease-in-out;
+}
+
+.pager-item:hover {
+  background-color: var(--color-secondary);
+}
+
+.pager-item a {
+  color: #ffffff;
+}
+
+.pager-item-active {
+  background-color: var(--bg-header);
+}
+
+.pager-item-first,
+.pager-item-last {
+  padding: 0 4px;
+}
+
 /*
  * Blocks
  * Common styling for all blocks regions
@@ -2146,43 +2200,6 @@ li.node-readmore a:hover::after {
   width: 2em;
 }
 
-/* Main -> node -> pager */
-nav.pager {
-  position: relative;
-}
-
-.pager ul.pager__items {
-  position: relative;
-  margin: 0;
-  padding: 1em 0;
-  list-style: none;
-  list-style-type: none;
-}
-
-.pager__items {
-  clear: both;
-  text-align: center;
-}
-
-.pager__item {
-  display: inline-block;
-  padding: 12px 0;
-}
-
-.pager__item a {
-  padding: 8px 14px;
-  color: #ffffff;
-  background: #181a25;
-  background: var(--bg-content);
-  border-radius: 4px;
-}
-
-.pager__item a:hover,
-.pager__item.is-active a {
-  background: var(--color-primary);
-  color: #ffffff;
-}
-
 /* Node content (page or articles) */
 .field--name-body input[type=text],
 .field--name-body input[type=email],

css/theme-settings.css

@@ -5,9 +5,11 @@ label[for="edit-zuvi"] {
 
 .settings-form-title {
 	background-color: #020312;
-	color: #ffffff;
-	margin: 0 auto;
-	padding: 20px 0;
+	background-image: url("../logo.svg");
+	background-position: center center;
+	background-repeat: no-repeat;
+	height: 80px;
+	border-radius: 8px;
 }
 
 /* Fieldset */

templates/content/comment.html.twig

@@ -64,8 +64,14 @@
  * @see template_preprocess_comment()
  */
 #}
-
-<article{{ attributes.addClass('js-comment single-comment') }}>
+{%
+  set classes = [
+    status != 'published' ? status,
+    comment.owner.anonymous ? 'comment-by-anonymous',
+    author_id and author_id == commented_entity.getOwnerId() ? 'comment-by-author',
+  ]
+%}
+<article{{ attributes.addClass('js-comment single-comment', classes) }}>
   {#
     Hide the "new" indicator by default, let a piece of JavaScript ask the
     server which comments are new for the user. Rendering the final "new"

templates/template-parts/footer.html.twig

@@ -69,11 +69,14 @@
   </div>
 {% endif %}
 {% include '@zuvi/template-parts/style.html.twig' %}
-{% if font_icon_fontawesome %}
-  {{ attach_library('zuvi/fontawesome') }}
+{% if fontawesome_four %}
+  {{ attach_library('zuvi/fontawesome4') }}
 {% endif %}
-{% if font_icon_material %}
-  {{ attach_library('zuvi/material') }}
+{% if fontawesome_five %}
+  {{ attach_library('zuvi/fontawesome5') }}
+{% endif %}
+{% if bootstrapicons %}
+  {{ attach_library('zuvi/bootstrap-icons') }}
 {% endif %}
 {% if circle_type == 'circle_solid' %}
 <style>

templates/template-parts/style.html.twig

@@ -25,4 +25,9 @@
   max-width: 100%;
 }
 {% endif %}
+{% if highlight_author_comment %}
+.comment-by-author {
+  box-shadow: 0 0 3px var(--color-primary);
+}
+{% endif %}
 </style>
\ No newline at end of file