hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Attempt to switch to relative colors for primary-color-alpha, simplify --active variable, add --hover and --disabled variables

Browse Source
This commit is contained in:
daudix
2024-09-01 16:54:39 +03:00
parent 82d82cc811
commit db499a9363
16 changed files with 30 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sass/_buttons.scss
View File

@ -29,7 +29,7 @@
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
&.colored {

10
sass/_comments.scss
View File

@ -98,12 +98,12 @@
height: 100%;
&:hover {
transform: rotate(10deg) scale(1.1);
transform: rotate(10deg) var(--hover);
border-radius: var(--rounded-corner);
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
}
}
@ -133,7 +133,7 @@
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
&.op {
@ -204,7 +204,7 @@
&:active {
transform: scale(var(--active));
transform: var(--active);
}
&.hashtag {
@ -288,7 +288,7 @@
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
}

2
sass/_external.scss
View File

@ -3,7 +3,7 @@
-webkit-mask-image: var(--icon);
-webkit-mask-size: cover;
display: inline-block;
opacity: 0.6;
opacity: var(--disabled);
mask-image: var(--icon);
mask-size: cover;
margin-inline-start: 0.25rem;

6
sass/_footer.scss
View File

@ -59,7 +59,7 @@
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
}
}
@ -93,7 +93,7 @@
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
.icon {
@ -131,7 +131,7 @@
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
}
}

4
sass/_footnotes-list.scss
View File

@ -27,7 +27,7 @@
a + a[href*="#fr-"],
li:target a[href*="#fr-"] {
opacity: 0.6;
opacity: var(--disabled);
background-color: var(--primary-color);
&:hover {
@ -35,7 +35,7 @@
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
}

17
sass/_input.scss
View File

@ -47,9 +47,12 @@ input[type="color"] {
}
&:disabled {
opacity: var(--disabled);
cursor: not-allowed;
border: 0.15rem solid var(--fg-muted-1);
background-color: var(--fg-muted-1);
&:hover {
background-color: var(--fg-muted-1);
}
}
}
@ -118,7 +121,6 @@ input[type="checkbox"] {
&:disabled {
&::before {
opacity: 0.6;
box-shadow: none;
}
}
@ -134,11 +136,6 @@ input[type="color"] {
width: 3rem;
height: 2rem;
&:disabled {
opacity: 0.6;
border: none;
}
&::-moz-color-swatch {
border: none;
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
@ -177,7 +174,7 @@ input[type="range"] {
height: 1.5rem;
&:active {
transform: scale(var(--active));
transform: var(--active);
cursor: grabbing;
}
}
@ -194,7 +191,7 @@ input[type="range"] {
height: 1.5rem;
&:active {
transform: scale(var(--active));
transform: var(--active);
cursor: grabbing;
}
}

4
sass/_media.scss
View File

@ -83,7 +83,7 @@ img {
cursor: zoom-in;
&:hover {
transform: scale(1.1);
transform: var(--hover);
z-index: 1;
box-shadow: var(--edge-highlight), var(--shadow-raised);
border-radius: 0;
@ -101,7 +101,7 @@ img {
transform-origin: center;
&:hover {
transform: scale(1.1);
transform: var(--hover);
}
}
}

2
sass/_nav.scss
View File

@ -187,7 +187,7 @@
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
}

2
sass/_post-nav.scss
View File

@ -22,7 +22,7 @@
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
&.post-nav-prev .nav-arrow::before {

2
sass/_pre-container.scss
View File

@ -45,7 +45,7 @@
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
.icon {

2
sass/_tags.scss
View File

@ -12,7 +12,7 @@
line-height: 1;
&:active {
transform: scale(var(--active));
transform: var(--active);
}
}

5
sass/_variables.scss
View File

@ -43,6 +43,7 @@
@else {
// COLORS
--primary-color-alpha: rgb(from var(--primary-color) r g b / 0.1);
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
--fg-color: rgb(0 0 0 / 0.8);
--fg-muted-1: rgb(0 0 0 / 0.05);
@ -66,7 +67,9 @@
--yellow-fg: rgb(156 110 3);
// VARIABLES
--active: 0.9;
--disabled: 0.6;
--hover: scale(1.1);
--active: scale(0.9);
--blur: saturate(180%) blur(0.75rem);
--container-width: 720px;
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);

2
sass/_zola-anchor.scss
View File

@ -20,7 +20,7 @@ h6 {
}
&:active {
transform: scale(var(--active));
transform: var(--active);
}
&:focus-visible {