ezup.dev

Source Code of Dash Eclipse's Personal Site (ezup.dev)
git clone git://ezup.dev/ezup.dev.git
Log | Files | Refs | README | LICENSE

topnav.css (1404B)

      1@font-face {
      2  font-family: Clear Sans;
      3  src: url(/fonts/ClearSans-Regular.woff2);
      4}
      5body {
      6  margin: 0;
      7}
      8/* Responsive Topnav https://www.w3schools.com/css/css_navbar_horizontal.asp */
      9ul.topnav {
     10  position: -webkit-sticky; /* Safari */
     11  position: sticky;
     12  top: 0;
     13  list-style-type: none;
     14  margin: 0;
     15  padding: 0;
     16  overflow: hidden;
     17  border-bottom: 1px solid #e0e0e0;
     18  background-color: #ffffff;
     19  line-height: 0.9em;
     20}
     21ul.topnav li {
     22  float: left;
     23  text-align: center;
     24  margin: 0;
     25  line-height: 0.7;
     26}
     27ul.topnav li a {
     28  font-family: 'Clear Sans', sans-serif;
     29  display: block;
     30  color: gray;
     31  text-align: center;
     32  text-decoration: none;
     33  padding: 0.8em 0.6em 0.6em 0.6em;
     34}
     35ul.topnav li a:hover:not(.active) {
     36  color: #757575;
     37  border-bottom: 3px solid #bdbdbd;
     38}
     39ul.topnav li a.active {
     40  color: #757575;
     41  border-bottom: 0.2em solid #757575;
     42}
     43ul.topnav li.right {
     44  float: right;
     45}
     46@media screen and (max-width: 609px) {
     47/*   ul.topnav li.right, */
     48/*   ul.topnav li {float: none;} */
     49  ul.topnav {line-height: 1.2em;}
     50  ul.topnav li.home {width: 26.2%;}
     51  ul.topnav li {width: 17.5%;}
     52  ul.topnav li.right {width: 21.3%;}
     53  ul.topnav li a {font-size: 20px;}
     54}
     55@media screen and (min-width: 610px) {
     56  ul.topnav li {padding: 0 0.3em; width: 100px;}
     57  ul.topnav li.home {padding: 0 1.8em 0 1.8em;}
     58  ul.topnav li.right {padding: 0 1em 0 0;}
     59  ul.topnav li a {font-size: 21px;}
     60}