systemausfall.org/hugo-theme-hilfe
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adapt Layout and colors to our needs

Browse source
This commit is contained in:
phil 2023-04-25 20:47:03 +02:00
parent 6e4e50a01c
commit 7cb422cc43
8 changed files with 72 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
layouts/_default/baseof.html
View file

@ -19,6 +19,9 @@
{{ partial "head/microformats" . }} {{ partial "head/microformats" . }}
{{ partial "head/others" . }} {{ partial "head/others" . }}
{{ partial "head/custom" . }} {{ partial "head/custom" . }}
{{ if .IsHome }}
{{ partial "head/columns" . }}
{{ end }}
</head> </head>
<body itemscope itemtype="https://schema.org/WebPage"> <body itemscope itemtype="https://schema.org/WebPage">
@ -26,7 +29,7 @@
<div <div
class="wrapper {{ if default false .Site.Params.GeekdocDarkModeDim }}dark-mode-dim{{ end }}" class="wrapper {{ if default false .Site.Params.GeekdocDarkModeDim }}dark-mode-dim{{ end }} {{ if .IsHome }}home{{ end }}"
> >
<input type="checkbox" class="hidden" id="menu-control" /> <input type="checkbox" class="hidden" id="menu-control" />
<input type="checkbox" class="hidden" id="menu-header-control" /> <input type="checkbox" class="hidden" id="menu-header-control" />
@ -41,8 +44,7 @@
</aside> </aside>
{{ end }} {{ end }}
<div class="gdoc-page {{ if .IsHome }}home{{ end }}">
<div class="gdoc-page">
{{ template "main" . }} {{ template "main" . }}

11
layouts/partials/head/columns.html Normal file
View file

@ -0,0 +1,11 @@
<!-- You can add custom elements to the page header here. -->
<link
rel="preload"
href="{{ "bootstrap-utilities.min.css" | relURL }}"
as="style"
/>
<link
rel="stylesheet"
href="{{ "bootstrap-utilities.min.css" | relURL }}"
media="all"
/>

2
layouts/shortcodes/columns.html
View file

@ -7,7 +7,7 @@
<div class="gdoc-columns gdoc-columns--{{ $size }} flex flex-gap flex-mobile-column"> <div class="gdoc-columns gdoc-columns--{{ $size }} flex flex-gap flex-mobile-column">
{{- range split .Inner "<--->" }} {{- range split .Inner "<--->" }}
<div class="gdoc-columns__content gdoc-markdown--nested flex-even"> <div class="gdoc-columns__content gdoc-markdown--nested flex-even position-relative">
{{ . | $.Page.RenderString -}} {{ . | $.Page.RenderString -}}
</div> </div>
{{- end }} {{- end }}

36
src/sass/_base.scss
View file

@ -153,11 +153,15 @@ img {
min-height: 100vh; min-height: 100vh;
color: var(--body-font-color); color: var(--body-font-color);
background: var(--body-background); background: var(--accent-color-gray);
font-weight: $body-font-weight; font-weight: $body-font-weight;
} }
.wrapper.home {
background: var(--body-background);
}
.container { .container {
width: 100%; width: 100%;
max-width: $container-max-width; max-width: $container-max-width;
@ -228,6 +232,7 @@ svg.gdoc-icon {
.gdoc-nav { .gdoc-nav {
flex: 0 0 $menu-width; flex: 0 0 $menu-width;
font-size: $font-size-14;
nav { nav {
width: $menu-width; width: $menu-width;
@ -266,6 +271,7 @@ svg.gdoc-icon {
padding: 0; padding: 0;
list-style: none; list-style: none;
user-select: none; user-select: none;
border-bottom: 1px solid $gray-300;
ul { ul {
padding-left: $padding-16; padding-left: $padding-16;
@ -273,6 +279,22 @@ svg.gdoc-icon {
li { li {
margin: $padding-12 0; margin: $padding-12 0;
border-top: 1px solid $gray-300;
padding-top: 10px;
padding-bottom: 10px;
}
> li > ul,
> li > ul > li {
border: none;
}
> li > ul > li > ul > li {
padding-bottom: 0;
}
a {
font-weight: normal;
} }
svg.gdoc-icon { svg.gdoc-icon {
@ -329,8 +351,9 @@ svg.gdoc-icon {
&:hover, &:hover,
&.is-active { &.is-active {
text-decoration: underline; text-decoration: none;
text-decoration-style: dashed !important; text-decoration-style: dashed !important;
font-weight: bold;
} }
&:visited { &:visited {
@ -354,7 +377,10 @@ svg.gdoc-icon {
.gdoc-page { .gdoc-page {
min-width: calc($body-min-width - $padding-32); min-width: calc($body-min-width - $padding-32);
flex-grow: 1; flex-grow: 1;
padding: $padding-16 0; padding: $padding-16 $padding-32;
box-shadow: 1px 1px 4px $shadow-1;
background: var(--body-background);
h1, h1,
h2, h2,
@ -416,6 +442,10 @@ svg.gdoc-icon {
} }
} }
&.home {
box-shadow: none;
}
&__footer { &__footer {
margin-top: $padding-32; margin-top: $padding-32;

2
src/sass/_color_mode.scss
View file

@ -17,6 +17,7 @@
--hint-link-color-visited: #{$link-color-visited}; --hint-link-color-visited: #{$link-color-visited};
--accent-color-dark: #{$gray-400}; --accent-color-dark: #{$gray-400};
--accent-color-gray: #{$gray-450};
--accent-color: #{$gray-200}; --accent-color: #{$gray-200};
--accent-color-lite: #{$gray-100}; --accent-color-lite: #{$gray-100};
@ -77,6 +78,7 @@
--hint-link-color-visited: #{$link-color-visited}; --hint-link-color-visited: #{$link-color-visited};
--accent-color-dark: #{darken($body-background-dark, 8)}; --accent-color-dark: #{darken($body-background-dark, 8)};
--accent-color-gray: #{darken($body-background-dark, 8)};
--accent-color: #{darken($body-background-dark, 4)}; --accent-color: #{darken($body-background-dark, 4)};
--accent-color-lite: #{darken($body-background-dark, 2)}; --accent-color-lite: #{darken($body-background-dark, 2)};

5
src/sass/_defaults.scss
View file

@ -34,6 +34,7 @@ $gray-100: rgba(248, 249, 250, 1) !default;
$gray-200: rgba(233, 236, 239, 1) !default; $gray-200: rgba(233, 236, 239, 1) !default;
$gray-300: rgba(222, 226, 230, 1) !default; $gray-300: rgba(222, 226, 230, 1) !default;
$gray-400: rgba(206, 212, 218, 1) !default; $gray-400: rgba(206, 212, 218, 1) !default;
$gray-450: rgba(239, 239, 239, 1) !default;
$gray-500: rgba(173, 181, 189, 1) !default; $gray-500: rgba(173, 181, 189, 1) !default;
$gray-600: rgba(134, 142, 150, 1) !default; $gray-600: rgba(134, 142, 150, 1) !default;
$gray-700: rgba(73, 80, 87, 1) !default; $gray-700: rgba(73, 80, 87, 1) !default;
@ -73,6 +74,10 @@ $menu-width: 18rem !default;
$sm-breakpoint: $menu-width + $body-min-width + 3rem !default; $sm-breakpoint: $menu-width + $body-min-width + 3rem !default;
$shadow-1: rgba(137, 137, 137, 0.5);
$shadow-2: rgba(62, 62, 62, 0.102);
$shadow-3: rgba(62, 62, 62, 0.2);
// Panel colors // Panel colors
$hint-colors: ( $hint-colors: (
info: rgba(0, 145, 234, 1), info: rgba(0, 145, 234, 1),

8
src/sass/_shortcodes.scss
View file

@ -87,7 +87,13 @@
&__content { &__content {
flex: 1 1; flex: 1 1;
min-width: $body-min-width * 0.66; min-width: $body-min-width * 0.66;
padding: 0; box-shadow: 0 15px 60px $shadow-2;
padding: $padding-32;
border-radius: 12px;
}
&__content:hover {
box-shadow: 0 15px 60px $shadow-3;
} }
.gdoc-post__anchor { .gdoc-post__anchor {

7
src/static/bootstrap-utilities.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long