github.com/bewolv/gqlgen@v0.10.12/docs/static/main.css (about)

     1  :root {
     2      --font-text: 'Roboto', sans-serif;
     3      --font-heading: 'Work Sans', sans-serif;
     4      --font-code: 'Source Code Pro', monospace;
     5  
     6      --main-bg-color: coral;
     7  
     8      --color-link: #336699;
     9      --color-text: #556;
    10  
    11      --color-heading-text: #445;
    12      --color-heading-background: #e9ebed;
    13  
    14      --color-nav-text: #eee;
    15      --color-nav-background: #0A215C;
    16      --color-nav-active: #284578;
    17  
    18      --color-anchor-default: #DDD;
    19      --color-anchor-hover: #666;
    20  
    21      --color-code-text: #445;
    22      --color-code-background: #f5f9fc;
    23  
    24      --color-blockquote-background: #fffaf3;
    25      --color-blockquote-highlight: rgba(0, 0, 0, 0.1);
    26  
    27      --margin-default: 15px;
    28  }
    29  
    30  html, body, div, span, applet, object, iframe,
    31  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    32  a, abbr, acronym, address, big, cite, code,
    33  del, dfn, em, img, ins, kbd, q, s, samp,
    34  small, strike, strong, sub, sup, tt, var,
    35  b, u, i, center,
    36  dl, dt, dd, ol, ul, li,
    37  fieldset, form, label, legend,
    38  table, caption, tbody, tfoot, thead, tr, th, td,
    39  article, aside, canvas, details, embed,
    40  figure, figcaption, footer, header, hgroup,
    41  menu, nav, output, ruby, section, summary,
    42  time, mark, audio, video {
    43      margin: 0;
    44      padding: 0;
    45      border: 0;
    46      font-size: 100%;
    47      font: inherit;
    48      vertical-align: baseline;
    49  }
    50  /* HTML5 display-role reset for older browsers */
    51  article, aside, details, figcaption, figure,
    52  footer, header, hgroup, menu, nav, section {
    53      display: block;
    54  }
    55  ol, ul {
    56      margin-bottom: var(--margin-default);
    57      list-style: disc;
    58      margin-left: 1.5em;
    59  }
    60  blockquote, q {
    61      quotes: none;
    62  }
    63  blockquote:before, blockquote:after,
    64  q:before, q:after {
    65      content: '';
    66      content: none;
    67  }
    68  table {
    69      border-collapse: collapse;
    70      border-spacing: 0;
    71  }
    72  
    73  body {
    74      font-family: var(--font-text);
    75      font-size: 15px;
    76      line-height: 1.55em;
    77      display: flex;
    78      flex-direction: column;
    79      min-height: 100vh;
    80  }
    81  
    82  a {
    83      color: var(--color-link);
    84      text-decoration: none;
    85  }
    86  
    87  img {
    88      max-width: 100%;
    89  }
    90  
    91  a:hover {
    92      text-decoration: underline;
    93  }
    94  
    95  @media (min-width: 768px) {
    96      body {
    97          display: grid;
    98          grid-template:
    99              'logo header'
   100              'nav content'
   101              'nav footer';
   102          grid-template-columns: 200px 1fr;
   103          grid-template-rows: min-content auto min-content;
   104      }
   105  }
   106  
   107  main {
   108      flex: 1;
   109      padding: 0 20px 20px;
   110      color: var(--color-text);
   111  }
   112  
   113  .content {
   114      position: relative;
   115      grid-area: content;
   116      max-width: 920px;
   117      margin: auto;
   118  }
   119  
   120  main .content {
   121      margin-top: 40px;
   122  }
   123  
   124  header {
   125      grid-area: header;
   126      background: var(--color-heading-background);
   127      padding: 45px 20px;
   128      overflow: hidden;
   129  }
   130  
   131  footer {
   132      padding: 2px;
   133      text-align: center;
   134      font-size: 0.7em;
   135      color: var(--color-heading-text);
   136  }
   137  
   138  h1,h2,h3,h4,h5,h6 {
   139      font-family: var(--font-heading);
   140      color: #445;
   141  }
   142  
   143  h1 {
   144      font-size: 25px;
   145      font-weight: 700;
   146      margin: 15px 0 10px 0;
   147      position: relative;
   148  }
   149  
   150  .description {
   151      font-family: 'Work Sans', sans-serif;
   152      font-size: 18px;
   153      color: var(--color-text);
   154  }
   155  
   156  .header-link {
   157      position: absolute;
   158      top: 0;
   159      right: 0;
   160  }
   161  
   162  h2 {
   163      margin-top: 2em;
   164      margin-bottom: var(--margin-default);
   165      font-size: 19px;
   166      font-weight: 700;
   167  }
   168  
   169  h3 {
   170      margin-top: 1.5em;
   171      margin-bottom: var(--margin-default);
   172      font-size: 16px;
   173      font-weight: 500;
   174  }
   175  
   176  p {
   177      margin-bottom: var(--margin-default);
   178  }
   179  
   180  nav {
   181      grid-area: nav;
   182      color: var(--color-nav-text);
   183      background-color: var(--color-nav-background);
   184      font-family: var(--font-heading);
   185      font-weight: 500;
   186  }
   187  
   188  .menu {
   189  
   190  }
   191  
   192  .menu a {
   193      color: inherit;
   194  }
   195  
   196  .menu a:hover {
   197      text-decoration: none;
   198  }
   199  
   200  .menu-item {
   201      display: block;
   202      padding: 5px 10px;
   203  }
   204  
   205  .submenu .menu-item {
   206      padding: 5px 20px;
   207  }
   208  
   209  .submenu-heading {
   210      margin-top: 15px;
   211  }
   212  
   213  ul.menu {
   214      margin-left:0;
   215      list-style: none;
   216  }
   217  
   218  ul.submenu {
   219      margin-left: 0;
   220      list-style: none;
   221      margin-bottom: 0;
   222  }
   223  
   224  ul.submenu span {
   225      padding: 5px 10px;
   226  }
   227  
   228  ul.menu li.active,
   229  ul.menu a:hover {
   230      background-color: var(--color-nav-active);
   231  }
   232  
   233  .layout--logo {
   234      grid-area: logo;
   235      background-color: var(--color-nav-background);
   236  }
   237  
   238  .logo {
   239      grid-area: logo;
   240      color: #eee;
   241      margin: 15px;
   242      text-align: center;
   243      display: block;
   244  }
   245  
   246  .logo svg {
   247      fill: currentColor;
   248      max-width: 30px;
   249  }
   250  
   251  .logo--name {
   252      vertical-align: top;
   253      height: 100%;
   254      font-size: 30px;
   255  }
   256  
   257  .logo:hover {
   258      text-decoration: none;
   259  }
   260  
   261  code {
   262      padding: 1px 5px;
   263      font-family: var(--font-code);
   264      font-weight: 500;
   265      color: var(--color-code-text);
   266      background-color: var(--color-code-background);
   267      border-radius: 3px;
   268      font-size: 13px;
   269      margin-bottom: var(--margin-default);
   270  }
   271  
   272  strong {
   273      font-weight: 700;
   274  }
   275  
   276  em {
   277      font-style: italic;
   278  }
   279  
   280  .anchor-link {
   281      display: inline-block;
   282  }
   283  
   284  .anchor-link:hover {
   285      text-decoration: none;
   286  }
   287  
   288  .anchor-icon {
   289      fill: var(--color-anchor-default);
   290      display: inline-block;
   291      vertical-align: middle;
   292      padding: 0 5px;
   293      width: 14px;
   294  }
   295  
   296  .anchor-icon:hover {
   297      fill: var(--color-anchor-hover);
   298  }
   299  
   300  @media (min-width: 768px) {
   301      .logo {
   302          margin: 20px 50px;
   303  
   304      }
   305      .logo svg {
   306          max-width: none;
   307          margin: 5px;
   308      }
   309      nav input {
   310          display: none;
   311      }
   312  }
   313  
   314  /* pure css hamburger, adapted from https://codepen.io/erikterwan/pen/EVzeRP */
   315  
   316  @media (max-width: 767px) {
   317      .layout--logo {
   318          z-index: 2;
   319      }
   320  
   321      nav {
   322          -webkit-user-select: none;
   323          user-select: none;
   324  
   325      }
   326  
   327      .hamburger {
   328          position: absolute;
   329          top: 0px;
   330          left: 0px;
   331          margin: 15px;
   332          z-index: 3;
   333      }
   334  
   335      nav input {
   336          display: block;
   337          width: 70px;
   338          height: 70px;
   339          position: absolute;
   340          top: -7px;
   341          left: -5px;
   342  
   343          cursor: pointer;
   344  
   345          opacity: 0; /* hide this */
   346          z-index: 4; /* and place it over the hamburger */
   347  
   348          -webkit-touch-callout: none;
   349      }
   350  
   351      .hamburger span {
   352          display: block;
   353          width: 28px;
   354          height: 4px;
   355          margin: 5px;
   356          position: relative;
   357          background: currentColor;
   358          border-radius: 3px;
   359          z-index: 1;
   360          transform-origin: 0 1.5px;
   361  
   362          transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
   363          background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
   364          opacity 0.55s ease;
   365      }
   366  
   367      nav input:checked ~ .hamburger span {
   368          opacity: 1;
   369          transform: rotate(45deg) translate(-2px, -1px);
   370      }
   371  
   372      nav input:checked ~ .hamburger span:nth-last-child(2) {
   373          opacity: 0;
   374          transform: rotate(0deg) scale(0.2, 0.2);
   375      }
   376  
   377      nav input:checked ~ .hamburger span:nth-last-child(1) {
   378          transform: rotate(-45deg) translate(0, -1px);
   379      }
   380  
   381      .menu {
   382          z-index: 1;
   383          position: absolute;
   384          width: 300px;
   385          height: 100%;
   386          margin: -100px 0 0 -50px;
   387          padding: 150px 0;
   388  
   389          color: var(--color-heading-text);
   390          background-color: var(--color-heading-background);
   391          font-family: var(--font-heading);
   392  
   393          list-style-type: none;
   394          -webkit-font-smoothing: antialiased;
   395          /* to stop flickering of text in safari */
   396  
   397          transform-origin: 0% 0%;
   398          transform: translate(-100%, 0);
   399  
   400          transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
   401      }
   402  
   403      ul.menu li.active,
   404      ul.menu a:hover {
   405          background-color: #d3d5d7;
   406      }
   407  
   408      nav input:checked ~ ul {
   409          transform: none;
   410      }
   411  
   412  }
   413  
   414  
   415  blockquote {
   416      background-color: var(--color-blockquote-background);
   417      border-left-color: var(--color-blockquote-highlight);
   418      border-left-width: 9px;
   419      border-left-style: solid;
   420      padding: 1em 20px 1em 11px;
   421      margin-bottom: var(--margin-default);
   422      margin-left: -20px;
   423      margin-right: -20px;
   424  }
   425  
   426  blockquote p {
   427      margin-bottom: 0;
   428  }
   429  
   430  /* Blockquote headings. */
   431  blockquote p:first-of-type {
   432      font-weight: bold;
   433  }
   434  
   435  blockquote code {
   436      background-color: var(--color-blockquote-highlight);
   437  }
   438  
   439  table {
   440      width: 100%;
   441  }
   442  
   443  td, th {
   444      padding: 0.2em 1em;
   445  }
   446  
   447  tr {
   448      border-bottom: 1px solid var(--color-heading-background);
   449  }
   450  
   451  tr td:first-child, th {
   452      font-weight: bold;
   453  }