branding

Signed-off-by: Jiaxiao Zhou (Mossaka) <[email protected]>

config.toml

@@ -36,12 +36,20 @@ disableHugoGeneratorInject = true
   subtitle = "A virtual meetup for people interested in containers and Kubernetes"
   buttontext = "Schedule"
   buttonLink = "/virtsys-meetup/schedule"
-  image = "illustrations/worker.svg"
+  image = "3.png"
+
+  # [[params.navbarLogo]]
+  # image = "plug-cloud.svg"
+  # link = "/virtsys-meetup"
 
   [[params.navbar]]
   title = "About"
   url = "/virtsys-meetup/about"
 
   [[params.navbar]]
   title = "Schedule"
-  url = "/virtsys-meetup/schedule"
+  url = "/virtsys-meetup/schedule"
+
+  [params.navbarLogo]
+  image = "3.svg"
+  link = "https://github.com/splvm"

layouts/partials/hero-body.html

@@ -7,7 +7,7 @@
 <div class="hero-body">
   <div class="container">
     <div class="columns is-vcentered">
-      <div class="column is-5 is-offset-1 landing-caption">
+      <div class="column is-7 landing-caption">
         <h1 class="title is-1 is-bold is-spaced">
           {{ $title }}
         </h1>
@@ -22,8 +22,8 @@ <h2 class="subtitle is-5 is-muted">
           </a>
         </p>
       </div>
-      <div class="column is-5 is-offset-1">
-        <figure class="image is-4by3">
+      <div class="column is-3 is-offset-1">
+        <figure class="image is-3">
           <img src="{{ printf "/virtsys-meetup/images/%s" $image | relURL }}" alt="Description">
         </figure>
       </div>

layouts/partials/navbar-clone.html

@@ -0,0 +1,86 @@
+{{- $navbar           := .Site.Params.navbar }}
+{{- $sidebarVisible   := .Site.Params.sidebar }}
+{{ if .Params.sidebar }}
+{{ $sidebarVisible = .Params.sidebar }}
+{{ end }}
+{{- $navbarLogo       := .Site.Params.navbarlogo }}
+{{- $navbarLogoWidth  := .Site.Params.navbarlogo.width | default 112 }}
+{{- $navbarLogoHeight := .Site.Params.navbarlogo.width | default 28 }}
+<nav id="navbar-clone" class="navbar is-fresh is-transparent" role="navigation" aria-label="main navigation">
+  <div class="container">
+    <div class="navbar-brand">
+      {{- if $navbarLogo}}
+      <a class="navbar-item" href="{{ $navbarLogo.link }}">
+        <img src="{{ printf "/virtsys-meetup/images/%s" $navbarLogo.image | relURL }}" alt="" width="{{ $navbarLogoWidth }}" height="{{ $navbarLogoHeight }}">
+      </a>
+      {{- end}}
+
+      {{- if $sidebarVisible }}
+      <a class="navbar-item is-hidden-desktop is-hidden-tablet">
+        <div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;">
+          <svg width="1000px" height="1000px">
+            <path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
+            <path class="path2" d="M 300 500 L 700 500"></path>
+            <path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
+          </svg>
+          <button id="menu-icon-trigger" class="menu-icon-trigger"></button>
+        </div>
+      </a>
+      {{- end }}
+
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="cloned-navbar-menu">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="cloned-navbar-menu" class="navbar-menu is-fixed">
+
+      {{- if $sidebarVisible }}
+      <div class="navbar-start">
+        <a class="navbar-item is-hidden-mobile">
+          <div id="cloned-menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;">
+            <svg width="1000px" height="1000px">
+              <path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
+              <path class="path2" d="M 300 500 L 700 500"></path>
+              <path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
+            </svg>
+            <button id="cloned-menu-icon-trigger" class="menu-icon-trigger"></button>
+          </div>
+        </a>
+      </div>
+      {{- end }}
+
+      <div class="navbar-end">
+        {{- range $navbar }}
+        {{- if .sublinks }}
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link">
+            {{ .title }}
+          </a>
+
+          <div class="navbar-dropdown">
+            {{- range .sublinks }}
+            <a href="{{ .url }}" class="navbar-item">
+              {{ .title }}
+            </a>
+            {{- end }}
+          </div>
+        </div>
+        {{- else if .button }}
+        <a href="{{ .url }}" class="navbar-item">
+          <span class="button signup-button rounded secondary-btn raised">
+            {{ .title }}
+          </span>
+        </a>
+        {{- else }}
+        <a href="{{ .url }}" class="navbar-item is-secondary">
+          {{ .title }}
+        </a>
+        {{- end }}
+        {{- end }}
+      </div>
+    </div>
+</div>
+</nav>

layouts/partials/navbar.html

@@ -0,0 +1,86 @@
+{{- $navbar           := .Site.Params.navbar }}
+{{- $sidebarVisible   := .Site.Params.sidebar }}
+{{ if .Params.sidebar }}
+{{ $sidebarVisible = .Params.sidebar }}
+{{ end }}
+{{- $navbarLogo       := .Site.Params.navbarlogo }}
+{{- $navbarLogoWidth  := .Site.Params.navbarlogo.width | default 112 }}
+{{- $navbarLogoHeight := .Site.Params.navbarlogo.height | default 28 }}
+<nav class="navbar is-fresh is-transparent no-shadow" role="navigation" aria-label="main navigation">
+  <div class="container">
+    <div class="navbar-brand">
+      {{- if $navbarLogo}}
+      <a class="navbar-item" href="{{ $navbarLogo.link }}">
+        <img src="{{ printf "/virtsys-meetup/images/%s" $navbarLogo.image | relURL }}" alt="" width="{{ $navbarLogoWidth }}" height="{{ $navbarLogoHeight }}">
+      </a>
+      {{- end}}
+
+      {{- if $sidebarVisible }}
+      <a class="navbar-item is-hidden-desktop is-hidden-tablet">
+        <div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;">
+          <svg width="1000px" height="1000px">
+            <path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
+            <path class="path2" d="M 300 500 L 700 500"></path>
+            <path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
+          </svg>
+          <button id="menu-icon-trigger" class="menu-icon-trigger"></button>
+        </div>
+      </a>
+      {{- end }}
+
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+      <div id="navbar-menu" class="navbar-menu is-static">
+
+        {{- if $sidebarVisible }}
+        <div class="navbar-start">
+          <a class="navbar-item is-hidden-mobile">
+            <div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;">
+              <svg width="1000px" height="1000px">
+                <path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
+                <path class="path2" d="M 300 500 L 700 500"></path>
+                <path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
+              </svg>
+              <button id="menu-icon-trigger" class="menu-icon-trigger"></button>
+            </div>
+          </a>
+        </div>
+        {{- end }}
+
+        <div class="navbar-end">
+          {{- range $navbar }}
+          {{- if .sublinks }}
+          <div class="navbar-item has-dropdown is-hoverable">
+            <a class="navbar-link">
+              {{ .title }}
+            </a>
+
+            <div class="navbar-dropdown">
+              {{- range .sublinks }}
+              <a href="{{ .url }}" class="navbar-item">
+                {{ .title }}
+              </a>
+              {{- end }}
+            </div>
+          </div>
+          {{- else if .button }}
+          <a href="{{ .url }}" class="navbar-item">
+            <span class="button signup-button rounded secondary-btn raised">
+              {{ .title }}
+            </span>
+          </a>
+          {{- else }}
+          <a href="{{ .url }}" class="navbar-item is-secondary">
+            {{ .title }}
+          </a>
+          {{- end }}
+          {{- end }}
+        </div>
+      </div>
+  </div>
+</nav>