You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

179 lines
2.0 KiB

  1. ---
  2. ---
  3. /*
  4. * Copyright © 2019 Linus Vanas <linus@vanas.fi>
  5. * SPDX-License-Identifier: CC-BY-SA-4.0
  6. */
  7. $color-text:#000000;
  8. $color-link:#006600;
  9. $color-link-visited:#003300;
  10. $color-link-hover:#009900;
  11. $color-navlink:#009900;
  12. $color-navlink-hover:#00BB00;
  13. $color-background:#EEFFEE;
  14. $width-nav:5 * 6.6em;
  15. body
  16. {
  17. background-color:$color-background;
  18. font-family:sans-serif;
  19. margin:auto;
  20. max-width:52em;
  21. }
  22. a:link
  23. {
  24. color:$color-link;
  25. }
  26. a:visited
  27. {
  28. color:$color-link-visited;
  29. }
  30. a:hover
  31. {
  32. color:$color-link-hover;
  33. }
  34. a:active
  35. {
  36. color:$color-link-hover;
  37. }
  38. nav
  39. {
  40. display:flex;
  41. justify-content:space-between;
  42. text-align:center;
  43. margin:auto;
  44. max-width:$width-nav;
  45. }
  46. nav a
  47. {
  48. background-color:$color-navlink;
  49. border:.2em solid black;
  50. border-radius:.2em;
  51. color:$color-text;
  52. display:inline-block;
  53. flex:none;
  54. margin-top:-.2em;
  55. padding-top: .1em;
  56. text-decoration:none;
  57. min-width:6em;
  58. }
  59. nav a:link
  60. {
  61. color:$color-text;
  62. }
  63. nav a:visited
  64. {
  65. color:$color-text;
  66. }
  67. nav a:hover
  68. {
  69. background-color:$color-navlink-hover;
  70. color:$color-text;
  71. }
  72. nav a:active
  73. {
  74. background-color:$color-navlink-hover;
  75. color:$color-text;
  76. }
  77. main
  78. {
  79. padding:0 1em;
  80. text-align:justify;
  81. }
  82. h1
  83. {
  84. text-align:center;
  85. }
  86. a.highlight
  87. {
  88. background-color:$color-navlink;
  89. border-radius:.2em;
  90. color:$color-text;
  91. display:block;
  92. font-size:110%;
  93. margin:.5em 0;
  94. padding:.5em;
  95. text-align:center;
  96. text-decoration:none;
  97. }
  98. a.highlight:link
  99. {
  100. color:$color-text;
  101. }
  102. a.highlight:visited
  103. {
  104. color:$color-text;
  105. }
  106. a.highlight:hover
  107. {
  108. background-color:$color-navlink-hover;
  109. color:$color-text;
  110. }
  111. a.highlight:active
  112. {
  113. background-color:$color-navlink-hover;
  114. color:$color-text;
  115. }
  116. footer
  117. {
  118. border-top:.1em solid black;
  119. font-size:83%;
  120. text-align:center;
  121. }
  122. footer p
  123. {
  124. margin:.25em;
  125. }
  126. footer a
  127. {
  128. display:inline-block;
  129. }
  130. @media (max-width:$width-nav)
  131. {
  132. nav
  133. {
  134. flex-flow: row wrap;
  135. justify-content: space-evenly;
  136. }
  137. nav a
  138. {
  139. margin: .2em;
  140. padding: 0;
  141. }
  142. }
  143. table
  144. {
  145. border-collapse:collapse;
  146. }
  147. td
  148. {
  149. border:.2em double $color-link;
  150. font-size:96%;
  151. }