style: logo and font update (gnolang#2132)

**This PR aims to replace the GnoLand logo by the new one and to swap monospaced body font by a non-mono one.** - From what I understood, we are gonna use only one version of the logo for both light and dark theme, so I had to update the header background color for visibility and contrast matter. I already made some iterations on the colors with Eunice. I also adapted the horizontal logo - navigation balance by updating the margin. - I replaced the standalone `logo.svg` by a SVG `embedded` version of the new one. I know there is pros and cons about that but it's temporary before the revamp of `gnoweb`, when we will be able to discuss it. As we want to go fast, I think this is easier to customize as we can iterate by tweaking few lines of css instead of re-uploading new images (and hosting multiples related to different theme). It's also faster to display and handy to interact with. - I renamed the go template to make it more generic since we also use the logo in the footer. - Finally, I got rid of monospaced font (for body text only) to make a test with `ui-system` one. It's the one used for titles right now (the main difference with title being the font-size, font-weight and letter-spacing). Using a `ui-system` font means all OS will have different font displayed (eg. San Francisco for MacOS / Roboto for Android / Ubuntu font for Linux...), what is not the best for branding matter, but it is very fast to display (actually nothing to load, so no `FOUT` issue), common to see for users (default os font) and maybe a good choice as the branding is not fully finished yet. This would be a consensual but good way to start because this font is already a part of the website. - We can also quickly make a test with `Inter` font, that is very simple, elegant and used in many of our websites, and otherwise looking for other fonts to tests. ## Screenshots: ### Light theme: ![127 0 0 1_8888_](https://github.com/gnolang/gno/assets/7622257/9af2b1f6-bb2b-4514-90e1-0ca74e42024f) ### dark theme: ![127 0 0 1_8888_ (1)](https://github.com/gnolang/gno/assets/7622257/53372b03-bc67-444b-a54a-5b1fbb62824a)
TERITORI · May 17, 2024 · c4cffb5 · c4cffb5
1 parent aa2a0da
commit c4cffb5
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 33 deletions.
diff --git a/gno.land/pkg/gnoweb/static/css/app.css b/gno.land/pkg/gnoweb/static/css/app.css
@@ -48,7 +48,8 @@ html[data-theme="light"] {
   --quote-background: #ddd;
   --quote-2-background: #aaa4;
   --code-background: #d7d9db;
-  --header-background: #d7d9db;
+  --header-background: #6b6d73;
+  --header-forground: #ffffff;
 
   --realm-help-background-color: #d7d9db9e;
   --realm-help-odd-background-color: #d7d9db45;
@@ -84,7 +85,8 @@ html[data-theme="dark"] {
   --quote-background: #404040;
   --quote-2-background: #555555;
   --code-background: #606060;
-  --header-background: #606060;
+  --header-background: #6b6d73;
+  --header-forground: #ffffff;
 
   --realm-help-background-color: #45454545;
   --realm-help-odd-background-color: #4545459e;
@@ -108,14 +110,13 @@ html[data-theme="dark"] {
   --highlight-addition: #76c490;
 }
 
-html[data-theme="dark"] #header img,
-html[data-theme="dark"] .footer img {
-  filter: invert(1);
-}
+.logo-wording path {fill: var(--header-forground, #ffffff); }
+.logo-beard { fill: var(--header-forground, #ffffff); }
 
 #theme-toggle {
   display: inline-block;
   padding: 0;
+  color: var(--header-forground, #ffffff);
 }
 
 html[data-theme="dark"] #theme-toggle-moon,
@@ -147,8 +148,8 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: "Roboto Mono", "Courier New", "sans-serif";
-  background-color: var(--background-color, #eee);
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  "Segoe UI Symbol", "Noto Color Emoji";  background-color: var(--background-color, #eee);
   color: var(--text-color, #000);
   font-size: 15px;
   transition: 0.25s all ease;
@@ -159,8 +160,7 @@ h2,
 h3,
 h4,
 nav {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
+
   font-weight: 600;
   letter-spacing: 0.08rem;
 }
@@ -248,7 +248,6 @@ li > * {
 }
 
 input {
-  font-family: "Roboto Mono", "Monaco", monospace;
   background-color: var(--input-background-color, #eee);
   border: 1px solid var(--border-color);
   color: var(--text-color, #000);
@@ -266,6 +265,9 @@ blockquote blockquote {
   background-color: var(--quote-2-background, #aaa4);
 }
 
+pre, code {
+    font-family: "Roboto Mono", "Courier New", "sans-serif";
+}
 pre {
   background-color: var(--code-background, #d7d9db);
   margin: 0;
@@ -338,13 +340,16 @@ code {
 }
 
 .footer {
+  text-align: center;
   margin-block-start: 2rem;
   background-color: var(--header-background, #d7d9db);
   border-top: 1px solid var(--border-color);
 }
-.footer > img {
+
+.footer > .logo {
   display: block;
-  margin: 1rem auto;
+  margin: 1rem;
+  height: 1.2rem;
 }
 
 /** 51.2rem **/
@@ -488,15 +493,19 @@ code {
   flex-grow: 2;
 }
 
-#logo {
+#header .logo {
   display: flex;
   align-items: center;
   color: var(--link-color, #25172a);
   position: absolute;
-  height: 3rem;
+  height: 2.4rem;
   z-index: 2;
 }
 
+.logo > svg {
+    height: 100%;
+}
+
 #logo_path a {
   text-decoration: none;
 }
@@ -610,7 +619,7 @@ code {
   height: 0.133rem;
   margin-bottom: 0.333rem;
   position: relative;
-  background: var(--text-color, #000);
+  background: var(--header-forground, #ffffff);
   z-index: 1;
   transform-origin: 50% 50%;
   /* transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; */
@@ -670,6 +679,11 @@ code {
   display: flex;
   flex-direction: column;
   margin-bottom: 2rem;
+  margin-top: .8rem;
+}
+
+#menu-toggle > .navigation a {
+    color: var(--header-forground, #ffffff);
 }
 
 #menu-toggle input:checked ~ .navigation {

diff --git a/gno.land/pkg/gnoweb/static/img/logo.png b/gno.land/pkg/gnoweb/static/img/logo.png
diff --git a/gno.land/pkg/gnoweb/static/img/logo.svg b/gno.land/pkg/gnoweb/static/img/logo.svg
diff --git a/gno.land/pkg/gnoweb/views/faucet.html b/gno.land/pkg/gnoweb/views/faucet.html
@@ -7,7 +7,7 @@
   </head>
   <body>
     <div id="root">
-      <div id="header">{{ template "header_logo" }} {{ template "header_buttons" }}</div>
+      <div id="header">{{ template "logo" }} {{ template "header_buttons" }}</div>
       <div id="home" class="container">
         This is the Gno.land (test) {{ if .Data.Config.CaptchaSite }}
         <script src="https://www.google.com/recaptcha/api.js" async defer></script>

diff --git a/gno.land/pkg/gnoweb/views/funcs.html b/gno.land/pkg/gnoweb/views/funcs.html
@@ -117,15 +117,28 @@
 </script>
 {{- end -}}
 
-{{- define "header_logo" -}}
-<a id="logo" href="/">
-  <img src="/static/img/logo.png" alt="Gno.land" title="Gno.land" height="38" />
+{{- define "logo" -}}
+<a class="logo" href="/">
+  <svg class="logo_img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 238">
+    <path d="M136.02,160.26c-1.77-6.5-5.55-12.22-10.68-16.59-1.98-1.69-4.14-3.29-6.5-4.78-2-1.27-4.52.6-3.94,2.9l1.42,5.62c1.8,7.14-5.86,12.93-12.24,9.26l-17.15-9.86c-11.27-6.48-25.13-6.48-36.4,0l-17.15,9.86c-6.38,3.67-14.04-2.13-12.24-9.26l1.46-5.78c.58-2.29-1.93-4.16-3.93-2.9-2.62,1.64-5,3.42-7.16,5.29-5.05,4.38-8.56,10.26-10.2,16.74l-.06.24c-4.17,16.56,2.31,33.97,16.29,43.78l43.3,30.37c4.74,3.32,11.05,3.32,15.79,0l43.3-30.37c14.19-9.95,20.65-27.74,16.09-44.51Z" class="logo-beard" />
+    <path d="M134.22,123.74c-3.78-31.58-19.27-63.22-34.25-87.46l22.26-22.26c5.04-5.04,1.47-13.66-5.66-13.66h-47.94c-3.7,0-7.41,1.63-9.91,4.88C41.84,27.21,8.79,75.55,3.02,123.74c-.52,4.39,4.63,7.08,7.93,4.14,11.52-10.26,29.49-17.6,57.67-17.6s46.14,7.35,57.67,17.6c3.3,2.94,8.45.24,7.93-4.14Z" style="fill: #ee445d" />
+    <g class="logo-wording">
+      <path d="M190.79,202.39l13.67-21.82c9.35,10.07,21.82,14.14,36.2,14.14s32.13-6.23,32.13-29.73v-11.27c-9.11,11.51-21.58,17.98-35.96,17.98-28.77,0-51.06-20.14-51.06-58.74s21.82-58.98,51.06-58.98c13.91,0,26.61,5.75,35.96,17.74v-14.86h30.45v108.12c0,43.87-34.04,54.66-62.57,54.66-19.66,0-35.24-4.55-49.87-17.26ZM272.78,131.66v-37.64c-5.28-7.43-16.3-12.95-26.13-12.95-17.5,0-29.49,11.99-29.49,31.89s11.99,31.89,29.49,31.89c9.83,0,20.86-5.75,26.13-13.19Z" />
+      <path d="M397.33,172.66v-70c0-16.06-8.39-21.58-21.34-21.58-11.99,0-21.1,6.71-26.37,13.43v78.16h-30.45V56.86h30.45v14.86c7.43-8.63,21.82-17.74,40.52-17.74,25.65,0,37.88,14.38,37.88,36.92v81.75h-30.69Z" />
+      <path d="M438.76,114.64c0-32.84,23.01-60.65,61.13-60.65s61.37,27.81,61.37,60.65-23.01,60.89-61.37,60.89-61.13-28.05-61.13-60.89ZM529.62,114.64c0-17.98-10.55-33.56-29.73-33.56s-29.49,15.58-29.49,33.56,10.55,33.8,29.49,33.8,29.73-15.58,29.73-33.8Z" />
+      <path d="M565.38,161.87c0-7.19,5.99-13.19,13.19-13.19s13.19,5.99,13.19,13.19-5.99,13.19-13.19,13.19-13.19-5.99-13.19-13.19Z" />
+      <path d="M605.35,148.44V12.75h17.98v131.86c0,8.63,3.84,14.86,11.75,14.86,5.03,0,9.83-2.4,11.99-5.03l5.51,13.67c-4.79,4.31-11.03,7.43-21.58,7.43-17.02,0-25.65-9.83-25.65-27.09Z" />
+      <path d="M745.61,172.66v-17.26c-8.63,11.75-22.77,20.14-39.08,20.14-30.21,0-51.54-23.01-51.54-60.65s21.34-60.89,51.54-60.89c15.58,0,29.73,7.67,39.08,20.38v-17.5h17.98v115.79h-17.98ZM745.61,141.01v-52.26c-6.23-10.07-20.38-18.7-34.52-18.7-23.49,0-37.4,19.18-37.4,44.83s13.91,44.59,37.4,44.59c14.14,0,28.29-8.39,34.52-18.46Z" />
+      <path d="M860.96,172.66v-75.76c0-20.62-10.55-26.85-26.13-26.85-14.14,0-27.33,8.63-34.28,17.98v84.63h-17.98V56.86h17.98v16.78c8.15-9.83,23.97-19.66,41.47-19.66,23.97,0,36.68,12.23,36.68,37.4v81.27h-17.74Z" />
+      <path d="M982.02,172.66v-17.26c-8.63,11.75-22.77,20.14-39.08,20.14-30.21,0-51.54-23.01-51.54-60.65s21.34-60.89,51.54-60.89c15.58,0,29.73,7.67,39.08,20.38V12.75h17.98v159.91h-17.98ZM982.02,141.01v-52.26c-6.23-10.07-20.38-18.7-34.52-18.7-23.49,0-37.4,19.18-37.4,44.83s13.91,44.59,37.4,44.59c14.14,0,28.29-8.39,34.52-18.46Z" />
+    </g>
+  </svg>
 </a>
-{{- end -}}
+{{- end -}} 
 
 {{- define "footer" -}}
 <footer class="footer">
-  <img src="/static/img/logo.png" alt="Gno.land" width="70" />
+    {{ template "logo" }} 
 </footer>
 {{- end -}}
 

diff --git a/gno.land/pkg/gnoweb/views/generic.html b/gno.land/pkg/gnoweb/views/generic.html
@@ -7,7 +7,7 @@
   </head>
   <body onload="main()">
     <div id="root">
-      <div id="header">{{ template "header_logo" }} {{ template "header_buttons" }}</div>
+      <div id="header">{{ template "logo" }} {{ template "header_buttons" }}</div>
       <div id="home" class="container">
         <pre id="source">
           {{- .Data.MainContent -}}

diff --git a/gno.land/pkg/gnoweb/views/package_dir.html b/gno.land/pkg/gnoweb/views/package_dir.html
@@ -7,7 +7,7 @@
   </head>
   <body onload="main()">
     <div id="root">
-      <div id="header">{{ template "header_logo" }} {{ template "header_buttons" }}</div>
+      <div id="header">{{ template "logo" }} {{ template "header_buttons" }}</div>
       <div class="inline-list">
         <span id="logo_path"> <a href="{{ .Data.DirPath }}">{{ .Data.DirPath }}</a>/* </span>
       </div>

diff --git a/gno.land/pkg/gnoweb/views/package_file.html b/gno.land/pkg/gnoweb/views/package_file.html
@@ -7,7 +7,7 @@
   </head>
   <body onload="main()">
     <div id="root">
-      <div id="header">{{ template "header_logo" }} {{ template "header_buttons" }}</div>
+      <div id="header">{{ template "logo" }} {{ template "header_buttons" }}</div>
       <div class="inline-list">
         <span id="logo_path"> <a href="{{ .Data.DirPath }}/">{{ .Data.DirPath }}/</a>{{ .Data.FileName }} </span>
       </div>

diff --git a/gno.land/pkg/gnoweb/views/realm_help.html b/gno.land/pkg/gnoweb/views/realm_help.html
@@ -8,7 +8,7 @@
   <body onload="main()">
     <div id="root">
       <div id="data" data-realm-path="{{ .Data.RealmPath }}" data-remote="{{ .Data.Config.HelpRemote }}" data-chainid="{{ .Data.Config.HelpChainID }}" />
-      <div id="header">{{ template "header_logo" }} {{ template "header_buttons" }}</div>
+      <div id="header">{{ template "logo" }} {{ template "header_buttons" }}</div>
       <div class="inline-list">
         <span id="logo_path"> <a href="{{ .Data.DirPath }}">{{ .Data.DirPath }}</a>?help </span>
       </div>

diff --git a/gno.land/pkg/gnoweb/views/realm_render.html b/gno.land/pkg/gnoweb/views/realm_render.html
@@ -7,7 +7,7 @@
   </head>
   <body onload="main()">
     <div id="root">
-      <div id="header">{{ template "header_logo" }} {{ template "header_buttons" }}</div>
+      <div id="header">{{ template "logo" }} {{ template "header_buttons" }}</div>
       <div class="inline-list">
         <span id="logo_path"
           ><a href="/r/{{ .Data.RealmName }}">/r/{{ .Data.RealmName }}</a>