style: update Mr.Docs branding and enhance UI elements

Author: julioest

docs/website/data.json

@@ -84,7 +84,9 @@
   "panels": [
     {
       "description": "Mr.Docs understands C++ features such as attributes and noexcept functions.",
-      "source": "terminate.cpp"
+      "source": "terminate.cpp",
+      "imageClass": "pointing",
+      "boxClass": "box3 box-shape3 box270"
     },
     {
       "description": "Specially formatted comments are rendered to form a reference as part of documentation.",

docs/website/index.html

@@ -8,15 +8,15 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="msapplication-TileColor" content="#11191f">
-    <meta name="application-name" content="MrDocs">
-    <title>MrDocs</title>
-    <meta name="description" content="MrDocs is a C++ documentation generator for your projects.">
+    <meta name="application-name" content="Mr.Docs">
+    <title>Mr.Docs</title>
+    <meta name="description" content="Mr.Docs is a C++ documentation generator for your projects.">
     <link rel="canonical" href="https://www.mrdocs.com">
     <meta name="robots" content="index, follow">
-    <meta property="og:title" content="MrDocs">
-    <meta property="og:description" content="MrDocs is a C++ documentation generator for your projects.">
+    <meta property="og:title" content="Mr.Docs">
+    <meta property="og:description" content="Mr.Docs is a C++ documentation generator for your projects.">
     <meta property="og:url" content="https://www.mrdocs.com">
-    <meta property="og:site_name" content="MrDocs">
+    <meta property="og:site_name" content="Mr.Docs">
     <meta property="og:type" content="website">
     <meta name="twitter:card" content="summary_large_image">
     <meta property="twitter:domain" content="https://www.mrdocs.com">
@@ -58,7 +58,7 @@
         <path d="M687.9 399.8c-19.7 7.5-38.1 18.2-53.7 32.4-1.7 1.3-3.6 3.2-6 2.9l1.3-10.2c-.9-.2-2.4 0-3.1.5-.1 0 0 0 0 0 .5-.2 1.1-.6 1.7-1 17.8-12.3 38.4-20.9 59.3-25.7l.3.9ZM646 410.1c-19.1 8.9-36.7 20.9-51.3 36.1-1.6 1.5-3.3 3.4-5.7 3.4l.6-10.3c-.9 0-2.4.2-3.1.7-.1.1 0 0 0 0 .5-.2 1-.6 1.7-1.1 16.9-13.5 36.8-23.5 57.4-29.8l.4.9ZM741.6 399.6l-22.3 6.1c-5.1 1.6-11.1 2.6-15.6 5.2-1.1.8-2.8 2.3-4.4 3.5l-3.7-5.5c2.6-1.5 5.2-3.6 8.3-4.3 4.8-1.2 9.8-1.8 14.5-2.6l22.9-3.3.2 1ZM327.1 630c-5 39.2-3.9 78.8-.3 118l-14.5.5c.9-39.9 4.3-80 13.8-118.7l1 .2Z"/>
     </g>
 </svg>
-<span class="logo-text">MrDocs</span>
+<span class="logo-text">Mr.Docs</span>
             </a>
         </div>
         <div class="nav-section">
@@ -80,8 +80,8 @@
     <header>
         <div class="container">
             <div class="header-content">
-                <h1>MrDocs</h1>
-                <p>MrDocs is a C++ documentation generator for your projects.</p>
+                <h1>Mr.Docs</h1>
+                <p>Mr.Docs is a C++ documentation generator for your projects.</p>
                 <div class="header-cta">
                     <a href="docs/" class="secondary" role="button" aria-label="Documentation">Get started</a>
                     <a href="docs/mrdocs/install.html" class="contrast outline" role="button" aria-label="Download">Download</a>
@@ -111,7 +111,7 @@ <h1>MrDocs</h1>
                     <div class="principles-content">
                         <hgroup>
                             <h2>Simple code, simple documentation</h2>
-                            <h3>MrDocs understands C++ so you can focus on keeping the code simple.</h3>
+                            <h3>Mr.Docs understands C++ so you can focus on keeping the code simple.</h3>
                         </hgroup>        
                     </div>
                 </div>
@@ -159,16 +159,17 @@ <h4>Customizable</h4>
                     </div>
                 </div>
             </div>
-        </section>
-        <section id="features" class="features">
-            <div class="container">
-                <hgroup>
-                    <h2>More Code, Fewer Workarounds</h2>
-                    <h3>MrDocs let's you keep the code simple and maintainable.</h3>
-                </hgroup>
+        </div>
+    </section>
+    <section id="features">
+        <div class="container">
+            <hgroup>
+                <h2>More Code, Fewer Workarounds</h2>
+                <h3>Mr.Docs let's you keep the code simple and maintainable.</h3>
+            </hgroup>
                 <div class="snippet-documentation-panel">
                     <ul class="check">
-                        <li>MrDocs understands C++ features such as attributes and noexcept functions.</li>
+                        <li>Mr.Docs understands C++ features such as attributes and noexcept functions.</li>
                     </ul>
                     <div class="panel-container">
                         <div class="snippet-panel">
@@ -520,13 +521,12 @@ <h3>Parameters</h3>
                         </div>
                     </div>
                 </div>
-            </div>
-        </section>
-        <section id="star" data-theme="light" aria-label="Star MrDocs on GitHub">
-            <div class="container">
-                <p>Give us a Star on GitHub:
-                    <iframe
-                        src="https://ghbtns.com/github-btn.html?user=cppalliance&amp;repo=mrdocs&amp;type=star&amp;count=true&amp;size=large"
+        </div>
+    </section>
+    <section id="star" data-theme="light" aria-label="Star Mr.Docs on GitHub">
+        <div class="container">
+            <p>Give us a Star on GitHub:
+                <iframe src="https://ghbtns.com/github-btn.html?user=cppalliance&amp;repo=mrdocs&amp;type=star&amp;count=true&amp;size=large"
                         frameborder="0" scrolling="0" width="160" height="30" title="GitHub"></iframe>
                 </p>
             </div>

docs/website/index.html.hbs

@@ -116,7 +116,7 @@
             </div>
         </div>
     </section>
-    <section id="examples" data-theme="light">
+    {{!-- <section id="examples" data-theme="light">
         <div class="container">
             <hgroup>
                 <h2>Examples</h2>
@@ -138,7 +138,7 @@
                 </div>
             </div>
         </div>
-    </section>
+    </section> --}}
     <section id="features">
         <div class="container">
             <hgroup>

docs/website/styles.css

@@ -3093,6 +3093,16 @@ header .header-image {
     background-color: rgba(255, 255, 255, 0.25);
 }
 
+.header-cta a[aria-label="Documentation"]:hover {
+    background-color: rgba(255, 255, 255, 0.4);
+    transform: translateY(-1px);
+}
+
+.header-cta a[aria-label="Download"]:hover {
+    background-color: rgba(255, 255, 255, 0.15);
+    transform: translateY(-1px);
+}
+
 /* ===========================
    Principles Styles
 =========================== */