Adapt Layout and colors to our needs
This commit is contained in:
parent
6e4e50a01c
commit
7cb422cc43
8 changed files with 72 additions and 9 deletions
|
|
@ -19,6 +19,9 @@
|
|||
{{ partial "head/microformats" . }}
|
||||
{{ partial "head/others" . }}
|
||||
{{ partial "head/custom" . }}
|
||||
{{ if .IsHome }}
|
||||
{{ partial "head/columns" . }}
|
||||
{{ end }}
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="https://schema.org/WebPage">
|
||||
|
|
@ -26,7 +29,7 @@
|
|||
|
||||
|
||||
<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-header-control" />
|
||||
|
|
@ -41,8 +44,7 @@
|
|||
</aside>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div class="gdoc-page">
|
||||
<div class="gdoc-page {{ if .IsHome }}home{{ end }}">
|
||||
{{ template "main" . }}
|
||||
|
||||
|
||||
|
|
|
|||
11
layouts/partials/head/columns.html
Normal file
11
layouts/partials/head/columns.html
Normal 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"
|
||||
/>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<div class="gdoc-columns gdoc-columns--{{ $size }} flex flex-gap flex-mobile-column">
|
||||
{{- 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 -}}
|
||||
</div>
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -153,11 +153,15 @@ img {
|
|||
min-height: 100vh;
|
||||
|
||||
color: var(--body-font-color);
|
||||
background: var(--body-background);
|
||||
|
||||
background: var(--accent-color-gray);
|
||||
|
||||
font-weight: $body-font-weight;
|
||||
}
|
||||
|
||||
.wrapper.home {
|
||||
background: var(--body-background);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: $container-max-width;
|
||||
|
|
@ -228,6 +232,7 @@ svg.gdoc-icon {
|
|||
|
||||
.gdoc-nav {
|
||||
flex: 0 0 $menu-width;
|
||||
font-size: $font-size-14;
|
||||
|
||||
nav {
|
||||
width: $menu-width;
|
||||
|
|
@ -266,6 +271,7 @@ svg.gdoc-icon {
|
|||
padding: 0;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
border-bottom: 1px solid $gray-300;
|
||||
|
||||
ul {
|
||||
padding-left: $padding-16;
|
||||
|
|
@ -273,6 +279,22 @@ svg.gdoc-icon {
|
|||
|
||||
li {
|
||||
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 {
|
||||
|
|
@ -329,8 +351,9 @@ svg.gdoc-icon {
|
|||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
text-decoration-style: dashed !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
|
|
@ -354,7 +377,10 @@ svg.gdoc-icon {
|
|||
.gdoc-page {
|
||||
min-width: calc($body-min-width - $padding-32);
|
||||
flex-grow: 1;
|
||||
padding: $padding-16 0;
|
||||
padding: $padding-16 $padding-32;
|
||||
box-shadow: 1px 1px 4px $shadow-1;
|
||||
background: var(--body-background);
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -416,6 +442,10 @@ svg.gdoc-icon {
|
|||
}
|
||||
}
|
||||
|
||||
&.home {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-top: $padding-32;
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
--hint-link-color-visited: #{$link-color-visited};
|
||||
|
||||
--accent-color-dark: #{$gray-400};
|
||||
--accent-color-gray: #{$gray-450};
|
||||
--accent-color: #{$gray-200};
|
||||
--accent-color-lite: #{$gray-100};
|
||||
|
||||
|
|
@ -77,6 +78,7 @@
|
|||
--hint-link-color-visited: #{$link-color-visited};
|
||||
|
||||
--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-lite: #{darken($body-background-dark, 2)};
|
||||
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ $gray-100: rgba(248, 249, 250, 1) !default;
|
|||
$gray-200: rgba(233, 236, 239, 1) !default;
|
||||
$gray-300: rgba(222, 226, 230, 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-600: rgba(134, 142, 150, 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;
|
||||
|
||||
$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
|
||||
$hint-colors: (
|
||||
info: rgba(0, 145, 234, 1),
|
||||
|
|
|
|||
|
|
@ -87,7 +87,13 @@
|
|||
&__content {
|
||||
flex: 1 1;
|
||||
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 {
|
||||
|
|
|
|||
7
src/static/bootstrap-utilities.min.css
vendored
Normal file
7
src/static/bootstrap-utilities.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue