CSS Changes

Make header more compact on mobile and join more lines
bgiesing · Aug 13, 2015 · 123850f · 123850f
1 parent 65ccb69
commit 123850f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 47 deletions.
diff --git a/assets/styles.css b/assets/styles.css
@@ -1,24 +1,12 @@
-html, body {
-  font-family: 'Roboto', 'Helvetica', sans-serif;
-  margin: 0;
-  padding: 0;
-}
+html, body { font-family:'Roboto','Helvetica',sans-serif;margin:0;padding:0; }
 .mdl-demo .mdl-layout__header-row { padding-left:40px; }
 .mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 { font-size:inherit; }
 .mdl-demo .mdl-layout__tab-bar-button { display:none; }
 .mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar .mdl-button { display:none; }
 .mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,
-.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {
-  overflow: visible;
-}
+.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container { overflow:visible; }
 .mdl-demo .mdl-layout__tab-bar-container { height:64px; }
-.mdl-demo .mdl-layout__tab-bar {
-  padding: 0;
-  padding-left: 16px;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-}
+.mdl-demo .mdl-layout__tab-bar { padding:0;padding-left:16px;box-sizing:border-box;height:100%;width:100%; }
 .mdl-demo .mdl-layout__tab-bar .mdl-layout__tab { height:64px;line-height:64px; }
 .mdl-demo .mdl-layout__tab-bar .mdl-layout__tab.is-active::after { background-color: purple;height: 4px; }
 .mdl-demo main > .mdl-layout__tab-panel {padding:8px; }
@@ -35,27 +23,13 @@ html, body {
           flex-direction: column;
 }
 .mdl-demo .mdl-card > * { height:auto; }
-.mdl-demo .mdl-card .mdl-card__supporting-text {
-  margin: 40px;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  padding: 0;
-  color: inherit;
-  width: calc(100% - 80px);
-}
+.mdl-demo .mdl-card .mdl-card__supporting-text { margin:40px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:0;color:inherit;width:calc(100%-80px); }
 .mdl-demo.mdl-demo .mdl-card__supporting-text h4 { margin-top:0;margin-bottom:20px; }
 .mdl-demo .mdl-card__actions { margin:0;padding:4px 33px;color:inherit; }
 .mdl-demo .mdl-card__actions a { color:#00BCD4;margin:0; }
 .mdl-demo .mdl-card__actions a:hover,.mdl-demo .mdl-card__actions a:active { color:inherit;background-color:transparent; }
-.mdl-demo .mdl-card__supporting-text + .mdl-card__actions {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-.mdl-demo .mdl-layout__content section:not(:last-of-type) {
-  position: relative;
-  margin-bottom: 48px;
-}
+.mdl-demo .mdl-card__supporting-text + .mdl-card__actions { border-top:1px solid rgba(0, 0, 0, 0.12); }
+.mdl-demo .mdl-layout__content section:not(:last-of-type) { position:relative;margin-bottom:48px; }
 .mdl-demo section.section--center { max-width: 1000px; }
 .mdl-demo section > header{
   display: -webkit-box;
@@ -71,20 +45,9 @@ html, body {
       -ms-flex-pack: center;
           justify-content: center;
 }
-.mdl-demo section > .section__play-btn {
-  min-height: 100px;
-}
+.mdl-demo section > .section__play-btn { min-height:100px; }
 .mdl-demo section > button { position:absolute;z-index:99;top:8px;right:8px; }
-.mdl-demo section .section__text {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -webkit-flex-shrink: 0;
-      -ms-flex-negative: 0;
-          flex-shrink: 0;
-  padding-top: 8px;
-}
+.mdl-demo section .section__text { -webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:8px; }
 .mdl-demo section .section__text h5 { font-size:inherit;margin:0;margin-bottom:0.5em; }
 .mdl-demo section .section__text a { text-decoration:none; }
 .mdl-demo section.section--footer { padding:64px 0;margin: 0 -8px -8px -8px; }
@@ -106,7 +69,7 @@ main { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYA
 .mdl-logo { margin-bottom:0px; }
 .mdl-layout__header-row { height:43px; }
 .mdl-layout__header-row .center { margin-top:-10px; }
-@media screen and (max-width: 1024px) { .mdl-layout__header-row { height:30px; } }
+@media screen and (max-width: 1024px) { .mdl-layout__header-row { height:25px; } .mdl-demo .mdl-layout__tab-bar-container { height:50px; } .mdl-demo .mdl-layout__tab-bar .mdl-layout__tab { height:50px;line-height:50px; } }
 .mdi.md-18 { font-size:18px; }
 .mdi.md-24 { font-size:24px; }
 .mdi.md-36 { font-size:36px; }

diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
     <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
       <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
         <div class="mdl-layout__header-row"></div><div class="mdl-layout__header-row mdl-cell--hide-desktop">
-          <img src="../assets/logo.png" width="165" height="165" class="center">
+          <img src="../assets/logo.png" width="130" height="130" class="center">
         </div>
         <div class="mdl-layout__header-row mdl-cell--hide-phone mdl-cell--hide-tablet">
           <img src="../assets/logo.png" width="220" height="220" class="center">