github.com/vektah/gqlgen@v0.7.2/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  a:hover {
    88      text-decoration: underline;
    89  }
    90  
    91  @media (min-width: 768px) {
    92      body {
    93          display: grid;
    94          grid-template:
    95              'logo header'
    96              'nav content'
    97              'nav footer';
    98          grid-template-columns: 200px 1fr;
    99          grid-template-rows: min-content auto min-content;
   100      }
   101  }
   102  
   103  main {
   104      flex: 1;
   105      padding: 0 20px 20px;
   106      color: var(--color-text);
   107  }
   108  
   109  .content {
   110      position: relative;
   111      grid-area: content;
   112      max-width: 920px;
   113      margin: auto;
   114  }
   115  
   116  main .content {
   117      margin-top: 40px;
   118  }
   119  
   120  header {
   121      grid-area: header;
   122      background: var(--color-heading-background);
   123      padding: 45px 20px;
   124      overflow: hidden;
   125  }
   126  
   127  footer {
   128      padding: 2px;
   129      text-align: center;
   130      font-size: 0.7em;
   131      color: var(--color-heading-text);
   132  }
   133  
   134  h1,h2,h3,h4,h5,h6 {
   135      font-family: var(--font-heading);
   136      color: #445;
   137  }
   138  
   139  h1 {
   140      font-size: 25px;
   141      font-weight: 700;
   142      margin: 15px 0 10px 0;
   143      position: relative;
   144  }
   145  
   146  .description {
   147      font-family: 'Work Sans', sans-serif;
   148      font-size: 18px;
   149      color: var(--color-text);
   150  }
   151  
   152  .header-link {
   153      position: absolute;
   154      top: 0;
   155      right: 0;
   156  }
   157  
   158  h2 {
   159      margin-top: 2em;
   160      margin-bottom: var(--margin-default);
   161      font-size: 19px;
   162      font-weight: 700;
   163  }
   164  
   165  h3 {
   166      margin-top: 1.5em;
   167      margin-bottom: var(--margin-default);
   168      font-size: 16px;
   169      font-weight: 500;
   170  }
   171  
   172  p {
   173      margin-bottom: var(--margin-default);
   174  }
   175  
   176  nav {
   177      grid-area: nav;
   178      color: var(--color-nav-text);
   179      background-color: var(--color-nav-background);
   180      font-family: var(--font-heading);
   181      font-weight: 500;
   182  }
   183  
   184  .menu {
   185  
   186  }
   187  
   188  .menu a {
   189      color: inherit;
   190  }
   191  
   192  .menu a:hover {
   193      text-decoration: none;
   194  }
   195  
   196  .menu-item {
   197      display: block;
   198      padding: 5px 10px;
   199  }
   200  
   201  .submenu .menu-item {
   202      padding: 5px 20px;
   203  }
   204  
   205  .submenu-heading {
   206      margin-top: 15px;
   207  }
   208  
   209  ul.menu {
   210      margin-left:0;
   211      list-style: none;
   212  }
   213  
   214  ul.submenu {
   215      margin-left: 0;
   216      list-style: none;
   217      margin-bottom: 0;
   218  }
   219  
   220  ul.submenu span {
   221      padding: 5px 10px;
   222  }
   223  
   224  ul.menu li {
   225      font-weight: 400;
   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          font-weight: 500;
   393  
   394          list-style-type: none;
   395          -webkit-font-smoothing: antialiased;
   396          /* to stop flickering of text in safari */
   397  
   398          transform-origin: 0% 0%;
   399          transform: translate(-100%, 0);
   400  
   401          transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
   402      }
   403  
   404      ul.menu li.active,
   405      ul.menu a:hover {
   406          background-color: #d3d5d7;
   407      }
   408  
   409      nav input:checked ~ ul {
   410          transform: none;
   411      }
   412  
   413  }
   414  
   415  
   416  blockquote {
   417      background-color: var(--color-blockquote-background);
   418      border-left-color: var(--color-blockquote-highlight);
   419      border-left-width: 9px;
   420      border-left-style: solid;
   421      padding: 1em 20px 1em 11px;
   422      margin-bottom: var(--margin-default);
   423      margin-left: -20px;
   424      margin-right: -20px;
   425  }
   426  
   427  blockquote p {
   428      margin-bottom: 0;
   429  }
   430  
   431  /* Blockquote headings. */
   432  blockquote p:first-of-type {
   433      font-weight: bold;
   434  }
   435  
   436  blockquote code {
   437      background-color: var(--color-blockquote-highlight);
   438  }