diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css index c788f3484..8f842528f 100644 --- a/front/src/lib/styles/base/theme.css +++ b/front/src/lib/styles/base/theme.css @@ -108,6 +108,7 @@ --code-highlight-bg-clr: var(--green); --code-hover-header-clr: var(--fg-clr-oo); --code-header-hover-clr: var(--highlight-clr); + --blocked-content-bg: white; --page-nav-heading: var(--fg-clr-oo); --page-nav-toggle-bg-clr: var(--sun-50); --page-nav-toggle-focus-bg-clr: var(--sun-50); @@ -191,6 +192,7 @@ html.light-theme { --code-highlight-bg-clr: var(--green); --code-hover-header-clr: var(--fg-clr-oo); --code-header-hover-clr: var(--highlight-clr); + --blocked-content-bg: white; --page-nav-heading: var(--fg-clr-oo); --page-nav-toggle-bg-clr: var(--sun-50); --page-nav-toggle-focus-bg-clr: var(--sun-50); @@ -279,6 +281,7 @@ html.light-theme { --code-header-hover-clr: var(--light); --code-copied-clr: var(--green); --code-highlight-bg-clr: var(--burnt-orange); + --blocked-content-bg: black; --page-nav-heading: var(--moon); --page-nav-toggle-bg-clr: var(--oxford-blue-a50); --page-nav-toggle-focus-bg-clr: var(--hardlight-clr); @@ -352,6 +355,7 @@ html.dark-theme { --code-header-hover-clr: var(--light); --code-copied-clr: var(--green); --code-highlight-bg-clr: var(--burnt-orange); + --blocked-content-bg: black; --page-nav-heading: var(--moon); --page-nav-toggle-bg-clr: var(--oxford-blue-a50); --page-nav-toggle-focus-bg-clr: var(--hardlight-clr); diff --git a/front/src/lib/styles/components/Code/Code.css b/front/src/lib/styles/components/Code/Code.css index e60b4bb57..0cd03589f 100644 --- a/front/src/lib/styles/components/Code/Code.css +++ b/front/src/lib/styles/components/Code/Code.css @@ -18,7 +18,7 @@ margin-bottom: 2rem; box-shadow: var(--shadow-elevation-medium); border-radius: 0.5rem; - background-color: var(--bg-light-clr); + background-color: var(--blocked-content-bg); padding: 0 1.5rem 0 1rem; width: 100%; font-size: 1rem; @@ -208,11 +208,11 @@ td:first-child { display: none; transition-property: color var(--transition-duration); - background: var(--bg-light-clr); + background: var(--blocked-content-bg); background: linear-gradient( 90deg, - var(--bg-light-clr) 65%, - var(--bg-light-clr) 81%, + var(--blocked-content-bg) 65%, + var(--blocked-content-bg) 81%, transparent 100% ); color: var(--fg-clr-oooo); diff --git a/front/src/lib/styles/global.css b/front/src/lib/styles/global.css index 94f2fca9e..08f2fdbca 100644 --- a/front/src/lib/styles/global.css +++ b/front/src/lib/styles/global.css @@ -119,6 +119,7 @@ body { .bio a, .footer a, .privacy a, +.category-posts-list .post-item-summary a, .cv a, .not-found a { transition-duration: var(--transition-duration); diff --git a/front/src/lib/styles/pages/category.css b/front/src/lib/styles/pages/category.css index ef40ff1bd..bb0b0973d 100644 --- a/front/src/lib/styles/pages/category.css +++ b/front/src/lib/styles/pages/category.css @@ -60,9 +60,11 @@ color: var(--fg-clr); } .post-item-summary, - a { + .post-item > a { display: flex; + position: relative; flex-direction: row; + z-index: 1; transition: color 0.5s; &:hover, &:focus, diff --git a/front/src/lib/styles/pages/home.css b/front/src/lib/styles/pages/home.css index 65c6ed792..a21417229 100644 --- a/front/src/lib/styles/pages/home.css +++ b/front/src/lib/styles/pages/home.css @@ -20,7 +20,7 @@ .image-loader { margin: 0.5rem 0; } - h1.headline { + h2.headline { filter: brightness(1.25); transition-duration: var(--transition-duration); transition-property: color, font-size; @@ -69,7 +69,7 @@ } @media screen and (min-width: 640px) { - .bio h1.headline { + .bio h2.headline { font-size: 2.25rem; line-height: 2.5rem; } diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css index 4b88235c4..a5e932a9a 100644 --- a/front/src/lib/styles/pages/post.css +++ b/front/src/lib/styles/pages/post.css @@ -280,7 +280,7 @@ box-shadow: var(--shadow-elevation-medium); border-left: 0.5rem solid var(--hardlight-clr); border-radius: 0.5rem; - background: var(--bg-light-clr); + background-color: var(--blocked-content-bg); padding: 0.5rem 1.5rem; color: var(--fg-clr-oo); &::before {