diff options
34 files changed, 205 insertions, 738 deletions
diff --git a/art/plt/base.html b/art/plt/base.html index 6c56ac4..5fe0244 100644 --- a/art/plt/base.html +++ b/art/plt/base.html @@ -1,6 +1,6 @@ <!DOCTYPE html> -<html lang="{%block html_lang%}{%endblock html_lang%}" - prefix="og: https://ogp.me/ns#"> +<html class="theme-dark" lang="{%block html_lang%}{%endblock html_lang%}" + prefix="og: https://ogp.me/ns#"> <head> <base href="{{config.static_url}}"> <meta charset="utf-8"> @@ -21,8 +21,8 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> - <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> + <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> {%block head_og%}{%endblock head_og%} @@ -40,6 +40,10 @@ <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</span></a> </li> + <li> + <a href="https://art.luevano.xyz/"><i class="fas fa-paint-brush" alt="Art"></i><span>Art</span></a> + </li> + <li><i class="fab fa-git" alt="Git"></i><span>Git</span> <ul> <li><a href="https://git.luevano.xyz/" target="_blank"><i class="fab fa-git-alt" alt="Git-alt"></i></a></li> @@ -58,14 +62,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -85,7 +82,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> @@ -96,7 +93,7 @@ <br> <span class="copyright"> - Copyright <i class="fal fa-copyright" alt="Copyright"></i> 2021 David Luévano Alvarado + Copyright <i class="far fa-copyright" alt="Copyright"></i> 2021 David Luévano Alvarado </span> </footer> </body> diff --git a/art/plt/page_list.html b/art/plt/page_list.html index 16dc4d5..bd1f678 100644 --- a/art/plt/page_list.html +++ b/art/plt/page_list.html @@ -1,6 +1,6 @@ {%macro print(pages)%} <h2>Articles</h2> - <ul> + <ul class="page-list"> {%for p in pages%} {%if loop.previtem%} {%if loop.previtem.cdate_list_sep !=p.cdate_list_sep%} diff --git a/art/plt/rss.xml b/art/plt/rss.xml index 5be7c37..5ce541d 100644 --- a/art/plt/rss.xml +++ b/art/plt/rss.xml @@ -1,5 +1,6 @@ <?xml version="1.0" encoding="UTF-8" ?> <rss version="2.0" + xml:base="https://static.luevano.xyz" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"> <channel> diff --git a/blog/dst/a/asi_nomas_esta_quedando.html b/blog/dst/a/asi_nomas_esta_quedando.html index e547ca4..522ebf0 100644 --- a/blog/dst/a/asi_nomas_esta_quedando.html +++ b/blog/dst/a/asi_nomas_esta_quedando.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="es" +<html class="theme-dark" lang="es" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -112,7 +105,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/a/el_blog_ya_tiene_timestamps.html b/blog/dst/a/el_blog_ya_tiene_timestamps.html index b19d1d3..966f2aa 100644 --- a/blog/dst/a/el_blog_ya_tiene_timestamps.html +++ b/blog/dst/a/el_blog_ya_tiene_timestamps.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="es" +<html class="theme-dark" lang="es" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -112,7 +105,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/a/first_blog_post.html b/blog/dst/a/first_blog_post.html index 6160986..fc8f71b 100644 --- a/blog/dst/a/first_blog_post.html +++ b/blog/dst/a/first_blog_post.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -111,7 +104,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/a/git_server_with_cgit.html b/blog/dst/a/git_server_with_cgit.html index 5e5b09f..0dcf100 100644 --- a/blog/dst/a/git_server_with_cgit.html +++ b/blog/dst/a/git_server_with_cgit.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -215,7 +208,7 @@ repo.desc=These are my personal dotfiles. <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/a/linux_video_notes.html b/blog/dst/a/linux_video_notes.html index 1d06458..244313b 100644 --- a/blog/dst/a/linux_video_notes.html +++ b/blog/dst/a/linux_video_notes.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -184,7 +177,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/a/mail_server_with_postfix.html b/blog/dst/a/mail_server_with_postfix.html index 74b7c1b..f4eb5f9 100644 --- a/blog/dst/a/mail_server_with_postfix.html +++ b/blog/dst/a/mail_server_with_postfix.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -470,7 +463,7 @@ systemctl enable spamassassin.service <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/a/new_blogging_system.html b/blog/dst/a/new_blogging_system.html index 8f764dc..c44a548 100644 --- a/blog/dst/a/new_blogging_system.html +++ b/blog/dst/a/new_blogging_system.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -114,7 +107,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/a/shell_scripting_video_notes.html b/blog/dst/a/shell_scripting_video_notes.html index 5dd6b2f..dbf3fa2 100644 --- a/blog/dst/a/shell_scripting_video_notes.html +++ b/blog/dst/a/shell_scripting_video_notes.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -309,7 +302,7 @@ function_name () { <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/a/sql_video_notes.html b/blog/dst/a/sql_video_notes.html index 23b5233..fe5ef69 100644 --- a/blog/dst/a/sql_video_notes.html +++ b/blog/dst/a/sql_video_notes.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -246,7 +239,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/a/website_with_nginx.html b/blog/dst/a/website_with_nginx.html index 811524e..28f0242 100644 --- a/blog/dst/a/website_with_nginx.html +++ b/blog/dst/a/website_with_nginx.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -220,7 +213,7 @@ systemctl restart nginx <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/index.html b/blog/dst/index.html index 08b250d..3e41002 100644 --- a/blog/dst/index.html +++ b/blog/dst/index.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -129,7 +122,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/rss.xml b/blog/dst/rss.xml index f2b5a07..86dfb76 100644 --- a/blog/dst/rss.xml +++ b/blog/dst/rss.xml @@ -13,8 +13,8 @@ <copyright>Copyright 2021 David Luévano Alvarado</copyright> <managingEditor>david@luevano.xyz (David Luévano Alvarado)</managingEditor> <webMaster>david@luevano.xyz (David Luévano Alvarado)</webMaster> - <pubDate>Sun, 06 Jun 2021 10:47:30 GMT</pubDate> - <lastBuildDate>Sun, 06 Jun 2021 10:47:30 GMT</lastBuildDate> + <pubDate>Sun, 06 Jun 2021 12:58:07 GMT</pubDate> + <lastBuildDate>Sun, 06 Jun 2021 12:58:07 GMT</lastBuildDate> <generator>pyssg v0.5.5</generator> <docs>https://validator.w3.org/feed/docs/rss2.html</docs> <ttl>30</ttl> diff --git a/blog/dst/tag/@english.html b/blog/dst/tag/@english.html index de6a750..ebb3dc3 100644 --- a/blog/dst/tag/@english.html +++ b/blog/dst/tag/@english.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -112,7 +105,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/tag/@notes.html b/blog/dst/tag/@notes.html index 2bc6ec1..f3e8569 100644 --- a/blog/dst/tag/@notes.html +++ b/blog/dst/tag/@notes.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -105,7 +98,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/tag/@server.html b/blog/dst/tag/@server.html index 77e9ccc..3c36f30 100644 --- a/blog/dst/tag/@server.html +++ b/blog/dst/tag/@server.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -105,7 +98,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/tag/@short.html b/blog/dst/tag/@short.html index 8f759a1..c870e79 100644 --- a/blog/dst/tag/@short.html +++ b/blog/dst/tag/@short.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -109,7 +102,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/tag/@spanish.html b/blog/dst/tag/@spanish.html index abce241..857dbb7 100644 --- a/blog/dst/tag/@spanish.html +++ b/blog/dst/tag/@spanish.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -105,7 +98,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/tag/@tools.html b/blog/dst/tag/@tools.html index fffb77e..a1ac39c 100644 --- a/blog/dst/tag/@tools.html +++ b/blog/dst/tag/@tools.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -110,7 +103,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/tag/@tutorial.html b/blog/dst/tag/@tutorial.html index 3e1e5e7..6628988 100644 --- a/blog/dst/tag/@tutorial.html +++ b/blog/dst/tag/@tutorial.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -105,7 +98,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/dst/tag/@update.html b/blog/dst/tag/@update.html index a186ea5..d4e06a1 100644 --- a/blog/dst/tag/@update.html +++ b/blog/dst/tag/@update.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -68,14 +68,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -109,7 +102,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/blog/plt/base.html b/blog/plt/base.html index 9e4cf06..5fe0244 100644 --- a/blog/plt/base.html +++ b/blog/plt/base.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="{%block html_lang%}{%endblock html_lang%}" +<html class="theme-dark" lang="{%block html_lang%}{%endblock html_lang%}" prefix="og: https://ogp.me/ns#"> <head> <base href="{{config.static_url}}"> @@ -21,7 +21,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css"> <!-- og meta --> @@ -62,14 +62,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> @@ -89,7 +82,7 @@ <span> <i class="fas fa-rss" alt="RSS"></i> - <a href="https://blog.luevano.xyz/rss.xml">RSS</a> + <a target="_blank" href="https://blog.luevano.xyz/rss.xml">RSS</a> </span> <br> diff --git a/luevano/404.html b/luevano/404.html index f49644e..4a7c26b 100644 --- a/luevano/404.html +++ b/luevano/404.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en"> +<html class="theme-dark" lang="en"> <head> <base href="https://static.luevano.xyz/"> <meta charset="utf-8"> @@ -17,7 +17,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> </head> <body> @@ -54,14 +54,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> diff --git a/luevano/contact.html b/luevano/contact.html index 675710a..067c619 100644 --- a/luevano/contact.html +++ b/luevano/contact.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz/"> @@ -18,7 +18,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <!-- og meta --> <meta property="og:title" content="Contatct -- Luévano's Site"/> @@ -64,14 +64,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> diff --git a/luevano/donate.html b/luevano/donate.html index 28c9612..2636267 100644 --- a/luevano/donate.html +++ b/luevano/donate.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz/"> @@ -18,7 +18,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <!-- og meta --> <meta property="og:title" content="Contatct -- Luévano's Site"/> @@ -64,14 +64,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> diff --git a/luevano/index.html b/luevano/index.html index 6eedd7d..89624fa 100644 --- a/luevano/index.html +++ b/luevano/index.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" +<html class="theme-dark" lang="en" prefix="og: https://ogp.me/ns#"> <head> <base href="https://static.luevano.xyz/"> @@ -18,7 +18,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> <!-- og meta --> <meta property="og:title" content="Luévano's Site"/> @@ -64,14 +64,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> diff --git a/luevano/test.html b/luevano/test.html index a451bee..d565914 100644 --- a/luevano/test.html +++ b/luevano/test.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en"> +<html class="theme-dark" lang="en"> <head> <base href="https://static.luevano.xyz/"> <meta charset="utf-8"> @@ -17,7 +17,7 @@ <!-- theme related --> <script type="text/javascript" src="scripts/theme.js"></script> - <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css"> + <link id="theme-css" rel="stylesheet" type="text/css" href="css/theme.css"> </head> <body> @@ -54,14 +54,7 @@ </ul> </nav> - <div class="theme-switch-container"> - <i class="fas fa-sun"></i> - <label class="switch theme"> - <input id="theme-switch" type="checkbox" onclick="toggleTheme()"> - <span class="slider round"></span> - </label> - <i class="fas fa-moon"></i> - </div> + <button class="theme-switcher" onclick="toggleTheme()"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> </header> <main> diff --git a/static/css/light.css b/static/css/light.css deleted file mode 100644 index 0b1456c..0000000 --- a/static/css/light.css +++ /dev/null @@ -1,138 +0,0 @@ -@import './nordtheme.css'; - -:root { - --bg: var(--color5); - --body-bg: var(--color4); - --navitem-bg: var(--color9); - --navitem-bg-hl: var(--color10); - - --fg: var(--color3); - --fg-hl: var(--color0); - - --link: var(--color15); - --link-hl: var(--color7); - --navitem-link: var(--color8); - --navitem-link-hl: var(--color7); - - --fg-acc1: var(--color11); - --fg-acc2: var(--color12); - --fg-acc3: var(--color13); - --fg-acc4: var(--color14); - --fg-acc5: var(--color15); - - --switch-bg: var(--color3); - --switch-slider: var(--color4); - --switch-toggled-bg: var(--color10); - --switch-ol: var(--color0); - --switch-moon: var(--color3); - --switch-sun: var(--color13); - - --code-border: var(--fg); -} - -/* general */ -a { - color: var(--link); -} - -a:hover { - color: var(--link-hl); -} - -h1 { - color: var(--fg-acc1); -} - -h2 { - color: var(--fg-acc2); -} - -h3 { - color: var(--fg-acc3); -} - -h4 { - color: var(--fg-acc4); -} - -h5 { - color: var(--fg-acc5); -} - -body { - background: var(--bg); - color: var(--fg); -} - -pre, code { - border-radius: 5px; - border: 1px solid var(--code-border); -} - -main { - background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em)); -} - -/* nav bar */ -body > header { - background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em)); -} - -nav li { - background: var(--navitem-bg); -} - -nav a { - color: var(--navitem-link); -} - -nav li:hover { - background: var(--navitem-bg-hl); - color: var(--fg-hl); -} - -nav li:hover > a { - color: var(--navitem-link-hl); -} - - -/* footer */ -body > footer { - background: linear-gradient(var(--bg) calc(100% - 1.5em), calc(100% - 1em), var(--body-bg) calc(100% - 0.5em)); -} - - -/* image gallery (not really being used rn) */ -div.gallery { - border: 1px solid var(--fg-hl); -} - -div.gallery:hover { - border: var(--fg-acc5); -} - - -/* switch */ -.slider { - background-color: var(--switch-bg); -} - -.theme-switch-container i.fa-moon { - color: var(--switch-moon); -} - -.theme-switch-container i.fa-sun { - color: var(--switch-sun); -} - -.slider:before { - background-color: var(--switch-slider); -} - -.switch input:checked + .slider { - background-color: var(--switch-toggled-bg); -} - -.switch input:focus + .slider { - box-shadow: 0 0 0.1em var(--switch-ol); -} diff --git a/static/css/nordtheme.css b/static/css/nordtheme.css deleted file mode 100644 index 00d524b..0000000 --- a/static/css/nordtheme.css +++ /dev/null @@ -1,183 +0,0 @@ -/* - * Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com> - * Copyright (c) 2016-present Sven Greb <development@svengreb.de> - * - * Project: Nord - * Version: 0.2.0 - * Repository: https://github.com/arcticicestudio/color - * License: MIT - * References: - * https://www.w3.org/TR/css-variables - * https://www.w3.org/TR/selectors/#root-pseudo - * https://drafts.csswg.org/css-variables - * https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables - * http://warpspire.com/kss - * https://github.com/kss-node/kss-node - */ - -/* -An arctic, north-bluish color palette. -Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax -highlighting and UI. -It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful -ambiance. -Styleguide Nord - */ - -:root { - /* - Base component color of "Polar Night". - Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. - Markup: - <div style="background-color:#2e3440; width=60; height=60"></div> - Styleguide Nord - Polar Night - */ ---color0: #2e3440; - -/* -Lighter shade color of the base component color. -Used as a lighter background color for UI elements like status bars. -Markup: -<div style="background-color:#3b4252; width=60; height=60"></div> -Styleguide Nord - Polar Night - */ ---color1: #3b4252; - -/* -Lighter shade color of the base component color. -Used as line highlighting in the editor. -In the UI scope it may be used as selection- and highlight color. -Markup: -<div style="background-color:#434c5e; width=60; height=60"></div> -Styleguide Nord - Polar Night - */ ---color2: #434c5e; - -/* -Lighter shade color of the base component color. -Used for comments, invisibles, indent- and wrap guide marker. -In the UI scope used as pseudoclass color for disabled elements. -Markup: -<div style="background-color:#4c566a; width=60; height=60"></div> -Styleguide Nord - Polar Night - */ ---color3: #4c566a; - -/* -Base component color of "Snow Storm". -Main color for text, variables, constants and attributes. -In the UI scope used as semi-light background depending on the theme shading design. -Markup: -<div style="background-color:#d8dee9; width=60; height=60"></div> -Styleguide Nord - Snow Storm - */ ---color4: #d8dee9; - -/* -Lighter shade color of the base component color. -Used as a lighter background color for UI elements like status bars. -Used as semi-light background depending on the theme shading design. -Markup: -<div style="background-color:#e5e9f0; width=60; height=60"></div> -Styleguide Nord - Snow Storm - */ ---color5: #e5e9f0; - -/* -Lighter shade color of the base component color. -Used for punctuations, carets and structuring characters like curly- and square brackets. -In the UI scope used as background, selection- and highlight color depending on the theme shading design. -Markup: -<div style="background-color:#eceff4; width=60; height=60"></div> -Styleguide Nord - Snow Storm - */ ---color6: #eceff4; - -/* -Bluish core color. -Used for classes, types and documentation tags. -Markup: -<div style="background-color:#8fbcbb; width=60; height=60"></div> -Styleguide Nord - Frost - */ ---color7: #8fbcbb; - -/* -Bluish core accent color. -Represents the accent color of the color palette. -Main color for primary UI elements and methods/functions. -Can be used for -- Markup quotes -- Markup link URLs -Markup: -<div style="background-color:#88c0d0; width=60; height=60"></div> -Styleguide Nord - Frost - */ ---color8: #88c0d0; - -/* -Bluish core color. -Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and -punctuations like (semi)colons,commas and braces. -Markup: -<div style="background-color:#81a1c1; width=60; height=60"></div> -Styleguide Nord - Frost - */ ---color9: #81a1c1; - -/* -Bluish core color. -Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). -Markup: -<div style="background-color:#5e81ac; width=60; height=60"></div> -Styleguide Nord - Frost - */ ---color10: #5e81ac; - -/* -Colorful component color. -Used for errors, git/diff deletion and linter marker. -Markup: -<div style="background-color:#bf616a; width=60; height=60"></div> -Styleguide Nord - Aurora - */ ---color11: #bf616a; - -/* -Colorful component color. -Used for annotations. -Markup: -<div style="background-color:#d08770; width=60; height=60"></div> -Styleguide Nord - Aurora - */ ---color12: #d08770; - -/* -Colorful component color. -Used for escape characters, regular expressions and markup entities. -In the UI scope used for warnings and git/diff renamings. -Markup: -<div style="background-color:#ebcb8b; width=60; height=60"></div> -Styleguide Nord - Aurora - */ ---color13: #ebcb8b; - -/* -Colorful component color. -Main color for strings and attribute values. -In the UI scope used for git/diff additions and success visualizations. -Markup: -<div style="background-color:#a3be8c; width=60; height=60"></div> -Styleguide Nord - Aurora - */ ---color14: #a3be8c; - -/* -Colorful component color. -Used for numbers. -Markup: -<div style="background-color:#b48ead; width=60; height=60"></div> -Styleguide Nord - Aurora - */ ---color15: #b48ead; -} diff --git a/static/css/style.css b/static/css/style.css index 9be32e0..ec95b6a 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -24,6 +24,7 @@ body, html { * { box-sizing: border-box; + transition: all 0.25s ease-in-out; } body { @@ -134,57 +135,38 @@ body > footer > span { /* theme swticher */ -.switch { +button.theme-switcher { + border: none; + font: inherit; + cursor: pointer; position: relative; - top: 0.2em; - display: inline-block; - width: 2em; - height: 1em; -} - -.switch input { - opacity: 0; - width: 0; - height: 0; -} - -.switch input:checked + .slider:before { - -webkit-transform: translateX(0.9em); - -ms-transform: translateX(0.9em); - transform: translateX(0.9em); + border-radius: 5px; + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-left: 0; + padding-right: 0; + margin-left: 0.2em; + margin-right: 0.2em; } -.slider { - position: absolute; - cursor: pointer; - top: 0; - bottom: 0; - left: 0; - right: 0; - -webkit-transition: 0.4s; - transition: 0.4s; +button.theme-switcher > .fa-sun { + transform: translate(-0.5em, -1em); } -.slider:before { - position:absolute; - content: ""; - height: 0.8em; - width: 0.8em; - left: 0.1em; - bottom: 0.1em; - -webkit-transition: 0.4s; - transition: 0.4s; +.theme-light button.theme-switcher > .fa-sun { + transform: translateX(-0.5em); + transition: all 0.25s ease-in-out; } -.slider.round { - border-radius: 1em; +button.theme-switcher > .fa-moon { + transform: translate(0.5em, -1em); } -.slider.round:before { - border-radius: 1em; +.theme-dark button.theme-switcher > .fa-moon { + transform: translateX(0.5em); + transition: all 0.25s ease-in-out; } - /* code blocks */ code.crypto { font-size: smaller; diff --git a/static/css/dark.css b/static/css/theme.css index 31b025a..6fc0501 100644 --- a/static/css/dark.css +++ b/static/css/theme.css @@ -1,6 +1,52 @@ -@import './nordtheme.css'; - +/* nord theme */ :root { + --color0: #2e3440; + --color1: #3b4252; + --color2: #434c5e; + --color3: #4c566a; + --color4: #d8dee9; + --color5: #e5e9f0; + --color6: #eceff4; + --color7: #8fbcbb; + --color8: #88c0d0; + --color9: #81a1c1; + --color10: #5e81ac; + --color11: #bf616a; + --color12: #d08770; + --color13: #ebcb8b; + --color14: #a3be8c; + --color15: #b48ead; +} + +.theme-light { + --bg: var(--color5); + --body-bg: var(--color4); + --navitem-bg: var(--color9); + --navitem-bg-hl: var(--color10); + + --fg: var(--color3); + --fg-hl: var(--color0); + + --link: var(--color15); + --link-hl: var(--color7); + --navitem-link: var(--color8); + --navitem-link-hl: var(--color7); + + --fg-acc1: var(--color11); + --fg-acc2: var(--color12); + --fg-acc3: var(--color13); + --fg-acc4: var(--color14); + --fg-acc5: var(--color15); + + --switch-bg: var(--color9); + --switch-bg-hl: var(--color10); + --switch-moon: var(--color10); + --switch-sun: var(--color13); + + --code-border: var(--color3); +} + +.theme-dark { --bg: var(--color3); --body-bg: var(--color0); --navitem-bg: var(--color1); @@ -20,14 +66,12 @@ --fg-acc4: var(--color14); --fg-acc5: var(--color15); - --switch-bg: var(--color3); - --switch-slider: var(--color0); - --switch-toggled-bg: var(--color10); - --switch-ol: var(--color4); - --switch-moon: var(--color3); + --switch-bg: var(--color1); + --switch-bg-hl: var(--color2); + --switch-moon: var(--color10); --switch-sun: var(--color13); - --code-border: var(--fg); + --code-border: var(--color4); } /* general */ @@ -113,26 +157,23 @@ div.gallery:hover { /* switch */ -.slider { +button.theme-switcher { background-color: var(--switch-bg); } -.theme-switch-container i.fa-moon { - color: var(--switch-moon); +button.theme-switcher:hover { + background-color: var(--switch-bg-hl); } -.theme-switch-container i.fa-sun { - color: var(--switch-sun); -} - -.slider:before { - background-color: var(--switch-slider); +button.theme-switcher > .fa-moon, +button.theme-switcher > .fa-sun { + color: transparent; } -.switch input:checked + .slider { - background-color: var(--switch-toggled-bg); +.theme-dark button.theme-switcher > .fa-moon { + color: var(--switch-moon); } -.switch input:focus + .slider { - box-shadow: 0 0 0.1em var(--switch-ol); +.theme-light button.theme-switcher > .fa-sun { + color: var(--switch-sun); } diff --git a/static/scripts/theme.js b/static/scripts/theme.js index 1a425d5..9036698 100644 --- a/static/scripts/theme.js +++ b/static/scripts/theme.js @@ -1,90 +1,32 @@ +// refactored code for a better solution found in https://medium.com/@haxzie/dark-and-light-theme-switcher-using-css-variables-and-pure-javascript-zocada-dd0059d72fa2 var local_storage = window.localStorage; window.onload = () => { let theme = local_storage.getItem('theme'); - let switch_theme = document.getElementById('theme-switch'); if(theme == null){ - local_storage.setItem('theme', 'dark'); - switch_theme.checked = true; + local_storage.setItem('theme', 'theme-dark'); } else{ - if(theme == 'dark'){ - switch_theme.checked = true; + if(theme == 'theme-dark'){ + setTheme('theme-dark'); } else{ - switch_theme.checked = false; - - let theme = document.getElementById('theme-css'); - - let href = theme.getAttribute('href'); - href = href.replace('dark.css', 'light.css'); - theme.setAttribute('href', href); - - /* - let code_theme = document.getElementById('code-theme-css'); - - let code_href; - if (code_theme !== null){ - code_href = code_theme.getAttribute('href'); - code_href = code_href.replace('solarized-dark.min.css', 'solarized-light.min.css'); - code_theme.setAttribute('href', code_href); - } - */ + setTheme('theme-light'); } } - } -function setTheme(){ - let switch_theme = document.getElementById('theme-switch'); - - if(switch_theme.checked == true){ - local_storage.setItem('theme', 'dark'); - } - else{ - local_storage.setItem('theme', 'light'); - } +function setTheme(themeName){ + local_storage.setItem('theme', themeName) + document.documentElement.className = themeName; } -// toggles between both themes, and then calls set theme to actually set it persistently. function toggleTheme(){ - let theme = document.getElementById('theme-css'); - let href = theme.getAttribute('href'); - - /* - let code_theme = document.getElementById('code-theme-css'); - let code_href; - if (code_theme !== null){ - code_href = code_theme.getAttribute('href'); - } - */ - - if(href.endsWith('dark.css')){ - href = href.replace('dark.css', 'light.css'); - /* - if (code_theme !== null){ - code_href = code_href.replace('solarized-dark.min.css', 'solarized-light.min.css'); - } - */ - } - else if (href.endsWith('light.css')){ - href = href.replace('light.css', 'dark.css'); - /* - if (code_theme !== null){ - code_href = code_href.replace('solarized-light.min.css', 'solarized-dark.min.css'); - } - */ + if (local_storage.getItem('theme') == 'theme-dark') { + setTheme('theme-light'); } else{ - console.log('Wrong replacement.'); - } - - theme.setAttribute('href', href); - /* - if (code_theme !== null){ - code_theme.setAttribute('href', code_href); + setTheme('theme-dark'); } - */ - setTheme(); } |