14.1.0 (#7)

NEW FEATURES
- Added support for Mega Menu by Edje Library v9.2
- Added support for Dark Mode by Edje Library v9.2

UPDATE / FIXES
- Cleaned up package.json from unnecessary modules
- Replaced echo with short tags `<?=`
- Refactored PHP code to fit PixelStudio's coding standard
- Added further compatibility with WP 5.9
- Added SVG icon to Comment reply link and edit link

README.md

@@ -7,7 +7,7 @@ Stylesheet is compiled with **Node Sass**. Visit that link to know how to compil
 **REQUIREMENTS**
 
 - PHP 7.3+
-- WordPress 5.7+
+- WordPress 5.9+
 - [Composer 1.8](https://getcomposer.org/)
 - Node JS
 
@@ -42,14 +42,8 @@ This is our workflow for starting a new project:
         { "name": "Pixel Studio", "email": "[email protected]", "homepage": "https://pixelstudio.id" }
       ],
       "require": {
-        "pixelstudio/edje-wp-theme": "~9.1",
-        "pixelstudio/edje-wp-library": "~6.0.0",
-        "pixelstudio/wp-sync-db": "~1.8",
-
-        "wpackagist-plugin/jetpack": "*",
-        "wpackagist-plugin/autodescription": "*",
-        "wpackagist-plugin/contact-form-7": "*",
-        "wpackagist-theme/twentytwentyone": "*"
+        "pixelstudio/edje-wp-theme": "~14.1",
+        "pixelstudio/edje-wp-library": "~9.0.0"
       },
       "require-dev": {},
       "suggest": {},
@@ -77,16 +71,18 @@ This is our workflow for starting a new project:
 Here are some websites that uses this theme:
 
 - [WordPress Tips - Advanced Tutorial](https://wptips.dev)
+- [Gumaya - 5-star Hotel](https://gumayatowerhotel.com)
+- [Kantu - Peruvian Gifts](https://mikantu.com)
+- [LTL School - Learn Mandarin in China](https://ltl-school.com)
+- [Premiera Skincare](https://premieraskincare.com/)
+- [Pixel Studio - Web Designer](https://pixelstudio.id)
 - [Angela Chung - Fashion Designer](https://angela-chung.com)
 - [Briliant Glass - Glassware Factory](https://briliant.glass)
 - [Fitnation - Premium Gym](https://fitnation.co.id)
 - [Istana Mie - Restaurant Franchise](https://istanamie.com)
-- [LTL School - Learn Mandarin in China](https://ltl-school.com)
 - [GES13 - Refrigeration Distributor](https://ges13.com)
 - [Paritama - Garden Architecture](https://paritama.com)
 - [Pandarin - Mandarin Learning Center](https://pandarin.net)
-- [Pixel Studio - Web Designer](https://pixelstudio.id)
-- [Premiera Skincare](https://premieraskincare.com/)
 
 ## Useful Links
 

acf-json/group_62e526dda2cbf.json

@@ -0,0 +1,101 @@
+{
+    "key": "group_62e526dda2cbf",
+    "title": "Edje Widget - Dark Toggle",
+    "fields": [
+        {
+            "key": "field_62e5288bec0fc",
+            "label": "Style",
+            "name": "style",
+            "type": "button_group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "has-label": "Has Label",
+                "no-label": "No Label"
+            },
+            "allow_null": 0,
+            "default_value": "",
+            "layout": "horizontal",
+            "return_format": "value"
+        },
+        {
+            "key": "field_62e526e90170c",
+            "label": "Label Light",
+            "name": "label_light",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_62e5288bec0fc",
+                        "operator": "!=",
+                        "value": "no-label"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "placeholder": "Light",
+            "prepend": "",
+            "append": "",
+            "maxlength": ""
+        },
+        {
+            "key": "field_62e52802c52df",
+            "label": "Label Dark",
+            "name": "label_dark",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_62e5288bec0fc",
+                        "operator": "!=",
+                        "value": "no-label"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "placeholder": "Dark",
+            "prepend": "",
+            "append": "",
+            "maxlength": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "widget",
+                "operator": "==",
+                "value": "h_dark_toggle"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1659185934
+}

archive.php

@@ -6,7 +6,6 @@
 $args = [
   'title' => $query->name,
   'description' => $query->description,
-  'term' => $query,
   'posts' => $wp_query->get_posts(),
   'pagination' => H::get_pagination(),
 ];

assets/sass/_functions-mixins.sass → assets/css/_helpers.sass

@@ -64,7 +64,7 @@
 // Usage:
 //   @include triangle( n, #333, 20px, 12px );
 //
-@mixin triangle( $direction, $color, $width, $height: false)
+@mixin triangle($direction, $color, $width, $height: false)
   $half-width: math.div($width, 2)
 
   // If height is not specified, make the triangle equalateral

assets/sass/_vars-root.sass → assets/css/_vars-root.sass

@@ -2,13 +2,11 @@
   @each $c in $colors
     $var: map-get($c, 'var')
     $hex: map-get($c, 'hex')
-    $filter: map-get($c, 'filter')
 
     #{ $var } : #{ $hex }
     // RGB version for transparency, use it like this:
     // `rgba(--color1, .5)` which will output `rgba(var(--color1RGB), .5)`
     #{ $var }RGB : #{ red($hex) }, #{ green($hex) }, #{ blue($hex) }
-    #{ $var }Filter: #{ $filter }
 
 
   // Other colors
@@ -152,11 +150,24 @@ body.admin-bar
 @each $c in $colors
   $var: map-get($c, 'var')
   $slug: map-get($c, 'slug')
+  $filter: map-get($filters, $slug)
 
   .has-#{ $slug }-background-color
     --bgColor: var(#{ $var })
     --bgColorRGB: var(#{ $var }RGB)
   .has-#{ $slug }-color
     --textColor: var(#{ $var })
     --textColorRGB: var(#{ $var }RGB)
-    --filterColor: var(#{ $var }Filter)
+    --filterColor: #{$filter}
+
+///// FONT FACES
+
+@font-face
+  src: url('../fonts/notoserif-regular.woff2')
+  font-family: 'Noto Serif'
+  font-weight: 400
+
+@font-face
+  src: url('../fonts/notoserif-bold.woff2')
+  font-family: 'Noto Serif'
+  font-weight: 700

assets/css/_vars.scss

@@ -0,0 +1,63 @@
+// This file is using .scss format to make it easier to write Maps & List
+
+// Use this for the Filter value https://codepen.io/sosuke/pen/Pjoqqp - Useful to change the color of a PNG 
+// If you don't use PNG icon, feel free to remove the filter
+$colors: (
+  ( hex: #2c3e50, var: '--text',       slug: 'text-base' ),
+  ( hex: #868698, var: '--textDim',    slug: 'text-dim' ),
+  ( hex: #ffffff, var: '--textInvert', slug: 'text-invert' ),
+
+  ( hex: #5C6BC0, var: '--color1',      slug: 'color-1',),
+  ( hex: #3F4EA2, var: '--color1Dark',  slug: 'color-1-dark' ),
+  ( hex: #D3D7EE, var: '--color1Light', slug: 'color-1-light' ),
+
+  ( hex: #2ecc71, var: '--color2',      slug: 'color-2' ),
+  ( hex: #26A65B, var: '--color2Dark',  slug: 'color-2-dark' ),
+  ( hex: #def7e8, var: '--color2Light', slug: 'color-2-light' ),
+
+  ( hex: #e74c3c, var: '--color3',      slug: 'color-3' ),
+  ( hex: #fbdedb, var: '--color3Light', slug: 'color-3-light' ),
+);
+
+$filters: (
+  'text-base': invert(18%) sepia(12%) saturate(1870%) hue-rotate(169deg) brightness(94%) contrast(83%),
+  'text-dim': invert(53%) sepia(8%) saturate(544%) hue-rotate(201deg) brightness(99%) contrast(91%),
+  'text-invert': invert(100%) sepia(10%) saturate(7462%) hue-rotate(173deg) brightness(117%) contrast(108%),
+
+  'color-1': invert(59%) sepia(80%) saturate(2621%) hue-rotate(178deg) brightness(91%) contrast(87%),
+  'color-1-dark': invert(39%) sepia(9%) saturate(4187%) hue-rotate(163deg) brightness(95%) contrast(86%),
+  'color-1-light': invert(87%) sepia(18%) saturate(184%) hue-rotate(170deg) brightness(105%) contrast(95%),
+
+  'color-2': invert(64%) sepia(63%) saturate(493%) hue-rotate(92deg) brightness(90%) contrast(90%),
+  'color-2-dark': invert(49%) sepia(22%) saturate(1352%) hue-rotate(92deg) brightness(103%) contrast(90%),
+  'color-2-light': invert(98%) sepia(67%) saturate(213%) hue-rotate(65deg) brightness(100%) contrast(95%),
+
+  'color-3': invert(59%) sepia(98%) saturate(5598%) hue-rotate(343deg) brightness(99%) contrast(83%),
+  'color-3-light': invert(96%) sepia(66%) saturate(482%) hue-rotate(292deg) brightness(101%) contrast(97%)
+);
+
+///// MEDIA QUERY
+
+$size-xsmall : 480px;
+$size-small  : 768px;
+$size-medium : 960px;
+$size-large  : 1120px;
+
+$below-xs: "max-width:#{ $size-xsmall }";
+$above-xs: "min-width:#{ $size-xsmall + 1px }";
+$below-s: "max-width:#{ $size-small }";
+$above-s: "min-width:#{ $size-small + 1px }";
+$below-m: "max-width:#{ $size-medium }";
+$above-m: "min-width:#{ $size-medium + 1px }";
+$below-l: "max-width:#{ $size-large }";
+$above-l: "min-width:#{ $size-large + 1px }";
+
+$below-nav: $below-s; // small navigation breakpoint
+$above-nav: $above-s;
+
+$below-adminbar: "max-width:782px";
+$above-adminbar: "min-width:783px";
+
+$portrait: "orientation: portrait";
+$landscape: "orientation: landscape";
+$retina: "min-resolution: 192dpi";

assets/css/app.sass

@@ -0,0 +1,22 @@
+/*! Theme Name: Edje Basic Theme */
+@import "vars"
+@import "vars-root"
+@import "helpers"
+
+@import "components/normalize"
+@import "components/utilities"
+
+@import "components/grid"
+@import "components/fields"
+
+@import "components/header-footer"
+@import "components/widgets"
+@import "components/post"
+@import "components/menu"
+
+// OPTIONAL MODULES, only activate if you're using this feature
+@import "components/menu-mega"
+@import "components/dark-mode"
+// @import "components/post-comments"
+// @import "plugins/jetpack"
+// @import "plugins/cf7"

assets/css/components/_dark-mode.sass

@@ -0,0 +1,87 @@
+#main-container
+  background-color: var(--siteBg) // without background, it can't be inverted
+  
+body.h-is-dark
+  filter: invert(100%) hue-rotate(180deg)
+
+  // invert back the image
+  img
+    filter: invert(100%) hue-rotate(180deg) brightness(1.2)
+
+  // image that you want to stay inverted
+  .wp-block-site-logo img
+    filter: none
+
+
+.h-dark-toggle
+  cursor: pointer
+  display: flex
+  align-items: center
+  row-gap: 0.25rem
+  column-gap: 0.25rem
+
+  span
+    text-transform: uppercase
+    font-size: var(--xsFontSize)
+    font-weight: var(--hFontWeight)
+
+  input[type="checkbox"]
+    display: none
+
+
+.h-dark-toggle__switch
+  --width: 44px
+  --height: 24px
+  --padding: 4px
+
+  display: block
+  overflow: hidden
+  position: relative
+  background-color: var(--text)
+  width: var(--width)
+  height: var(--height)
+  border: 1px solid var(--textInvert)
+  border-radius: 1rem
+
+  &:focus
+    box-shadow: 0 0 0 2px var(--color1)
+
+  &::before
+    content: ""
+    position: absolute
+    z-index: 3
+    display: inline-block
+    background-color: var(--textInvert)
+
+    width: calc(var(--height) - var(--padding) - var(--padding))
+    height: calc(var(--height) - var(--padding) - var(--padding))
+    top: 50%
+    left: var(--padding)
+    border-radius: 50%
+    transform: translateY(-50%)
+    transition: var(--gTransition)
+  
+    input:checked + &
+      transform: translateY(-50%) translateX(calc(var(--width) / 2 - var(--padding) / 2))
+
+  // turn the circle into crescent
+  &::after
+    content: ""
+    position: absolute
+    top: 50%
+    left: 0
+    z-index: 2
+
+    display: inline-block
+    background-color: var(--text)
+    transition: var(--gTransition)
+    transform: translateY(-50%)
+
+    width: 1px
+    height: 1px
+    border-radius: 50%
+
+    body.h-is-dark &
+      z-index: 4
+      width: calc(var(--width) * 0.7)
+      height: calc(var(--width) * 0.7)