Use modern RGB format (fixes #54)
This commit is contained in:
daudix
28
config.toml
28
config.toml
@ -28,8 +28,8 @@ taxonomies = [{ name = "tags", feed = true }]
|
||||
highlight_code = true
|
||||
highlight_theme = "css"
|
||||
highlight_themes_css = [
|
||||
{ theme = "solarized-dark", filename = "syntax-theme-dark.css" },
|
||||
{ theme = "solarized-light", filename = "syntax-theme-light.css" },
|
||||
{ theme = "solarized-dark", filename = "syntax-theme-dark.css" },
|
||||
{ theme = "solarized-light", filename = "syntax-theme-light.css" },
|
||||
]
|
||||
smart_punctuation = true
|
||||
bottom_footnotes = true
|
||||
@ -60,11 +60,11 @@ taxonomies = [{ name = "tags", feed = true }]
|
||||
# See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
|
||||
primary_color = "#ff7800"
|
||||
# Same as primary_color, but with 20% opacity
|
||||
primary_color_alpha = "rgba(255, 120, 0, 0.2)"
|
||||
primary_color_alpha = "rgb(255 120 0 / 0.2)"
|
||||
# Ditto but for the dark mode.
|
||||
# If not set regular variant will be used.
|
||||
primary_color_dark = "#ffa348"
|
||||
primary_color_dark_alpha = "rgba(255, 163, 72, 0.2)"
|
||||
primary_color_dark_alpha = "rgb(255 163 72 / 0.2)"
|
||||
# Whether to fix low contrast in text selection, checkboxes, etc.
|
||||
# Use only if the default doesn't provide enough contrast, e.g. the primary color is set to yellow.
|
||||
# fix_contrast = true
|
||||
@ -109,28 +109,28 @@ show_repo = true
|
||||
# i.e. "@/blog/_index.md".
|
||||
# See https://www.getzola.org/documentation/content/linking/#internal-links
|
||||
links = [
|
||||
{ url = "@/blog/_index.md", name = "Blog" },
|
||||
{ url = "@/demo/index.md", name = "Demo" },
|
||||
{ url = "@/tricks/index.md", name = "Tricks" },
|
||||
{ url = "@/blog/_index.md", name = "Blog" },
|
||||
{ url = "@/demo/index.md", name = "Demo" },
|
||||
{ url = "@/tricks/index.md", name = "Tricks" },
|
||||
]
|
||||
|
||||
[extra.footer]
|
||||
# Links used in the footer.
|
||||
# Same as the nav ones.
|
||||
links = [
|
||||
{ url = "@/blog/_index.md", name = "Blog" },
|
||||
{ url = "@/demo/index.md", name = "Demo" },
|
||||
{ url = "@/tricks/index.md", name = "Tricks" },
|
||||
{ url = "@/blog/_index.md", name = "Blog" },
|
||||
{ url = "@/demo/index.md", name = "Demo" },
|
||||
{ url = "@/tricks/index.md", name = "Tricks" },
|
||||
]
|
||||
# Social links in the footer.
|
||||
# Any URL-encoded SVG can be used as an icon.
|
||||
# https://simpleicons.org is recommended source of SVG icons.
|
||||
# For URL encoding https://yoksel.github.io/url-encoder/ can be used.
|
||||
socials = [
|
||||
{ url = "https://github.com", name = "GitHub", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EGitHub%3C/title%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E" },
|
||||
{ url = "https://instagram.com", name = "Instagram", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EInstagram%3C/title%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E" },
|
||||
{ url = "https://mastodon.social", name = "Mastodon", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EMastodon%3C/title%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E" },
|
||||
{ url = "https://twitter.com", name = "Twitter", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ETwitter%3C/title%3E%3Cpath d='M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z'/%3E%3C/svg%3E" },
|
||||
{ url = "https://github.com", name = "GitHub", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EGitHub%3C/title%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E" },
|
||||
{ url = "https://instagram.com", name = "Instagram", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EInstagram%3C/title%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E" },
|
||||
{ url = "https://mastodon.social", name = "Mastodon", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EMastodon%3C/title%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E" },
|
||||
{ url = "https://twitter.com", name = "Twitter", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ETwitter%3C/title%3E%3Cpath d='M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z'/%3E%3C/svg%3E" },
|
||||
]
|
||||
# Whether to show "© Title, YEAR"
|
||||
show_copyright = true
|
||||
|
||||
@ -123,7 +123,7 @@ Duckquill respects chosen primary color everywhere. To use your own, simply chan
|
||||
```toml
|
||||
[extra]
|
||||
primary_color = "#3584e4"
|
||||
primary_color_alpha = "rgba(53, 132, 228, 0.2)"
|
||||
primary_color_alpha = "rgb(53 132 228 / 0.2)"
|
||||
```
|
||||
|
||||
Additionally, you can set a separate color for dark mode:
|
||||
@ -131,7 +131,7 @@ Additionally, you can set a separate color for dark mode:
|
||||
```toml
|
||||
[extra]
|
||||
primary_color_dark = "#ff7800"
|
||||
primary_color_dark_alpha = "rgba(255, 120, 0, 0.2)"
|
||||
primary_color_dark_alpha = "rgb(255 120 0 / 0.2)"
|
||||
```
|
||||
|
||||
### Favicon
|
||||
|
||||
@ -558,9 +558,9 @@ Blah blah <q>Inline Quote</q> hmm.
|
||||
b = parseInt(hex.slice(5, 7), 16);
|
||||
|
||||
if (alpha) {
|
||||
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
|
||||
return "rgb(" + r + " " + g + " " + b + " / " + alpha + ")";
|
||||
} else {
|
||||
return "rgb(" + r + ", " + g + ", " + b + ")";
|
||||
return "rgb(" + r + " " + g + " " + b + ")";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ You can make navbar have more classic look:
|
||||
#site-nav {
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
box-shadow: 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@ -69,7 +69,7 @@ Or you can make it sticked to top but not full-width:
|
||||
#site-nav {
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
box-shadow: 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
|
||||
border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem);
|
||||
|
||||
nav ul li {
|
||||
@ -192,10 +192,10 @@ Most of the time contrast should be okay, but what if it's not? Simply adjust th
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
|
||||
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
|
||||
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
.crt {
|
||||
margin: 1rem 0 1rem;
|
||||
box-shadow: var(--edge-highlight), 0 0 0 0.0625rem var(--primary-color-alpha), 0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha), 0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
|
||||
box-shadow:
|
||||
var(--edge-highlight),
|
||||
0 0 0 0.0625rem var(--primary-color-alpha),
|
||||
0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha),
|
||||
0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
|
||||
border-radius: var(--rounded-corner);
|
||||
background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color);
|
||||
background: radial-gradient(rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.85)),
|
||||
var(--primary-color);
|
||||
|
||||
pre {
|
||||
animation: flicker 0.25s alternate infinite;
|
||||
@ -11,7 +16,9 @@
|
||||
background-color: transparent !important;
|
||||
padding: 1rem 1rem;
|
||||
color: var(--primary-color) !important;
|
||||
text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem;
|
||||
text-shadow:
|
||||
var(--primary-color-alpha) 0 0 0.25rem,
|
||||
var(--primary-color) 0 0 0.75rem;
|
||||
|
||||
@keyframes flicker {
|
||||
25% {
|
||||
@ -43,7 +50,13 @@
|
||||
z-index: 1;
|
||||
animation: scanlines 0.1s linear infinite;
|
||||
inset: 0;
|
||||
background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 0.125rem, transparent 0.125rem, transparent 0.25rem);
|
||||
background-image: repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgb(0 0 0 / 0.25),
|
||||
rgb(0 0 0 / 0.25) 0.125rem,
|
||||
transparent 0.125rem,
|
||||
transparent 0.25rem
|
||||
);
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
|
||||
@ -59,7 +72,12 @@
|
||||
position: absolute;
|
||||
animation: scanline 5s linear infinite;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(to bottom, transparent, var(--primary-color-alpha) 7rem, transparent 8rem);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
var(--primary-color-alpha) 7rem,
|
||||
transparent 8rem
|
||||
);
|
||||
background-size: auto 8rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: -8rem;
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
z-index: 999;
|
||||
backdrop-filter: var(--blur);
|
||||
margin: 1rem auto;
|
||||
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
|
||||
box-shadow:
|
||||
var(--edge-highlight),
|
||||
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
|
||||
border-radius: 1.625rem;
|
||||
background-color: var(--nav-bg);
|
||||
max-width: 90%;
|
||||
@ -27,7 +29,9 @@
|
||||
z-index: 999;
|
||||
backdrop-filter: var(--blur);
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
|
||||
box-shadow:
|
||||
var(--edge-highlight),
|
||||
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
|
||||
border-radius: 999px;
|
||||
background-color: var(--nav-bg);
|
||||
padding: 0.5rem 0.75rem;
|
||||
@ -56,7 +60,14 @@
|
||||
list-style: none;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
&:not(#search, #language-switcher, #theme-switcher, #theme-switcher li, #feed, #repo) {
|
||||
&:not(
|
||||
#search,
|
||||
#language-switcher,
|
||||
#theme-switcher,
|
||||
#theme-switcher li,
|
||||
#feed,
|
||||
#repo
|
||||
) {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
@ -190,7 +201,8 @@
|
||||
right: unset;
|
||||
bottom: 0.25rem;
|
||||
left: -0.5rem;
|
||||
border-inline-end: 0.25rem solid var(--fg-muted-2);
|
||||
border-inline-end: 0.25rem solid
|
||||
var(--fg-muted-2);
|
||||
border-block-end: none;
|
||||
border-start-end-radius: 0.25rem;
|
||||
border-end-start-radius: 0;
|
||||
@ -213,7 +225,8 @@
|
||||
right: unset;
|
||||
bottom: 0;
|
||||
left: -0.5rem;
|
||||
border-inline-end: 0.25rem solid var(--primary-color);
|
||||
border-inline-end: 0.25rem solid
|
||||
var(--primary-color);
|
||||
border-block-end: none;
|
||||
content: "";
|
||||
|
||||
@ -329,7 +342,9 @@
|
||||
transform: translate(-50%, 1rem);
|
||||
z-index: 1;
|
||||
backdrop-filter: var(--blur);
|
||||
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
|
||||
box-shadow:
|
||||
var(--edge-highlight),
|
||||
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
|
||||
background-color: var(--nav-bg);
|
||||
padding: 0.25rem;
|
||||
|
||||
@ -355,7 +370,9 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
border-radius: calc(var(--rounded-corner) + 0.25rem);
|
||||
border-radius: calc(
|
||||
var(--rounded-corner) + 0.25rem
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -473,7 +490,9 @@
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
backdrop-filter: var(--blur);
|
||||
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
|
||||
box-shadow:
|
||||
var(--edge-highlight),
|
||||
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
|
||||
border-radius: calc(var(--rounded-corner) + 0.5rem);
|
||||
background-color: var(--nav-bg);
|
||||
padding: 0.5rem;
|
||||
|
||||
@ -1,47 +1,48 @@
|
||||
@mixin theme-variables($theme) {
|
||||
@if $theme =="dark" {
|
||||
--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
|
||||
--fg-color: rgb(255, 255, 255);
|
||||
--fg-muted-1: rgba(255, 255, 255, 0.05);
|
||||
--fg-muted-2: rgba(255, 255, 255, 0.1);
|
||||
--fg-muted-3: rgba(255, 255, 255, 0.2);
|
||||
--fg-muted-4: rgba(255, 255, 255, 0.5);
|
||||
--fg-muted-5: rgba(255, 255, 255, 0.6);
|
||||
--nav-bg: rgba(25, 25, 25, 0.7);
|
||||
--blue-bg: rgba(153, 193, 241, 0.1);
|
||||
--blue-fg: rgb(153, 193, 241);
|
||||
--green-bg: rgba(143, 240, 164, 0.1);
|
||||
--green-fg: rgb(143, 240, 164);
|
||||
--purple-bg: rgba(220, 138, 221, 0.1);
|
||||
--purple-fg: rgb(220, 138, 221);
|
||||
--red-bg: rgba(226, 97, 81, 0.1);
|
||||
--red-fg: rgb(246, 97, 81);
|
||||
--yellow-bg: rgba(248, 228, 92, 0.1);
|
||||
--yellow-fg: rgb(248, 228, 92);
|
||||
--star-featured: rgba(248, 228, 92, 0.05);
|
||||
@if $theme == "dark" {
|
||||
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
|
||||
--fg-color: rgb(255 255 255);
|
||||
--fg-muted-1: rgb(255 255 255 / 0.05);
|
||||
--fg-muted-2: rgb(255 255 255 / 0.1);
|
||||
--fg-muted-3: rgb(255 255 255 / 0.2);
|
||||
--fg-muted-4: rgb(255 255 255 / 0.5);
|
||||
--fg-muted-5: rgb(255 255 255 / 0.6);
|
||||
--nav-bg: rgb(25 25 25 / 0.7);
|
||||
--blue-bg: rgb(153 193 241 / 0.1);
|
||||
--blue-fg: rgb(153 193 241);
|
||||
--green-bg: rgb(143 240 164 / 0.1);
|
||||
--green-fg: rgb(143 240 164);
|
||||
--purple-bg: rgb(220 138 221 / 0.1);
|
||||
--purple-fg: rgb(220 138 221);
|
||||
--red-bg: rgb(226 97 81 / 0.1);
|
||||
--red-fg: rgb(246 97 81);
|
||||
--yellow-bg: rgb(248 228 92 / 0.1);
|
||||
--yellow-fg: rgb(248 228 92);
|
||||
--star-featured: rgb(248 228 92 / 0.05);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@else {
|
||||
--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
|
||||
--fg-color: rgba(0, 0, 0, 0.8);
|
||||
--fg-muted-1: rgba(0, 0, 0, 0.05);
|
||||
--fg-muted-2: rgba(0, 0, 0, 0.1);
|
||||
--fg-muted-3: rgba(0, 0, 0, 0.2);
|
||||
--fg-muted-4: rgba(0, 0, 0, 0.5);
|
||||
--fg-muted-5: rgba(0, 0, 0, 0.6);
|
||||
--nav-bg: rgba(242, 242, 242, 0.7);
|
||||
--blue-bg: rgba(53, 132, 228, 0.1);
|
||||
--blue-fg: rgb(53, 132, 228);
|
||||
--green-bg: rgba(38, 162, 105, 0.1);
|
||||
--green-fg: rgb(38, 162, 105);
|
||||
--purple-bg: rgba(145, 65, 172, 0.1);
|
||||
--purple-fg: rgb(145, 65, 172);
|
||||
--red-bg: rgba(224, 27, 36, 0.1);
|
||||
--red-fg: rgb(224, 27, 36);
|
||||
--yellow-bg: rgba(156, 110, 3, 0.1);
|
||||
--yellow-fg: rgb(156, 110, 3);
|
||||
--star-featured: rgba(156, 110, 3, 0.15);
|
||||
} @else {
|
||||
--bg-color: linear-gradient(
|
||||
rgb(255 255 255 / 0.8),
|
||||
rgb(255 255 255 / 0.8)
|
||||
);
|
||||
--fg-color: rgb(0 0 0 / 0.8);
|
||||
--fg-muted-1: rgb(0 0 0 / 0.05);
|
||||
--fg-muted-2: rgb(0 0 0 / 0.1);
|
||||
--fg-muted-3: rgb(0 0 0 / 0.2);
|
||||
--fg-muted-4: rgb(0 0 0 / 0.5);
|
||||
--fg-muted-5: rgb(0 0 0 / 0.6);
|
||||
--nav-bg: rgb(242 242 242 / 0.7);
|
||||
--blue-bg: rgb(53 132 228 / 0.1);
|
||||
--blue-fg: rgb(53 132 228);
|
||||
--green-bg: rgb(38 162 105 / 0.1);
|
||||
--green-fg: rgb(38 162 105);
|
||||
--purple-bg: rgb(145 65 172 / 0.1);
|
||||
--purple-fg: rgb(145 65 172);
|
||||
--red-bg: rgb(224 27 36 / 0.1);
|
||||
--red-fg: rgb(224 27 36);
|
||||
--yellow-bg: rgb(156 110 3 / 0.1);
|
||||
--yellow-fg: rgb(156 110 3);
|
||||
--star-featured: rgb(156 110 3 / 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,32 +53,51 @@
|
||||
--active: 0.9;
|
||||
--blur: saturate(180%) blur(0.75rem);
|
||||
--container-width: 720px;
|
||||
--edge-highlight: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.1);
|
||||
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
|
||||
--rounded-corner-small: 0.5rem;
|
||||
--rounded-corner: 0.75rem;
|
||||
--shadow-raised: 0 0 0 0.0625rem rgba(0, 0, 0, 0.06), 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.14), 0 0.25rem 0.75rem 0.25rem rgba(0, 0, 0, 0.06);
|
||||
--shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.07), 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.03);
|
||||
--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06),
|
||||
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
|
||||
0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
|
||||
--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03),
|
||||
0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07),
|
||||
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
|
||||
--transition-long: 0.8s;
|
||||
--transition-longer: 0.4s;
|
||||
--transition: 0.2s;
|
||||
|
||||
// FONTS
|
||||
--font-system-ui: system-ui, sans-serif;
|
||||
--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
|
||||
--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
|
||||
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
|
||||
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
|
||||
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
|
||||
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
|
||||
--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
|
||||
serif;
|
||||
--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
|
||||
P052, serif;
|
||||
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
|
||||
source-sans-pro, sans-serif;
|
||||
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
|
||||
source-sans-pro, sans-serif;
|
||||
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
|
||||
sans-serif;
|
||||
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
|
||||
"Nimbus Sans", Arial, sans-serif;
|
||||
--font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
|
||||
--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||
--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
|
||||
--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;
|
||||
--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;
|
||||
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif;
|
||||
--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif;
|
||||
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
|
||||
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
|
||||
Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||
--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
|
||||
"Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
|
||||
--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
|
||||
Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
|
||||
source-sans-pro, sans-serif;
|
||||
--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",
|
||||
"Sitka Small", serif;
|
||||
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
|
||||
"URW Bookman L", "Georgia Pro", Georgia, serif;
|
||||
--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L",
|
||||
P052, Sylfaen, serif;
|
||||
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
|
||||
casual, cursive;
|
||||
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="{{ config.description }}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="{{ config.extra.primary_color | default(value='#9a9996') }}" />
|
||||
<meta name="theme-color" content="{{ config.extra.primary_color | default(value='#9a9996' | safe) | safe }}" />
|
||||
{%- if config.extra.primary_color_dark %}
|
||||
<meta name="theme-color" content="{{ config.extra.primary_color_dark }}" media="(prefers-color-scheme:dark)" />
|
||||
<meta name="theme-color" content="{{ config.extra.primary_color_dark | safe }}" media="(prefers-color-scheme:dark)" />
|
||||
{%- endif %}
|
||||
<title>{% include "partials/title.html" %}</title>
|
||||
<link rel="canonical" href="{{ current_url | default(value='/') | safe }}" />
|
||||
@ -40,23 +40,23 @@
|
||||
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--primary-color: {{ config.extra.primary_color | default(value="#6f8396") }};
|
||||
--primary-color-alpha: {{ config.extra.primary_color_alpha | default(value="rgba(111, 131, 150, 0.2)") }};
|
||||
--contrast-color: {% if config.extra.fix_contrast %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
|
||||
--primary-color: {{ config.extra.primary_color | default(value="#6f8396" | safe) | safe }};
|
||||
--primary-color-alpha: {{ config.extra.primary_color_alpha | default(value="rgb(111 131 150 / 0.2)" | safe) | safe }};
|
||||
--contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
|
||||
}
|
||||
|
||||
{%- if config.extra.primary_color_dark %}
|
||||
[data-theme="dark"] {
|
||||
--primary-color: {{ config.extra.primary_color_dark }};
|
||||
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }};
|
||||
--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
|
||||
--primary-color: {{ config.extra.primary_color_dark | safe }};
|
||||
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha | safe }};
|
||||
--contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--primary-color: {{ config.extra.primary_color_dark }};
|
||||
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }};
|
||||
--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
|
||||
--primary-color: {{ config.extra.primary_color_dark | safe }};
|
||||
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha | safe }};
|
||||
--contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
|
||||
}
|
||||
}
|
||||
{%- endif %}
|
||||
|
||||
Reference in New Issue
Block a user