index.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. body {
  2. margin: 0;
  3. }
  4. /* #MARKER header */
  5. header {
  6. background-color: var(--bg-color-darker-shade);
  7. cursor: default;
  8. display: flex;
  9. flex-flow: row nowrap;
  10. align-content: stretch;
  11. padding: 5px;
  12. }
  13. header > .flexItem {
  14. flex-shrink: 1;
  15. align-self: stretch;
  16. }
  17. /* #SECTION page title */
  18. header h1 {
  19. font-size: 35px;
  20. margin-top: 3px;
  21. margin-bottom: 3px;
  22. margin-right: 50px;
  23. }
  24. /* #SECTION nav */
  25. header nav {
  26. display: block;
  27. flex-grow: 100;
  28. }
  29. header nav ul {
  30. background-color: #123;
  31. display: inline-flex;
  32. justify-content: flex-end;
  33. align-items: flex-end;
  34. list-style-type: none;
  35. padding-left: 20px;
  36. padding-right: 20px;
  37. margin: 0;
  38. height: 100%;
  39. }
  40. header nav ul:hover {
  41. color: #fff;
  42. position: fixed;
  43. }
  44. header nav ul li {
  45. display: none;
  46. }
  47. header nav ul:hover li {
  48. display: block;
  49. }
  50. header nav ul li:first-of-type {
  51. margin-top: 10px;
  52. }
  53. header nav a {
  54. cursor: pointer;
  55. }
  56. /* #SECTION lang switch */
  57. header select.flexItem {
  58. align-self: flex-start;
  59. }
  60. /* #MARKER main */
  61. main {
  62. margin: 15px;
  63. }