Resized the banner bar using vh instead of pixels. Resized the sidebar using vw...

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 5c6f8a3f6b035503f3416c95cd8ccab47d19cda8..3155e7c68ba54a12e89405b80e671fea5bb9b3f8 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -12,8 +12,8 @@
 
 .ctdl-main-grid-container {                    /* This grid contains the "holy grail layout" of the screen */
        display: grid;
-       grid-template-rows: 100px auto;
-       grid-template-columns: 200px auto;
+       grid-template-rows: 5vh auto;
+       grid-template-columns: 12vw auto;
        grid-template-areas:
                'header header'
                'menu main';
@@ -123,6 +123,14 @@ html,body,h1,h2,h3,h4,h5 {
        color: #FFFFFF;
 }
 
+.ctdl-logo-img {
+       background-color: White;
+       border-radius: 5px;
+       padding-bottom: 3px;
+       padding-left: 3px;
+       padding-right: 3px;
+}
+
 .ctdl-forum-reading-pane {
        background-color: DarkSlateGrey;        /* Background behind the message boxes */
 }

diff --git a/webcit-ng/static/index.html b/webcit-ng/static/index.html
index 087820466bc61de0af2141690c1c9d577ac8c8be..28a4e90597d7f1096d3e9aebc991a102c68e250a 100644 (file)
--- a/webcit-ng/static/index.html
+++ b/webcit-ng/static/index.html
@@ -19,12 +19,13 @@
 
 <div class="ctdl-main-grid-container">
 
-       <!-- The style for these appears in webcit.css and was inspired by https://www.w3schools.com/css/css_sidebar_horizontal.asp -->
        <div class="ctdl-grid-banner-item" id="banner">
                <!-- These items float to the LEFT side of the banner -->
                <ul class="ctdl-banner-buttons" style="float:left">
                        <!-- <li id="ctdl-sidebar-open" onClick="sidebar_open();"><i class="fa fa-bars"></i>Menu</li> -->
-                       <li id="ctdl-logo">CITADEL</li>
+                       <li id="ctdl-logo" onclick=window.open("https://www.citadel.org");>
+                               <img class="ctdl-logo-img" src="/ctdl/s/images/citadel-logo.gif" alt="CITADEL">
+                       </li>
                        <li id="ctdl_banner_title">---</li>
                </ul>
                <!-- These items float to the RIGHT side of the banner -->