0ac9e447ca
In reference to idea: https://github.com/alshedivat/al-folio/discussions/2097 In reference to request: https://github.com/alshedivat/al-folio/issues/923#issuecomment-2171924663 Added support to integrate a [loops.so](https://loops.so/) mailing list into the site. To use, you need to enable `newsletter` in `_config.yml`. You also must specify a loops endpoint (although I think any mailing list endpoint can work), which you can get when you set up a mailing list on loops. More documentation on loops: [here](https://loops.so/docs/forms/custom-form). Once that is enabled, the behavior is different depending on how you specified your footer to behave in `_config.yml`. If `footer_fixed: true`, then the sign up will appear at the bottom of the about page, as well as at the bottom of blog posts, if you enable `related_posts`. If `footer_fixed: false`, then the newsletter signup will be in the footer (on every page), like it is in on [my website](https://asboyer.com). I'm not attached to the placement of the signup, and you can choose to include it wherever you want with `{% include scripts/newsletter.liquid %}`. Also if you include positional variables into that, you can choose how you center the signup. So `{% include scripts/newsletter.liquid left=true %}` positions the signup bar to the left. Here are some screenshots below: ## Dark version  ## Light version  I think the input field color should probably change to maybe be light for both themes? What do you think? I think the dark background looks cool, but I don't usually see that done like that on other sites. ## Footer fixed   ## Footer not fixed   To clarify, if footer isn't fixed, the email signup will appear on every page. --------- Co-authored-by: George <31376482+george-gca@users.noreply.github.com>
146 lines
4.0 KiB
SCSS
146 lines
4.0 KiB
SCSS
/*******************************************************************************
|
|
* Themes
|
|
******************************************************************************/
|
|
|
|
:root {
|
|
--global-bg-color: #{$white-color};
|
|
--global-code-bg-color: #{$code-bg-color-light};
|
|
--global-text-color: #{$black-color};
|
|
--global-text-color-light: #{$grey-color};
|
|
--global-theme-color: #{$purple-color};
|
|
--global-hover-color: #{$purple-color};
|
|
--global-hover-text-color: #{$white-color};
|
|
--global-footer-bg-color: #{$grey-color-dark};
|
|
--global-footer-text-color: #{$grey-color-light};
|
|
--global-footer-link-color: #{$white-color};
|
|
--global-distill-app-color: #{$grey-color};
|
|
--global-divider-color: rgba(0, 0, 0, 0.1);
|
|
--global-card-bg-color: #{$white-color};
|
|
--global-highlight-color: #{$red-color-dark};
|
|
--global-back-to-top-bg-color: rgba(#{red($black-color)}, #{green($black-color)}, #{blue($black-color)}, 0.4);
|
|
--global-back-to-top-text-color: #{$white-color};
|
|
--global-newsletter-bg-color: #{$white-color};
|
|
--global-newsletter-text-color: #{$black-color};
|
|
|
|
--global-tip-block: #42b983;
|
|
--global-tip-block-bg: #e2f5ec;
|
|
--global-tip-block-text: #215d42;
|
|
--global-tip-block-title: #359469;
|
|
--global-warning-block: #e7c000;
|
|
--global-warning-block-bg: #fff8d8;
|
|
--global-warning-block-text: #6b5900;
|
|
--global-warning-block-title: #b29400;
|
|
--global-danger-block: #c00;
|
|
--global-danger-block-bg: #ffe0e0;
|
|
--global-danger-block-text: #600;
|
|
--global-danger-block-title: #c00;
|
|
|
|
#light-toggle-system {
|
|
padding-left: 10px;
|
|
padding-top: 12px;
|
|
display: block;
|
|
}
|
|
|
|
#light-toggle-dark {
|
|
display: none;
|
|
}
|
|
|
|
#light-toggle-light {
|
|
display: none;
|
|
}
|
|
|
|
.repo-img-light {
|
|
display: block;
|
|
}
|
|
.repo-img-dark {
|
|
display: none;
|
|
}
|
|
|
|
#back-to-top {
|
|
color: var(--global-back-to-top-text-color);
|
|
background: var(--global-back-to-top-bg-color);
|
|
bottom: $back-to-top-bottom;
|
|
right: $back-to-top-right;
|
|
height: $back-to-top-height;
|
|
width: $back-to-top-width;
|
|
z-index: $back-to-top-z-index;
|
|
}
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
--global-bg-color: #{$grey-color-dark};
|
|
--global-code-bg-color: #{$code-bg-color-dark};
|
|
--global-text-color: #{$grey-color-light};
|
|
--global-text-color-light: #{$grey-color};
|
|
--global-theme-color: #{$cyan-color};
|
|
--global-hover-color: #{$cyan-color};
|
|
--global-hover-text-color: #{$white-color};
|
|
--global-footer-bg-color: #{$grey-color-light};
|
|
--global-footer-text-color: #{$grey-color-dark};
|
|
--global-footer-link-color: #{$black-color};
|
|
--global-distill-app-color: #{$grey-color-light};
|
|
--global-divider-color: #424246;
|
|
--global-card-bg-color: #{$grey-900};
|
|
--global-back-to-top-bg-color: rgba(#{red($white-color)}, #{green($white-color)}, #{blue($white-color)}, 0.5);
|
|
--global-back-to-top-text-color: #{$black-color};
|
|
--global-newsletter-bg-color: #{$grey-color-light};
|
|
--global-newsletter-text-color: #{$grey-color-dark};
|
|
|
|
--global-tip-block: #42b983;
|
|
--global-tip-block-bg: #e2f5ec;
|
|
--global-tip-block-text: #215d42;
|
|
--global-tip-block-title: #359469;
|
|
--global-warning-block: #e7c000;
|
|
--global-warning-block-bg: #fff8d8;
|
|
--global-warning-block-text: #6b5900;
|
|
--global-warning-block-title: #b29400;
|
|
--global-danger-block: #c00;
|
|
--global-danger-block-bg: #ffe0e0;
|
|
--global-danger-block-text: #600;
|
|
--global-danger-block-title: #c00;
|
|
|
|
.repo-img-light {
|
|
display: none;
|
|
}
|
|
.repo-img-dark {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
html[data-theme-setting="dark"] {
|
|
#light-toggle-system {
|
|
display: none;
|
|
}
|
|
|
|
#light-toggle-dark {
|
|
padding-left: 10px;
|
|
padding-top: 12px;
|
|
display: block;
|
|
}
|
|
|
|
#light-toggle-light {
|
|
display: none;
|
|
}
|
|
|
|
#back-to-top {
|
|
color: var(--global-back-to-top-text-color);
|
|
background: var(--global-back-to-top-bg-color);
|
|
}
|
|
}
|
|
|
|
html[data-theme-setting="light"] {
|
|
#light-toggle-system {
|
|
display: none;
|
|
}
|
|
|
|
#light-toggle-dark {
|
|
display: none;
|
|
}
|
|
|
|
#light-toggle-light {
|
|
padding-left: 10px;
|
|
padding-top: 12px;
|
|
display: block;
|
|
}
|
|
}
|