diff options
author | 2021-07-03 01:29:43 -0700 | |
---|---|---|
committer | 2021-07-03 01:29:43 -0700 | |
commit | a4603a7901d76325f9ce220b4f6f8a4009084257 (patch) | |
tree | b4150f9de50c2d9462f3857a45dc15efbd5ea756 /src/less/include | |
parent | 339103c4fed9718c23b9956c671294c032e62459 (diff) | |
download | new-ryuslash.org-a4603a7901d76325f9ce220b4f6f8a4009084257.tar.gz new-ryuslash.org-a4603a7901d76325f9ce220b4f6f8a4009084257.zip |
Update design and include CSS for my CGit and tekuti instances
This should include both a light and a dark theme, but I will admit that I'm
mostly testing with the dark one.
Diffstat (limited to 'src/less/include')
-rw-r--r-- | src/less/include/colors.less | 9 | ||||
-rw-r--r-- | src/less/include/common.less | 81 | ||||
-rw-r--r-- | src/less/include/components.less | 57 |
3 files changed, 147 insertions, 0 deletions
diff --git a/src/less/include/colors.less b/src/less/include/colors.less new file mode 100644 index 0000000..c67745a --- /dev/null +++ b/src/less/include/colors.less @@ -0,0 +1,9 @@ +@dark-background: #222424; +@dark-background-highlight: #3f4242; +@dark-foreground: #bfbfbf; +@dark-primary: #ff9800; + +@light-background: #f2f2f2; +@light-background-highlight: #d9d9d9; +@light-foreground: #111414; +@light-primary: #1d44b8; diff --git a/src/less/include/common.less b/src/less/include/common.less new file mode 100644 index 0000000..4aa433f --- /dev/null +++ b/src/less/include/common.less @@ -0,0 +1,81 @@ +@import 'colors'; + +a { + text-decoration: none; + + @media (prefers-color-scheme: dark) { + color: @dark-primary; + + &:visited { + color: darken(@dark-primary, 10%); + } + } + + @media (prefers-color-scheme: light) { + color: @light-primary; + + &:visited { + color: darken(@light-primary, 10%); + } + } + + &:hover { + text-decoration: underline; + } + + img { + border: none; + } +} + +body { + border: 0; + font-family: "PT Sans", "Liberation Sans", "DejaVu Sans", "Tahoma", "Verdana", "Arial", sans-serif; + font-size: 15pt; + margin: 0; + padding: 0; + line-height: 160%; + + @media (prefers-color-scheme: dark) { + background-color: @dark-background; + color: @dark-foreground; + } + + @media (prefers-color-scheme: light) { + background-color: @light-background; + color: @light-foreground; + } +} + +h1 { + font-size: 1.6rem; +} + +h2 { + font-size: 1.5rem; +} + +h3 { + font-size: 1.4rem; +} + +h4 { + font-size: 1.3rem; + font-weight: bold; +} + +h5 { + font-size: 1.2rem; + font-weight: bold; +} + +h6 { + font-size: 1.1rem; + font-weight: bold; +} + +pre { + font-family: "Fantasque Sans Mono", "PT Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier new", monospace; + font-size: 14pt; + line-height: 100%; +} diff --git a/src/less/include/components.less b/src/less/include/components.less new file mode 100644 index 0000000..1941566 --- /dev/null +++ b/src/less/include/components.less @@ -0,0 +1,57 @@ +@import "colors"; + +.content-wrapper { + max-width: 60rem; + margin: 0 auto; +} + +.footer { + font-size: 0.8rem; + padding: 10px 0; + text-align: center; + + @media (prefers-color-scheme: dark) { + border-top: 3px @dark-foreground dotted; + } + + @media (prefers-color-scheme: light) { + border-top: 3px @light-foreground dotted; + } +} + +.footer-text { + line-height: normal; + margin: 0; +} + +.subtitle { + font-size: 0.9rem; + margin: 0; + text-align: center; + padding: 10px; + + @media (prefers-color-scheme: dark) { + background-color: @dark-background-highlight; + } + + @media (prefers-color-scheme: light) { + background-color: @light-background-highlight; + } +} + +.title-header { + text-align: center; + padding: 20px; + margin: 0; + font-size: 2.5rem; + + @media (prefers-color-scheme: dark) { + color: @dark-primary; + background-color: @dark-background-highlight; + } + + @media (prefers-color-scheme: light) { + color: @light-primary; + background-color: @light-background-highlight; + } +} |