From 150d463938f41d5390eb6ab052b5b2df6384c964 Mon Sep 17 00:00:00 2001 From: Nicolas Hernan Silva Date: Fri, 18 Jul 2025 00:42:14 -0300 Subject: [PATCH 1/2] Change static text color to gradient animation Signed-off-by: Nicolas Hernan Silva --- assets/scss/_styles_project.scss | 162 +++++++++++++++++-------------- 1 file changed, 89 insertions(+), 73 deletions(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 7280a4721..2861522e5 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -41,10 +41,13 @@ .nav-link.active { border-width: 1px; border-style: solid; - border-image: linear-gradient(to bottom, + border-image: linear-gradient( + to bottom, rgba($dark, 0.2) 30%, rgba($primary, 0.3) 60%, - $primary 90% 100%) 1; + $primary 90% 100% + ) + 1; padding-bottom: 0.3rem; align-items: center; justify-content: center; @@ -92,7 +95,7 @@ body { // Inline code p code, - li>code, + li > code, table code { color: inherit; padding: 0.2em 0.4em; @@ -113,7 +116,7 @@ body { background-color: $gray-900; padding: $spacer; - >code { + > code { background-color: inherit !important; padding: 0; margin: 0; @@ -167,7 +170,6 @@ a:not([href]):not([class]):hover { // .taxonomy-terms-cloud .taxonomy-term { - border-width: 0; border-radius: 0 3px 3px 0; display: inline-block; @@ -182,13 +184,10 @@ a:not([href]):not([class]):hover { transition: color 0.2s; clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0); - &:hover { background-color: $primary; color: $white; - } - } .article-teaser { @@ -217,12 +216,14 @@ a:not([href]):not([class]):hover { } .td-sidebar { - background-image: linear-gradient(to top, - #1e2117, - #1d1912, - #18120e, - #0f0a09, - #000000); + background-image: linear-gradient( + to top, + #1e2117, + #1d1912, + #18120e, + #0f0a09, + #000000 + ); position: sticky; height: calc(100vh - 5.5rem); top: 5.5rem; @@ -268,18 +269,9 @@ a:not([href]):not([class]):hover { &__section { margin-top: 1rem; - font-family: - "Qanelas Soft", - sans-serif, - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - Roboto, - "Helvetica Neue", - Arial, - "Apple Color Emoji", - "Segoe UI Emoji", - "Segoe UI Symbol"; + font-family: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol"; } } @@ -292,14 +284,20 @@ a:not([href]):not([class]):hover { &.active:not(.tree-root) { border-width: 1px; border-style: solid; - border-image: linear-gradient(to left, + border-image: linear-gradient( + to left, rgba($dark, 0) 30%, rgba($primary, 0.3) 60%, - $primary 90% 100%) 1; - background-image: linear-gradient(to left, + $primary 90% 100% + ) + 1; + background-image: linear-gradient( + to left, rgba($dark, 0.2) 30%, rgba($primary, 0.3) 60%, - $primary 90% 100%) 1; + $primary 90% 100% + ) + 1; padding: 0.25rem; padding-left: 0.5rem !important; // background-image: linear-gradient(to left, rgba($dark,.33),rgba($dark,.5),rgba($dark,.75),#1e2117, #31412b, #3b6447, #378b6d, #00b39f); @@ -321,12 +319,14 @@ a:not([href]):not([class]):hover { .td-sidebar-toc { line-height: 1.25rem; border-left: 1px solid $border-color; - background-image: linear-gradient(to top, - #1e2117, - #1d1912, - #18120e, - #0f0a09, - #000000); + background-image: linear-gradient( + to top, + #1e2117, + #1d1912, + #18120e, + #0f0a09, + #000000 + ); @supports (position: sticky) { position: sticky; @@ -403,13 +403,13 @@ a:not([href]):not([class]):hover { } .matterinfo .plan-support { - padding: .5rem; - border: .5px solid $border-color; + padding: 0.5rem; + border: 0.5px solid $border-color; display: flex; align-items: center; color: $casper; &:hover { - background-color: rgba($primary, 0.3) + background-color: rgba($primary, 0.3); } } @@ -429,7 +429,6 @@ a:not([href]):not([class]):hover { color: $casper; } - // Style alert boxes. .alert { @@ -456,12 +455,12 @@ a:not([href]):not([class]):hover { transition: color 0.8s; transition: background-color 0.8s; - >img { + > img { width: 2rem; margin-right: 0.5rem; } - >img:hover { + > img:hover { filter: brightness(0) invert(1); } @@ -484,7 +483,7 @@ a:not([href]):not([class]):hover { .td-content figure > img { width: auto; max-width: 100%; - border-radius: .5rem .5rem 0 0; + border-radius: 0.5rem 0.5rem 0 0; box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4); transition: box-shadow 0.2s; } @@ -495,7 +494,7 @@ a:not([href]):not([class]):hover { padding: 0.5rem 1rem; background-color: rgba($lightslategray, 1); color: $dark; - border-radius: 0 0 .5rem .5rem; + border-radius: 0 0 0.5rem 0.5rem; box-sizing: border-box; } @@ -504,23 +503,24 @@ a:not([href]):not([class]):hover { margin-bottom: 4rem; font-size: 5rem; text-align: left; - background: linear-gradient(217deg, - rgba(249, 245, 13, 0.26), - rgba(223, 255, 219, 0.57) 9.03%), - linear-gradient(127deg, - rgba(249, 245, 13, 0.7), - rgba(223, 225, 199, 0.1) 41.12%), - linear-gradient(336deg, - rgba(249, 245, 13, 0.1), - rgba(239, 239, 251, 0.81) 0%); - background-position: - 0% 0%, - 0% 0%; + background-image: linear-gradient( + 135deg, + rgb(224, 242, 157), + rgb(218, 237, 192), + rgb(211, 227, 212), + rgb(213, 232, 213), + rgb(211, 227, 212), + rgb(218, 237, 192), + rgb(224, 242, 157), + ); + background-size: 200%; box-sizing: auto; - color: rgba(0, 0, 0, 0); + color: transparent; display: block; text-rendering: optimizelegibility; - background-clip: text, text; + background-clip: text; + -webkit-background-clip: text; + animation: color-shift 8s linear infinite; @media (max-width: 768px) { font-size: 3.5rem; @@ -531,15 +531,23 @@ a:not([href]):not([class]):hover { // } } +@keyframes color-shift { + to { + background-position: -200%; + } +} + .dash-tangle { width: 78.14231rem; height: 74.72rem; transform: rotate(-55.68deg); flex-shrink: 0; overflow: hidden; - background-image: linear-gradient(180deg, - rgba(0, 179, 115, 0) 0%, - rgba(0, 179, 159, 0.3) 100%); + background-image: linear-gradient( + 180deg, + rgba(0, 179, 115, 0) 0%, + rgba(0, 179, 159, 0.3) 100% + ); position: absolute; top: -18rem; right: -32rem; @@ -568,13 +576,15 @@ a:not([href]):not([class]):hover { left: -24rem; overflow: hidden; - >.dash-ircle { + > .dash-ircle { width: 74.125rem; height: 74.125rem; flex-shrink: 0; - background: radial-gradient(50% 50% at 50% 50%, - rgba(0, 179, 159, 0.2) 0%, - rgba(0, 179, 159, 0) 100%); + background: radial-gradient( + 50% 50% at 50% 50%, + rgba(0, 179, 159, 0.2) 0%, + rgba(0, 179, 159, 0) 100% + ); position: absolute; overflow: hidden; background-clip: border-box; @@ -605,9 +615,7 @@ a:not([href]):not([class]):hover { a.dash-sign { color: #fffbf1; - text-shadow: - 0 20px 25px #2e2e31, - 0 40px 60px #2e2e31; + text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31; font-size: 28px; font-weight: 600; text-decoration: none; @@ -711,7 +719,7 @@ a:not([href]):not([class]):hover { gap: 1rem; } -.tab-content>.active { +.tab-content > .active { display: flex; } @@ -727,14 +735,17 @@ a:not([href]):not([class]):hover { [id^="tabs-"] { border: 1px solid rgba($light, 0.1); border-radius: 0.5rem; - padding: .5rem; + padding: 0.5rem; margin-bottom: 1rem; background-color: rgba($light, 0.02); box-shadow: 0 0 8px rgba($dark, 0.2); .nav-link { color: $light; - background-color: rgba($light, 0.3); // 🆕 consistent visible bg for inactive tabs + background-color: rgba( + $light, + 0.3 + ); // 🆕 consistent visible bg for inactive tabs border: 2px solid rgba($light, 0.15); border-radius: 0.5rem 0.5rem 0 0; margin: 2px; @@ -762,7 +773,7 @@ a:not([href]):not([class]):hover { } } - .nav-link.disabled { + .nav-link.disabled { background: transparent; border: none; color: rgba($light, 0.5); @@ -783,6 +794,11 @@ html { scroll-behavior: smooth; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { scroll-margin-top: 1rem; } From 6d50fe029fc49cb3a9f289043ef03ac4de31593f Mon Sep 17 00:00:00 2001 From: Nicolas Hernan Silva Date: Fri, 18 Jul 2025 00:50:51 -0300 Subject: [PATCH 2/2] Undo linter Signed-off-by: Nicolas Hernan Silva --- assets/scss/_styles_project.scss | 128 +++++++++++++++---------------- 1 file changed, 60 insertions(+), 68 deletions(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 2861522e5..cd774bf79 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -41,13 +41,10 @@ .nav-link.active { border-width: 1px; border-style: solid; - border-image: linear-gradient( - to bottom, + border-image: linear-gradient(to bottom, rgba($dark, 0.2) 30%, rgba($primary, 0.3) 60%, - $primary 90% 100% - ) - 1; + $primary 90% 100%) 1; padding-bottom: 0.3rem; align-items: center; justify-content: center; @@ -95,7 +92,7 @@ body { // Inline code p code, - li > code, + li>code, table code { color: inherit; padding: 0.2em 0.4em; @@ -116,7 +113,7 @@ body { background-color: $gray-900; padding: $spacer; - > code { + >code { background-color: inherit !important; padding: 0; margin: 0; @@ -170,6 +167,7 @@ a:not([href]):not([class]):hover { // .taxonomy-terms-cloud .taxonomy-term { + border-width: 0; border-radius: 0 3px 3px 0; display: inline-block; @@ -184,10 +182,13 @@ a:not([href]):not([class]):hover { transition: color 0.2s; clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0); + &:hover { background-color: $primary; color: $white; + } + } .article-teaser { @@ -216,14 +217,12 @@ a:not([href]):not([class]):hover { } .td-sidebar { - background-image: linear-gradient( - to top, - #1e2117, - #1d1912, - #18120e, - #0f0a09, - #000000 - ); + background-image: linear-gradient(to top, + #1e2117, + #1d1912, + #18120e, + #0f0a09, + #000000); position: sticky; height: calc(100vh - 5.5rem); top: 5.5rem; @@ -269,9 +268,18 @@ a:not([href]):not([class]):hover { &__section { margin-top: 1rem; - font-family: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont, - "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: + "Qanelas Soft", + sans-serif, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + "Helvetica Neue", + Arial, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol"; } } @@ -284,20 +292,14 @@ a:not([href]):not([class]):hover { &.active:not(.tree-root) { border-width: 1px; border-style: solid; - border-image: linear-gradient( - to left, + border-image: linear-gradient(to left, rgba($dark, 0) 30%, rgba($primary, 0.3) 60%, - $primary 90% 100% - ) - 1; - background-image: linear-gradient( - to left, + $primary 90% 100%) 1; + background-image: linear-gradient(to left, rgba($dark, 0.2) 30%, rgba($primary, 0.3) 60%, - $primary 90% 100% - ) - 1; + $primary 90% 100%) 1; padding: 0.25rem; padding-left: 0.5rem !important; // background-image: linear-gradient(to left, rgba($dark,.33),rgba($dark,.5),rgba($dark,.75),#1e2117, #31412b, #3b6447, #378b6d, #00b39f); @@ -319,14 +321,12 @@ a:not([href]):not([class]):hover { .td-sidebar-toc { line-height: 1.25rem; border-left: 1px solid $border-color; - background-image: linear-gradient( - to top, - #1e2117, - #1d1912, - #18120e, - #0f0a09, - #000000 - ); + background-image: linear-gradient(to top, + #1e2117, + #1d1912, + #18120e, + #0f0a09, + #000000); @supports (position: sticky) { position: sticky; @@ -403,13 +403,13 @@ a:not([href]):not([class]):hover { } .matterinfo .plan-support { - padding: 0.5rem; - border: 0.5px solid $border-color; + padding: .5rem; + border: .5px solid $border-color; display: flex; align-items: center; color: $casper; &:hover { - background-color: rgba($primary, 0.3); + background-color: rgba($primary, 0.3) } } @@ -429,6 +429,7 @@ a:not([href]):not([class]):hover { color: $casper; } + // Style alert boxes. .alert { @@ -455,12 +456,12 @@ a:not([href]):not([class]):hover { transition: color 0.8s; transition: background-color 0.8s; - > img { + >img { width: 2rem; margin-right: 0.5rem; } - > img:hover { + >img:hover { filter: brightness(0) invert(1); } @@ -483,7 +484,7 @@ a:not([href]):not([class]):hover { .td-content figure > img { width: auto; max-width: 100%; - border-radius: 0.5rem 0.5rem 0 0; + border-radius: .5rem .5rem 0 0; box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4); transition: box-shadow 0.2s; } @@ -494,7 +495,7 @@ a:not([href]):not([class]):hover { padding: 0.5rem 1rem; background-color: rgba($lightslategray, 1); color: $dark; - border-radius: 0 0 0.5rem 0.5rem; + border-radius: 0 0 .5rem .5rem; box-sizing: border-box; } @@ -537,17 +538,16 @@ a:not([href]):not([class]):hover { } } + .dash-tangle { width: 78.14231rem; height: 74.72rem; transform: rotate(-55.68deg); flex-shrink: 0; overflow: hidden; - background-image: linear-gradient( - 180deg, - rgba(0, 179, 115, 0) 0%, - rgba(0, 179, 159, 0.3) 100% - ); + background-image: linear-gradient(180deg, + rgba(0, 179, 115, 0) 0%, + rgba(0, 179, 159, 0.3) 100%); position: absolute; top: -18rem; right: -32rem; @@ -576,15 +576,13 @@ a:not([href]):not([class]):hover { left: -24rem; overflow: hidden; - > .dash-ircle { + >.dash-ircle { width: 74.125rem; height: 74.125rem; flex-shrink: 0; - background: radial-gradient( - 50% 50% at 50% 50%, - rgba(0, 179, 159, 0.2) 0%, - rgba(0, 179, 159, 0) 100% - ); + background: radial-gradient(50% 50% at 50% 50%, + rgba(0, 179, 159, 0.2) 0%, + rgba(0, 179, 159, 0) 100%); position: absolute; overflow: hidden; background-clip: border-box; @@ -615,7 +613,9 @@ a:not([href]):not([class]):hover { a.dash-sign { color: #fffbf1; - text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31; + text-shadow: + 0 20px 25px #2e2e31, + 0 40px 60px #2e2e31; font-size: 28px; font-weight: 600; text-decoration: none; @@ -719,7 +719,7 @@ a:not([href]):not([class]):hover { gap: 1rem; } -.tab-content > .active { +.tab-content>.active { display: flex; } @@ -735,17 +735,14 @@ a:not([href]):not([class]):hover { [id^="tabs-"] { border: 1px solid rgba($light, 0.1); border-radius: 0.5rem; - padding: 0.5rem; + padding: .5rem; margin-bottom: 1rem; background-color: rgba($light, 0.02); box-shadow: 0 0 8px rgba($dark, 0.2); .nav-link { color: $light; - background-color: rgba( - $light, - 0.3 - ); // 🆕 consistent visible bg for inactive tabs + background-color: rgba($light, 0.3); // 🆕 consistent visible bg for inactive tabs border: 2px solid rgba($light, 0.15); border-radius: 0.5rem 0.5rem 0 0; margin: 2px; @@ -773,7 +770,7 @@ a:not([href]):not([class]):hover { } } - .nav-link.disabled { + .nav-link.disabled { background: transparent; border: none; color: rgba($light, 0.5); @@ -794,11 +791,6 @@ html { scroll-behavior: smooth; } -h1, -h2, -h3, -h4, -h5, -h6 { +h1, h2, h3, h4, h5, h6 { scroll-margin-top: 1rem; }