diff --git a/public/assets/css/style-light.css b/public/assets/css/style-light.css new file mode 100644 index 0000000..41dc03f --- /dev/null +++ b/public/assets/css/style-light.css @@ -0,0 +1,278 @@ +html { + color: #E0E0E0; + background-color: #1A1A1A; + margin: 0; + padding: 0; + padding-top: 0; + padding-bottom: 0; + font-family: "Inter", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", sans-serif; + font-size: 12pt; + font-optical-sizing: auto; + font-weight: 200; + font-style: normal; +} +body { + margin: 0; + min-height: 100vh; + display: flex; + flex-direction: column; +} +header { + background-color: #1A1A1A; + position: fixed; + top: 0; + left: 0; + right: 0; + padding: 24px; + display: flex; + align-items: center; + gap: 16px; + position: fixed; + z-index: 10; +} +main { + padding: 24px; + padding-top: 60px; + padding-bottom: 0px; + flex: 1; +} +footer { + padding: 24px; + padding-top: 0px; + display: flex; + align-items: center; + gap: 16px; + z-index: 10; +} + +h1, h2, h3, h4, h5, h6 { + color: #FFFFFF; +} + +/* Layout */ +section { + padding-top: 4px; + padding-bottom: 4px; +} +.block { + background-color: #272727; + border-radius: 6px; + padding-top: 4px; + padding-left: 24px; + padding-right: 24px; + padding-bottom: 4px; + margin-bottom: 16px; +} + +.flex { + display: flex; + align-items: center; + gap: 16px; +} +.flex > * { + margin: 0; +} +.flex-1 { + flex: 1; +} +.flex-vertical { + flex-direction: column; +} + +/* Code */ +pre { + background-color: #272727; + border-radius: 4px; + padding: 8px; + padding-left: 16px; + overflow-x: auto; + white-space: pre; + line-height: 24px; + font-size: small; + font-family: "MesloLGS Nerd Font", monospace; + font-optical-sizing: auto; + font-style: normal; +} +.block pre { + margin-bottom: 20px; +} + +.code { + padding: 4px; + font-family: "MesloLGS Nerd Font", monospace; + font-optical-sizing: auto; + font-style: normal; +} + +/* Fonts */ +a { + text-decoration: underline; + color: inherit; +} +h1 { + font-weight: 400; + line-height: 8pt; +} +h2 { + font-weight: 300; +} +section h2, section h3 { + line-height: 8pt; +} + +.font-inter { + font-family: "Inter"; +} +.font-nsajp { + font-family: "Noto Sans JP"; +} +.font-nsatc { + font-family: "Noto Sans TC"; +} +.font-nsasc { + font-family: "Noto Sans SC"; +} +.font-nsakr { + font-family: "Noto Sans KR"; +} +.font-meslo { + font-family: "MesloLGS Nerd Font"; +} + +.font-small { + font-size: small; +} +.font-bold { + font-weight: 400; +} + +.text-no-decoration { + text-decoration: none; +} +.text-underline { + text-decoration: underline; +} + +/* Colors */ +.text-white { + color: #FFFFFF; +} + +.text-bg { + color: #1A1A1A; +} +.text-bg-alt { + color: #272727; +} +.text-tx { + color: #E0E0E0; +} +.text-tx-alt { + color: #939393; +} + +.text-red { + color: #A03333; +} +.text-yellow { + color: #CCA000; +} +.text-green { + color: #00A050; +} +.text-teal { + color: #00A0A0; +} +.text-blue { + color: #0080C0; +} +.text-orange { + color: #C86000; +} +.text-brown { + color: #A07033; +} +.text-purple { + color: #7844A0; +} +.text-magenta { + color: #A043A0; +} +.text-indigo { + color: #334DA0; +} + +.text-bright-red { + color: #C84040; +} +.text-bright-yellow { + color: #FFC800; +} +.text-bright-green { + color: #00C878; +} +.text-bright-teal { + color: #00C8C8; +} +.text-bright-blue { + color: #00C0FF; +} +.text-bright-orange { + color: #FA7800; +} +.text-bright-brown { + color: #C88C40; +} +.text-bright-purple { + color: #C84040; +} +.text-bright-magenta { + color: #C854C8; +} +.text-bright-indigo { + color: #4060C8; +} + +/* Responsive Design */ +.hide { + display: none; +} +@media (max-width: 1000px) { + .bold-on-small { + font-weight: 400; + } + .hide.show-on-small { + display: block; + } +} +@media (min-width: 1000px) and (max-width: 1200px) { + .hide.show-on-medium { + display: block; + } +} +@media (min-width: 1200px) { + .hide.show-on-large { + display: block; + } +} + +/* Miscellaneous */ +.unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.banner { + height: 50px; + width: auto; + border-radius: 6px; +} +.social-icons { + width: 12pt; + height: 12pt; + display: block; +} diff --git a/public/assets/css/style.css b/public/assets/css/style.css index dcad966..4136ed9 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -103,7 +103,7 @@ pre { white-space: pre; line-height: 24px; font-size: small; - font-family: "MesloLGS Nerd Font", monospace, sans-serif; + font-family: "MesloLGS Nerd Font", monospace; font-optical-sizing: auto; font-style: normal; } @@ -113,7 +113,7 @@ pre { .code { padding: 4px; - font-family: "MesloLGS Nerd Font", monospace, sans-serif; + font-family: "MesloLGS Nerd Font", monospace; font-optical-sizing: auto; font-style: normal; } diff --git a/public/assets/js/script-light.js b/public/assets/js/script-light.js new file mode 100644 index 0000000..e69de29 diff --git a/public/base-light.html b/public/base-light.html new file mode 100644 index 0000000..7314d38 --- /dev/null +++ b/public/base-light.html @@ -0,0 +1,64 @@ + + + + + + + {% block title %}nercone's website{% endblock %} + + + + + + + + + {% block extra_head %}{% endblock %} + + +
+
+
+ Nercone {% block extra_title %}{% endblock %} +

{% block header_desc %}{{ get_daily_quote() }}{% endblock %}

+
+
+ あなたは{{ get_access_count() }}番目の訪問者です。 +
+
+
{% block content %}{% endblock %}
+ + +