Skip to content

Commit

Permalink
bugfix: several dark mode improvements
Browse files Browse the repository at this point in the history 
feat: enabled dark mode and search on mobile
  • Loading branch information
@AliceOrunitia
AliceOrunitia committed Sep 26, 2024
1 parent 23f257c commit b214ca2
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 46 deletions.
14 changes: 14 additions & 0 deletions assets/scss/_boxes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,5 +133,19 @@
border-color: var(--bs-body-bg) transparent transparent transparent;
}
}
.td-box--light:not(.lead-block) {
color: var(--bs-body-color);
background-color: var(--bs-secondary-bg);
p > a, span > a {
color: var(--bs-link-color);
&:focus,
&:hover {
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}
}
.td-arrow-down::before {
border-color: var(--bs-secondary-bg) transparent transparent transparent;
}
}
}

56 changes: 30 additions & 26 deletions assets/scss/_variables_project.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,43 +37,42 @@ $black: #000 !default;
$code-color: darken($primary, 20%) !default;

// Dark Mode

$primary-dark: shade-color($primary, 80%) !default;
$secondary-dark: shade-color($secondary, 80%) !default;
$success-dark: shade-color($success, 80%) !default;
$info-dark: shade-color($info, 80%) !default;
$warning-dark: shade-color($warning, 80%) !default;
$danger-dark: shade-color($danger, 80%) !default;
$light-dark: $gray-800 !default;
$dark-dark: mix($gray-800, $black) !default;

// Theme colours
$primary-dark: #ff95b8;
$secondary-dark: #ffcd90;
$success-dark: #a4aeff;
$info-dark: #dceeed;
$warning-dark: #fcaea0;
$danger-dark: #fcaea0;
$light-dark: #e7f8f6;
$dark-dark: #8f8f97;
// Text Emphasis
$primary-text-emphasis-dark: tint-color($primary-dark, 40%) !default;
$secondary-text-emphasis-dark: tint-color($secondary-dark, 40%) !default;
$success-text-emphasis-dark: tint-color($success, 40%) !default;
$info-text-emphasis-dark: tint-color($info, 40%) !default;
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
$success-text-emphasis-dark: tint-color($success-dark, 40%) !default;
$info-text-emphasis-dark: tint-color($info-dark, 40%) !default;
$warning-text-emphasis-dark: tint-color($warning-dark, 40%) !default;
$danger-text-emphasis-dark: tint-color($danger-dark, 40%) !default;
$light-text-emphasis-dark: $gray-100 !default;
$dark-text-emphasis-dark: $gray-300 !default;

// scss-docs-start theme-bg-subtle-dark-variables
// Background subtle
$primary-bg-subtle-dark: shade-color($primary-dark, 80%) !default;
$secondary-bg-subtle-dark: shade-color($secondary-dark, 80%) !default;
$success-bg-subtle-dark: shade-color($success, 80%) !default;
$info-bg-subtle-dark: shade-color($info, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
$success-bg-subtle-dark: shade-color($success-dark, 80%) !default;
$info-bg-subtle-dark: shade-color($info-dark, 80%) !default;
$warning-bg-subtle-dark: shade-color($warning-dark, 80%) !default;
$danger-bg-subtle-dark: shade-color($danger-dark, 80%) !default;
$light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
// scss-docs-end theme-bg-subtle-dark-variables

// scss-docs-start theme-border-subtle-dark-variables
// Border subtle
$primary-border-subtle-dark: shade-color($primary-dark, 40%) !default;
$secondary-border-subtle-dark: shade-color($secondary-dark, 40%) !default;
$success-border-subtle-dark: shade-color($success, 40%) !default;
$info-border-subtle-dark: shade-color($info, 40%) !default;
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
$success-border-subtle-dark: shade-color($success-dark, 40%) !default;
$info-border-subtle-dark: shade-color($info-dark, 40%) !default;
$warning-border-subtle-dark: shade-color($warning-dark, 40%) !default;
$danger-border-subtle-dark: shade-color($danger-dark, 40%) !default;
$light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default;

Expand Down Expand Up @@ -114,13 +113,18 @@ $body-emphasis-color-dark: $white !default;
$border-color-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: inherit !default;
$link-color-dark: tint-color($primary, 40%) !default;
// $link-color-dark: tint-color($primary, 40%) !default;
$link-color-dark: adjust-color($blue, $lightness: -5%) !default;
$link-shade-percentage: 20% !default;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
$primary-highlight: #ff95b8;
$secondary-highlight: #ffcd90;
// $code-color-dark: tint-color($code-color, 40%) !default;
// $mark-color-dark: $body-color-dark !default;
// $mark-bg-dark: $yellow-800 !default;

// End Dark Mode //

// UI element colors

$border-color: $gray-300 !default;
Expand Down
3 changes: 2 additions & 1 deletion assets/scss/_variables_project_after_bs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,8 @@
// scss-docs-end root-body-variables

--#{$prefix}heading-color: #{$headings-color};

--#{$prefix}primary-highlight: #{$primary-highlight};
--#{$prefix}secondary-highlight: #{$secondary-highlight};
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration};
Expand Down
16 changes: 8 additions & 8 deletions layouts/partials/navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,6 @@
</span>
{{- /**/ -}}
</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#main_navbar" aria-controls="main_navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="main_navbar">
<ul class="navbar-nav mt-2 mt-lg-0" id="navbar-custom">
{{ $p := . -}}
Expand Down Expand Up @@ -62,17 +57,22 @@

</ul>
</div>
<div class="d-none d-md-flex options-box">
<div class="d-flex options-box">
{{ if .Site.Params.ui.showLightDarkModeMenu -}}
<ul class="navbar-nav mt-2 mt-lg-0 d-none d-md-block">
<ul class="navbar-nav mt-2 mt-lg-0 d-block">
<li class="td-light-dark-menu nav-item dropdown">
{{ partial "theme-toggler" . }}
</li>
</ul>
{{ end -}}
<div class="navbar-nav d-none d-md-block">
<div class="navbar-nav d-block">
{{ partial "search-input.html" . }}
</div>
</div>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#main_navbar" aria-controls="main_navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</nav>
2 changes: 1 addition & 1 deletion layouts/shortcodes/blocks/lead.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{{ end -}}

<div><a id="td-block-{{ .Ordinal }}" class="td-offset-anchor"></a></div>
<section class="row td-box td-box--{{ $col_id }} position-relative td-box--height-{{ $height }} {{ $class }}">
<section class="row td-box td-box--{{ $col_id }} lead-block position-relative td-box--height-{{ $height }} {{ $class }}">
<div class="col-12">
<div class="container text-center td-arrow-down">
<div class="h4 lead mb-0">
Expand Down
66 changes: 56 additions & 10 deletions static/css/rosenpass.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,16 @@ a.td-rss-button {

.navbar button{ border:none;}

.td-navbar button.navbar-toggler {width:35px; height:35px; padding: 0.2rem; display: block;}
.td-navbar button.navbar-toggler {
width:35px;
height:35px;
padding: 0.2rem;
display: block;
position: absolute;
right: 1rem;
top: 1.1rem;
}

.navbar-toggler:focus { text-decoration: none; box-shadow: none;} /* Button fixes */

.navbar-toggler .icon-bar {
Expand Down Expand Up @@ -749,12 +758,14 @@ aside.td-sidebar {
}

aside#sidebar-blog #td-sidebar-menu{
background-color: var(--bs-primary);
background-color: #514447;
/* background-color: #ffb6cd; */
margin-top: 0;
}

aside#sidebar-docs #td-sidebar-menu{
background-color: var(--bs-secondary);
background-color: #514a43;
/* background-color: #ffdcb1 ; */
margin-top: 0;
}

Expand Down Expand Up @@ -892,6 +903,14 @@ margin-left: 1rem;
position: relative;
}

@media(max-width: 768px){
.options-box {
position: absolute;
right: 4.4rem;
top: 0rem;
}
}

.td-light-dark-menu ul.dropdown-menu {
position: absolute;
top: min(100%, 60px);
Expand Down Expand Up @@ -966,17 +985,17 @@ body:has(.td-offline-search-results) {
}

/* Handles expansion of navbar. Not sure if best end result */
/* .navbar-nav {
.navbar-nav {
@media(min-width:768px){
max-height: 120px !important;
}
@media(min-width:1090px){
max-height: 55px !important;
}
@media(min-width:1170px){
@media(min-width:1060px){
max-height: 50px !important;
}
} */
/* @media(min-width:1170px){
max-height: 50px !important;
} */
}

.search-highlight {
font-size: small;
Expand Down Expand Up @@ -1553,6 +1572,11 @@ background-color: #000000;
background-color: var(--bs-light);
margin: 0.1rem;
}
[data-bs-theme="dark"]{
.contact .col {
background-color: var(--bs-secondary-bg);
}
}


.contact-icon {
Expand Down Expand Up @@ -1611,6 +1635,12 @@ a:has(.github-svg){
#main-contributors .member:nth-child(even) {
background-color: var(--bs-light);
}
[data-bs-theme="dark"]{
#main-contributors .member:nth-child(even) {
background-color: var(--bs-gray-800);
}
}


#main-contributors .contribution {
text-align: center;
Expand Down Expand Up @@ -1667,8 +1697,13 @@ a:has(.github-svg){
#main-contributors .member:nth-child(4n-1){
background-color: var(--bs-light) !important;
}
[data-bs-theme="dark"]{
#main-contributors .member:nth-child(4n-2),
#main-contributors .member:nth-child(4n-1) {
background-color: var(--bs-gray-800) !important;
}
}
}

@media(min-width: 1200px){
#main-contributors .member:last-child:nth-child(odd):not(:nth-child(3n)){
background-color: var(--bs-light) !important;
Expand All @@ -1686,6 +1721,11 @@ a:has(.github-svg){
#main-contributors .infoblock {
width: 100%;
}
[data-bs-theme="dark"]{
#main-contributors .member:last-child:nth-child(odd):not(:nth-child(3n)) {
background-color: var(--bs-gray-800) !important;
}
}
}

.row:has(.codethanks-blerb) {
Expand Down Expand Up @@ -1833,6 +1873,12 @@ align-self: center;
border-radius: 1rem;
padding: 2rem;
}
[data-bs-theme="dark"]{
.post-list .post-list-item {
background-color: var(--bs-gray-800);
}
}


#blog-list .post-list-item { padding-bottom: 4rem; }

Expand Down

0 comments on commit b214ca2

Please sign in to comment.