flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added special accent colour variable for header and footer.

Browse source
This commit is contained in:
flash 2018-10-30 23:30:49 +01:00
parent 366ea2710a
commit 3328ef48bf
4 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/less/classes/avatar.less
View file

@ -1,6 +1,6 @@
.avatar { .avatar {
flex-shrink: 0; flex-shrink: 0;
background-color: var(--accent-colour); background-color: var(--background-colour);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;

2
assets/less/classes/footer.less
View file

@ -28,7 +28,7 @@
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%); mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
background: var(--background-pattern); background: var(--background-pattern);
background-color: var(--accent-colour); background-color: var(--header-accent-colour);
background-blend-mode: multiply; background-blend-mode: multiply;
} }
} }

18
assets/less/classes/header.less
View file

@ -11,7 +11,7 @@
mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%); mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%); -webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
background: var(--background-pattern); background: var(--background-pattern);
background-color: var(--accent-colour); background-color: var(--header-accent-colour);
background-blend-mode: multiply; background-blend-mode: multiply;
} }
@ -96,10 +96,10 @@
@media (max-width: @site-mobile-width) { @media (max-width: @site-mobile-width) {
width: 100%; width: 100%;
background: var(--accent-colour); background: var(--header-accent-colour);
&__item:not(:last-child) { &__item:not(:last-child) {
border-bottom: 1px solid var(--accent-colour); border-bottom: 1px solid var(--header-accent-colour);
} }
&__link { &__link {
@ -117,7 +117,7 @@
transition: background-color .2s; transition: background-color .2s;
&:hover { &:hover {
background-color: var(--accent-colour); background-color: var(--header-accent-colour);
.header__submenu { .header__submenu {
transform: scaleY(1); transform: scaleY(1);
@ -155,11 +155,11 @@
position: absolute; // floating position: absolute; // floating
transform: scaleY(0); transform: scaleY(0);
transform-origin: center top 0; transform-origin: center top 0;
background: var(--accent-colour); background: var(--header-accent-colour);
overflow: hidden; overflow: hidden;
z-index: 100; z-index: 100;
text-align: left; text-align: left;
box-shadow: 0 1px 2px var(--accent-colour); box-shadow: 0 1px 2px var(--header-accent-colour);
transition: transform .2s; transition: transform .2s;
&:hover { &:hover {
@ -189,7 +189,7 @@
@media (max-width: @site-mobile-width) { @media (max-width: @site-mobile-width) {
display: none; display: none;
width: 100%; width: 100%;
background: var(--accent-colour); background: var(--header-accent-colour);
font-size: 1.1em; font-size: 1.1em;
&-toggle:checked ~ .header__user { &-toggle:checked ~ .header__user {
@ -245,7 +245,7 @@
max-width: 100%; max-width: 100%;
font-size: 1.6em; font-size: 1.6em;
line-height: 1.5em; line-height: 1.5em;
border-bottom: 1px solid var(--accent-colour); border-bottom: 1px solid var(--header-accent-colour);
padding: 4px 8px; padding: 4px 8px;
text-align: left; text-align: left;
} }
@ -276,7 +276,7 @@
padding: 0; padding: 0;
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid var(--accent-colour); border-bottom: 1px solid var(--header-accent-colour);
} }
} }
} }

1
assets/less/main.less
View file

@ -16,6 +16,7 @@
--user-colour: inherit; --user-colour: inherit;
--user-header: url('/images/pixel.png'); --user-header: url('/images/pixel.png');
--accent-colour: #8559a5; --accent-colour: #8559a5;
--header-accent-colour: var(--accent-colour);
} }
* { * {