diff --git a/assets/less/classes/container.less b/assets/less/classes/container.less index 58aa3065..4660964d 100644 --- a/assets/less/classes/container.less +++ b/assets/less/classes/container.less @@ -19,6 +19,10 @@ } } + &--translucent { + background-color: var(--background-colour-translucent); + } + &__title { display: block; text-decoration: none; diff --git a/assets/less/classes/footer.less b/assets/less/classes/footer.less index 91a6e10a..a0fbf3bc 100644 --- a/assets/less/classes/footer.less +++ b/assets/less/classes/footer.less @@ -1,5 +1,5 @@ .footer { - background: linear-gradient(0deg, var(--global-menu-colour), transparent) repeat-x; + background: linear-gradient(0deg, var(--gradient-start), transparent) repeat-x; flex: 0 0 auto; text-align: center; font-size: .9em; diff --git a/assets/less/classes/header.less b/assets/less/classes/header.less index f62b1693..c9bc69ae 100644 --- a/assets/less/classes/header.less +++ b/assets/less/classes/header.less @@ -1,6 +1,6 @@ .header { flex: 0 0 auto; - background: linear-gradient(0deg, transparent, var(--global-menu-colour)) repeat-x; + background: linear-gradient(0deg, transparent, var(--gradient-start)) repeat-x; &__wrapper { margin: 0 auto; @@ -82,7 +82,7 @@ @media (max-width: @site-mobile-width) { width: 100%; - background: var(--global-menu-colour); + background: var(--gradient-start); &__item:not(:last-child) { border-bottom: 1px solid var(--accent-colour); @@ -103,7 +103,7 @@ transition: background-color .2s; &:hover { - background-color: var(--global-menu-colour); + background-color: var(--gradient-start); .header__submenu { transform: scaleY(1); @@ -141,7 +141,7 @@ position: absolute; // floating transform: scaleY(0); transform-origin: center top 0; - background: var(--global-menu-colour); + background: var(--gradient-start); overflow: hidden; z-index: 100; text-align: left; @@ -175,7 +175,7 @@ @media (max-width: @site-mobile-width) { display: none; width: 100%; - background: var(--global-menu-colour); + background: var(--gradient-start); font-size: 1.1em; &-toggle:checked ~ .header__user { diff --git a/assets/less/classes/input/button.less b/assets/less/classes/input/button.less index 47be4f5e..ef810935 100644 --- a/assets/less/classes/input/button.less +++ b/assets/less/classes/input/button.less @@ -1,7 +1,5 @@ .input__button { - background-image: linear-gradient(0deg, transparent 0%, #fff9 50%, #fff9 200%); - background-size: 100% 200%; - background-position: 0 100%; + background-image: linear-gradient(0deg, transparent, var(--gradient-start)); background-color: var(--accent-colour); font-family: @mio-font-regular; font-size: 1.1em; @@ -10,7 +8,7 @@ min-width: 80px; text-align: center; cursor: pointer; - transition: background-color .2s, box-shadow .2s, background-position .2s; + transition: background-color .2s, box-shadow .2s; color: var(--text-colour-header); border: 1px solid var(--text-colour-header); border-radius: 2px; @@ -33,8 +31,7 @@ } &:active { - background-color: var(--accent-colour); - background-position: 0 0; + background-color: var(--gradient-start); } &--new { diff --git a/assets/less/classes/input/text.less b/assets/less/classes/input/text.less index cf490b45..1832c11d 100644 --- a/assets/less/classes/input/text.less +++ b/assets/less/classes/input/text.less @@ -1,16 +1,15 @@ .input__text { - border: 1px solid var(--accent-colour); + border: 1px solid #aaa; padding: 1px; background: #fff; - background-color: var(--background-colour); - color: var(--text-colour); + color: #111; &:focus { - border-color: #aaa; + border-color: var(--accent-colour); } &--readonly { - color: #aaa; + color: #666; } &--monospace { @@ -26,9 +25,5 @@ box-shadow: inset 0 0 4px #111; border-color: #222; transition: border-color .2s; - - &:focus { - border-color: var(--accent-colour); - } } } diff --git a/assets/less/main.less b/assets/less/main.less index 99a99009..80d5fde8 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -4,19 +4,25 @@ @site-max-width: 1200px; @site-mobile-width: 800px; +@default-accent-colour: #9475b2; +@default-background-colour: #fbeeff; +@default-text-colour: #000; +@default-header-text-colour: #306; +@default-gradient-start: #c2affe; + :root { --site-max-width: @site-max-width; --site-background-meta: no-repeat center / cover fixed; --site-background-image: initial; --user-colour: inherit; - //--accent-colour: #9475b2; - --accent-colour: #452c4c; - --text-colour: #fff; - --text-colour-inverted: #000; - --text-colour-header: #ddd; // kill this too probably - --background-colour: #090909; - --global-menu-colour: var(--accent-colour); + --accent-colour: @default-accent-colour; + --text-colour: @default-text-colour; + --text-colour-inverted: color(#fff - @default-text-colour); + --text-colour-header: @default-header-text-colour; + --background-colour: @default-background-colour; + --background-colour-translucent: fade(@default-background-colour, 90%); + --gradient-start: @default-gradient-start; // deprecate this in favour of --accent-colour at some point } * { @@ -51,14 +57,15 @@ body { &--default { --site-background-meta: repeat; - --site-background-image: url('/images/cloud-pattern.png'); - --background-colour: var(--accent-colour); + --site-background-image: url('https://mikoto.misaka.nl/i/cloudss.png'); background-blend-mode: multiply; + + background-color: var(--accent-colour); + --gradient-start: var(--accent-colour); } &--legacy { - //--background-colour: #fbeeff; - --global-menu-colour: #3f154c; + --background-color: #fbeeff; } } diff --git a/public/images/cloud-pattern.png b/public/images/cloud-pattern.png deleted file mode 100644 index 6229ff4d..00000000 Binary files a/public/images/cloud-pattern.png and /dev/null differ diff --git a/templates/master.twig b/templates/master.twig index c6e476f0..0cac8f91 100644 --- a/templates/master.twig +++ b/templates/master.twig @@ -14,7 +14,7 @@ {% endif %} -
+ {% include '_layout/header.twig' %}