diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 2a2bc68..1573306 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -423,7 +423,7 @@ i { .post { h1 { - margin-top: 3rem; + margin-top: 2rem; margin-bottom: 1.5rem; } @@ -966,12 +966,23 @@ $btn-mb: 0.5rem; right: 0; transition: top 0.2s ease-in-out; z-index: 50; - border-bottom: 1px solid rgba(0, 0, 0, 0.07); - background-color: var(--topbar-wrapper-bg); + background-color: var(--topbar-bg); [data-topbar-visible='false'] & { top: -$topbar-height; /* same as topbar height. */ } + + &::before { + $blur: 12px; + + content: ''; + position: absolute; + width: 100%; + height: $topbar-height; + z-index: -1; + -webkit-backdrop-filter: blur($blur); + backdrop-filter: blur($blur); + } } #topbar { @@ -1010,7 +1021,7 @@ $btn-mb: 0.5rem; width: 100%; border-radius: 1rem; border: 1px solid var(--search-wrapper-border-color); - background: var(--search-wrapper-bg); + background: var(--main-bg); padding: 0 0.5rem; i { @@ -1039,7 +1050,6 @@ $btn-mb: 0.5rem; &:focus { box-shadow: none; - background: center; &.form-control { &::-moz-placeholder { @@ -1430,7 +1440,7 @@ $btn-mb: 0.5rem; display: none; ~ .post-content { - margin-top: 3rem; + margin-top: 2.5rem; } } } /* max-width: 849px */ @@ -1479,6 +1489,12 @@ $btn-mb: 0.5rem; max-width: $main-content-max-width; } + .post { + h1 { + margin-top: 3rem; + } + } + div.post-content .table-wrapper > table { min-width: 70%; } diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index be7cf16..c8ea35b 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -43,10 +43,9 @@ --avatar-border-color: rgb(206, 206, 206, 0.9); /* Topbar */ + --topbar-bg: rgb(27, 27, 30, 0.64); --topbar-text-color: var(--text-color); - --topbar-wrapper-bg: rgb(39, 40, 43); - --search-wrapper-bg: rgb(34, 34, 39); - --search-wrapper-border-color: rgb(34, 34, 39); + --search-wrapper-border-color: rgb(55, 55, 55); --search-icon-color: rgb(100, 102, 105); --input-focus-border-color: rgb(112, 114, 115); diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index f5c1c2c..190600b 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -45,13 +45,12 @@ --avatar-border-color: white; /* Topbar */ + --topbar-bg: rgb(255, 255, 255, 0.7); --topbar-text-color: rgb(78, 78, 78); - --topbar-wrapper-bg: white; - --search-wrapper-bg: rgb(245, 245, 245, 0.5); - --search-wrapper-border-color: rgb(245, 245, 245); + --search-wrapper-border-color: rgb(240, 240, 240); --search-tag-bg: #f8f9fa; --search-icon-color: #c2c6cc; - --input-focus-border-color: var(--btn-border-color); + --input-focus-border-color: #b8b8b8; /* Home page */ --post-list-text-color: dimgray; diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index 801ec55..81f444b 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -3,7 +3,7 @@ */ #post-list { - margin-top: 1.75rem; + margin-top: 2rem; a.card-wrapper { display: block;