reviewd color themes and added 5 new ones

This commit is contained in:
Nuno Coração committed 2022-09-30 23:36:03 +01:00
1 parent 172f90ac75
commit 6b17b5ac93
15 files changed
+288 -197

No files matched your search

+32
View File
@@ -0,0 +1,32 @@
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 255,255,255;
--color-neutral-100: 214,251,252;
--color-neutral-200: 142,245,247;
--color-neutral-300: 70,239,243;
--color-neutral-400: 15,217,222;
--color-neutral-500: 10,147,150;
--color-neutral-600: 7,110,112;
--color-neutral-700: 5,72,74;
--color-neutral-800: 2,35,35;
--color-neutral-900: 0,0,0;
--color-primary-50: 255,255,255;
--color-primary-100: 255,255,255;
--color-primary-200: 255,240,212;
--color-primary-300: 255,213,136;
--color-primary-400: 255,187,59;
--color-primary-500: 238,155,0;
--color-primary-600: 197,128,0;
--color-primary-700: 156,102,0;
--color-primary-800: 116,75,0;
--color-primary-900: 75,49,0;
--color-secondary-50: 255,255,255;
--color-secondary-100: 255,246,241;
--color-secondary-200: 254,194,166;
--color-secondary-300: 252,142,91;
--color-secondary-400: 251,91,15;
--color-secondary-500: 187,62,3;
--color-secondary-600: 147,49,2;
--color-secondary-700: 107,35,2;
--color-secondary-800: 67,22,1;
--color-secondary-900: 26,9,0;
}
+32
View File
@@ -0,0 +1,32 @@
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 255,255,255;
--color-neutral-100: 254,197,207;
--color-neutral-200: 253,121,144;
--color-neutral-300: 251,46,82;
--color-neutral-400: 217,4,41;
--color-neutral-500: 177,3,33;
--color-neutral-600: 137,3,26;
--color-neutral-700: 97,2,18;
--color-neutral-800: 57,1,11;
--color-neutral-900: 17,0,3;
--color-primary-50: 255,255,255;
--color-primary-100: 255,255,255;
--color-primary-200: 230,233,238;
--color-primary-300: 186,193,206;
--color-primary-400: 141,153,174;
--color-primary-500: 117,132,157;
--color-primary-600: 97,111,136;
--color-primary-700: 80,92,113;
--color-primary-800: 63,72,89;
--color-primary-900: 46,53,65;
--color-secondary-50: 255,255,255;
--color-secondary-100: 217,230,238;
--color-secondary-200: 164,195,215;
--color-secondary-300: 111,160,192;
--color-secondary-400: 69,123,157;
--color-secondary-500: 57,101,129;
--color-secondary-600: 44,79,100;
--color-secondary-700: 32,56,72;
--color-secondary-800: 19,34,44;
--color-secondary-900: 7,12,15;
}
+32
View File
@@ -0,0 +1,32 @@
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 255,255,255;
--color-neutral-100: 232,238,237;
--color-neutral-200: 188,206,203;
--color-neutral-300: 143,174,170;
--color-neutral-400: 101,140,134;
--color-neutral-500: 84,116,111;
--color-neutral-600: 67,93,89;
--color-neutral-700: 50,69,66;
--color-neutral-800: 33,45,43;
--color-neutral-900: 16,21,21;
--color-primary-50: 255,255,255;
--color-primary-100: 255,255,255;
--color-primary-200: 205,252,247;
--color-primary-300: 132,249,235;
--color-primary-400: 59,245,223;
--color-primary-500: 20,243,217;
--color-primary-600: 11,212,188;
--color-primary-700: 9,173,153;
--color-primary-800: 7,134,119;
--color-primary-900: 5,95,84;
--color-secondary-50: 255,255,255;
--color-secondary-100: 194,253,219;
--color-secondary-200: 120,251,175;
--color-secondary-300: 45,249,130;
--color-secondary-400: 6,212,92;
--color-secondary-500: 5,172,75;
--color-secondary-600: 4,133,58;
--color-secondary-700: 3,93,40;
--color-secondary-800: 2,53,23;
--color-secondary-900: 0,14,6;
}
-32
View File
@@ -1,32 +0,0 @@
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 180,192,239;
--color-neutral-100: 137,156,231;
--color-neutral-200: 95,120,222;
--color-neutral-300: 53,85,213;
--color-neutral-400: 37,65,178;
--color-neutral-500: 31,54,148;
--color-neutral-600: 25,43,119;
--color-neutral-700: 19,33,89;
--color-neutral-800: 12,22,60;
--color-neutral-900: 6,11,30;
--color-primary-50: 250,187,210;
--color-primary-100: 246,140,178;
--color-primary-200: 242,93,147;
--color-primary-300: 239,45,115;
--color-primary-400: 216,17,89;
--color-primary-500: 192,15,79;
--color-primary-600: 169,13,70;
--color-primary-700: 145,11,60;
--color-primary-800: 121,10,50;
--color-primary-900: 98,8,40;
--color-secondary-50: 255,255,255;
--color-secondary-100: 255,242,219;
--color-secondary-200: 255,224,168;
--color-secondary-300: 255,206,117;
--color-secondary-400: 255,188,66;
--color-secondary-500: 255,179,40;
--color-secondary-600: 255,170,15;
--color-secondary-700: 244,158,0;
--color-secondary-800: 219,141,0;
--color-secondary-900: 194,125,0;
}
+32
View File
@@ -0,0 +1,32 @@
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 255,255,255;
--color-neutral-100: 255,255,255;
--color-neutral-200: 201,209,244;
--color-neutral-300: 137,156,231;
--color-neutral-400: 74,103,217;
--color-neutral-500: 37,65,178;
--color-neutral-600: 30,53,144;
--color-neutral-700: 23,40,110;
--color-neutral-800: 16,28,77;
--color-neutral-900: 9,16,43;
--color-primary-50: 255,255,255;
--color-primary-100: 255,255,255;
--color-primary-200: 252,211,226;
--color-primary-300: 246,140,178;
--color-primary-400: 240,69,131;
--color-primary-500: 216,17,89;
--color-primary-600: 178,14,73;
--color-primary-700: 140,11,58;
--color-primary-800: 103,8,42;
--color-primary-900: 65,5,27;
--color-secondary-50: 255,255,255;
--color-secondary-100: 255,255,255;
--color-secondary-200: 255,255,255;
--color-secondary-300: 255,242,219;
--color-secondary-400: 255,215,143;
--color-secondary-500: 255,188,66;
--color-secondary-600: 255,174,25;
--color-secondary-700: 239,155,0;
--color-secondary-800: 199,128,0;
--color-secondary-900: 158,102,0;
}
+32 -38
View File
@@ -1,38 +1,32 @@
/* Neon scheme */
:root {
--color-neutral: 255, 255, 255;
/* Blue Violet - 8338ec */
--color-neutral-50: 243, 236, 253;
--color-neutral-100: 229, 213, 251;
--color-neutral-200: 206, 176, 247;
--color-neutral-300: 180, 134, 243;
--color-neutral-400: 156, 97, 240;
--color-neutral-500: 131, 56, 236;
--color-neutral-600: 101, 20, 214;
--color-neutral-700: 75, 15, 158;
--color-neutral-800: 51, 10, 107;
--color-neutral-900: 24, 5, 51;
/* Winter Sky - ff006e */
--color-primary-50: 255, 229, 241;
--color-primary-100: 255, 204, 226;
--color-primary-200: 255, 153, 197;
--color-primary-300: 255, 102, 168;
--color-primary-400: 255, 51, 139;
--color-primary-500: 255, 0, 110;
--color-primary-600: 204, 0, 88;
--color-primary-700: 153, 0, 66;
--color-primary-800: 102, 0, 44;
--color-primary-900: 51, 0, 22;
/* Azure - 3a86ff */
--color-secondary-50: 235, 242, 255;
--color-secondary-100: 214, 230, 255;
--color-secondary-200: 179, 208, 255;
--color-secondary-300: 138, 183, 255;
--color-secondary-400: 97, 158, 255;
--color-secondary-500: 58, 134, 255;
--color-secondary-600: 0, 96, 250;
--color-secondary-700: 0, 72, 189;
--color-secondary-800: 0, 49, 128;
--color-secondary-900: 0, 23, 61;
}
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 255,255,255;
--color-neutral-100: 255,255,255;
--color-neutral-200: 218,196,249;
--color-neutral-300: 175,126,243;
--color-neutral-400: 131,56,236;
--color-neutral-500: 108,22,229;
--color-neutral-600: 91,18,192;
--color-neutral-700: 73,15,155;
--color-neutral-800: 56,11,118;
--color-neutral-900: 38,8,80;
--color-primary-50: 255,255,255;
--color-primary-100: 255,230,241;
--color-primary-200: 255,153,197;
--color-primary-300: 255,77,154;
--color-primary-400: 255,0,110;
--color-primary-500: 214,0,92;
--color-primary-600: 173,0,75;
--color-primary-700: 133,0,57;
--color-primary-800: 92,0,40;
--color-primary-900: 51,0,22;
--color-secondary-50: 255,255,255;
--color-secondary-100: 255,255,255;
--color-secondary-200: 211,228,255;
--color-secondary-300: 135,181,255;
--color-secondary-400: 58,134,255;
--color-secondary-500: 17,109,255;
--color-secondary-600: 0,89,231;
--color-secondary-700: 0,74,191;
--color-secondary-800: 0,58,150;
--color-secondary-900: 0,42,109;
}
+30 -30
View File
@@ -1,32 +1,32 @@
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 200,207,211;
--color-neutral-100: 172,183,188;
--color-neutral-200: 143,158,166;
--color-neutral-300: 115,133,143;
--color-neutral-400: 92,107,115;
--color-neutral-500: 76,89,95;
--color-neutral-600: 60,70,75;
--color-neutral-700: 44,52,56;
--color-neutral-800: 29,33,36;
--color-neutral-900: 13,15,16;
--color-neutral-50: 255,255,255;
--color-neutral-100: 255,255,255;
--color-neutral-200: 214,219,222;
--color-neutral-300: 172,183,188;
--color-neutral-400: 129,146,154;
--color-neutral-500: 92,107,115;
--color-neutral-600: 74,86,92;
--color-neutral-700: 56,65,70;
--color-neutral-800: 38,44,47;
--color-neutral-900: 19,23,24;
--color-primary-50: 255,255,255;
--color-primary-100: 250,251,252;
--color-primary-200: 219,228,232;
--color-primary-300: 188,204,212;
--color-primary-400: 157,180,192;
--color-primary-500: 141,168,182;
--color-primary-600: 126,156,172;
--color-primary-700: 110,144,162;
--color-primary-800: 97,132,150;
--color-primary-900: 87,118,135;
--color-secondary-50: 156,235,255;
--color-secondary-100: 105,225,255;
--color-secondary-200: 54,214,255;
--color-secondary-300: 3,204,255;
--color-secondary-400: 0,165,207;
--color-secondary-500: 0,145,181;
--color-secondary-600: 0,124,156;
--color-secondary-700: 0,104,131;
--color-secondary-800: 0,84,105;
--color-secondary-900: 0,63,79;
}
--color-primary-100: 255,255,255;
--color-primary-200: 255,255,255;
--color-primary-300: 250,251,252;
--color-primary-400: 204,216,222;
--color-primary-500: 157,180,192;
--color-primary-600: 132,161,176;
--color-primary-700: 107,142,160;
--color-primary-800: 89,121,138;
--color-primary-900: 73,99,113;
--color-secondary-50: 255,255,255;
--color-secondary-100: 255,255,255;
--color-secondary-200: 182,240,255;
--color-secondary-300: 105,225,255;
--color-secondary-400: 28,209,255;
--color-secondary-500: 0,165,207;
--color-secondary-600: 0,132,166;
--color-secondary-700: 0,100,125;
--color-secondary-800: 0,67,85;
--color-secondary-900: 0,35,44;
}
+32
View File
@@ -0,0 +1,32 @@
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 255,255,255;
--color-neutral-100: 238,232,238;
--color-neutral-200: 206,188,206;
--color-neutral-300: 174,143,174;
--color-neutral-400: 140,101,140;
--color-neutral-500: 116,84,116;
--color-neutral-600: 93,67,93;
--color-neutral-700: 69,50,69;
--color-neutral-800: 45,33,45;
--color-neutral-900: 21,16,21;
--color-primary-50: 255,255,255;
--color-primary-100: 255,255,255;
--color-primary-200: 252,205,252;
--color-primary-300: 249,132,247;
--color-primary-400: 245,59,242;
--color-primary-500: 243,20,239;
--color-primary-600: 212,11,208;
--color-primary-700: 173,9,170;
--color-primary-800: 134,7,132;
--color-primary-900: 95,5,94;
--color-secondary-50: 255,255,255;
--color-secondary-100: 227,194,253;
--color-secondary-200: 192,120,251;
--color-secondary-300: 157,45,249;
--color-secondary-400: 119,6,212;
--color-secondary-500: 97,5,172;
--color-secondary-600: 74,4,133;
--color-secondary-700: 52,3,93;
--color-secondary-800: 30,2,53;
--color-secondary-900: 8,0,14;
}
-32
View File
@@ -1,32 +0,0 @@
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 253,172,186;
--color-neutral-100: 253,121,144;
--color-neutral-200: 252,71,103;
--color-neutral-300: 251,21,61;
--color-neutral-400: 217,4,41;
--color-neutral-500: 192,4,36;
--color-neutral-600: 167,3,32;
--color-neutral-700: 142,3,27;
--color-neutral-800: 117,2,22;
--color-neutral-900: 92,2,17;
--color-primary-50: 255,255,255;
--color-primary-100: 230,233,238;
--color-primary-200: 201,206,216;
--color-primary-300: 171,180,195;
--color-primary-400: 141,153,174;
--color-primary-500: 126,140,163;
--color-primary-600: 111,126,153;
--color-primary-700: 99,114,139;
--color-primary-800: 88,102,125;
--color-primary-900: 78,89,110;
--color-secondary-50: 199,219,231;
--color-secondary-100: 164,195,215;
--color-secondary-200: 129,172,199;
--color-secondary-300: 93,149,184;
--color-secondary-400: 69,123,157;
--color-secondary-500: 61,109,139;
--color-secondary-600: 53,95,122;
--color-secondary-700: 46,81,104;
--color-secondary-800: 38,67,86;
--color-secondary-900: 30,54,68;
}
+29 -29
View File
@@ -1,32 +1,32 @@
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 24,255,132;
--color-neutral-100: 0,228,106;
--color-neutral-200: 0,177,83;
--color-neutral-300: 0,126,59;
--color-neutral-400: 0,75,35;
--color-neutral-500: 0,50,23;
--color-neutral-600: 0,24,11;
--color-neutral-700: 0,0,0;
--color-neutral-800: 0,0,0;
--color-neutral-50: 203,255,227;
--color-neutral-100: 126,255,186;
--color-neutral-200: 49,255,145;
--color-neutral-300: 0,228,106;
--color-neutral-400: 0,152,71;
--color-neutral-500: 0,75,35;
--color-neutral-600: 0,50,23;
--color-neutral-700: 0,24,11;
--color-neutral-800: 0,24,11;
--color-neutral-900: 0,0,0;
--color-primary-50: 166,255,125;
--color-primary-100: 132,255,74;
--color-primary-200: 97,255,23;
--color-primary-300: 72,227,0;
--color-primary-400: 56,176,0;
--color-primary-500: 48,151,0;
--color-primary-600: 40,125,0;
--color-primary-700: 32,99,0;
--color-primary-800: 24,74,0;
--color-primary-900: 15,48,0;
--color-secondary-50: 151,211,238;
--color-secondary-100: 107,192,231;
--color-secondary-200: 63,173,224;
--color-secondary-300: 33,149,203;
--color-secondary-400: 26,117,159;
--color-secondary-500: 22,101,137;
--color-secondary-600: 19,85,115;
--color-secondary-700: 15,69,93;
--color-secondary-800: 12,52,71;
--color-secondary-900: 8,36,49;
--color-primary-50: 255,255,255;
--color-primary-100: 236,255,227;
--color-primary-200: 184,255,150;
--color-primary-300: 132,255,74;
--color-primary-400: 80,252,0;
--color-primary-500: 56,176,0;
--color-primary-600: 48,151,0;
--color-primary-700: 40,125,0;
--color-primary-800: 40,125,0;
--color-primary-900: 7,23,0;
--color-secondary-50: 255,255,255;
--color-secondary-100: 239,248,252;
--color-secondary-200: 173,220,242;
--color-secondary-300: 107,192,231;
--color-secondary-400: 41,164,220;
--color-secondary-500: 26,117,159;
--color-secondary-600: 22,101,137;
--color-secondary-700: 19,85,115;
--color-secondary-800: 19,85,115;
--color-secondary-900: 4,20,28;
}
+16 -10
View File
@@ -2,7 +2,7 @@
<script type=text/javascript src=/blowfish/js/appearance.min.f94f4c4636d9e3ec8f5ee53cdc8ffa3d01bf87cd92ac85e6797550b1e2b80dc9118d838f3eb24c55109352455e72ff082dfe560283154e5a8f87fd75107b59c4.js integrity="sha512-+U9MRjbZ4+yPXuU83I/6PQG/h82SrIXmeXVQseK4DckRjYOPPrJMVRCTUkVecv8ILf5WAoMVTlqPh/11EHtZxA=="></script>
<script defer type=text/javascript id=script-bundle src=/blowfish/js/main.bundle.min.d535b8b104fbf5cdc592bf3729c592b7de370787e7d3d703691adbd733f84fc4427cafa8ab6f59ad6d01670bd2033f569322fa915928bfef4bd07f34cedd516b.js integrity="sha512-1TW4sQT79c3Fkr83KcWSt943B4fn09cDaRrb1zP4T8RCfK+oq29ZrW0BZwvSAz9WkyL6kVkov+9L0H80zt1Raw==" data-copy data-copied></script>
<script src=/js/zoom.min.js></script>
<link rel=apple-touch-icon sizes=180x180 href=/blowfish/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/blowfish/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/blowfish/favicon-16x16.png><link rel=manifest href=/blowfish/site.webmanifest><meta property="og:title" content="Getting Started"><meta property="og:description" content="All the front matter variables available in Blowfish."><meta property="og:type" content="article"><meta property="og:url" content="https://nunocoracao.github.io/blowfish/docs/getting-started/"><meta property="article:section" content="docs"><meta property="article:published_time" content="2020-08-15T00:00:00+00:00"><meta property="article:modified_time" content="2020-08-15T00:00:00+00:00"><meta property="og:site_name" content="Blowfish"><meta name=twitter:card content="summary"><meta name=twitter:title content="Getting Started"><meta name=twitter:description content="All the front matter variables available in Blowfish."><script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Getting Started","headline":"Getting Started","description":"All the front matter variables available in Blowfish.","abstract":"This section assumes you have already installed the Blowfish theme. The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.","inLanguage":"en","url":"https:\/\/nunocoracao.github.io\/blowfish\/docs\/getting-started\/","author":{"@type":"Person","name":"Blowfish"},"copyrightYear":"2020","dateCreated":"2020-08-15T00:00:00\u002b00:00","datePublished":"2020-08-15T00:00:00\u002b00:00","dateModified":"2020-08-15T00:00:00\u002b00:00","keywords":["installation","docs"],"mainEntityOfPage":"true","wordCount":"1006"}]</script><meta name=author content="Blowfish"><link href=https://twitter.com/burufugu rel=me><link href=https://github.com/nunocoracao/blowfish rel=me><script async src="https://www.googletagmanager.com/gtag/js?id=G-PEDMYR1V0K"></script>
<link rel=apple-touch-icon sizes=180x180 href=/blowfish/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/blowfish/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/blowfish/favicon-16x16.png><link rel=manifest href=/blowfish/site.webmanifest><meta property="og:title" content="Getting Started"><meta property="og:description" content="All the front matter variables available in Blowfish."><meta property="og:type" content="article"><meta property="og:url" content="https://nunocoracao.github.io/blowfish/docs/getting-started/"><meta property="article:section" content="docs"><meta property="article:published_time" content="2020-08-15T00:00:00+00:00"><meta property="article:modified_time" content="2020-08-15T00:00:00+00:00"><meta property="og:site_name" content="Blowfish"><meta name=twitter:card content="summary"><meta name=twitter:title content="Getting Started"><meta name=twitter:description content="All the front matter variables available in Blowfish."><script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Getting Started","headline":"Getting Started","description":"All the front matter variables available in Blowfish.","abstract":"This section assumes you have already installed the Blowfish theme. The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.","inLanguage":"en","url":"https:\/\/nunocoracao.github.io\/blowfish\/docs\/getting-started\/","author":{"@type":"Person","name":"Blowfish"},"copyrightYear":"2020","dateCreated":"2020-08-15T00:00:00\u002b00:00","datePublished":"2020-08-15T00:00:00\u002b00:00","dateModified":"2020-08-15T00:00:00\u002b00:00","keywords":["installation","docs"],"mainEntityOfPage":"true","wordCount":"1012"}]</script><meta name=author content="Blowfish"><link href=https://twitter.com/burufugu rel=me><link href=https://github.com/nunocoracao/blowfish rel=me><script async src="https://www.googletagmanager.com/gtag/js?id=G-PEDMYR1V0K"></script>
<script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-PEDMYR1V0K",{anonymize_ip:!1})}</script><link rel=stylesheet href=https://rsms.me/inter/inter.css><script src=https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js></script>
<script src=https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js></script>
<script src=https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js></script>
@@ -24,7 +24,7 @@
Like</button>
</span><span class="px-2 text-primary-500">&#183;</span>
<span class=mb-[2px]><a href=https://github.com/nunocoracao/blowfish/tree/main/exampleSite/content/docs/getting-started/index.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></svg></span></a></span><span class=pl-2 onclick='window.open("/blowfish/tags/installation/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">installation</span></span></span>
<span class=pl-2 onclick='window.open("/blowfish/tags/docs/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">docs</span></span></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#basic-configuration>Basic configuration</a></li><li><a href=#colour-schemes>Colour schemes</a><ul><li><ul><li><a href=#blowfish-default>Blowfish (default)</a></li><li><a href=#avocado>Avocado</a></li><li><a href=#fire>Fire</a></li><li><a href=#congo>Congo</a></li><li><a href=#slate>Slate</a></li><li><a href=#neon>Neon</a></li><li><a href=#redemption>Redemption</a></li><li><a href=#terminal>Terminal</a></li><li><a href=#mario>Mario</a></li><li><a href=#noir>Noir</a></li></ul></li></ul></li><li><a href=#organising-content>Organising content</a></li><li><a href=#menus>Menus</a></li><li><a href=#thumbnails>Thumbnails</a></li><li><a href=#detailed-configuration>Detailed configuration</a></li></ul></nav></div></details></div></div><div class="min-w-0 min-h-0 max-w-prose"><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><span class="text-primary-400 ltr:pr-3 rtl:pl-3"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><span class=dark:text-neutral-300>This section assumes you have already <a href=https://nunocoracao.github.io/blowfish/docs/installation/>installed the Blowfish theme</a>.</span></div><p>The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.</p><h2 id=basic-configuration class="relative group">Basic configuration <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#basic-configuration aria-label=Anchor>#</a></span></h2><p>Before creating any content, there are a few things you should set for a new installation. Starting in the <code>config.toml</code> file, set the <code>baseURL</code> and <code>languageCode</code> parameters. The <code>languageCode</code> should be set to the main language that you will be using to author your content.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/config.toml</span>
<span class=pl-2 onclick='window.open("/blowfish/tags/docs/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">docs</span></span></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#basic-configuration>Basic configuration</a></li><li><a href=#colour-schemes>Colour schemes</a><ul><li><ul><li><a href=#blowfish-default>Blowfish (default)</a></li><li><a href=#avocado>Avocado</a></li><li><a href=#fire>Fire</a></li><li><a href=#forest>Forest</a></li><li><a href=#princess>Princess</a></li><li><a href=#neon>Neon</a></li><li><a href=#bloody>Bloody</a></li><li><a href=#terminal>Terminal</a></li><li><a href=#marvel>Marvel</a></li><li><a href=#noir>Noir</a></li><li><a href=#autumn>Autumn</a></li><li><a href=#congo>Congo</a></li><li><a href=#slate>Slate</a></li></ul></li></ul></li><li><a href=#organising-content>Organising content</a></li><li><a href=#menus>Menus</a></li><li><a href=#thumbnails>Thumbnails</a></li><li><a href=#detailed-configuration>Detailed configuration</a></li></ul></nav></div></details></div></div><div class="min-w-0 min-h-0 max-w-prose"><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><span class="text-primary-400 ltr:pr-3 rtl:pl-3"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><span class=dark:text-neutral-300>This section assumes you have already <a href=https://nunocoracao.github.io/blowfish/docs/installation/>installed the Blowfish theme</a>.</span></div><p>The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.</p><h2 id=basic-configuration class="relative group">Basic configuration <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#basic-configuration aria-label=Anchor>#</a></span></h2><p>Before creating any content, there are a few things you should set for a new installation. Starting in the <code>config.toml</code> file, set the <code>baseURL</code> and <code>languageCode</code> parameters. The <code>languageCode</code> should be set to the main language that you will be using to author your content.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/config.toml</span>
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl><span class=nx>baseURL</span> <span class=p>=</span> <span class=s2>&#34;https://your_domain.com/&#34;</span>
</span></span><span class=line><span class=cl><span class=nx>languageCode</span> <span class=p>=</span> <span class=s2>&#34;en&#34;</span>
@@ -49,21 +49,27 @@ Like</button>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#84cc16></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#10b981></span></div><h4 id=fire class="relative group">Fire <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#fire aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#78716c></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#f97316></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#f43f5e></span></div><h4 id=congo class="relative group">Congo <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#congo aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#71717a></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#8b5cf6></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#d946ef></span></div><h4 id=slate class="relative group">Slate <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#slate aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#6b7280></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#64748b></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#6b7280></span></div><h4 id=neon class="relative group">Neon <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#neon aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#8338ec></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#f43f5e></span></div><h4 id=forest class="relative group">Forest <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#forest aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#658c86></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#3bf5df></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#06d45c></span></div><h4 id=princess class="relative group">Princess <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#princess aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#8c658c></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#f53bf2></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#7706d4></span></div><h4 id=neon class="relative group">Neon <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#neon aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#8338ec></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#ff006e></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#3a86ff></span></div><h4 id=redemption class="relative group">Redemption <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#redemption aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#d90429></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#3a86ff></span></div><h4 id=bloody class="relative group">Bloody <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#bloody aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#d90429></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#8d99ae></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#457b9d></span></div><h4 id=terminal class="relative group">Terminal <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#terminal aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#004b23></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#38b000></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#1a759f></span></div><h4 id=mario class="relative group">Mario <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#mario aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#2541b2></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#1a759f></span></div><h4 id=marvel class="relative group">Marvel <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#marvel aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#2541b2></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#d81159></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#ffbc42></span></div><h4 id=noir class="relative group">Noir <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#noir aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#5c6b73></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#9db4c0></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#00a5cf></span></div><p>Although these are the default schemes, you can also create your own. Refer to the <a href=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/#colour-schemes>Advanced Customisation</a> section for details.</p><h2 id=organising-content class="relative group">Organising content <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#organising-content aria-label=Anchor>#</a></span></h2><p>By default, Blowfish doesn&rsquo;t force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer <em>pages</em> for a static site, <em>posts</em> for a blog, or <em>projects</em> for a portfolio.</p><p>Here&rsquo;s a quick overview of a basic Blowfish project. All content is placed within the <code>content</code> folder:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>.
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#00a5cf></span></div><h4 id=autumn class="relative group">Autumn <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#autumn aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#0a9396></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#ee9b00></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#bb3e03></span></div><h4 id=congo class="relative group">Congo <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#congo aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#71717a></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#8b5cf6></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#d946ef></span></div><h4 id=slate class="relative group">Slate <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#slate aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-3 rounded-md" style=background-color:#6b7280></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#64748b></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#6b7280></span></div><p>Although these are the default schemes, you can also create your own. Refer to the <a href=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/#colour-schemes>Advanced Customisation</a> section for details.</p><h2 id=organising-content class="relative group">Organising content <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#organising-content aria-label=Anchor>#</a></span></h2><p>By default, Blowfish doesn&rsquo;t force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer <em>pages</em> for a static site, <em>posts</em> for a blog, or <em>projects</em> for a portfolio.</p><p>Here&rsquo;s a quick overview of a basic Blowfish project. All content is placed within the <code>content</code> folder:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>.
</span></span><span class=line><span class=cl>├── assets
</span></span><span class=line><span class=cl>│ └── img
</span></span><span class=line><span class=cl>│ └── author.jpg
+2 -2
View File
@@ -54,8 +54,8 @@ Like</button>
</span></span><span class=line><span class=cl> <span class=p>}]</span>
</span></span><span class=line><span class=cl><span class=p>}</span>
</span></span><span class=line><span class=cl><span class=p>{{</span><span class=o>&lt;</span> <span class=err>/chart &gt;}}</span>
</span></span></code></pre></div><div class=chart><canvas id=761349258></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("761349258"),n=new Chart(t,{type:"bar",data:{labels:["Tomato","Blueberry","Banana","Lime","Orange"],datasets:[{label:"# of votes",data:[12,19,3,5,3]}]}})})</script></div><p>You can see some additional Chart.js examples on the <a href=https://nunocoracao.github.io/blowfish/samples/charts/>charts samples</a> page.</p><h2 id=figure class="relative group">Figure <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#figure aria-label=Anchor>#</a></span></h2><p>Blowfish includes a <code>figure</code> shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.</p><p>When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.</p><p>The <code>figure</code> shortcode accepts six parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>src</code></td><td><strong>Required.</strong> The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a <a href=https://gohugo.io/content-management/page-resources/>page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</td></tr><tr><td><code>alt</code></td><td><a href=https://moz.com/learn/seo/alt-text>Alternative text description</a> for the image.</td></tr><tr><td><code>caption</code></td><td>Markdown for the image caption, which will be displayed below the image.</td></tr><tr><td><code>class</code></td><td>Additional CSS classes to apply to the image.</td></tr><tr><td><code>href</code></td><td>URL that the image should be linked to.</td></tr><tr><td><code>default</code></td><td>Special parameter to revert to default Hugo <code>figure</code> behaviour. Simply provide <code>default=true</code> and then use normal <a href=https://gohugo.io/content-management/shortcodes/#figure>Hugo shortcode syntax</a>.</td></tr></tbody></table><p>Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>)
</span></span></code></pre></div><div class=chart><canvas id=724139586></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("724139586"),n=new Chart(t,{type:"bar",data:{labels:["Tomato","Blueberry","Banana","Lime","Orange"],datasets:[{label:"# of votes",data:[12,19,3,5,3]}]}})})</script></div><p>You can see some additional Chart.js examples on the <a href=https://nunocoracao.github.io/blowfish/samples/charts/>charts samples</a> page.</p><h2 id=figure class="relative group">Figure <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#figure aria-label=Anchor>#</a></span></h2><p>Blowfish includes a <code>figure</code> shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.</p><p>When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.</p><p>The <code>figure</code> shortcode accepts six parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>src</code></td><td><strong>Required.</strong> The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a <a href=https://gohugo.io/content-management/page-resources/>page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</td></tr><tr><td><code>alt</code></td><td><a href=https://moz.com/learn/seo/alt-text>Alternative text description</a> for the image.</td></tr><tr><td><code>caption</code></td><td>Markdown for the image caption, which will be displayed below the image.</td></tr><tr><td><code>class</code></td><td>Additional CSS classes to apply to the image.</td></tr><tr><td><code>href</code></td><td>URL that the image should be linked to.</td></tr><tr><td><code>default</code></td><td>Special parameter to revert to default Hugo <code>figure</code> behaviour. Simply provide <code>default=true</code> and then use normal <a href=https://gohugo.io/content-management/shortcodes/#figure>Hugo shortcode syntax</a>.</td></tr></tbody></table><p>Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>)
</span></span></code></pre></div><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>figure</span>
</span></span><span class=line><span class=cl> <span class=na>src</span><span class=o>=</span><span class=s>&#34;abstract.jpg&#34;</span>
</span></span><span class=line><span class=cl> <span class=na>alt</span><span class=o>=</span><span class=s>&#34;Abstract purple artwork&#34;</span>
+1 -1
View File
@@ -1 +1 @@
[{"content":" Blowfish brings your content to life. 😍 This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example taxonomy listing page.\nSidenote: This page is just a standard Blowfish article listing and Hugo has been configured to generate a samples content type and display article summaries.\n","date":"26 September 2022","permalink":"/blowfish/samples/","section":"Content Samples","summary":"Blowfish brings your content to life. 😍 This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example taxonomy listing page.","title":"Content Samples"},{"content":"","date":"26 September 2022","permalink":"/blowfish/tags/sample/","section":"Tags","summary":"","title":"sample"},{"content":"Blowfish has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.\nThis area could be used to add some extra decriptive text to each taxonomy. Check out the advanced tag below to see how to take this concept even further.\n","date":"26 September 2022","permalink":"/blowfish/tags/","section":"Tags","summary":"Blowfish has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.","title":"Tags"},{"content":"","date":"26 September 2022","permalink":"/blowfish/tags/thumbnail/","section":"Tags","summary":"","title":"thumbnail"},{"content":"A quick example of how to start using Thumbnails in your articles.\nIf your average directory for an article looks like this:\ncontent └── awesome_article.md You need to change it from a single markdown file into a folder. Create a directory with the same name of the article, inside create a index.md file. You\u0026rsquo;ll get a structure similar to what\u0026rsquo;s below.\ncontent └── awesome_article └── featured.png Inside the article you can now add an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature*. Example below.\ncontent └── awesome_article ├── index.md └── featured.png This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for oEmbed cards across social platforms. As an example, you can try copy pasting the URL of this article into a platform that shows oEmbeds (e.g. Twitter, WhatsApp, Telegram, etc) and see what is displayed.\n","date":"26 September 2022","permalink":"/blowfish/samples/thumbnail_sample/","section":"Content Samples","summary":"A quick example of how to start using Thumbnails in your artciles.","title":"Thumbnails"},{"content":" A powerful, lightweight theme for Hugo built with Tailwind CSS. This is a demo site built entirely using Blowfish. It also contains a complete set of theme documentation. Blowfish is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.\nThis is a demo of the profile layout. Switch layout \u0026orarr; Explore the sample pages to get a feel for what Blowfish can do. If you like what you see, check out the project on Github or read the Installation guide to get started.\n","date":"26 September 2022","permalink":"/blowfish/","section":"Welcome to Blowfish! 🎉","summary":"A powerful, lightweight theme for Hugo built with Tailwind CSS. This is a demo site built entirely using Blowfish. It also contains a complete set of theme documentation. Blowfish is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.","title":"Welcome to Blowfish! 🎉"},{"content":"","date":"13 June 2022","permalink":"/blowfish/posts/","section":"Posts","summary":"","title":"Posts"},{"content":"","date":"19 January 2022","permalink":"/blowfish/tags/docs/","section":"Tags","summary":"","title":"docs"},{"content":" Simple, yet powerful. Learn how to use Blowfish and its features. This section contains everything you need to know about Blowfish. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.\n","date":"19 January 2022","permalink":"/blowfish/docs/","section":"Documentation","summary":"Simple, yet powerful. Learn how to use Blowfish and its features. This section contains everything you need to know about Blowfish. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.","title":"Documentation"},{"content":"","date":"19 January 2022","permalink":"/blowfish/tags/new/","section":"Tags","summary":"","title":"new"},{"content":" Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of ConLine truncated
[{"content":" Blowfish brings your content to life. 😍 This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example taxonomy listing page.\nSidenote: This page is just a standard Blowfish article listing and Hugo has been configured to generate a samples content type and display article summaries.\n","date":"26 September 2022","permalink":"/blowfish/samples/","section":"Content Samples","summary":"Blowfish brings your content to life. 😍 This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example taxonomy listing page.","title":"Content Samples"},{"content":"","date":"26 September 2022","permalink":"/blowfish/tags/sample/","section":"Tags","summary":"","title":"sample"},{"content":"Blowfish has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.\nThis area could be used to add some extra decriptive text to each taxonomy. Check out the advanced tag below to see how to take this concept even further.\n","date":"26 September 2022","permalink":"/blowfish/tags/","section":"Tags","summary":"Blowfish has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.","title":"Tags"},{"content":"","date":"26 September 2022","permalink":"/blowfish/tags/thumbnail/","section":"Tags","summary":"","title":"thumbnail"},{"content":"A quick example of how to start using Thumbnails in your articles.\nIf your average directory for an article looks like this:\ncontent └── awesome_article.md You need to change it from a single markdown file into a folder. Create a directory with the same name of the article, inside create a index.md file. You\u0026rsquo;ll get a structure similar to what\u0026rsquo;s below.\ncontent └── awesome_article └── featured.png Inside the article you can now add an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature*. Example below.\ncontent └── awesome_article ├── index.md └── featured.png This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for oEmbed cards across social platforms. As an example, you can try copy pasting the URL of this article into a platform that shows oEmbeds (e.g. Twitter, WhatsApp, Telegram, etc) and see what is displayed.\n","date":"26 September 2022","permalink":"/blowfish/samples/thumbnail_sample/","section":"Content Samples","summary":"A quick example of how to start using Thumbnails in your artciles.","title":"Thumbnails"},{"content":" A powerful, lightweight theme for Hugo built with Tailwind CSS. This is a demo site built entirely using Blowfish. It also contains a complete set of theme documentation. Blowfish is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.\nThis is a demo of the profile layout. Switch layout \u0026orarr; Explore the sample pages to get a feel for what Blowfish can do. If you like what you see, check out the project on Github or read the Installation guide to get started.\n","date":"26 September 2022","permalink":"/blowfish/","section":"Welcome to Blowfish! 🎉","summary":"A powerful, lightweight theme for Hugo built with Tailwind CSS. This is a demo site built entirely using Blowfish. It also contains a complete set of theme documentation. Blowfish is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.","title":"Welcome to Blowfish! 🎉"},{"content":"","date":"13 June 2022","permalink":"/blowfish/posts/","section":"Posts","summary":"","title":"Posts"},{"content":"","date":"19 January 2022","permalink":"/blowfish/tags/docs/","section":"Tags","summary":"","title":"docs"},{"content":" Simple, yet powerful. Learn how to use Blowfish and its features. This section contains everything you need to know about Blowfish. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.\n","date":"19 January 2022","permalink":"/blowfish/docs/","section":"Documentation","summary":"Simple, yet powerful. Learn how to use Blowfish and its features. This section contains everything you need to know about Blowfish. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.","title":"Documentation"},{"content":"","date":"19 January 2022","permalink":"/blowfish/tags/new/","section":"Tags","summary":"","title":"new"},{"content":" Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of ConLine truncated
+4 -4
View File
@@ -26,10 +26,10 @@ Like</button></span>
<span class=pl-2 onclick='window.open("/blowfish/tags/chart/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">chart</span></span></span>
<span class=pl-2 onclick='window.open("/blowfish/tags/sample/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">sample</span></span></span>
<span class=pl-2 onclick='window.open("/blowfish/tags/graph/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">graph</span></span></span>
<span class=pl-2 onclick='window.open("/blowfish/tags/shortcodes/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">shortcodes</span></span></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#bar-chart>Bar chart</a></li><li><a href=#line-chart>Line chart</a></li><li><a href=#doughnut-chart>Doughnut chart</a></li></ul></nav></div></details></div></div><div class="min-w-0 min-h-0 max-w-prose"><p>Blowfish includes support for Chart.js using the <code>chart</code> shortcode. Simply wrap the chart markup within the shortcode. Blowfish automatically themes charts to match the configured <code>colorScheme</code> parameter, however the colours can be customised using normal Chart.js syntax.</p><p>Refer to the <a href=https://nunocoracao.github.io/blowfish/docs/shortcodes/#chart>chart shortcode</a> docs for more details.</p><p>The examples below are a small selection taken from the <a href=https://www.chartjs.org/docs/latest/samples>official Chart.js docs</a>. You can also <a href=https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/charts.md>view the page source</a> on GitHub to see the markup.</p><h2 id=bar-chart class="relative group">Bar chart <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#bar-chart aria-label=Anchor>#</a></span></h2><div class=chart><canvas id=735412698></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("735412698"),n=new Chart(t,{type:"bar",data:{labels:["January","February","March","April","May","June","July"],datasets:[{label:"My First Dataset",data:[65,59,80,81,56,55,40],backgroundColor:["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)","rgba(75, 192, 192, 0.2)","rgba(54, 162, 235, 0.2)","rgba(153, 102, 255, 0.2)","rgba(201, 203, 207, 0.2)"],borderColor:["rgb(255, 99, 132)","rgb(255, 159, 64)","rgb(255, 205, 86)","rgb(75, 192, 192)","rgb(54, 162, 235)","rgb(153, 102, 255)","rgb(201, 203, 207)"],borderWidth:1}]}})})</script></div><h2 id=line-chart class="relative group">Line chart <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#line-chart aria-label=Anchor>#</a></span></h2><div class=chart><canvas id=148762935></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("148762935"),n=new Chart(t,{type:"line",data:{labels:["January","February","March","April","May","June","July"],datasets:[{label:"My First Dataset",data:[65,59,80,81,56,55,40],tension:.2}]}})})</script></div><h2 id=doughnut-chart class="relative group">Doughnut chart <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#doughnut-chart aria-label=Anchor>#</a></span></h2><div class=chart><canvas id=751824369></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("751824369"),n=new Chart(t,{type:"doughnut",data:{labels:["Red","Blue","Yellow"],datasets:[{label:"My First Dataset",data:[300,50,100],backgroundColor:["rgba(255, 99, 132, 0.7)","rgba(54, 162, 235, 0.7)","rgba(255, 205, 86, 0.7)"],borderWidth:0,hoverOffset:4}]}})})</script></div></div><script>var liked_article=!1,oid,id,viewed,oid_likes,id_likes,liked;typeof auth!="undefined"&&(oid="views_samples/charts.md",id=oid&&oid.replaceAll("/","-"),viewed=localStorage.getItem(id),viewed||auth.signInAnonymously().then(()=>{var e=db.collection("views").doc(id);localStorage.setItem(id,!0),e.get().then(e=>{e.exists?db.collection("views").doc(id).update({views:firebase.firestore.FieldValue.increment(1)}):db.collection("views").doc(id).set({views:1})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{var t=e.code,n=e.message;console.error(t,n)}),oid_likes="likes_samples/charts.md",id_likes=oid_likes&&oid_likes.replaceAll("/","-"),liked=localStorage.getItem(id_likes),liked&&(liked_article=!0,document.querySelectorAll("button[id='likes_button']")[0].innerText="Remove Like"));function like_article(e){console.log("add"),liked_article=!0,localStorage.setItem(e,!0),document.querySelectorAll("button[id='likes_button']")[0].innerText="Remove Like",auth.signInAnonymously().then(()=>{var t=db.collection("likes").doc(e);t.get().then(t=>{t.exists?db.collection("likes").doc(e).update({likes:firebase.firestore.FieldValue.increment(1)}):db.collection("likes").doc(e).set({likes:1})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{var t=e.code,n=e.message;console.error(t,n)})}function remove_like_article(e){console.log("remove"),liked_article=!1,localStorage.setItem(e,!1),document.querySelectorAll("button[id='likes_button']")[0].innerText="Like",auth.signInAnonymously().then(()=>{var t=db.collection("likes").doc(e);t.get().then(t=>{t.exists?db.collection("likes").doc(e).update({likes:firebase.firestore.FieldValue.increment(-1)}):db.collection("likes").doc(e).set({likes:0})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{var t=e.code,n=e.message;console.error(t,n)})}function process_article(){var e="likes_samples/charts.md",t=e&&e.replaceAll("/","-");liked_article?remove_like_article(t):like_article(t)}</script></section><footer class="pt-8 max-w-prose print:hidden"><div class=flex><img class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" width=96 height=96 alt=Blowfish src=/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png><div class=place-self-center><div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">Author</div><div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">Blowfish</div><div class="text-sm text-neutral-700 dark:text-neutral-400">A powerful, lightweight theme for Hugo built with Tailwind CSS.</div><div class="text-2xl sm:text-lg"><div class="flex flex-wrap text-neutral-400 dark:text-neutral-500"><a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://twitter.com/burufugu target=_blank aria-label=Twitter rel="me noopener noreferrer"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645.0 138.72-105.583 298.558-298.558 298.558-59.452.0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055.0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421.0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391.0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04.0-57.828 46.782-104.934 104.934-104.934 30.213.0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></span></a><a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://github.com/nunocoracao/blowfish target=_blank aria-label=Github rel="me noopener noreferrer"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentcolor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1Line truncated
<span class=pl-2 onclick='window.open("/blowfish/tags/shortcodes/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">shortcodes</span></span></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#bar-chart>Bar chart</a></li><li><a href=#line-chart>Line chart</a></li><li><a href=#doughnut-chart>Doughnut chart</a></li></ul></nav></div></details></div></div><div class="min-w-0 min-h-0 max-w-prose"><p>Blowfish includes support for Chart.js using the <code>chart</code> shortcode. Simply wrap the chart markup within the shortcode. Blowfish automatically themes charts to match the configured <code>colorScheme</code> parameter, however the colours can be customised using normal Chart.js syntax.</p><p>Refer to the <a href=https://nunocoracao.github.io/blowfish/docs/shortcodes/#chart>chart shortcode</a> docs for more details.</p><p>The examples below are a small selection taken from the <a href=https://www.chartjs.org/docs/latest/samples>official Chart.js docs</a>. You can also <a href=https://raw.githubusercontent.com/nunocoracao/blowfish/main/exampleSite/content/samples/charts.md>view the page source</a> on GitHub to see the markup.</p><h2 id=bar-chart class="relative group">Bar chart <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#bar-chart aria-label=Anchor>#</a></span></h2><div class=chart><canvas id=365912784></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("365912784"),n=new Chart(t,{type:"bar",data:{labels:["January","February","March","April","May","June","July"],datasets:[{label:"My First Dataset",data:[65,59,80,81,56,55,40],backgroundColor:["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)","rgba(75, 192, 192, 0.2)","rgba(54, 162, 235, 0.2)","rgba(153, 102, 255, 0.2)","rgba(201, 203, 207, 0.2)"],borderColor:["rgb(255, 99, 132)","rgb(255, 159, 64)","rgb(255, 205, 86)","rgb(75, 192, 192)","rgb(54, 162, 235)","rgb(153, 102, 255)","rgb(201, 203, 207)"],borderWidth:1}]}})})</script></div><h2 id=line-chart class="relative group">Line chart <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#line-chart aria-label=Anchor>#</a></span></h2><div class=chart><canvas id=267193584></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("267193584"),n=new Chart(t,{type:"line",data:{labels:["January","February","March","April","May","June","July"],datasets:[{label:"My First Dataset",data:[65,59,80,81,56,55,40],tension:.2}]}})})</script></div><h2 id=doughnut-chart class="relative group">Doughnut chart <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#doughnut-chart aria-label=Anchor>#</a></span></h2><div class=chart><canvas id=357129864></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("357129864"),n=new Chart(t,{type:"doughnut",data:{labels:["Red","Blue","Yellow"],datasets:[{label:"My First Dataset",data:[300,50,100],backgroundColor:["rgba(255, 99, 132, 0.7)","rgba(54, 162, 235, 0.7)","rgba(255, 205, 86, 0.7)"],borderWidth:0,hoverOffset:4}]}})})</script></div></div><script>var liked_article=!1,oid,id,viewed,oid_likes,id_likes,liked;typeof auth!="undefined"&&(oid="views_samples/charts.md",id=oid&&oid.replaceAll("/","-"),viewed=localStorage.getItem(id),viewed||auth.signInAnonymously().then(()=>{var e=db.collection("views").doc(id);localStorage.setItem(id,!0),e.get().then(e=>{e.exists?db.collection("views").doc(id).update({views:firebase.firestore.FieldValue.increment(1)}):db.collection("views").doc(id).set({views:1})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{var t=e.code,n=e.message;console.error(t,n)}),oid_likes="likes_samples/charts.md",id_likes=oid_likes&&oid_likes.replaceAll("/","-"),liked=localStorage.getItem(id_likes),liked&&(liked_article=!0,document.querySelectorAll("button[id='likes_button']")[0].innerText="Remove Like"));function like_article(e){console.log("add"),liked_article=!0,localStorage.setItem(e,!0),document.querySelectorAll("button[id='likes_button']")[0].innerText="Remove Like",auth.signInAnonymously().then(()=>{var t=db.collection("likes").doc(e);t.get().then(t=>{t.exists?db.collection("likes").doc(e).update({likes:firebase.firestore.FieldValue.increment(1)}):db.collection("likes").doc(e).set({likes:1})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{var t=e.code,n=e.message;console.error(t,n)})}function remove_like_article(e){console.log("remove"),liked_article=!1,localStorage.setItem(e,!1),document.querySelectorAll("button[id='likes_button']")[0].innerText="Like",auth.signInAnonymously().then(()=>{var t=db.collection("likes").doc(e);t.get().then(t=>{t.exists?db.collection("likes").doc(e).update({likes:firebase.firestore.FieldValue.increment(-1)}):db.collection("likes").doc(e).set({likes:0})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{var t=e.code,n=e.message;console.error(t,n)})}function process_article(){var e="likes_samples/charts.md",t=e&&e.replaceAll("/","-");liked_article?remove_like_article(t):like_article(t)}</script></section><footer class="pt-8 max-w-prose print:hidden"><div class=flex><img class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" width=96 height=96 alt=Blowfish src=/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png><div class=place-self-center><div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">Author</div><div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">Blowfish</div><div class="text-sm text-neutral-700 dark:text-neutral-400">A powerful, lightweight theme for Hugo built with Tailwind CSS.</div><div class="text-2xl sm:text-lg"><div class="flex flex-wrap text-neutral-400 dark:text-neutral-500"><a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://twitter.com/burufugu target=_blank aria-label=Twitter rel="me noopener noreferrer"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645.0 138.72-105.583 298.558-298.558 298.558-59.452.0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055.0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421.0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391.0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04.0-57.828 46.782-104.934 104.934-104.934 30.213.0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></span></a><a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://github.com/nunocoracao/blowfish target=_blank aria-label=Github rel="me noopener noreferrer"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentcolor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1Line truncated
<span class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&rarr;</span>
<span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Diagrams and Flowcharts</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span></a></span><span><a class="flex text-right group" href=/blowfish/samples/mathematical-notation/><span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Mathematical notation</span>
@@ -64,48 +64,43 @@ colorScheme = "blowfish"
Blowfish defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
#### Blowfish (default)
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
#### Avocado
{{< swatches "#78716c" "#84cc16" "#10b981" >}}
#### Fire
{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
#### Congo
#### Forest
{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
#### Slate
{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
#### Princess
{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
#### Neon
{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
#### Redemption
#### Bloody
{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
#### Terminal
{{< swatches "#004b23" "#38b000" "#1a759f" >}}
#### Mario
#### Marvel
{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
#### Noir
{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
#### Autumn
{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
#### Congo
{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
#### Slate
{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
Although these are the default schemes, you can also create your own. Refer to the [Advanced Customisation]({{< ref "advanced-customisation#colour-schemes" >}}) section for details.