Align share page branding with editor and home screen (microsoft#8233)

shakao · web-flow · commit 9ba08cc4eeec · 2021-06-10T16:45:55.000-07:00
diff --git a/docfiles/script-page.css b/docfiles/script-page.css
@@ -49,9 +49,12 @@ body#root.share-page .ui.mini.image.mclogo {
     align-items: center;
 }
 
+.page-header-item .logo.organization {
+    display: flex;
+    flex-shrink: 0;
+}
+
 .page-header-content {
-    /* aligns with edge of embedded simulator */
-    padding-left: 10px;
     max-width: 50%;
     flex-shrink: 1;
 }
@@ -60,9 +63,28 @@ body#root.share-page .ui.mini.image.mclogo {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    margin: 0 1rem;
 }
 
-.show-code-toggle {
+.page-header-content .ui.button {
+    flex-shrink: 0;
+}
+
+.page-header-product {
+    font-family: Segoe UI, Tahoma, Geneva, Verdana;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.page-header-product::before {
+    position: relative;
+    height: 1.5rem;
+    border-left: 2px solid #000;
+    content: " ";
+    margin-right: 0.9rem;
+}
+
+.page-header-spacer {
     flex-grow: 1;
     padding-left: 1rem;
 }
@@ -123,6 +145,10 @@ body#root.share-page .ui.mini.image.mclogo {
 
 /* tablet */
 @media only screen and (max-width: 768px) {
+    .page-header-product {
+        display: none;
+    }
+
     body#root.share-page #pagemenu {
         height: 2.8rem;
         min-height: 2.8rem !important;
@@ -134,8 +160,7 @@ body#root.share-page .ui.mini.image.mclogo {
 
 @media only screen and (min-width: 769px) {
     .ui.container.mainbody, .page-header .ui.container {
-        padding-left: 1em;
-        padding-right: 1em;
+        padding: 0 0.5rem;
     }
 
     .mainbody {
diff --git a/docfiles/script.html b/docfiles/script.html
@@ -19,21 +19,19 @@
     <div class="showDesktop page-header">
         <div class="ui container">
             <div id="page-header-wrapper">
-                <div class="page-header-item page-header-content no-grow">
-                    <h2 class="ui item header">@title@</h2>
-                </div>
-                <div class="page-header-item show-code-toggle">
-                    <a href="/@versionsuff@#pub:@id@" class="ui tiny button">Edit Code</a>
-                </div>
                 <div class="page-header-item no-grow">
                     <a href="https://makecode.com/" title="Go to Microsoft MakeCode"
                         aria-label="Microsoft MakeCode Logo" role="menuitem" target="blank" rel="noopener"
                         class="ui item logo organization">
-                        <img class="ui logo portrait hide" src="./static/Microsoft-logo_rgb_c-gray.png"
-                            alt="Microsoft MakeCode Logo">
-                        <img class="ui mini image portrait only" src="./static/Microsoft-logo_rgb_c-gray-square.png"
+                        <img class="ui logo" src="./static/Microsoft-logo_rgb_c-gray.png"
                             alt="Microsoft MakeCode Logo">
                     </a>
+                    <div class="page-header-product">MakeCode</div>
+                </div>
+                <div class="page-header-item page-header-spacer"></div>
+                <div class="page-header-item page-header-content no-grow">
+                    <h2 class="ui item header">@title@</h2>
+                    <a href="/@versionsuff@#pub:@id@" class="ui tiny button">Edit Code</a>
                 </div>
             </div>
         </div>
