☰

GreasyFork Header Style Fix

To fix GreasyFork Header Style

当前为 2023-08-18 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           GreasyFork Header Style Fix
  3. @namespace      github.com/openstyles/stylus
  4. @version        1.0.0
  5. @description    To fix GreasyFork Header Style
  6. @author         CY Fung
  7. @license        MIT
  8. ==/UserStyle== */
  9. @-moz-document domain("greasyfork.org") {
  10.     /* Insert code here... */
  11.     html {
  12.         --main-header-scale: 1.0;
  13.     }
  14.  
  15.     #site-nav {
  16.         font-size: min(16px, calc(20px * var(--main-header-scale)));
  17.     }
  18.  
  19.     #site-name {
  20.         display: flex;
  21.         flex-direction: row;
  22.         flex-wrap: nowrap;
  23.         margin: 0;
  24.     }
  25.     #site-name-text h1 {
  26.  
  27.         font-size: calc(38pt * var(--main-header-scale));
  28.         white-space: nowrap;
  29.         margin: 0;
  30.     }
  31.  
  32.     #site-name-text {
  33.         margin: 0;
  34.     }
  35.  
  36.     #main-header > .width-constraint:only-child {
  37.         display: flex;
  38.         place-items: center;
  39.         padding-top: calc(8px * var(--main-header-scale));
  40.         padding-bottom: calc(8px * var(--main-header-scale));
  41.         padding-right: calc(24px * var(--main-header-scale));
  42.         padding-left: calc(24px * var(--main-header-scale));
  43.         flex-direction: row;
  44.         margin: 0;
  45.     }
  46.     #site-nav > nav,
  47.     #nav-user-info {
  48.         position: static;
  49.         margin: 0;
  50.     }
  51.  
  52.     #site-nav {
  53.  
  54.         display: flex;
  55.         row-gap: 4px;
  56.         flex-direction: column;
  57.         margin: 0;
  58.     }
  59.     #main-header > .width-constraint:only-child > #site-nav:last-child {
  60.         flex-grow: 1;
  61.         margin: 0;
  62.     }
  63.  
  64.     html #site-name img {
  65.         width: calc(58px * var(--main-header-scale));
  66.         height: calc(58px * var(--main-header-scale));
  67.         margin: 0;
  68.     }
  69.  
  70.  
  71.     @media screen and (max-width: 768px) {
  72.  
  73.         html {
  74.             --main-header-scale: 0.74;
  75.         }
  76.     }
  77.  
  78.  
  79.  
  80.     @media screen and (max-width: 672px) {
  81.  
  82.         html {
  83.             --main-header-scale: 0.62;
  84.         }
  85.     }
  86. }