Skip to content

Commit

Permalink
chore: blog page css and fixing lint issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@asthabh23
asthabh23 committed Jan 7, 2025
1 parent df6edc5 commit 5e0e854
Showing 1 changed file with 76 additions and 55 deletions.
131 changes: 76 additions & 55 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@
:root {
/* Fonts */
--body-font-family: "Adobe Clean", adobe-clean, "Trebuchet MS", sans-serif;
--code-font-family: "Source Code Pro", source-code-pro, "Courier New",
--code-font-family:
"Source Code Pro",
source-code-pro,
"Courier New",
monospace;

/* Headings (Consonant) */
Expand Down Expand Up @@ -152,7 +155,8 @@
/* Checkerboard pattern */
--color-checkerboard-bg-border: rgb(214 213 213 / 40%);
--color-checkerboard-bg-fill: transparent;
--checkerboard-background: linear-gradient(
--checkerboard-background:
linear-gradient(
var(--color-checkerboard-bg-border) 1px,
transparent 1px
),
Expand All @@ -177,9 +181,10 @@
--circular-number-tag-size: 60px;

/* drop-shadow */
--image-filter-drop-shadow-small: drop-shadow(
10px 25px 50px rgba(0 0 0 / 10%)
);
--image-filter-drop-shadow-small:
drop-shadow(
10px 25px 50px rgba(0 0 0 / 10%)
);

/* guide-templates */
--side-navigation-bar-gap: var(--spacing-s);
Expand Down Expand Up @@ -233,11 +238,12 @@
--card-border-radius-l: 24px;

/* guide-templates */
--side-navigation-bar-gap: clamp(
var(--spacing-m),
3.2vw,
var(--spacing-ml)
);
--side-navigation-bar-gap:
clamp(
var(--spacing-m),
3.2vw,
var(--spacing-ml)
);
}
}

Expand Down Expand Up @@ -274,7 +280,8 @@ body.appear {
.section.content > div,
.default-content-wrapper,
.contained-wrapper,
.feed.recent {
.feed.recent,
.feed.blog {
max-width: var(--grid-mobile-container-width);
margin-left: auto;
margin-right: auto;
Expand All @@ -290,7 +297,8 @@ aside {
.section.content > div,
.default-content-wrapper,
.contained-wrapper,
.feed.recent {
.feed.recent,
.feed.blog {
max-width: var(--grid-tablet-container-width);
}
}
Expand All @@ -300,7 +308,8 @@ aside {
.default-content-wrapper,
.franklin .gnav .submenu-content,
.contained-wrapper,
.feed.recent {
.feed.recent,
.feed.blog {
max-width: 90%;
}

Expand Down Expand Up @@ -329,7 +338,8 @@ aside {
.side-navigation-wrapper.expand,
.side-navigation-wrapper.expand + .section.content,
.franklin .gnav .submenu-content,
.feed.recent {
.feed.recent,
.feed.blog {
max-width: var(--grid-desktop-container-width);
}

Expand Down Expand Up @@ -552,7 +562,8 @@ a.button.primary-cta:focus {
background-color: var(--color-info-accent-hover);
border-color: var(--color-info-accent-hover);
color: var(--color-white);
box-shadow: 0 0 0 2px var(--color-white),
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 4px var(--color-info-accent-hover);
}

Expand Down Expand Up @@ -732,11 +743,12 @@ main .form .button::before {
z-index: -1;

/* 1st value: hovered color, 2nd value: original color */
background: radial-gradient(
circle at left,
var(--color-white) 50%,
var(--spectrum-blue) 50%
);
background:
radial-gradient(
circle at left,
var(--color-white) 50%,
var(--spectrum-blue) 50%
);
}

.redesign a.button:any-link:hover::before,
Expand All @@ -756,11 +768,12 @@ main .form .button:hover::before {

.redesign a.button.secondary:any-link::before {
/* 1st value: hovered color, 2nd value: original color */
background: radial-gradient(
circle at left,
var(--color-font-grey) 50%,
transparent 50%
);
background:
radial-gradient(
circle at left,
var(--color-font-grey) 50%,
transparent 50%
);
}

/* .black-border button: black border transparent bg -> border button */
Expand All @@ -775,11 +788,12 @@ main .form .button:hover::before {

.redesign a.button.black-border:any-link::before {
/* 1st value: hovered color, 2nd value: original color */
background: radial-gradient(
circle at left,
rgb(0 0 0 / 50%) 50%,
transparent 50%
);
background:
radial-gradient(
circle at left,
rgb(0 0 0 / 50%) 50%,
transparent 50%
);
}

/* larger size */
Expand Down Expand Up @@ -1154,9 +1168,13 @@ body.no-header-template {
font-size: var(--type-heading-l-size);
font-weight: 900;
line-height: 1;
box-shadow: rgb(0 0 0 / 7%) 0 100px 148px, rgb(0 0 0 / 5%) 0 42px 62px,
rgb(0 0 0 / 4%) 0 22px 33px, rgb(0 0 0 / 3.5%) 0 13px 19px,
rgb(0 0 0 / 3%) 0 7px 10px, rgb(0 0 0 / 2%) 0 3px 4px;
/* stylelint-disable-next-line declaration-colon-newline-after */
box-shadow: rgb(0 0 0 / 7%) 0 100px 148px,
rgb(0 0 0 / 5%) 0 42px 62px,
rgb(0 0 0 / 4%) 0 22px 33px,
rgb(0 0 0 / 3.5%) 0 13px 19px,
rgb(0 0 0 / 3%) 0 7px 10px,
rgb(0 0 0 / 2%) 0 3px 4px;
margin-bottom: var(--spacing-xs);
}

Expand Down Expand Up @@ -1228,7 +1246,9 @@ body.no-header-template {
right: 0;
bottom: -1px;
width: 0;
transition: left 0.5s var(--cubic-bezier-2), right 0.5s var(--cubic-bezier-2),
/* stylelint-disable-next-line declaration-colon-newline-after */
transition: left 0.5s var(--cubic-bezier-2),
right 0.5s var(--cubic-bezier-2),
width 0.5s var(--cubic-bezier-2);
}

Expand All @@ -1238,7 +1258,8 @@ body.no-header-template {
left: 0;
}

/* NOTE: with .breadcrumb prefix would address line length for '/' in breadcrumb, use .link-underline-effect for normal case */
/* NOTE: with .breadcrumb prefix would address line length for '/' in breadcrumb,
use .link-underline-effect for normal case */
.breadcrumb-link-underline-effect::before {
background: var(--color-light-grey-600);
width: 0;
Expand All @@ -1257,6 +1278,7 @@ body.no-header-template {
.link-highlight-colorful-effect-2 {
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-box-decoration-break: clone;
/* stylelint-disable-next-line declaration-colon-newline-after */
background-image: linear-gradient(
90deg,
rgba(137 140 242 / 50%) 0%,
Expand All @@ -1273,6 +1295,7 @@ body.no-header-template {

/* effect 2: greenish yellow with pink */
.link-highlight-colorful-effect-2 {
/* stylelint-disable-next-line declaration-colon-newline-after */
background-image: linear-gradient(
90deg,
rgba(234 190 248 / 80%) 0%,
Expand All @@ -1284,10 +1307,11 @@ body.no-header-template {
/* can add `.link-highlight-colorful-effect-hover-wrapper` to trigger hover child highlight effect */
.link-highlight-colorful-effect:hover,
.link-highlight-colorful-effect-2:hover,
/* stylelint-disable-next-line selector-descendant-combinator-no-non-space */
.link-highlight-colorful-effect-hover-wrapper:hover
.link-highlight-colorful-effect,
.link-highlight-colorful-effect,
.link-highlight-colorful-effect-hover-wrapper:hover
.link-highlight-colorful-effect-2 {
.link-highlight-colorful-effect-2 {
background-size: 100% 50%;
color: inherit;
}
Expand Down Expand Up @@ -1725,10 +1749,9 @@ body.skills-template .columns ol {
margin-top: 0.5em;
}

body.guides-template
main
.default-content-wrapper
> :first-of-type:not(.guides-back-btn) {
body.guides-template,
main,
.default-content-wrapper > :first-of-type:not(.guides-back-btn) {
margin-top: 0;
}

Expand All @@ -1751,6 +1774,7 @@ body.skills-template main.without-full-width-hero .default-content-wrapper h3 {
letter-spacing: 0;
}

/* stylelint-disable-next-line max-line-length */
body.guides-template main.without-full-width-hero .default-content-wrapper:first-of-type img:first-of-type.doc-detail-hero-image {
width: 100%;
height: auto;
Expand Down Expand Up @@ -1870,7 +1894,7 @@ body.guides-template .guides-back-btn span.icon {
}

body.blog-template img {
max-width: 90%;
max-width: 90%;
}
}

Expand Down Expand Up @@ -1905,14 +1929,11 @@ body.guides-template .guides-back-btn span.icon {
margin-bottom: var(--spacing-l);
}

body.guides-template
main.without-full-width-hero
.default-content-wrapper
h1,
body.skills-template
main.without-full-width-hero
.default-content-wrapper
h1 {
body.guides-template,
main.without-full-width-hero,
.default-content-wrapper,
body.skills-template,
h1 {
margin-top: var(--spacing-ml);
margin-bottom: var(--spacing-m);
}
Expand Down Expand Up @@ -1955,7 +1976,8 @@ body.guides-template .icon-icon-caret-down {

body.guides-template .guides-back-btn .icon-icon-arrow {
background-image: url("/icons/icon-arrow.svg");
filter: invert(38%) sepia(42%) saturate(5895%) hue-rotate(203deg)
filter:
invert(38%) sepia(42%) saturate(5895%) hue-rotate(203deg)
brightness(94%) contrast(92%);
}

Expand Down Expand Up @@ -2062,7 +2084,6 @@ body.contact-template main .default-content-wrapper img {
}
}


/* breadcrumb */
/* stylelint-disable no-descending-specificity */

Expand Down Expand Up @@ -2104,8 +2125,8 @@ body.contact-template main .default-content-wrapper img {
font-size: var(--type-body-xxs-size);
}

.breadcrumb ul li:not(:last-child) a::after {
content: '/';
.breadcrumb ul li:not(:last-child) a::after {
content: "/";
padding-left: var(--spacing-xxs);
}

Expand Down Expand Up @@ -2162,4 +2183,4 @@ body.contact-template main .default-content-wrapper img {
max-width: var(--header-container-width);
padding: 0 var(--header-container-desktop-x-padding);
}
}
}

0 comments on commit 5e0e854

Please sign in to comment.