header.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Godot demos exported to HTML5</title>
  7. <style>
  8. :root {
  9. --background-color: #fff;
  10. --text-color: #222;
  11. --link-color: hsl(220, 100%, 45%);
  12. --link-underline-color: hsla(220, 100%, 45%, 0.3);
  13. }
  14. @media (prefers-color-scheme: dark) {
  15. :root {
  16. --background-color: #222;
  17. --text-color: #eee;
  18. --link-color: hsl(200, 100%, 70%);
  19. --link-underline-color: hsla(200, 100%, 70%, 0.3);
  20. }
  21. }
  22. *:focus {
  23. /* More visible outline for better keyboard navigation. */
  24. outline: 0.125rem solid hsl(220, 100%, 62.5%);
  25. /* Make the outline always appear above other elements. */
  26. position: relative;
  27. }
  28. html {
  29. background-color: var(--background-color);
  30. color: var(--text-color);
  31. }
  32. body {
  33. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  34. max-width: 50rem;
  35. margin: 0 auto;
  36. padding: 0.75rem;
  37. line-height: 1.618rem;
  38. }
  39. h2 {
  40. margin-top: 2.5rem;
  41. }
  42. a {
  43. color: var(--link-color);
  44. text-decoration-color: var(--link-underline-color);
  45. text-decoration-thickness: 0.125rem;
  46. }
  47. a:hover {
  48. filter: brightness(117.5%);
  49. }
  50. a:active {
  51. filter: brightness(82.5%);
  52. }
  53. ul {
  54. padding-left: 0;
  55. }
  56. li {
  57. display: block;
  58. }
  59. li a {
  60. display: inline-block;
  61. width: 100%;
  62. height: 4rem;
  63. margin-left: 0.5rem;
  64. }
  65. li a:hover {
  66. background-color: hsla(0, 0%, 50%, 0.1);
  67. }
  68. li a * {
  69. float: left;
  70. }
  71. li a p {
  72. height: 24px;
  73. margin: 20px 10px;
  74. }
  75. </style>
  76. </head>
  77. <body>
  78. <h1>Godot demo projects</h1>
  79. <p>
  80. This page lists
  81. <a href="https://github.com/godotengine/godot-demo-projects">official Godot demo projects</a>
  82. exported to HTML5 for testing purposes. These projects are deployed automatically
  83. on every commit on the <code>master</code> branch of the repository.
  84. </p>
  85. <p>
  86. The HTML5 exports on this page are provided for demonstration purposes only.
  87. Some of these demos may not function or render correctly on HTML5,
  88. especially on mobile devices.
  89. For best performance, it's recommended to
  90. <a href="https://godotengine.org/download">download</a> a native editor
  91. and run the demo project by importing its files in the project manager.
  92. </p>
  93. <p>
  94. See the
  95. <a href="https://docs.godotengine.org/en/stable/getting_started/workflow/export/exporting_for_web.html">Exporting for the Web</a>
  96. documentation for information on exporting your own projects to HTML5.
  97. </p>
  98. <h2>List of demos</h2>
  99. <ul>
  100. <!-- The list of demos will be inserted below by the CI process. -->