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

move func to _variables, link styling (TOC, sidebar) + wider TOC

Browse Source
This commit is contained in:
Martin Allien
2021-06-18 14:39:24 +02:00
parent 04b4246ea0
commit d161d49d8d
8 changed files with 176 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,3 @@
/*
Override SASS' handling of HSL(a) color functions, don't touch it and let CSS handle it itself.
This will enable the trick with variable alpha channels for CSS color variables (see below).
*/
@function hsla($args...) { @return #{'hsla(#{$args})'}; }
// ----- Mixins ----- //
@@ -14,15 +8,6 @@ $desktop: 992px;
$widescreen: 1200px;
$fullhd: 1400px;
/*
Function for defining (not only) vertical rhythm by multiplies of 12px
Examples:
width: size(2); (equals to "width: 24px;")
line-height: size(3); (equals to "line-height: 36px;")
*/
@function size($multiplier) {
@return $multiplier * 12px;
}
// Responsive mixin (Bulma's)
@mixin break($media) {

3
assets/scss/_kerberos.scss
View File

@@ -57,7 +57,7 @@ p, li:not(.nav-item) {
line-height: size(2);
margin: 0 0 size(1);
@include break(w) {
font-size: 18px;
font-size: 16px;
line-height: size(2.5);
}
&.lead {
@@ -102,4 +102,5 @@ img {
margin-right: 1rem;
}
}
li { margin-bottom: 0; }
}

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

@@ -97,7 +97,7 @@ body {
@include media-breakpoint-up(lg) {
.docs-sidebar {
order: 0;
border-right: 2px solid var(--bg-muted);
//border-right: 2px solid var(--bg-muted);
}
@supports ((position:-webkit-sticky) or (position:sticky)) {
@@ -156,6 +156,9 @@ body {
.docs-content {
padding-bottom: 3rem;
order: 1;
a {
font-weight: 500;
}
}
.docs-navigation {

16
assets/scss/common/_variables.scss
View File

@@ -1,3 +1,19 @@
/*
Override SASS' handling of HSL(a) color functions, don't touch it and let CSS handle it itself.
This will enable the trick with variable alpha channels for CSS color variables (see below).
*/
@function hsla($args...) { @return #{'hsla(#{$args})'}; }
/*
Function for defining (not only) vertical rhythm by multiplies of 12px
Examples:
width: size(2); (equals to "width: 24px;")
line-height: size(3); (equals to "line-height: 36px;")
*/
@function size($multiplier) {
@return $multiplier * 12px;
}
// Color system
$white: #fff;

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

@@ -3,6 +3,12 @@
@extend %tfx;
scrollbar-width: thin;
scrollbar-color: var(--bg) var(--bg);
ul {
li { // sidebar & TOC links
margin: 0;
line-height: 24px;
}
}
}
.docs-links::-webkit-scrollbar,
@@ -56,25 +62,55 @@
border-top: 2px solid var(--bg-muted);
}
a.docs-link {
color: $body-color;
a.docs-link,
.page-links a {
@extend %tfx;
color: var(--text-muted);
display: block;
padding: 0.125rem 0;
padding: size(0.5) size(1); //0.125rem 0;
margin: 0 size(2) 0 0;
font-size: $font-size-base;
line-height: size(2);
border-radius: var(--radius);
&:hover {
color: var(--text);
background: var(--bg-muted);
text-decoration: none;
}
&.active {
text-decoration: none;
color: var(--hub);
font-weight: 500;
background: hsla(var(--hub-hsl), 0.1);
}
}
.page-links li {
margin-top: 0.375rem;
padding-top: 0.375rem;
.page-links { // TOC
a {
margin: 0;
font-size: 0.9em;
font-weight: 500;
color: var(--text);
}
li {
margin-top: 0.375rem;
padding-top: 0.375rem;
ul {
li {
padding-left: 1rem;
margin-top: 0.125rem;
padding-top: 0.125rem;
a {
font-weight: 400;
color: var(--text-muted);
}
}
}
}
}
.page-links li ul li {
border-top: none;
padding-left: 1rem;
margin-top: 0.125rem;
padding-top: 0.125rem;
}
/*
.page-links li:not(:first-child) {
border-top: 1px dashed $gray-200;
}
@@ -92,6 +128,7 @@ a.docs-link {
text-decoration: none;
color: $link-color;
}
*/
.docs-links h3.sidebar-link,
.page-links h3.sidebar-link {

12
layouts/_default/single.html
View File

@@ -1,20 +1,25 @@
{{ define "main" }}
<div class="row flex-xl-nowrap">
<div class="col-lg-5 col-xl-4 docs-sidebar">
<nav class="docs-links" aria-label="Main navigation">
{{ partial "sidebar/docs-menu.html" . }}
</nav>
</div>
{{ if ne .Params.toc false -}}
<nav class="docs-toc d-none d-xl-block col-xl-3" aria-label="Secondary navigation">
<nav class="docs-toc d-none d-xl-block col-xl-4" aria-label="Secondary navigation"><!-- col-xl-3 -->
{{ partial "sidebar/docs-toc.html" . }}
</nav>
{{ end -}}
{{ if .Params.toc -}}
<main class="docs-content col-lg-11 col-xl-9">
<main class="docs-content col-lg-11 col-xl-8"><!-- col-xl-9 -->
{{ else -}}
<main class="docs-content col-lg-11 col-xl-9 mx-xl-auto">
{{ end -}}
{{ if .Site.Params.options.breadCrumb -}}
<!-- https://discourse.gohugo.io/t/breadcrumb-navigation-for-highly-nested-content/27359/6 -->
<nav aria-label="breadcrumb">
@@ -24,6 +29,7 @@
</ol>
</nav>
{{ end }}
<h1>{{ .Title }}</h1>
<p class="lead">{{ .Params.lead | safeHTML }}</p>
{{ partial "main/headline-hash.html" .Content }}
@@ -31,6 +37,8 @@
{{ partial "main/edit-page.html" . }}
{{ end -}}
{{ partial "main/docs-navigation.html" . }}
</main>
</div>
{{ end }}

52
layouts/index.html
View File

@@ -1,36 +1,44 @@
{{ define "main" }}
<div class="row flex-xl-nowrap">
<div class="col-lg-5 col-xl-4 docs-sidebar">
<nav class="docs-links" aria-label="Main navigation">
{{ partial "sidebar/docs-menu.html" . }}
</nav>
</div>
{{ if ne .Params.toc false -}}
<nav class="docs-toc d-none d-xl-block col-xl-3" aria-label="Secondary navigation">
<nav class="docs-toc d-none d-xl-block col-xl-4" aria-label="Secondary navigation"><!-- col-xl-3 -->
{{ partial "sidebar/docs-toc.html" . }}
</nav>
{{ end -}}
{{ if .Params.toc -}}
<main class="docs-content col-lg-11 col-xl-9">
{{ else -}}
<main class="docs-content col-lg-11 col-xl-9 mx-xl-auto">
{{ end -}}
{{ if .Site.Params.options.breadCrumb -}}
<!-- https://discourse.gohugo.io/t/breadcrumb-navigation-for-highly-nested-content/27359/6 -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
{{ partial "main/breadcrumb" . -}}
<li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
</ol>
</nav>
{{ end }}
<h1>{{ .Title }}</h1>
<p class="lead">{{ .Params.lead | safeHTML }}</p>
{{ partial "main/headline-hash.html" .Content }}
{{ if .Site.Params.editPage -}}
{{ partial "main/edit-page.html" . }}
{{ end -}}
{{ partial "main/docs-navigation.html" . }}
</main>
<main class="docs-content col-lg-11 col-xl-8"><!-- col-xl-9 -->
{{ else -}}
<main class="docs-content col-lg-11 col-xl-9 mx-xl-auto">
{{ end -}}
{{ if .Site.Params.options.breadCrumb -}}
<!-- https://discourse.gohugo.io/t/breadcrumb-navigation-for-highly-nested-content/27359/6 -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
{{ partial "main/breadcrumb" . -}}
<li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
</ol>
</nav>
{{ end }}
<h1>{{ .Title }}</h1>
<p class="lead">{{ .Params.lead | safeHTML }}</p>
{{ partial "main/headline-hash.html" .Content }}
{{ if .Site.Params.editPage -}}
{{ partial "main/edit-page.html" . }}
{{ end -}}
{{ partial "main/docs-navigation.html" . }}
</main>
</div>
{{ end }}

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

@@ -1,6 +1,16 @@
@charset "UTF-8";
/** Import Bootstrap functions */
/** Import theme variables */
/*
Override SASS' handling of HSL(a) color functions, don't touch it and let CSS handle it itself.
This will enable the trick with variable alpha channels for CSS color variables (see below).
*/
/*
Function for defining (not only) vertical rhythm by multiplies of 12px
Examples:
width: size(2); (equals to "width: 24px;")
line-height: size(3); (equals to "line-height: 36px;")
*/
/** Bootstrap navbar fix (https://git.io/fADqW) */
/** Import Bootstrap */
/*!
@@ -8414,8 +8424,7 @@ body {
@media (min-width: 992px) {
.docs-sidebar {
order: 0;
border-right: 2px solid var(--bg-muted); }
order: 0; }
@supports (position: -webkit-sticky) or (position: sticky) {
.docs-sidebar {
position: -webkit-sticky;
@@ -8458,6 +8467,8 @@ body {
.docs-content {
padding-bottom: 3rem;
order: 1; }
.docs-content a {
font-weight: 500; }
.docs-navigation {
border-top: 1px solid #e9ecef;
@@ -9461,6 +9472,10 @@ p.meta {
.docs-toc {
scrollbar-width: thin;
scrollbar-color: var(--bg) var(--bg); }
.docs-links ul li,
.docs-toc ul li {
margin: 0;
line-height: 24px; }
.docs-links::-webkit-scrollbar,
.docs-toc::-webkit-scrollbar {
@@ -9505,37 +9520,63 @@ p.meta {
.docs-links h3:not(:first-child), .docs-links .h3:not(:first-child) {
border-top: 2px solid var(--bg-muted); }
a.docs-link {
color: #1d2d35;
a.docs-link,
.page-links a {
color: var(--text-muted);
display: block;
padding: 0.125rem 0;
font-size: 1rem; }
padding: 6px 12px;
margin: 0 24px 0 0;
font-size: 1rem;
line-height: 24px;
border-radius: var(--radius); }
a.docs-link:hover,
.page-links a:hover {
color: var(--text);
background: var(--bg-muted);
text-decoration: none; }
a.docs-link.active,
.page-links a.active {
text-decoration: none;
color: var(--hub);
font-weight: 500;
background: hsla(var(--hub-hsl), 0.1); }
.page-links a {
margin: 0;
font-size: 0.9em;
font-weight: 500;
color: var(--text); }
.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;
color: var(--text-muted); }
.page-links li ul li {
border-top: none;
padding-left: 1rem;
margin-top: 0.125rem;
padding-top: 0.125rem; }
/*
.page-links li:not(:first-child) {
border-top: 1px dashed #e9ecef; }
border-top: 1px dashed $gray-200;
}
.page-links a {
color: #1d2d35;
color: $body-color;
display: block;
padding: 0.125rem 0;
font-size: 0.9375rem; }
font-size: $font-size-base * 0.9375;
}
.docs-link:hover,
.docs-link.active,
.page-links a:hover {
text-decoration: none;
color: #5d2f86; }
color: $link-color;
}
*/
.docs-links h3.sidebar-link, .docs-links .sidebar-link.h3,
.page-links h3.sidebar-link,
.page-links .sidebar-link.h3 {
@@ -9554,16 +9595,6 @@ a.docs-link {
text-decoration: underline; }
/* Kerberos tweaks & branding */
/*
Override SASS' handling of HSL(a) color functions, don't touch it and let CSS handle it itself.
This will enable the trick with variable alpha channels for CSS color variables (see below).
*/
/*
Function for defining (not only) vertical rhythm by multiplies of 12px
Examples:
width: size(2); (equals to "width: 24px;")
line-height: size(3); (equals to "line-height: 36px;")
*/
:root {
/*
Usage:
@@ -9634,11 +9665,13 @@ a.docs-link {
border-radius: var(--radius); }
.docs-links,
.docs-toc {
.docs-toc, a.docs-link,
.page-links a {
transition: all 0.15s; }
@media (prefers-reduced-motion) {
.docs-links,
.docs-toc {
.docs-toc, a.docs-link,
.page-links a {
transition: none; } }
/*! doc.kerberos.io v2.0.0 | MIT License */
body {
@@ -9692,7 +9725,7 @@ p, li:not(.nav-item) {
margin: 0 0 12px; }
@media only screen and (min-width: 1200px) {
p, li:not(.nav-item) {
font-size: 18px;
font-size: 16px;
line-height: 30px; } }
p.lead, li.lead:not(.nav-item) {
color: var(--text-light);
@@ -9723,5 +9756,7 @@ img {
margin: 0; } }
.footer .navbar-nav .copyright {
margin-right: 1rem; }
.footer li {
margin-bottom: 0; }
/*# sourceMappingURL=main.css.map */