blog

Log | Files | Refs

header.css (1556B)

      1 .header-nav {
      2     display: flex;
      3     flex-wrap: wrap;
      4     justify-content: space-between;
      5     max-width: calc(var(--nav-width) + var(--gap) * 2);
      6     margin: auto;
      7     line-height: var(--header-height);
      8     padding: 0 var(--gap);
      9     column-gap: var(--gap);
     10 }
     11 
     12 .header-nav a {
     13     display: block;
     14 }
     15 
     16 .logo,
     17 .menu {
     18     display: flex;
     19 }
     20 
     21 .logo {
     22     align-items: center;
     23     column-gap: 0.55rem;
     24     flex-wrap: wrap;
     25 }
     26 
     27 .logo a {
     28     font-size: 24px;
     29     font-weight: 700;
     30     display: flex;
     31     align-items: center;
     32     column-gap: 0.55rem;
     33 }
     34 
     35 .logo a img,
     36 .logo a svg {
     37     pointer-events: none;
     38     border-radius: 6px;
     39 }
     40 
     41 .theme-toggle {
     42     padding: 0 0.4rem;
     43 }
     44 
     45 [data-theme="dark"] .moon {
     46     display: none;
     47 }
     48 
     49 [data-theme="light"] .sun {
     50     display: none;
     51 }
     52 
     53 .logo-switches {
     54     display: inline-flex;
     55     gap: 0.4rem;
     56     align-items: inherit;
     57     min-height: stretch;
     58     flex-wrap: inherit;
     59 }
     60 
     61 .logo-switches>* {
     62     min-height: inherit;
     63     align-items: center;
     64     display: inline-flex;
     65 }
     66 
     67 .nav-sep {
     68     color: var(--secondary);
     69 }
     70 
     71 .lang-menu * {
     72     display: inherit;
     73     min-height: inherit;
     74     align-items: inherit;
     75 }
     76 
     77 .lang-menu a {
     78     font-size: 1rem;
     79     font-weight: 500;
     80     padding: 0 0.4rem;
     81     display: inline-flex
     82 }
     83 
     84 .menu {
     85     list-style: none;
     86     word-break: keep-all;
     87     overflow-x: auto;
     88     white-space: nowrap;
     89     column-gap: var(--gap);
     90 }
     91 
     92 .menu a {
     93     font-size: 16px;
     94 }
     95 
     96 .menu .active {
     97     font-weight: 500;
     98     text-decoration: underline;
     99     text-underline-offset: 0.3rem;
    100     text-decoration-thickness: 2px;
    101 }