fix: padding cards | search icon and menu (#109)

rochacbruno · Nov 1, 2024 · 374a17b · 374a17b
1 parent 19a0862
commit 374a17b
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 38 deletions.
diff --git a/example/static/marmite.css b/example/static/marmite.css
@@ -1,14 +1,14 @@
 /* https://picocss.com/docs */
 @font-face {
-    font-family: "Atkinson Hyperlegible";
-    src: url("./Atkinson-Hyperlegible-Regular-102.woff");
+  font-family: "Atkinson Hyperlegible";
+  src: url("./Atkinson-Hyperlegible-Regular-102.woff");
 }
 :root {
   --pico-typography-spacing-vertical: 1.5rem;
   --pico-font-family: "Atkinson Hyperlegible", sans-serif;
   --pico-color-grey-50: #f1f1f1;
-  --pico-color-azure-50:#E9F2FC;
-  --pico-color-azure-200:#9BCCFD;
+  --pico-color-azure-50: #e9f2fc;
+  --pico-color-azure-200: #9bccfd;
   --pico-color-grey-700: #474747;
   --pico-color-slate-500: ##687899;
   --pico-color-slate-750: #333c4e;
@@ -22,28 +22,29 @@
 
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
-  --pico-tag:var(--pico-color-azure-50);
+  --pico-tag: var(--pico-color-azure-50);
   --pico-bg-menu: #fff;
   --pico-home: var(--pico-color-slate-500);
-  --pico-menu-selected: #48536B;
+  --pico-menu-selected: #48536b;
+  --pico-menu: #5d6b89;
 }
 
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     --pico-tag: var(--pico-color-slate-850);
     --pico-bg-menu: var(--pico-color-slate-850);
     --pico-home: var(--pico-color-slate-500);
-  --pico-menu-selected: #B3B9C5;
-
+    --pico-menu-selected: #b3b9c5;
+    --pico-menu: #969eaf;
   }
 }
 
 [data-theme="dark"] {
   --pico-tag: var(--pico-color-slate-850);
   --pico-bg-menu: var(--pico-color-slate-850);
   --pico-home: var(--pico-color-slate-500);
-  --pico-menu-selected: #B3B9C5;
-
+  --pico-menu-selected: #b3b9c5;
+  --pico-menu: #969eaf;
 }
 
 a {
@@ -209,43 +210,53 @@ pre:has(> code.language-mermaid) {
   background-color: transparent;
 }
 
-@media (max-width: 768px) {
-  .header-menu {
-    display: none;
-    flex-direction: column;
-    gap: 10px;
-    position: absolute;
-    top: 100px;
-    right: 0;
-    background-color: var(--pico-bg-menu);
-    padding: 15px;
-    border-radius: 4px;
-    z-index: 100;
-    box-shadow: 0px 4px 4px 0px #0000001f;
-  }
+/* Search */
 
-  .header-menu.active {
-    display: flex;
-  }
+#search-toggle {
+  align-items: center;
+  justify-content: center;
+}
 
-  .hamburger {
-    display: block;
-  }
+.search-magnifier {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--pico-menu); 
+  border-radius: 50%; 
+  position: relative;
+  margin-right: 5px;
+  box-sizing: content-box; 
+}
 
-  .underline {
-    display: none;
-  }
+/* Configurações do cabo da lupa */
+.search-magnifier::after {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 2px;
+  background-color: var(--pico-menu); 
+  position: absolute;
+  top: 80%; 
+  left: 95%; 
+  transform: rotate(45deg); 
+  transform-origin: top left; 
 }
 
+.search-txt {
+  display: none;
+}
+
+
+
 .pagination nav li a {
   font-size: 2rem;
 }
 
 .data-tags-footer {
-  padding: 0;
+  padding: 4px 8px;
 }
 .data-tags-footer .content-date {
-  margin-left: .5rem;
+  margin-left: 0.5rem;
 }
 
 .footer-content div {
@@ -283,7 +294,7 @@ pre:has(> code.language-mermaid) {
   width: 100%;
   padding: 10px;
   font-size: 16px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--pico-color-azure-550);
   border-radius: 4px;
   outline: none;
   margin-bottom: 10px;
@@ -335,5 +346,42 @@ pre:has(> code.language-mermaid) {
 
 .hljs {
   /* important crime must be committed here because of unknown events */
-  background: var(--pico-code-background-color) !important;  
+  background: var(--pico-code-background-color) !important; /* why, Bruno, Why??????*/
 }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .header-menu {
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+    position: absolute;
+    top: 100px;
+    right: 0;
+    background-color: var(--pico-bg-menu);
+    padding: 15px;
+    border-radius: 4px;
+    z-index: 100;
+    box-shadow: 0px 4px 4px 0px #0000001f;
+  }
+
+  .header-menu.active {
+    display: flex;
+  }
+
+  .hamburger {
+    display: block;
+  }
+
+  .underline {
+    display: none;
+  }
+
+  .search-txt {
+    display: inline-block;
+  }
+
+  .search-magnifier {
+    display: none;
+  }
+}
diff --git a/example/templates/base.html b/example/templates/base.html
@@ -39,7 +39,7 @@ <h2><a href="./index.html" class="contrast">{{ site.name }}</a></h2>
                     </li>
                     {% endfor %}
                     {% if site.enable_search %}
-                    <li><a href="#" id="search-toggle" class="secondary" title="Search (Ctrl + Shift + F)">&#8981;</a></li>
+                    <li><a href="#" id="search-toggle" class="secondary" title="Search (Ctrl + Shift + F)"> <span class="search-txt">Search</span><span class="search-magnifier"></span></a></li>
                     {% endif %}
                     <li><a href="#" id="theme-toggle" class="secondary">&#9789;</a></li>
                     <div class="underline"></div>