[UI] Make menu styles like on design (#153)

* #153: Make menu styles like on design * test: upds scrns * test: upds scrns * test: do not use absolute paths in generated path for assets * test: upds scrns * Update bin/build Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * improve * test: upd scrns * merge master * updates test * test: upds scrns * test: upds scrns --------- Co-authored-by: Paul Keen <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
jetthoughts · Nov 13, 2024 · c93b8a5 · c93b8a5
1 parent c66a21a
commit c93b8a5
Show file tree

Hide file tree

Showing 15 changed files with 39 additions and 17 deletions.
diff --git a/test/fixtures/screenshots/linux/desktop/blog/index.png b/test/fixtures/screenshots/linux/desktop/blog/index.png
diff --git a/test/fixtures/screenshots/linux/desktop/blog/index/_pagination.png b/test/fixtures/screenshots/linux/desktop/blog/index/_pagination.png
diff --git a/test/fixtures/screenshots/linux/mobile/free_consultation.png b/test/fixtures/screenshots/linux/mobile/free_consultation.png
diff --git a/test/fixtures/screenshots/linux/mobile/nav/hamburger_menu.png b/test/fixtures/screenshots/linux/mobile/nav/hamburger_menu.png
diff --git a/test/fixtures/screenshots/macos/desktop/blog/index.png b/test/fixtures/screenshots/macos/desktop/blog/index.png
diff --git a/test/fixtures/screenshots/macos/desktop/blog/index/_pagination.png b/test/fixtures/screenshots/macos/desktop/blog/index/_pagination.png
diff --git a/test/fixtures/screenshots/macos/mobile/nav/hamburger_menu.png b/test/fixtures/screenshots/macos/mobile/nav/hamburger_menu.png
diff --git a/test/fixtures/screenshots/macos/mobile/nav/hamburger_menu/services.png b/test/fixtures/screenshots/macos/mobile/nav/hamburger_menu/services.png
diff --git a/themes/beaver/assets/css/navigation.css b/themes/beaver/assets/css/navigation.css
@@ -1,6 +1,6 @@
 .btn,
 .btn:hover {
-  padding: 10px 18px;
+  padding: 11px 18px;
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
@@ -92,8 +92,8 @@
 
 .menu-close {
   display: none;
-  width: 25px;
-  height: 25px;
+  width: 30px;
+  height: 30px;
   position: absolute;
   top: 24px;
   left: 16px;
@@ -183,7 +183,7 @@
   transition: .3s;
 }
 
-  .navigation .-active .link {
+.navigation .-active .link {
   color: #1a8cff;
 }
 
@@ -341,7 +341,7 @@
     background-color: #121212;
     color: #fff;
     border-radius: 6px;
-    margin-top: 10px;
+    margin-top: 15px;
   }
 
   .navigation .item {
@@ -406,6 +406,17 @@
 
   .navigation .item .arrow {
     top: 25px;
+    right: 15px;
+  }
+
+  .navigation .item .arrow:before {
+    content: '';
+    position: absolute;
+    left: -15px;
+    right: -15px;
+    top: -15px;
+    bottom: -15px;
+    cursor: pointer;
   }
 
   .navigation .item.-open .arrow {
@@ -415,8 +426,14 @@
   .navigation .item:hover .arrow {
     border-color: inherit;
   }
+
   .navigation .item:hover .link,
   .navigation .sub-item:hover .sub-name {
     color: inherit;
   }
+
+  .navigation .link {
+    font-size: 18px;
+    padding-right: 15px;
+  }
 }
diff --git a/themes/beaver/layouts/_default/_markup/render-image.html b/themes/beaver/layouts/_default/_markup/render-image.html
@@ -28,17 +28,22 @@
     {{ end }}
 {{ end }}
 
-<a href="{{ $src.RelPermalink }}">
+<a href="{{ $src.RelPermalink }}" rel="nofollow">
     <picture>
         {{ range $format := $formats }}
             {{ $srcset := slice }}
             {{ range $index, $size := $sizes }}
                 {{ $image := $data.Get (printf "%s-%d" $format $index) }}
                 {{ $srcset = $srcset | append (printf "%s %dw" $image.RelPermalink $size) }}
             {{ end }}
-            <source type="image/{{ $format }}" srcset="{{ delimit $srcset ", " }}" sizes="(max-width: 48rem) 100vw, 48rem" height="{{ $src.Height }}" width="{{ $src.Width }}">
+            <source type="image/{{ $format }}" srcset="{{ delimit $srcset ", " }}"
+                    sizes="(max-width: 48rem) 100vw, 48rem" height="{{ $src.Height }}" width="{{ $src.Width }}">
         {{ end }}
-        <img loading="lazy" src="{{ ($data.Get (printf "%s-0" $defaultFormat)).RelPermalink }}" alt="{{ $alt }}" height="{{ $src.Height }}" width="{{ $src.Width }}">
+        <img loading="lazy"
+             src="{{ ($data.Get (printf "%s-0" $defaultFormat)).RelPermalink }}"
+             alt="{{ $alt }}"
+             height="{{ $src.Height }}"
+             width="{{ $src.Width }}">
     </picture>
 </a>
 

diff --git a/themes/beaver/layouts/_default/list.html b/themes/beaver/layouts/_default/list.html
@@ -54,7 +54,7 @@ <h1 class="fl-heading" style="margin: 0!important;padding: 0!important">Blog</h1
                 <br>
 
                 {{ range (.Paginate (.Pages.ByParam "created_at").Reverse).Pages }}
-                <a class="link" target="_blank" rel="noopener" href="{{ .Permalink }}">
+                <a class="link" target="_blank" rel="noopener noreferrer" href="{{ .RelPermalink }}">
 
 
                   <div class="blog-post">

diff --git a/themes/beaver/layouts/blog/list.html b/themes/beaver/layouts/blog/list.html
@@ -64,7 +64,7 @@
                 <br />
 
                 {{ range (.Paginate (.Pages.ByParam "created_at").Reverse).Pages }}
-                  <a class="link" target="_blank" rel="noopener" href="{{ .Permalink }}">
+                  <a class="link" target="_blank" rel="noopener" href="{{ .RelPermalink }}">
                     <div class="blog-post">
                       <div class="post-image">
                         {{ partial "blog/img-cropped.html" (dict "Page" . "width" 180 "height" 180) }}

diff --git a/themes/beaver/layouts/page/careers.html b/themes/beaver/layouts/page/careers.html
@@ -390,7 +390,7 @@ <h2 class="fl-heading">
                                                                         <li><span class="engineering">{{ .Params.position_type }}</span></li>
                                                                     </ul>
                                                                 </div>
-                                                                <h3 class="pp-content-grid-post-title"><a href='{{ .Permalink }}' title='{{ .Params.position }}'>{{ .Params.position }}</a></h3>
+                                                                <h3 class="pp-content-grid-post-title"><a href='{{ .RelPermalink }}' title='{{ .Params.position }}'>{{ .Params.position }}</a></h3>
                                                                 <div class="career-detail">
 
                                                                     {{ range .Params.requirements }}

diff --git a/themes/beaver/layouts/partials/blog/img-cropped.html b/themes/beaver/layouts/partials/blog/img-cropped.html
@@ -5,11 +5,11 @@
 
 
 <picture>
-    <source srcset="{{ $webp.Permalink }}" type="image/webp">
-    <source srcset="{{ $cropped.Permalink }}" type="{{ $cropped.MediaType }}">
-    <img src="{{ $cropped.Permalink }}" alt="{{ .Page.Title }}" width="{{ .width }}" height="{{ .height }}">
+  <source srcset='{{ $webp.RelPermalink }}' type="image/webp" width="{{ .width }}" height="{{ .height }}">
+  <source srcset='{{ $cropped.RelPermalink }}' type="{{ $cropped.MediaType }}" width="{{ .width }}" height="{{ .height }}">
+  <img alt='{{ .Page.Title }}' src="{{ $cropped.RelPermalink }}" width="{{ .width }}" height="{{ .height }}">
 </picture>
 
 {{ else }}
-<img src="{{ (resources.Get "img/no-image.svg" | resources.Fingerprint).Permalink }}" width="{{ .width }}" height="{{ .height }}" alt="Placeholder Image">
+<img src="{{ (resources.Get "img/no-image.svg" | resources.Fingerprint).RelPermalink }}" width="{{ .width }}" height="{{ .height }}" alt="Placeholder Image">
 {{ end }}
diff --git a/themes/beaver/layouts/partials/clients/grid-single.html b/themes/beaver/layouts/partials/clients/grid-single.html
@@ -26,7 +26,7 @@
         <meta itemprop="userInteractionCount" content="0"/>
     </div>
     <div class="pp-content-grid-post-image">
-        <a href="{{ .Permalink }}">
+        <a href="{{ .RelPermalink }}">
             {{ partial "img/client-logo.html" (dict "image" $logo "title" .Params.client.name) }}
         </a>
     </div>
@@ -42,4 +42,4 @@
               </ul>
         </div>
     </div>
-</div>
+</div>