product.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. ---
  2. ---
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>{{ page.name }}</title>
  8. <link rel="icon" href="{{ page.icon }}"/>
  9. <meta name="HandheldFriendly" content="true" />
  10. <meta name="MobileOptimized" content="320" />
  11. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
  12. <link rel="stylesheet" type="text/css" href="/css/style.css"/>
  13. <link rel="stylesheet" type="text/css" href="/css/contribution-chart.css"/>
  14. <link rel="stylesheet" type="text/css" href="/css/carousel.css"/>
  15. <link rel="stylesheet" type="text/css" href="/css/product.css"/>
  16. <link rel="stylesheet" type="text/css" href="/css/syntax.css" />
  17. <style>
  18. #banner-background {
  19. background-image: url("{{ page.banner }}");
  20. }
  21. #banner-container #icon {
  22. background-image: url("{{ page.icon }}");
  23. }
  24. </style>
  25. <script type="text/javascript" src="/assets/js/products-carousel.js" defer></script>
  26. <script type="text/javascript" src="/assets/js/return-home-button.js" defer></script>
  27. </head>
  28. <body data-from-github="{{ page.from_github }}">
  29. <div id="meaningful-part" class="horizontally-centered top-level-card">
  30. <div id="banner-container" class="container rounded-shadow animated-enter">
  31. <div id="banner-background-wrapper">
  32. <div id="banner-background"></div>
  33. <div id="banner-dimmer"></div>
  34. </div>
  35. <div id="header-content">
  36. <div id="icon"></div>
  37. <div id="group-divider"></div>
  38. <div class="group" id="group-right">
  39. <div id="name">{{ page.name }}</div>
  40. <div id="description">{{ page.description }}</div>
  41. <div id="sources" class="no-url-highlighting">
  42. {% assign source_index = 0 %}
  43. {% for source in page.sources %}
  44. {% assign splitted_source = source | split: " | " %}
  45. {% assign type = splitted_source.first | strip %}
  46. {% assign slugged_name = type | downcase | slugify: "pretty" %}
  47. <a class="source-badge"
  48. data-type="{{ slugged_name }}"
  49. style="animation-delay: {{ source_index }}s;"
  50. href="{{ splitted_source[1] }}"
  51. target="_blank"
  52. rel="noreferrer noopener"
  53. >
  54. <img src="{{ "/assets/icon-" | append: slugged_name | append: ".png" }}"
  55. alt="{{ slugged_name }}"
  56. />
  57. <div class="source-name">
  58. {% if slugged_name == "google-play" %}
  59. Google Play
  60. {% elsif slugged_name == "documentation" %}
  61. Read
  62. {% elsif slugged_name == "itch" %}
  63. itch.io
  64. {% elsif slugged_name == "github" %}
  65. GitHub
  66. {% elsif slugged_name == "download" %}
  67. Download
  68. {% endif %}
  69. </div>
  70. </a>
  71. {% assign source_index = source_index | plus: 0.1 %}
  72. {% endfor %}
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="content markdown">
  78. {{ page.content | markdownify }}
  79. </div>
  80. </div>
  81. <products-carousel></products-carousel>
  82. <div id="floating-action-button" class="no-url-highlighting">
  83. <a id="button-home" href="/index.html">
  84. <img id="icon-outlined" src="/assets/icon-home.png" alt="Home Icon"/>
  85. <img id="icon-filled" src="/assets/icon-home-filled.png" alt="Filled Home Icon"/>
  86. <span>Home</span>
  87. </a>
  88. <a id="copyright-notice">© 2023 Smooth-E</a>
  89. </div>
  90. </body>
  91. </html>