Jake Vanderwerf
3 hours ago d4ec27902f93c0053511848b28318dc49c8dabf4
source.css
@@ -25,87 +25,49 @@
   For best results, generate colours from base colours using: https://uicolors.app/generate/
   or sass darken/lighten by 5%: http://scg.ar-ch.org/
   */
   --light-0: #efefef;
   --light-50: #e2e2e2;
   --light-100: #d5d5d5;
   --light-200: #c9c9c9;
   --light-rgb: 239,239,239;
   --light-0: 239,239,239;     /* #efefef; */
   --light-50: 226,226,226;    /* #e2e2e2; */
   --light-100: 213,213,213;   /* #d5d5d5; */
   --light-200: 201,201,201;   /* #c9c9c9; */
   --dark-0: #151515;
   --dark-50: #222222;
   --dark-100: #2e2e2e;
   --dark-200: #3b3b3b;
   --dark-rgb: 21,21,21;
   --dark-0: 21,21,21;         /* #151515; */
   --dark-50: 34,34,34;        /* #222222; */
   --dark-100: 46,46,46;       /* #2e2e2e; */
   --dark-200: 59,59,59;       /* #3b3b3b; */
   --action-0: #ff0080;
   --action-50: #ff2492;
   --action-100: #ff47a4;
   --action-200: #ff6bb5;
   --action-rgb: 255,0,128;
   --action-0: 255,0,128;      /* #ff0080; */
   --action-50: 255,38,146;    /* #ff2492; */
   --action-100: 255,71,164;   /* #ff47a4; */
   --action-200: 255,107,181;  /* #ff6bb5; */
   --action-contrast: var(--light-0);
   --secondary-0: #D69121;
   --secondary-50: #ffc421;
   --secondary-100: #ffcd44;
   --secondary-200: #ffd768;
   --secondary-rgb: 252,185,0;
   --secondary-0: 214,145,33;  /* #D69121; */
   --secondary-50: 255,196,33; /* #ffc421; */
   --secondary-100: 255,205,68;/* #ffcd44; */
   --secondary-200: 255,215,104;/* #ffd768; */
   --secondary-contrast: var(--light-0);
   --success: #20D64E;
   --successLight: #DBFAE3;
   --successDark: #05230D;
   --successBack: var(--successLight);
   --successText: var(--successDark);
   --warning: #D69121;
   --warningLight: #F6E5CB;
   --warningDark: #231806;
   --warningBack: var(--warningLight);
   --warningText: var(--warningDark);
   --error: #CF1616;
   --errorLight: #F9C8C8;
   --errorDark: #4A0808;
   --errorBack: var(--errorLight);
   --errorText: var(--errorDark);
   --success: 76,175,80;          /* #4CAF50; */
   --successLight: 234,246,235;    /* #eaf6eb; */
   --successDark: 14,33,15;      /* #0e210f; */
   --base: var(--light-0);
   --base-50: var(--light-50);
   --base-100: var(--light-100);
   --base-200: var(--light-200);
   --base-rgb: var(--light-rgb);
   --warning: 232,167,55;     /* #E8A737; */
   --warningLight: 253,247,238;/* #fdf7ee; */
   --warningDark: 52,35,6;    /* #342306; */
   --contrast: var(--dark-0);
   --contrast-50: var(--dark-50);
   --contrast-100: var(--dark-100);
   --contrast-200: var(--dark-200);
   --contrast-rgb: var(--dark-rgb);
   --error: 183,51,46;         /* #B7332E; */
   --errorLight: 250,235,234; /* #faebea; */
   --errorDark: 40,11,10;     /* #280b0a; */
}
body:has(#theme-switcher:checked){
   --action-50: #db006e;
   --action-100: #b8005c;
   --action-200: #94004a;
   --secondary-50: #d89f00;
   --secondary-100: #b58500;
   --secondary-200: #916a00;
   --action-50: 219,0,110;     /* #db006e; */
   --action-100: 184,0.92;     /* #b8005c; */
   --action-200: 148,0,74;     /* #94004a; */
   --contrast: var(--light-0);
   --contrast-50: var(--light-50);
   --contrast-100: var(--light-100);
   --contrast-200: var(--light-200);
   --contrast-rgb: var(--light-rgb);
   --base: var(--dark-0);
   --base-50: var(--dark-50);
   --base-100: var(--dark-100);
   --base-200: var(--dark-200);
   --base-rgb: var(--dark-rgb);
   --successBack: var(--successDark);
   --successText: var(--successLight);
   --warningBack: var(--warningDark);
   --warningText: var(--warningLight);
   --errorBack: var(--errorDark);
   --errorText: var(--errorLight);
   --secondary-50: 216,159,0;  /* #d89f00; */
   --secondary-100: 181,133,0; /* #b58500; */
   --secondary-200: 145,106,0; /* #916a00; */
}
/*** FONT START **/
/* open-sans-300 - latin */
@@ -702,3 +664,58 @@
   left: 0;
}
[data-field="goal"] fieldset {
   grid-template-columns: repeat(1, 1fr)!important;
}
blockquote {
   --background: rgb(var(--base-100));
   --border: rgb(var(--action-0));
   line-height: 1.2;
   padding: var(--btn);
   border-radius: 4rem;
   background-color: var(--background);
}
blockquote .content {
   margin: 12px auto;
   max-width: min(680px, 80vw);
   position: relative;
   font-family: var(--heading);
   font-weight: var(--fw-h-bold);
   padding: 3rem 2.5rem;
   border-radius: var(--radius-outer);
   border: 2px solid var(--border);
}
blockquote .content::before,
blockquote .content::after {
   position: absolute;
   content: '';
   left: 50px;
}
blockquote .content::before {
   width: 80px;
   border: 6px solid var(--background);
   bottom: -3px;
   z-index: 2;
}
blockquote .content::after {
   border: 2px solid var(--border);
   border-radius: 0 100% 0 0;
   width: 60px;
   height: 60px;
   bottom: -60px;
   border-bottom: 0;
   border-left: 0;
   z-index: 3;
}
blockquote cite {
   padding: 15px 0 0 12px;
   margin: 0 0 0 150px;
   z-index: 1;
}