kerberos-io/documentation
1
0
Fork 0
mirror of https://github.com/kerberos-io/documentation.git synced 2026-08-23 15:18:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark mode fix, general styling

Browse Source
This commit is contained in:
Martin Allien
2021-06-18 16:19:17 +02:00
parent 34b5c92ad9
commit 542adc9675
9 changed files with 90 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -22,3 +22,6 @@ Run Hugo dev server with autocompile of assets
- before launch
- [ ] change baseURL in config/production/config.toml
- nice to haves:
- [ ] transform colors to CSS vars (and use for easier dark mode)

11
assets/scss/_kerberos-config.scss
View File

@@ -111,6 +111,17 @@ $fullhd: 1400px;
--bg-white: hsl(0, 0%, 100%);
--bg-white-hsl: 0, 0%, 100%;
body.dark {
--hub: hsl(200, 93%, 77%);
--hub-hsl: 200, 93%, 77%;
--text-muted: hsl(210, 14%, 89%);
--text-muted-hsl: 210, 14%, 89%;
--bg: hsl(210, 11%, 15%);
--bg-hsl: 210, 11%, 15%;
}
// ---------- UI ---------- //
--radius: 4px;

5
assets/scss/_kerberos.scss
View File

@@ -89,6 +89,11 @@ img {
.navbar {
@extend %box-shadow-bigger;
margin-top: 6px; // make the whole gradient visible
.navbar-nav {
.nav-link {
color: var(--text-muted);
}
}
}
.footer {

5
assets/scss/common/_dark.scss
View File

@@ -18,11 +18,6 @@ $navbar-dark-active-color: $link-color-dark;
/** Theme styles */
body.dark {
background: $body-bg-dark;
color: $body-color-dark;
}
body.dark a {
color: $link-color-dark;
}

13
assets/scss/layouts/_footer.scss
View File

@@ -2,6 +2,19 @@
border-top: 1px solid $gray-200;
padding-top: 1.125rem;
padding-bottom: 1.125rem;
body.dark & {
background: #212529;
}
a {
color: var(--text);
&:hover, &:focus {
color: var(--hub);
text-decoration: none;
body.dark & {
text-decoration: underline;
}
}
}
}
.footer ul {

4
assets/scss/layouts/_header.scss
View File

@@ -11,7 +11,7 @@
}
.navbar-brand {
font-weight: $headings-font-weight;
font-weight: 600;
}
.navbar-light .navbar-brand,
@@ -25,9 +25,11 @@
}
@include media-breakpoint-up(md) {
/*
.navbar-brand {
font-size: $font-size-xl;
}
*/
.navbar-text {
margin-left: 1.25rem;

7
assets/scss/layouts/_pages.scss
View File

@@ -14,8 +14,13 @@
figcaption {
text-align: center;
font-weight: 400;
font-size: 13px;
padding: 10px 0 0 0;
p {
font-size: 14px;
opacity: 0.7;
padding: 0 size(2);
line-height: size(2);
}
}
}

13
assets/scss/layouts/_sidebar.scss
View File

@@ -76,21 +76,31 @@ a.docs-link,
color: var(--text);
background: var(--bg-muted);
text-decoration: none;
body.dark & {
color: var(--bg-white);
background: hsla(var(--bg-muted-hsl), 0.05);
}
}
&.active {
text-decoration: none;
color: var(--hub);
font-weight: 500;
background: hsla(var(--hub-hsl), 0.1);
body.dark & {
color: hsl(200.4, 93.2%, 77.1%);
background: hsla(200.4, 93.2%, 77.1%, 0.1);
}
}
}
.page-links { // TOC
a {
margin: 0;
font-size: 0.9em;
font-size: 13px;
line-height: size(1.5);
font-weight: 500;
color: var(--text);
padding: size(0.5) size(1);
}
li {
margin-top: 0.375rem;
@@ -98,7 +108,6 @@ a.docs-link,
ul {
li {
padding-left: 1rem;
margin-top: 0.125rem;
padding-top: 0.125rem;
a {
font-weight: 400;

48
resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content
View File

@@ -8525,10 +8525,6 @@ body {
/** Theme variables */
/** Theme styles */
body.dark {
background: #212529;
color: #dee2e6; }
body.dark a {
color: #8ed6fb; }
@@ -9167,6 +9163,15 @@ table {
border-top: 1px solid #e9ecef;
padding-top: 1.125rem;
padding-bottom: 1.125rem; }
body.dark .footer {
background: #212529; }
.footer a {
color: var(--text); }
.footer a:hover, .footer a:focus {
color: var(--hub);
text-decoration: none; }
body.dark .footer a:hover, body.dark .footer a:focus {
text-decoration: underline; }
.footer ul {
margin-bottom: 0; }
@@ -9183,7 +9188,7 @@ table {
margin-left: 1rem; }
.navbar-brand {
font-weight: 700; }
font-weight: 600; }
.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
@@ -9194,8 +9199,11 @@ table {
color: #5d2f86; }
@media (min-width: 768px) {
/*
.navbar-brand {
font-size: 1.375rem; }
font-size: $font-size-xl;
}
*/
.navbar-text {
margin-left: 1.25rem; } }
@@ -9408,8 +9416,12 @@ table {
.docs-content figure figcaption {
text-align: center;
font-weight: 400;
font-size: 13px;
padding: 10px 0 0 0; }
.docs-content figure figcaption p {
font-size: 14px;
opacity: 0.7;
padding: 0 24px;
line-height: 24px; }
.anchor {
visibility: hidden;
@@ -9534,25 +9546,32 @@ a.docs-link,
color: var(--text);
background: var(--bg-muted);
text-decoration: none; }
body.dark a.docs-link:hover, body.dark .page-links a:hover {
color: var(--bg-white);
background: hsla(var(--bg-muted-hsl), 0.05); }
a.docs-link.active,
.page-links a.active {
text-decoration: none;
color: var(--hub);
font-weight: 500;
background: hsla(var(--hub-hsl), 0.1); }
body.dark a.docs-link.active, body.dark .page-links a.active {
color: #8ed6fb;
background: hsla(200.4, 93.2%, 77.1%, 0.1); }
.page-links a {
margin: 0;
font-size: 0.9em;
font-size: 13px;
line-height: 18px;
font-weight: 500;
color: var(--text); }
color: var(--text);
padding: 6px 12px; }
.page-links li {
margin-top: 0.375rem;
padding-top: 0.375rem; }
.page-links li ul li {
padding-left: 1rem;
margin-top: 0.125rem;
padding-top: 0.125rem; }
.page-links li ul li a {
font-weight: 400;
@@ -9648,6 +9667,13 @@ a.docs-link,
--radius: 4px;
--card-paddingV: 24px;
--card-paddingH: 12px; }
:root body.dark {
--hub: hsl(200, 93%, 77%);
--hub-hsl: 200, 93%, 77%;
--text-muted: hsl(210, 14%, 89%);
--text-muted-hsl: 210, 14%, 89%;
--bg: hsl(210, 11%, 15%);
--bg-hsl: 210, 11%, 15%; }
@media only screen and (min-width: 768px) {
:root {
--card-paddingV: 24px;
@@ -9745,6 +9771,8 @@ img {
.navbar {
margin-top: 6px; }
.navbar .navbar-nav .nav-link, .navbar .navbar-nav .banner .nav a, .banner .nav .navbar .navbar-nav a {
color: var(--text-muted); }
.footer {
box-shadow: 0 -4px 34px rgba(0, 0, 0, 0.04), 0 -3px 4px rgba(0, 0, 0, 0.1);