index.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. body, html {
  2. color: #333538;
  3. font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
  4. line-height: 1.6;
  5. padding: 0;
  6. margin: 0;
  7. }
  8. body {
  9. max-width: 800px;
  10. margin: auto;
  11. padding: 16px 32px;
  12. }
  13. a {
  14. color: #f27173;
  15. text-decoration: none;
  16. }
  17. a:hover {
  18. color: #e25f5f;
  19. text-decoration: underline;
  20. }
  21. .btn {
  22. background-color: #aaa;
  23. border-radius: 4px;
  24. color: white;
  25. font-weight: 600;
  26. padding: 0.25rem 0.75rem;
  27. }
  28. .btn .fa {
  29. font-size: 1rem;
  30. }
  31. .btn:hover {
  32. background-color: #888;
  33. color: white;
  34. text-decoration: none;
  35. }
  36. .btn-chartjs { background-color: #f27173; }
  37. .btn-chartjs:hover { background-color: #e25f5f; }
  38. .btn-docs:hover { background-color: #2793db; }
  39. .btn-docs { background-color: #36A2EB; }
  40. .btn-docs:hover { background-color: #2793db; }
  41. .btn-gh { background-color: #444; }
  42. .btn-gh:hover { background-color: #333; }
  43. .btn-on {
  44. border-style: inset;
  45. }
  46. #header {
  47. background-size: 40px;
  48. text-align: center;
  49. padding: 32px 0;
  50. }
  51. #header .title {
  52. font-size: 1.5rem;
  53. font-weight: 600;
  54. white-space: nowrap;
  55. }
  56. #header:before {
  57. background-image: url(logo.svg);
  58. background-position: left center;
  59. background-repeat: no-repeat;
  60. background-size: 40px;
  61. content: '';
  62. display: inline-block;
  63. padding: 20px;
  64. }
  65. #header .title .main {
  66. color: #f27173;
  67. display: inline-block;
  68. font-size: 1.5rem;
  69. font-weight: 600;
  70. }
  71. #header .title .name:before {
  72. content: '/';
  73. margin-right: 0.5rem;
  74. }
  75. #header .caption {
  76. font-size: 1.1rem;
  77. }
  78. #header .links {
  79. display: flex;
  80. justify-content: center;
  81. padding: 8px 0;
  82. }
  83. #header .links a {
  84. font-size: 0.85rem;
  85. margin: 0.2rem;
  86. }
  87. #header .links .fa:before {
  88. margin-right: 0.5em;
  89. }
  90. .samples-category {
  91. display: inline-block;
  92. margin-bottom: 32px;
  93. vertical-align: top;
  94. width: 25%;
  95. }
  96. .samples-category > .title {
  97. color: #aaa;
  98. font-weight: 300;
  99. font-size: 1.5rem;
  100. }
  101. .samples-category:hover > .title {
  102. color: black;
  103. }
  104. .samples-category > .items {
  105. padding: 8px 0;
  106. }
  107. .samples-entry {
  108. padding: 0 0 4px 0;
  109. }
  110. .samples-entry > .title {
  111. font-weight: 700;
  112. }
  113. @media (max-width: 640px) {
  114. #header {padding: 8px 0;}
  115. .samples-category { width: 33%; }
  116. }
  117. @media (max-width: 512px) {
  118. #header .caption { font-size: 1.05rem; }
  119. #header .title .name { display: none }
  120. #header .links a { flex-direction: column; }
  121. #header .links .fa { margin: 0 }
  122. .samples-category { width: 50%; }
  123. }
  124. @media (max-width: 384px) {
  125. .samples-category { width: 100%; }
  126. }