VladPolskiy/canonical-canonical.com
1
0
Fork 0
mirror of https://github.com/canonical/canonical.com.git synced 2025-07-20 16:57:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

scss formatting

Browse Source
This commit is contained in:
immortalcodes
2025-06-30 16:46:48 +05:30
parent 8482fdf324
commit 5b8e960545
6 changed files with 64 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
.stylelintrc
View File

@ -1,9 +1,14 @@
{
"extends": ["stylelint-config-standard-scss", "stylelint-config-prettier"],
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-prettier"
],
"plugins": [
"stylelint-order"
],
"ignoreFiles": ["static/sass/_hljs.scss"],
"ignoreFiles": [
"static/sass/_hljs.scss"
],
"rules": {
"no-invalid-position-at-import-rule": null,
"scss/at-mixin-pattern": null,
@ -14,19 +19,31 @@
"scss/no-global-function-names": null,
"selector-class-pattern": null,
"scss/at-extend-no-missing-placeholder": null,
"at-rule-no-unknown": [ true, {
"ignoreAtRules": [
"extend",
"include",
"mixin",
"for",
"function",
"if",
"else",
"warn",
"return",
"use"
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"extend",
"include",
"starting-style",
"mixin",
"for",
"function",
"if",
"else",
"warn",
"return",
"use"
]
} ]
}
],
"property-no-unknown": [
true,
{
"ignoreProperties": [
"transition-behavior"
]
}
]
}
}
}

3
static/js/homepage/animations.js
View File

@ -122,4 +122,7 @@ if (!prefersReducedMotion) {
centrepage.playSegments([safeFrame, start], true);
});
});
} else {
observer.unobserve(document.querySelector("#centre-animation"));
centrepage.goToAndStop(26, true);
}

4
static/js/homepage/carousel.js
View File

@ -15,7 +15,7 @@ function activateSlide(index) {
const slide_progress_bar = slides[index].querySelector(".progress-bar");
if (slide_progress_bar) {
slide_progress_bar.style.animation = !isPaused
? "progressBarAnim 8s linear forwards"
? "progress-bar-anim 8s linear forwards"
: "none";
}
navItems.forEach((nav, i) => {
@ -24,7 +24,7 @@ function activateSlide(index) {
if (bar)
bar.style.animation =
i === index && !isPaused
? "progressBarAnim 8s linear forwards"
? "progress-bar-anim 8s linear forwards"
: "none";
if (isPaused) {
bar.style.width = i === index && isPaused ? "100%" : "0%"; // Ensure the progress bar is full when paused

2
static/js/scroll-section.js
View File

@ -131,7 +131,7 @@ function setScrollSection(wrapper) {
clearTimeout(loadtimer);
loadtimer = setTimeout(() => {
updateWrapperMinHeight(activeContent_wrapper);
}, 500);
}, 1500);
});
// Debounce resize event to update wrapper min-height

40
static/sass/_pattern_homepage.scss
View File

@ -102,9 +102,7 @@
.p-cta-text:hover {
color: #fe8a66;
}
.p-cta-text:hover {
.p-icon--arrow-right {
padding-left: 2.5rem;
}
@ -112,6 +110,7 @@
.p-tabs {
max-height: 56rem;
/* stylelint-disable */
.u-hide[role="tabpanel"] {
// Hide tab panels by default
@ -132,20 +131,25 @@
opacity: 0;
}
}
/* stylelint-enable */
}
}
.p-homepage-card {
background-color: #202020; /* dark background */
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.1); /* subtle border */
border: 1px solid rgb(255 255 255 / 10%); /* subtle border */
justify-content: space-between;
align-items: center;
}
a {
text-decoration-color: #fff;
}
.p-homepage-blog-card {
background-color: #202020; /* dark background */
border: 1px solid rgba(255, 255, 255, 0.1); /* subtle border */
border: 1px solid rgb(255 255 255 / 10%); /* subtle border */
padding: 0;
@media screen and (width < $breakpoint-large) {
padding-bottom: 0;
@ -165,21 +169,17 @@
border-style: solid;
border-width: 4px;
margin: 0;
border-color: rgba(255, 255, 255, 0.5);
}
a {
text-decoration-color: #fff;
border-color: rgb(255 255 255 / 50%);
}
h3 {
color: white;
padding: 16px 16px 0 16px;
padding: 16px 16px 0;
margin: 0;
}
p {
padding: 8px 16px 8px 16px;
padding: 8px 16px;
}
}
@ -189,7 +189,7 @@
top: -4rem;
max-width: 82rem;
width: 100%;
margin: 0 auto -4rem auto;
margin: 0 auto -4rem;
height: 300px;
overflow: hidden;
@media screen and (width < $breakpoint-large) {
@ -204,7 +204,7 @@
left: 0;
width: 100%;
display: block;
transform: translatey(-50%);
transform: translateY(-50%);
@media screen and (width < $breakpoint-large) {
display: none;
}
@ -259,7 +259,7 @@
text-align: left;
width: 100%;
margin-bottom: 0;
padding: 6px 0 18px 0;
padding: 6px 0 18px;
.progress-bar--husk {
background: #ffffff10;
@ -273,6 +273,7 @@
.p-homepage-carousel-tabs__item:hover {
background: var(--vf-color-background-default);
.progress-bar--husk {
background: #fff;
}
@ -288,12 +289,12 @@
left: 0;
height: 3px;
background: white;
animation: progressBarAnim 8s linear forwards;
animation: progress-bar-anim 8s linear forwards;
width: 0;
z-index: 2;
}
.progress-bar--husk {
div.progress-bar--husk {
background: #ffffff10;
height: 3px;
top: -5px;
@ -303,6 +304,7 @@
}
}
/* stylelint-disable scss/at-rule-no-unknown */
.p-homepage-carousel--slide {
opacity: 0;
transition-property: opacity;
@ -321,17 +323,19 @@
position: relative;
height: 3px;
background: white;
animation: progressBarAnim 8s linear forwards;
animation: progress-bar-anim 8s linear forwards;
width: 0;
z-index: 2;
margin-top: -0.5rem;
}
}
/* stylelint-enable scss/at-rule-no-unknown */
@keyframes progressBarAnim {
@keyframes progress-bar-anim {
from {
width: 0%;
}
to {
width: 100%;
}

6
static/sass/styles.scss
View File

@ -867,7 +867,7 @@ html {
height: 3.5rem;
z-index: 2;
border-radius: 3rem;
background: rgb(255, 255, 255);
background: rgb(255 255 255);
transition: top 0.3s ease;
}
@ -888,6 +888,7 @@ html {
align-items: center;
gap: 0.4em;
/* stylelint-disable-next-line no-descending-specificity */
hr {
display: none;
}
@ -903,7 +904,7 @@ html {
}
}
@media screen and (width < $breakpoint-large) {
padding: 0 1rem 0 1rem;
padding: 0 1rem;
position: relative;
}
}
@ -924,7 +925,6 @@ html {
.scroll-section__contentArea {
flex: 1;
overflow: hidden;
min-height: 16rem;
position: relative;
overflow: hidden;