Implement FrostFS design version

Signed-off-by: Mikhail Petrov <m.petrov@yadro.com>
2022-12-23 13:28:30 +03:00 · 2022-12-23 13:28:30 +03:00 · 72d06db4e8
commit 72d06db4e8
parent dd500e1b2b
23 changed files with 76537 additions and 84 deletions
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -1,3 +1,27 @@
+@font-face {
+  font-family: "WorkSans";
+  font-style: normal;
+  font-weight: normal;
+  src: url(../fonts/WorkSans-Regular.eot);
+  src: url(../fonts/WorkSans-Regular.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-Regular.woff) format("woff"), url(../fonts/WorkSans-Regular.ttf) format("truetype"), url(../fonts/WorkSans-Regular.svg) format("svg")
+}
+
+@font-face {
+  font-family: "WorkSans";
+  font-style: normal;
+  font-weight: bold;
+  src: url(../fonts/WorkSans-Bold.eot);
+  src: url(../fonts/WorkSans-Bold.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-Bold.woff) format("woff"), url(../fonts/WorkSans-Bold.ttf) format("truetype"), url(../fonts/WorkSans-Bold.svg) format("svg")
+}
+
+@font-face {
+  font-family: "WorkSans";
+  font-style: normal;
+  font-weight: 700;
+  src: url(../fonts/WorkSans-SemiBold.eot);
+  src: url(../fonts/WorkSans-SemiBold.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-SemiBold.woff) format("woff"), url(../fonts/WorkSans-SemiBold.ttf) format("truetype"), url(../fonts/WorkSans-SemiBold.svg) format("svg")
+}
+
 body {
  line-height: 1.5;
  font-family: var(--font-family), sans-serif;
@ -193,6 +217,7 @@ select:focus {
 .section-sm {
  padding-top: 60px;
  padding-bottom: 60px;
+  background: #fff;
 }

@media (max-width: 768px) {
@ -244,11 +269,12 @@ pre {
 }

 .bg-primary {
-  background: var(--primary-color) !important;
+  background: var(--bg-color) !important;
 }

 .bg-white {
  background-color: var(--white-color) !important;
+  font-weight: 400;
 }

 .bg-light {
@ -276,7 +302,11 @@ pre {
 }

 .navbar {
-  padding: 0;
+  background: #fff;
+}
+
+.navbar img {
+  height: 34px;
 }

 .navbar-dark .navbar-toggler-icon {
@ -289,15 +319,17 @@ pre {
  }
 }

+.navbar-brand {
+  padding: 0;
+}
+
 .navbar-brand img {
-  max-width: 100px;
  margin-bottom: 0;
 }

 .navbar .nav-item .nav-link {
-  text-transform: uppercase;
-  padding: 10px 15px !important;
-  font-size: 15px;
+  padding: 0.5rem 1rem !important;
+  font-size: 16px;
 }

 .navbar .dropdown:hover .dropdown-menu {
@ -395,19 +427,28 @@ pre {

 .banner p {
  font-size: 20px;
-  opacity: .8;
+}
+
+.ti-github,
+.ti-twitter-alt {
+  font-size: 20px;
 }

 .banner .nav-link.text-dark {
-  color: var(--white-color) !important;
+  color: var(--dark-color) !important;
 }

 .banner .nav-link.text-dark:hover {
-  color: var(--white-color) !important;
+  color: var(--dark-color) !important;
 }

 .banner .navbar-brand {
-  color: var(--white-color) !important;
+  color: var(--dark-color) !important;
+}
+
+.copyright-container {
+  color: #939b9f;
+  font-weight: 600;
 }

 /* search */
@ -498,10 +539,12 @@ pre {
  border-radius: 25px;
  border: 0;
  padding: 0 20px;
+  border: 1px solid #ced4da;
+  border-radius: 0;
 }

 .form-control:focus {
-  border: 0;
+  border-color: #ced4da;
  box-shadow: none !important;
 }

@ -558,35 +601,25 @@ textarea.form-control {
  height: 8px;
  width: 8px;
  border-radius: 50%;
-  background: var(--primary-color);
-  opacity: .3;
+  background: #003;
  left: 0;
  top: 8px;
 }

 .list-styled li {
-  padding-left: 20px;
  position: relative;
 }

-.list-styled li::before {
-  position: absolute;
-  content: '';
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  background: var(--primary-color);
-  opacity: .3;
-  left: 0;
-  top: 17px;
-}
-
 .post-meta {
  color: var(--text-color);
  font-style: italic;
  font-size: 14px;
 }

+.border-bottom {
+  border-bottom: 2px solid #003 !important;
+}
+
 blockquote {
  font-size: 20px !important;
  color: var(--text-color-dark);
@ -607,6 +640,7 @@ blockquote p {

 .pagination a {
  color: var(--primary-color);
+  font-weight: 700;
 }

 .pagination i {
@ -738,18 +772,38 @@ li.sidelist>a {
  margin-bottom: 10px;
  display: block;
  font-size: 20px;
+  font-weight: 700;
 }

 li.sidelist li a {
  margin: 0;
+  font-weight: 700;
+  font-size: 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+}
+
+li.sidelist li a:hover {
+  color: var(--primary-color);
 }

 .sidelist li.sidelist {
  display: block;
 }

-.sidelist li.sidelist.active a {
-  color: var(--primary-color);
+.sidelist i {
+  display: none;
+}
+
+.sidelist li.sidelist.active>a {
+  border-left: 5px solid var(--primary-color);
+  background: #e9eeed;
+}
+
+.sidelist li.sidelist.active>a>i {
+  display: block;
 }

 .sidelist li.sidelist.active::before {
@ -804,12 +858,11 @@ code {
  color: inherit;
  text-align: right;
  z-index: 1;
-  left: -5px;
+  left: -22px;
  top: -5px;
 }

 .ui-autocomplete-input {
-  border-bottom: 1px solid rgb(212, 212, 212) !important;
  padding-right: 50px;
 }

@ -848,7 +901,7 @@ pre code::-webkit-scrollbar-thumb {

 /* content tabs */
 .code-tabs {
-  border: 1px solid #dee2e6;
+  border: 2px solid #003;
  overflow: hidden;
  margin: 20px 0px;
 }
@ -866,9 +919,13 @@ pre code::-webkit-scrollbar-thumb {
  margin-bottom: 0;
 }

+.nav-tabs {
+  border-bottom: 2px solid #003;
+}
+
 .code-tabs .nav-tabs .nav-item {
  padding-left: 0;
-  border-right: 1px solid #dee2e6;
+  border-right: 2px solid #003;
 }

 .code-tabs .nav-tabs .nav-item .nav-link {
@ -876,6 +933,16 @@ pre code::-webkit-scrollbar-thumb {
  font-weight: 500;
  border: 0;
  margin-bottom: 0;
+  font-weight: 700;
+}
+
+table td,
+table th {
+  font-weight: 500;
+}
+
+.nav-tabs .nav-item {
+  margin-bottom: -2px;
 }

 .code-tabs .nav-tabs .nav-item::before {
@ -888,4 +955,4 @@ pre code::-webkit-scrollbar-thumb {

 .code-tabs .nav-tabs .nav-item.active .nav-link {
  color: var(--white-color);
-}
+}
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@ -36,7 +36,7 @@ white_color = "#ffffff"
 light_color = "#f8f9fa"

 # font family
-font_family = "lato" # Choose font family from : https://fonts.google.com/
+font_family = "WorkSans" # Choose font family from : https://fonts.google.com/

 # contact form action
 contact_form_action = "#" # contact form works with : https://formspree.io
--- a/exampleSite/content/installation/customization/_index.en.md
+++ b/exampleSite/content/installation/customization/_index.en.md
@ -51,5 +51,5 @@ If you need to change this default behavior, create a new file in `layouts/parti
 ```toml
 [params]
  # font family
-  font_family = "lato" # Choose font family from : https://fonts.google.com/
-```
+  font_family = "WorkSans" # Choose font family from : https://fonts.google.com/
+```
--- a/exampleSite/content/installation/customization/_index.fr.md
+++ b/exampleSite/content/installation/customization/_index.fr.md
@ -51,5 +51,5 @@ If you need to change this default behavior, create a new file in `layouts/parti
 ```toml
 [params]
  # font family
-  font_family = "lato" # Choose font family from : https://fonts.google.com/
-```
+  font_family = "WorkSans" # Choose font family from : https://fonts.google.com/
+```
--- a/layouts/partials/default.html
+++ b/layouts/partials/default.html
@ -2,7 +2,7 @@
 <section class="single section-sm pb-0">
  <div class="container">
    <div class="row">
-      <div class="col-lg-3">
+      <div class="col-lg-4">
        <div class="sidebar">
          <a
            class="back-btn"
@ -10,25 +10,49 @@
            aria-label="back"
          ></a>
          <ul class="list-styled">
-            {{ $currentNode := . }} {{range .Site.Home.Sections.ByWeight}} {{ if
-            eq .FirstSection $currentNode.FirstSection }} {{ template
-            "section-tree-nav" dict "sect" . "currentnode" $currentNode}} {{ end
-            }} {{ end }} {{ if .Content }} {{ if eq .Params.downloadBtn "true"
-            }}
-            <div>
-              <button class="btn btn-primary btn-block" id="generatePDF">
-                Get Pdf
-              </button>
-            </div>
-            {{ end }} {{ end }}
+            {{ $currentNode := . }}
+            {{range .Site.Home.Sections.ByWeight}}
+              {{ if eq .FirstSection $currentNode.FirstSection }}
+                {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode}}
+              {{ end }}
+            {{ end }}
+            {{ if .Content }}
+              {{ if eq .Params.downloadBtn "true" }}
+              <div>
+                <button class="btn btn-primary btn-block" id="generatePDF">
+                  Get Pdf
+                </button>
+              </div>
+              {{ end }}
+            {{ end }}
          </ul>
        </div>
      </div>
-      <div class="col-lg-9">
+      <div class="col-lg-8">
        <div class="p-lg-5 p-4 bg-white" id="content">
          <h2 class="mb-5" id="title">{{ .Title }}</h2>
          {{ if .Content }}
-          <div class="content">{{.Content}}</div>
+            <div class="content">
+              {{ if isset .Params "status" }}
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Category</th>
+                      <th>Authors</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th>{{ .Params.status }}</th>
+                      <th>{{ .Params.category }}</th>
+                      <th>{{ .Params.author }}</th>
+                    </tr>
+                  </tbody>
+                </table>
+              {{ end }}
+              {{.Content}}
+            </div>
          {{ else }}
          <div class="bg-light p-4">
            <ul class="page-list">
@ -85,28 +109,50 @@
 <!-- /details page -->

 <!-- templates -->
-{{ define "section-tree-nav" }} {{ $showvisitedlinks := .showvisitedlinks }} {{
-$currentNode := .currentnode }} {{with .sect}} {{safeHTML .Params.head}} {{
-$fileUniqueID := "" }} {{ with .File }}{{ $fileUniqueID = .UniqueID }}{{ end }}
-{{ $currentNodeFileUniqueID := "" }} {{ with $currentNode.File }}{{
-$currentNodeFileUniqueID = .UniqueID }}{{ end }}
-<li
-  data-nav-id="{{.Permalink}}"
-  title="{{.Title}}"
-  class="sidelist
-  {{if eq $fileUniqueID $currentNodeFileUniqueID}}active{{end}}"
->
-  <a href="{{.Permalink}}">
-    {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML
-    .Params.Post}}
-  </a>
-  {{ $numberOfPages := (add (len .Pages) (len .Sections)) }} {{ if ne
-  $numberOfPages 0 }}
-  <ul>
-    {{ range .Pages.ByWeight }} {{ if and .Params.hidden (not $.showhidden) }}
-    {{else}} {{ template "section-tree-nav" dict "sect" . "currentnode"
-    $currentNode }} {{end}} {{end}}
-  </ul>
+{{ define "section-tree-nav" }}
+  {{ $showvisitedlinks := .showvisitedlinks }}
+  {{ $currentNode := .currentnode }}
+  {{with .sect}}
+    {{safeHTML .Params.head}}
+    {{ $fileUniqueID := "" }}
+    {{ with .File }}
+      {{ $fileUniqueID = .UniqueID }}
+    {{ end }}
+    {{ $currentNodeFileUniqueID := "" }}
+    {{ with $currentNode.File }}
+      {{ $currentNodeFileUniqueID = .UniqueID }}
+    {{ end }}
+    <li
+      data-nav-id="{{.Permalink}}"
+      title="{{.Title}}"
+      class="sidelist
+      {{if eq $fileUniqueID $currentNodeFileUniqueID}}active{{end}}"
+    >
+      <a href="{{.Permalink}}">
+        {{ safeHTML .Params.Pre }}
+          {{ or .Params.menuTitle .LinkTitle .Title }}
+        {{ safeHTML .Params.Post }}
+        <i class="ti-angle-right"></i>
+      </a>
+      {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
+      {{ if ne $numberOfPages 0 }}
+        <ul>
+          {{ $currentNodePath := split $currentNode.File "/" }}
+          {{ $folderName := (index $currentNodePath 1) }}
+          {{ if gt (len (findRE ".md" $folderName)) 0 }}
+              {{ $folderName = "Others" }}
+          {{ end }}
+
+          {{ range .Pages.ByWeight }}
+            {{ if eq (isset .Page.Params "status") false }}
+              {{ if and .Params.hidden (not $.showhidden) }}
+              {{else}}
+                {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode }}
+              {{end}}
+            {{end}}
+          {{end}}
+        </ul>
+      {{ end }}
+    </li>
  {{ end }}
-</li>
-{{ end }} {{ end }}
+{{ end }}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -3,7 +3,7 @@
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-8 text-md-left text-center">
-        <p class="mb-md-0 mb-4">{{ .Site.Params.copyright | markdownify }}</p>
+        <p class="mb-md-0 mb-4 copyright-container">{{ .Site.Params.copyright | markdownify }}</p>
      </div>
      <div class="col-md-4 text-md-right text-center">
        <ul class="list-inline">
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -28,12 +28,6 @@
    type="image/x-icon"
  />

-  <!-- fonts -->
-  <link
-    href="https://fonts.googleapis.com/css?family={{replace .Site.Params.font_family ' ' '+' | title}}:300,400,700&display=swap"
-    rel="stylesheet"
-  />
-
  <!-- PDF.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>
@ -42,6 +36,7 @@
    :root{
      --primary-color:{{ .Site.Params.primary_color }};
      --body-color:{{ .Site.Params.body_color }};
+      --bg-color:{{ .Site.Params.bg_color }};
      --text-color:{{ .Site.Params.text_color }};
      --text-color-dark:{{ .Site.Params.text_color_dark }};
      --white-color:{{ .Site.Params.white_color }};
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-md {{ if .IsHome }}navbar-dark{{ else }}navbar-light{{ end }}">
  <div class="container px-2 px-md-0">
-    <a class="navbar-brand px-2" href="{{ site.BaseURL | relLangURL }}">
+    <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
      {{ $logo:= site.Params.logo }}
      {{ $logoWhite:= site.Params.logo_white }}
      {{ if (or $logo $logoWhite) }}
--- a/static/fonts/WorkSans-Bold.eot
+++ b/static/fonts/WorkSans-Bold.eot
--- a/static/fonts/WorkSans-Bold.otf
+++ b/static/fonts/WorkSans-Bold.otf
--- a/static/fonts/WorkSans-Bold.svg
+++ b/static/fonts/WorkSans-Bold.svg
--- a/static/fonts/WorkSans-Bold.ttf
+++ b/static/fonts/WorkSans-Bold.ttf
--- a/static/fonts/WorkSans-Bold.woff
+++ b/static/fonts/WorkSans-Bold.woff
--- a/static/fonts/WorkSans-Regular.eot
+++ b/static/fonts/WorkSans-Regular.eot
--- a/static/fonts/WorkSans-Regular.otf
+++ b/static/fonts/WorkSans-Regular.otf
--- a/static/fonts/WorkSans-Regular.svg
+++ b/static/fonts/WorkSans-Regular.svg
--- a/static/fonts/WorkSans-Regular.ttf
+++ b/static/fonts/WorkSans-Regular.ttf
--- a/static/fonts/WorkSans-Regular.woff
+++ b/static/fonts/WorkSans-Regular.woff
--- a/static/fonts/WorkSans-SemiBold.eot
+++ b/static/fonts/WorkSans-SemiBold.eot
--- a/static/fonts/WorkSans-SemiBold.otf
+++ b/static/fonts/WorkSans-SemiBold.otf
--- a/static/fonts/WorkSans-SemiBold.svg
+++ b/static/fonts/WorkSans-SemiBold.svg
--- a/static/fonts/WorkSans-SemiBold.ttf
+++ b/static/fonts/WorkSans-SemiBold.ttf
--- a/static/fonts/WorkSans-SemiBold.woff
+++ b/static/fonts/WorkSans-SemiBold.woff