not really known
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.

151 lines
2.9 KiB

  1. // Copyright (C) 2015 Sam Parkinson
  2. //
  3. // This program is free software: you can redistribute it and/or modify
  4. // it under the terms of the GNU General Public License as published by
  5. // the Free Software Foundation, either version 3 of the License, or
  6. // (at your option) any later version.
  7. //
  8. // This program is distributed in the hope that it will be useful,
  9. // but WITHOUT ANY WARRANTY without even the implied warranty of
  10. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  11. // GNU General Public License for more details.
  12. //
  13. // You should have received a copy of the GNU General Public License
  14. // along with this program. If not, see <http://www.gnu.org/licenses/>.
  15. .canvasHolder
  16. transition: 0.75s ease all
  17. transform-origin: 0 0
  18. position: absolute
  19. top: 0
  20. left: 0
  21. .canvasHolder.hide
  22. transform: scale(0.24)
  23. top: 117px
  24. left: 1%
  25. width: 100vw
  26. height: 75vw
  27. overflow: hidden
  28. z-index: 10
  29. background: #99CCFF
  30. .canvasHolder.hide canvas
  31. width: 100%
  32. height: 100%
  33. nav
  34. position: fixed
  35. top: 0px
  36. left: 0px
  37. z-index: 100
  38. background-color: #8bc34a
  39. height: 64px
  40. width: 100%
  41. box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12)
  42. font: 32px sans
  43. vertical-align: middle
  44. line-height: 64px
  45. color: white
  46. .nav-container
  47. padding: 0 12px
  48. .logo
  49. padding-left: 12px
  50. h1
  51. font-size: 32px
  52. position: relative
  53. top: -12px
  54. display: inline
  55. img
  56. height: 48px
  57. width: 48px
  58. margin-top: 6px
  59. border-radius: 100%
  60. &hover
  61. background-color: rgba(255, 255, 255, 0.3)
  62. &active
  63. background-color: rgba(255, 255, 255, 0.8)
  64. ul
  65. list-style: none
  66. text-align: right
  67. display: inline
  68. li
  69. dispalay: inline
  70. padding-right: 12px
  71. float: right
  72. .nav-spacer
  73. height: 48px
  74. .content
  75. padding: 0px
  76. margin: 0px
  77. li
  78. display: block
  79. list-style: none
  80. width: 24%
  81. float: left
  82. padding-left: 1%
  83. li[current=true] img.thumbnail
  84. opacity: 0
  85. @media (max-width: 500px)
  86. .content li
  87. width: 49%
  88. padding-left: 1%
  89. .canvasHolder.hide
  90. transform: scale(0.49)
  91. nav h1
  92. display: none
  93. @media (max-width: 800px) and (min-width: 501px)
  94. .content li
  95. width: 32%
  96. padding-left: 1%
  97. .canvasHolder.hide
  98. transform: scale(0.32)
  99. .content li img.thumbnail
  100. background: #96D3F3
  101. width: 100%
  102. padding: 0
  103. .content li .options, .content li .options input
  104. text-align: center
  105. .planet-content
  106. color: #727272
  107. .planet-content h2
  108. color: #212121
  109. clear: both
  110. img.icon
  111. border-radius: 100%
  112. width: 30px
  113. img.icon:hover
  114. background-color: rgba(139, 195, 74, 0.3)
  115. img.icon:hover
  116. background-color: rgba(139, 195, 74, 0.8)