Sfoglia il codice sorgente

adds header & navbar styling

rosenclosed 2 anni fa
parent
commit
87c4ce9e41
5 ha cambiato i file con 191 aggiunte e 4 eliminazioni
  1. 179 1
      src/style/main.css
  2. 1 1
      src/style/main.css.map
  3. 1 1
      src/style/main.min.css
  4. 1 1
      src/style/main.min.css.map
  5. 9 0
      src/style/main.scss

+ 179 - 1
src/style/main.css

@@ -1 +1,179 @@
-/*# sourceMappingURL=main.css.map */
+@charset "UTF-8";
+body {
+  padding: 0 0 0 0;
+  margin: 0 0 0 0;
+}
+
+#nav-container {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: -1.875em;
+}
+
+#menu {
+  background: #222222;
+  color: #fff;
+  height: 3.75em;
+  padding-left: 28px;
+  border-radius: 1.875em;
+}
+
+#menu ul,
+#menu li {
+  margin: 0 auto;
+  padding: 0;
+  list-style: none;
+}
+
+#menu ul {
+  width: 100%;
+}
+
+#menu li {
+  float: left;
+  display: inline;
+  position: relative;
+}
+
+#menu a {
+  display: block;
+  line-height: 60px;
+  padding: 0 14px;
+  text-decoration: none;
+  color: #ffffff;
+  font-size: 16px;
+}
+
+#menu a.dropdown-arrow:after {
+  content: "⏷";
+  margin-left: 5px;
+}
+
+#menu li a:hover {
+  color: #ffffff;
+  background: #0f4d8b;
+}
+
+#menu input {
+  display: none;
+  margin: 0;
+  padding: 0;
+  height: 60px;
+  width: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+#menu label {
+  display: none;
+  line-height: 60px;
+  text-align: center;
+  position: absolute;
+  left: 35px;
+}
+
+#menu label:before {
+  font-size: 1.6em;
+  content: "≡";
+  margin-left: 20px;
+}
+
+#menu ul.sub-menus {
+  height: auto;
+  overflow: hidden;
+  width: 170px;
+  background: #444444;
+  position: absolute;
+  z-index: 99;
+  display: none;
+}
+
+#menu ul.sub-menus li {
+  display: block;
+  width: 100%;
+}
+
+#menu ul.sub-menus a {
+  color: #ffffff;
+  font-size: 16px;
+}
+
+#menu li:hover ul.sub-menus {
+  display: block;
+}
+
+#menu ul.sub-menus a:hover {
+  background: #0f4d8b;
+  color: #ffffff;
+}
+
+@media screen and (max-width: 800px) {
+  #menu {
+    position: relative;
+  }
+  #menu ul {
+    background: #111;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: 0;
+    z-index: 3;
+    height: auto;
+    display: none;
+  }
+  #menu ul.sub-menus {
+    width: 100%;
+    position: static;
+  }
+  #menu ul.sub-menus a {
+    padding-left: 30px;
+  }
+  #menu li {
+    display: block;
+    float: none;
+    width: auto;
+  }
+  #menu input,
+  #menu label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+  }
+  #menu input {
+    z-index: 4;
+  }
+  #menu input:checked + label {
+    color: white;
+  }
+  #menu input:checked + label:before {
+    content: "×";
+  }
+  #menu input:checked ~ ul {
+    display: block;
+  }
+}
+header #hero-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  background-color: #0f4d8b;
+  color: #ffffff;
+  padding-bottom: 2.5em;
+}
+header #hero-container #hero-img svg path {
+  fill: #ffffff !important;
+}
+header #hero-container #hero-text {
+  text-align: center;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}/*# sourceMappingURL=main.css.map */

+ 1 - 1
src/style/main.css.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"main.css"}
+{"version":3,"sources":["main.css","main.scss","_header.scss","_navbar.scss","_text.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACEhB;EACI,gBAAA;EACA,eAAA;ADAJ;;AEJA;EACI,UAAA;EACA,iBAAA;EACA,kBAAA;EACA,oBAAA;AFOJ;;AGXA;EACI,mBAAA;EACA,WAAA;EACA,cAAA;EACA,kBAAA;EACA,sBAAA;AHcJ;;AGZA;;EAEI,cAAA;EACA,UAAA;EACA,gBAAA;AHeJ;;AGbA;EACI,WAAA;AHgBJ;;AGdA;EACI,WAAA;EACA,eAAA;EACA,kBAAA;AHiBJ;;AGfA;EACI,cAAA;EACA,iBAAA;EACA,eAAA;EACA,qBAAA;EACA,cAAA;EACA,eAAA;AHkBJ;;AGhBA;EACI,YAAA;EACA,gBAAA;AHmBJ;;AGjBA;EACI,cAAA;EACA,mBAAA;AHoBJ;;AGlBA;EACI,aAAA;EACA,SAAA;EACA,UAAA;EACA,YAAA;EACA,WAAA;EACA,UAAA;EACA,eAAA;AHqBJ;;AGnBA;EACI,aAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;AHsBJ;;AGpBA;EACI,gBAAA;EACA,YAAA;EACA,iBAAA;AHuBJ;;AGrBA;EACI,YAAA;EACA,gBAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,aAAA;AHwBJ;;AGtBA;EACI,cAAA;EACA,WAAA;AHyBJ;;AGvBA;EACI,cAAA;EACA,eAAA;AH0BJ;;AGxBA;EACI,cAAA;AH2BJ;;AGzBA;EACI,mBAAA;EACA,cAAA;AH4BJ;;AG1BA;EACI;IACI,kBAAA;EH6BN;EG3BE;IACI,gBAAA;IACA,kBAAA;IACA,SAAA;IACA,QAAA;IACA,OAAA;IACA,UAAA;IACA,YAAA;IACA,aAAA;EH6BN;EG3BE;IACI,WAAA;IACA,gBAAA;EH6BN;EG3BE;IACI,kBAAA;EH6BN;EG3BE;IACI,cAAA;IACA,WAAA;IACA,WAAA;EH6BN;EG3BE;;IAEI,kBAAA;IACA,MAAA;IACA,OAAA;IACA,cAAA;EH6BN;EG3BE;IACI,UAAA;EH6BN;EG3BE;IACI,YAAA;EH6BN;EG3BE;IACI,YAAA;EH6BN;EG3BE;IACI,cAAA;EH6BN;AACF;AEjJI;EACI,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,mBAAA;EACA,yBAAA;EACA,cAAA;EACA,qBAAA;AFmJR;AE/IgB;EACI,wBAAA;AFiJpB;AE5IQ;EACI,kBAAA;AF8IZ;;AI1KA;EACI,kBAAA;AJ6KJ;;AI1KA;EACI,mBAAA;AJ6KJ","file":"main.css"}

+ 1 - 1
src/style/main.min.css

@@ -1 +1 @@
-/*# sourceMappingURL=main.min.css.map */
+body{padding:0 0 0 0;margin:0 0 0 0}#nav-container{width:90%;margin-left:auto;margin-right:auto;margin-top:-1.875em}#menu{background:#222;color:#fff;height:3.75em;padding-left:28px;border-radius:1.875em}#menu ul,#menu li{margin:0 auto;padding:0;list-style:none}#menu ul{width:100%}#menu li{float:left;display:inline;position:relative}#menu a{display:block;line-height:60px;padding:0 14px;text-decoration:none;color:#fff;font-size:16px}#menu a.dropdown-arrow:after{content:"⏷";margin-left:5px}#menu li a:hover{color:#fff;background:#0f4d8b}#menu input{display:none;margin:0;padding:0;height:60px;width:100%;opacity:0;cursor:pointer}#menu label{display:none;line-height:60px;text-align:center;position:absolute;left:35px}#menu label:before{font-size:1.6em;content:"≡";margin-left:20px}#menu ul.sub-menus{height:auto;overflow:hidden;width:170px;background:#444;position:absolute;z-index:99;display:none}#menu ul.sub-menus li{display:block;width:100%}#menu ul.sub-menus a{color:#fff;font-size:16px}#menu li:hover ul.sub-menus{display:block}#menu ul.sub-menus a:hover{background:#0f4d8b;color:#fff}@media screen and (max-width: 800px){#menu{position:relative}#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}#menu ul.sub-menus{width:100%;position:static}#menu ul.sub-menus a{padding-left:30px}#menu li{display:block;float:none;width:auto}#menu input,#menu label{position:absolute;top:0;left:0;display:block}#menu input{z-index:4}#menu input:checked+label{color:#fff}#menu input:checked+label:before{content:"×"}#menu input:checked~ul{display:block}}header #hero-container{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;background-color:#0f4d8b;color:#fff;padding-bottom:2.5em}header #hero-container #hero-img svg path{fill:#fff !important}header #hero-container #hero-text{text-align:center}.italic{font-style:italic}.oblique{font-style:oblique}/*# sourceMappingURL=main.min.css.map */

+ 1 - 1
src/style/main.min.css.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"main.min.css"}
+{"version":3,"sources":["main.min.css","main.scss","_header.scss","_navbar.scss","_text.scss"],"names":[],"mappings":"AAAA,KCEA,eACI,CAAA,cACA,CAAA,eCJJ,SACI,CAAA,gBACA,CAAA,iBACA,CAAA,mBACA,CAAA,MCJJ,eACI,CAAA,UACA,CAAA,aACA,CAAA,iBACA,CAAA,qBACA,CAAA,kBAEJ,aAEI,CAAA,SACA,CAAA,eACA,CAAA,SAEJ,UACI,CAAA,SAEJ,UACI,CAAA,cACA,CAAA,iBACA,CAAA,QAEJ,aACI,CAAA,gBACA,CAAA,cACA,CAAA,oBACA,CAAA,UACA,CAAA,cACA,CAAA,6BAEJ,WACI,CAAA,eACA,CAAA,iBAEJ,UACI,CAAA,kBACA,CAAA,YAEJ,YACI,CAAA,QACA,CAAA,SACA,CAAA,WACA,CAAA,UACA,CAAA,SACA,CAAA,cACA,CAAA,YAEJ,YACI,CAAA,gBACA,CAAA,iBACA,CAAA,iBACA,CAAA,SACA,CAAA,mBAEJ,eACI,CAAA,WACA,CAAA,gBACA,CAAA,mBAEJ,WACI,CAAA,eACA,CAAA,WACA,CAAA,eACA,CAAA,iBACA,CAAA,UACA,CAAA,YACA,CAAA,sBAEJ,aACI,CAAA,UACA,CAAA,qBAEJ,UACI,CAAA,cACA,CAAA,4BAEJ,aACI,CAAA,2BAEJ,kBACI,CAAA,UACA,CAAA,qCAEJ,MACI,iBACI,CAAA,SAEJ,eACI,CAAA,iBACA,CAAA,QACA,CAAA,OACA,CAAA,MACA,CAAA,SACA,CAAA,WACA,CAAA,YACA,CAAA,mBAEJ,UACI,CAAA,eACA,CAAA,qBAEJ,iBACI,CAAA,SAEJ,aACI,CAAA,UACA,CAAA,UACA,CAAA,wBAEJ,iBAEI,CAAA,KACA,CAAA,MACA,CAAA,aACA,CAAA,YAEJ,SACI,CAAA,0BAEJ,UACI,CAAA,iCAEJ,WACI,CAAA,uBAEJ,aACI,CAAA,CAAA,uBDnHJ,YACI,CAAA,qBACA,CAAA,gBACA,CAAA,kBACA,CAAA,wBACA,CAAA,UACA,CAAA,oBACA,CAAA,0CAIQ,oBACI,CAAA,kCAKZ,iBACI,CAAA,QE5BZ,iBACI,CAAA,SAGJ,kBACI","file":"main.min.css"}

+ 9 - 0
src/style/main.scss

@@ -1 +1,10 @@
 @charset "utf-8";
+
+body {
+    padding: 0 0 0 0;
+    margin: 0 0 0 0;
+}
+
+@import "header";
+
+@import "text";