Updating docs and especially Ileana theme

Author: webmandesign

0app/includes/mixins/image.pug

@@ -19,6 +19,8 @@ mixin image( url, caption, attr )
 		- note = config.imageNote
 	if config.imageNotes && config.imageNotes.hasOwnProperty( urlOriginal )
 		- note = config.imageNotes[ urlOriginal ]
+	if 'core' === note
+		- note = config.imageNote
 
 	figure&attributes( attributes )
 		a( href=url title="Click to open large image" )

angelica/index.html

@@ -1,12 +1,12 @@
 :root {
   /* Theme color palette: */
-  --color_base: #fffdfd;
-  --color_contrast: #3f3d3d;
-  --color_contrast_alt: #0f0d0d;
-  --color_primary: #e51c06;
-  --color_primary_mixed: #fce1de;
-  --color_secondary: #fff8d0;
-  --color_secondary_mixed: #fffbec;
+  --color_base: #fffae6;
+  --color_contrast: #3f3a36;
+  --color_contrast_alt: #0f0a06;
+  --color_primary: #30533f;
+  --color_primary_mixed: #e5e5d1;
+  --color_secondary: #437358;
+  --color_secondary_mixed: #b7c6b0;
   --color_black: #000000;
   --color_white: #ffffff;
   --color_gradient_primary: var(--color_secondary);
@@ -19,15 +19,15 @@
   --color_button_text: var(--color_white);
   --color_header_background: var(--color_base);
   --color_header_text: var(--color_contrast_alt);
-  --color_nav_background: var(--color_secondary);
+  --color_nav_background: var(--color_secondary_mixed);
   --color_nav_text: var(--color_black);
   --color_nav_background_active: var(--color_primary);
   --color_nav_text_active: var(--color_white);
   --color_nav_background_hover: var(--color_primary_mixed);
-  --color_nav_text_hover: var(--color_nav_text);
-  --color_nav_border: rgba(0, 0, 0, var(--border_opacity));
-  --color_nav_prefix_content: var(--color_primary);
-  --color_nav_prefix_customizing: #0660e5;
+  --color_nav_text_hover: var(--color_black);
+  --color_nav_border: rgba(255, 255, 255, var(--border_opacity));
+  --color_nav_prefix_content: #9e5b61;
+  --color_nav_prefix_customizing: #9a5b9e;
   --color_intro_background: var(--color_primary);
   --color_intro_text: var(--color_white);
   --color_content_background: var(--color_base);
@@ -41,18 +41,8 @@
 }
 
 .intro {
-  isolation: isolate;
+  background-image: url("assets/images/p-i.webp");
 }
-.intro::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: url("assets/images/pexels-amina-filkins-5410071.webp");
-  background-position: 50% 50%;
-  background-size: cover;
-  opacity: 0.1;
-  z-index: -1;
-}
-.intro .stars .svg-icon {
-  fill: var(--color_secondary);
+.intro .svg-icon {
+  color: var(--color_secondary_mixed);
 }

bjork/index.html

@@ -1,13 +1,20 @@
+$color_base         : #fffae6;
+$color_base_alt     : #efead6;
+$color_contrast     : #3f3a36;
+$color_contrast_alt : #0f0a06;
+$color_primary      : #30533f;
+$color_secondary    : #437358;
+
 :root {
 
 	/* Theme color palette: */
-	--color_base:            #fffdfd;
-	--color_contrast:        #3f3d3d;
-	--color_contrast_alt:    #0f0d0d;
-	--color_primary:         #e51c06;
-	--color_primary_mixed:   #fce1de;
-	--color_secondary:       #fff8d0;
-	--color_secondary_mixed: #fffbec;
+	--color_base:            #{ $color_base };
+	--color_contrast:        #{ $color_contrast };
+	--color_contrast_alt:    #{ $color_contrast_alt };
+	--color_primary:         #{ $color_primary };
+	--color_primary_mixed:   #{ mix( $color_primary, $color_base, 12.50% ) };
+	--color_secondary:       #{ $color_secondary };
+	--color_secondary_mixed: #{ mix( $color_secondary, $color_base, 38.20% ) };
 	--color_black:           #000000;
 	--color_white:           #ffffff;
 
@@ -25,15 +32,16 @@
 	--color_header_background: var(--color_base);
 	--color_header_text: var(--color_contrast_alt);
 
-	--color_nav_background: var(--color_secondary);
+	--color_nav_background: var(--color_secondary_mixed);
 	--color_nav_text: var(--color_black);
 	--color_nav_background_active: var(--color_primary);
 	--color_nav_text_active: var(--color_white);
 	--color_nav_background_hover: var(--color_primary_mixed);
-	--color_nav_text_hover: var(--color_nav_text);
-	--color_nav_border: #{ rgba( #000, var(--border_opacity) ) };
-	--color_nav_prefix_content: var(--color_primary);
-	--color_nav_prefix_customizing: #0660e5; // Split complementary, https://www.colorhexa.com/e51c06
+	--color_nav_text_hover: var(--color_black);
+	--color_nav_border: #{ rgba( #fff, var(--border_opacity) ) };
+	// Shades of split complementary, https://www.colorhexa.com/30533f (from primary color)
+	--color_nav_prefix_content: #9e5b61;
+	--color_nav_prefix_customizing: #9a5b9e;
 
 	--color_intro_background: var(--color_primary);
 	--color_intro_text: var(--color_white);
@@ -51,20 +59,9 @@
 }
 
 .intro {
-	isolation: isolate;
-
-	&::before {
-		content: '';
-		position: absolute;
-		inset: 0;
-		background: url('assets/images/pexels-amina-filkins-5410071.webp');
-		background-position: 50% 50%;
-		background-size: cover;
-		opacity: .1;
-		z-index: -1;
-	}
+	background-image: url('assets/images/p-i.webp');
 
-	.stars .svg-icon {
-		fill: var(--color_secondary);
+	.svg-icon {
+		color: var(--color_secondary_mixed);
 	}
 }

cindy/index.html

@@ -22,7 +22,6 @@ block append menu/fse
 
 block prepend customizer/fse/theme-options
 	include custom-background.pug
-	include custom-header.pug
 
 block append site-editor/styles/colors/bottom
 	include colors.pug
@@ -33,7 +32,6 @@ block append plugins/recommended/woocommerce
 block faq/answer/page-builder
 	include faq-answer-page-builder.pug
 block append faq/questions/list
-	include faq-question-custom-header.pug
 	include faq-question-mobile-header.pug
 	include faq-question-sticky-header.pug
 	include faq-question-progress-bar.pug
@@ -42,7 +40,6 @@ block append faq/questions/list
 	include faq-question-wc-layout-product.pug
 	include faq-question-wc-shop-page.pug
 block append faq/answers/list
-	include faq-answer-custom-header.pug
 	include faq-answer-mobile-header.pug
 	include faq-answer-sticky-header.pug
 	include faq-answer-progress-bar.pug

deborah/index.html

@@ -4,6 +4,7 @@
 	ul
 		li List of posts with sidebar. (This is default layout.) → <em><a href="#{config.url.demo}blog/">Preview</a></em>
 		li Posts in 2 columns with no sidebar. → <em><a href="#{config.url.demo}blog/?layout=columns">Preview</a></em>
+		li Alternative posts layout in 3 columns. → <em><a href="#{config.url.demo}blog/?layout=columns-alt">Preview</a></em>
 
 	+image( 'blog-layout.jpg', 'Preview of blog layouts (posts list with sidebar, posts list in 2 columns)' )
 

eimear/index.html

@@ -82,7 +82,11 @@
 			'https://easycaptures.com/fs/uploaded/1625/7456394390.jpg' : 'megamenu.jpg',
 		},
 		imageNote  : 'core',
-		imageNotes : {}
+		imageNotes : {
+			'faq-spacing.jpg'   : 'core',
+			'mobile-header.jpg' : 'core',
+			'sticky-header.jpg' : 'core',
+		}
 	};
 
 //-

forstron/index.html

@@ -0,0 +1,58 @@
+:root {
+  /* Theme color palette: */
+  --color_base: $color_base;
+  --color_contrast: $color_contrast;
+  --color_contrast_alt: $color_contrast_alt;
+  --color_primary: $color_primary;
+  --color_primary_mixed: mix( $color_primary, $color_base, 12.50% );
+  --color_secondary: $color_secondary;
+  --color_secondary_mixed: mix( $color_secondary, $color_base, 38.20% );
+  --color_black: #000000;
+  --color_white: #ffffff;
+  --color_gradient_primary: var(--color_secondary);
+  --color_gradient_radial_primary: var(--color_secondary);
+  --color_gradient_radial_secondary: transparent;
+  /* Documentation colors: */
+  --color_accent: var(--color_primary);
+  --color_mark: var(--color_primary_mixed);
+  --color_button_background: var(--color_primary);
+  --color_button_text: var(--color_white);
+  --color_header_background: var(--color_base);
+  --color_header_text: var(--color_contrast_alt);
+  --color_nav_background: var(--color_secondary);
+  --color_nav_text: var(--color_black);
+  --color_nav_background_active: var(--color_primary);
+  --color_nav_text_active: var(--color_white);
+  --color_nav_background_hover: var(--color_primary_mixed);
+  --color_nav_text_hover: var(--color_nav_text);
+  --color_nav_border: rgba(0, 0, 0, var(--border_opacity));
+  --color_nav_prefix_content: var(--color_primary);
+  --color_nav_prefix_customizing: #0660e5;
+  --color_intro_background: var(--color_primary);
+  --color_intro_text: var(--color_white);
+  --color_content_background: var(--color_base);
+  --color_content_text: var(--color_contrast);
+  --color_content_headings: var(--color_contrast_alt);
+  --color_content_border: rgba(63, 61, 61, var(--border_opacity));
+  --color_heading_entry_background: var(--color_nav_background_active);
+  --color_heading_entry_text: var(--color_nav_text_active);
+  --color_footer_background: var(--color_primary);
+  --color_footer_text: var(--color_white);
+}
+
+.intro {
+  isolation: isolate;
+}
+.intro::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: url("assets/images/pexels-amina-filkins-5410071.webp");
+  background-position: 50% 50%;
+  background-size: cover;
+  opacity: 0.1;
+  z-index: -1;
+}
+.intro .stars .svg-icon {
+  fill: var(--color_secondary);
+}

francesca/index.html

@@ -0,0 +1,77 @@
+$color_base         : #fffae6;
+$color_base_alt     : #efead6;
+$color_contrast     : #3f3a36;
+$color_contrast_alt : #0f0a06;
+$color_primary      : #30533f;
+$color_secondary    : #437358;
+
+:root {
+
+	/* Theme color palette: */
+	--color_base:            $color_base;
+	--color_contrast:        $color_contrast;
+	--color_contrast_alt:    $color_contrast_alt;
+	--color_primary:         $color_primary;
+	--color_primary_mixed:   mix( $color_primary, $color_base, 12.50% );
+	--color_secondary:       $color_secondary;
+	--color_secondary_mixed: mix( $color_secondary, $color_base, 38.20% );
+	--color_black:           #000000;
+	--color_white:           #ffffff;
+
+	--color_gradient_primary: var(--color_secondary);
+	--color_gradient_radial_primary: var(--color_secondary);
+	--color_gradient_radial_secondary: transparent;
+
+	/* Documentation colors: */
+	--color_accent: var(--color_primary);
+	--color_mark: var(--color_primary_mixed);
+
+	--color_button_background: var(--color_primary);
+	--color_button_text: var(--color_white);
+
+	--color_header_background: var(--color_base);
+	--color_header_text: var(--color_contrast_alt);
+
+	--color_nav_background: var(--color_secondary);
+	--color_nav_text: var(--color_black);
+	--color_nav_background_active: var(--color_primary);
+	--color_nav_text_active: var(--color_white);
+	--color_nav_background_hover: var(--color_primary_mixed);
+	--color_nav_text_hover: var(--color_nav_text);
+	--color_nav_border: #{ rgba( #000, var(--border_opacity) ) };
+	--color_nav_prefix_content: var(--color_primary);
+	--color_nav_prefix_customizing: #0660e5; // Split complementary, https://www.colorhexa.com/e51c06
+
+	--color_intro_background: var(--color_primary);
+	--color_intro_text: var(--color_white);
+
+	--color_content_background: var(--color_base);
+	--color_content_text: var(--color_contrast);
+	--color_content_headings: var(--color_contrast_alt);
+	--color_content_border: #{ rgba( #3f3d3d, var(--border_opacity) ) };
+
+	--color_heading_entry_background: var(--color_nav_background_active);
+	--color_heading_entry_text: var(--color_nav_text_active);
+
+	--color_footer_background: var(--color_primary);
+	--color_footer_text: var(--color_white);
+}
+
+.intro {
+	isolation: isolate;
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: url('assets/images/pexels-amina-filkins-5410071.webp');
+		background-position: 50% 50%;
+		background-size: cover;
+		opacity: .1;
+		z-index: -1;
+	}
+
+	.stars .svg-icon {
+		fill: var(--color_secondary);
+	}
+}

icelander/index.html

@@ -0,0 +1,55 @@
+extends ../../0app/_index.pug
+
+block append styles
+	include ../assets/css/style.css
+
+//-----------------------------------------------
+
+block append posts
+	include posts-featured.pug
+	include blog-layout.pug
+
+block prepend pages/templates/about
+	include templates.pug
+block pages/templates/list
+	include template-content-only.pug
+	include template-no-intro.pug
+	include template-overlaid-header.pug
+	include template-with-sidebar.pug
+
+block append menu/fse
+	include menu-image.pug
+
+block prepend customizer/fse/theme-options
+	include custom-background.pug
+	include custom-header.pug
+
+block append site-editor/styles/colors/bottom
+	include colors.pug
+
+block append plugins/recommended/woocommerce
+	include plugin-wc.pug
+
+block faq/answer/page-builder
+	include faq-answer-page-builder.pug
+block append faq/questions/list
+	include faq-question-custom-header.pug
+	include faq-question-mobile-header.pug
+	include faq-question-sticky-header.pug
+	include faq-question-progress-bar.pug
+	include faq-question-space.pug
+	include faq-question-wc-cart-checkout.pug
+	include faq-question-wc-layout-product.pug
+	include faq-question-wc-shop-page.pug
+block append faq/answers/list
+	include faq-answer-custom-header.pug
+	include faq-answer-mobile-header.pug
+	include faq-answer-sticky-header.pug
+	include faq-answer-progress-bar.pug
+	include faq-answer-space.pug
+	include faq-answer-wc-cart-checkout.pug
+	include faq-answer-wc-layout-product.pug
+	include faq-answer-wc-shop-page.pug
+
+block append sidebars/fse/display
+	include sidebar-block.pug

ileana/assets/css/style.css

@@ -0,0 +1,10 @@
++sub_section( 'Blog Layout', 'blog-layout' )
+	p In #[+mark( 'nav', 'Appearance', 'Customize', 'Theme Options', 'Posts' )] you can choose between two predefined blog page layouts:
+
+	ul
+		li List of posts with sidebar. (This is default layout.) → <em><a href="#{config.url.demo}blog/">Preview</a></em>
+		li Posts in 2 columns with no sidebar. → <em><a href="#{config.url.demo}blog/?layout=columns">Preview</a></em>
+
+	+image( 'blog-layout.jpg', 'Preview of blog layouts (posts list with sidebar, posts list in 2 columns)' )
+
+	p Alternatively, create completely custom layout modifying <em>"Template content: Blog"</em> <a href="#site-editor-template-parts">template part in site editor</a>.