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.

139 lines
2.2 KiB

4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
  1. @font-face {
  2. font-family: "Fell";
  3. src: url("/IMFePIit29P.ttf");
  4. }
  5. @font-face {
  6. font-family: "Fell Sc";
  7. src: url("/IMFePIsc29P.ttf");
  8. }
  9. body {
  10. background-color: #e1eef2;
  11. margin: 0;
  12. font-family: "Fell";
  13. }
  14. .wrapper {
  15. max-width: 70em;
  16. height: 100%;
  17. margin: 0 auto;
  18. background-color: #FFC63F;
  19. position: relative;
  20. box-sizing: border-box;
  21. padding: 20px;
  22. }
  23. .items {
  24. list-style: none;
  25. margin: 0;
  26. padding: 0;
  27. }
  28. .items > li {
  29. display: inline-block;
  30. }
  31. .items > li a {
  32. width: 120px;
  33. height: 120px;
  34. background: #D66C00;
  35. border-radius: 80px;
  36. display: block;
  37. border: 3px solid #1a1c1c;
  38. }
  39. .items > li a:hover {
  40. background-color: #f39a3f;
  41. z-index: 1;
  42. }
  43. .items > li.face-up a {
  44. background-color: #ed8112;
  45. background-size: contain;
  46. background-repeat: no-repeat;
  47. background-position: center;
  48. }
  49. .line {
  50. border-bottom: 3px solid #1a1c1c;
  51. height: 1em;
  52. text-align: center;
  53. position: absolute;
  54. transform-origin: 0 0;
  55. font-size: 1.2em;
  56. }
  57. .fullview {
  58. width: 100%;
  59. height: 100%;
  60. position: fixed;
  61. left: 0;
  62. top: 0;
  63. background-color: #e1eef280;
  64. padding: 1em;
  65. box-sizing: border-box;
  66. cursor: default;
  67. }
  68. .fullview > div {
  69. position: fixed;
  70. top: 50%;
  71. left: 50%;
  72. transform: translate(-50%, -50%);
  73. min-width: 20em;
  74. min-height: 30em;
  75. max-height: 100%;
  76. max-width: 30em;
  77. overflow: auto;
  78. background-color: #006680;
  79. padding: 1em;
  80. color: white;
  81. border-radius: 20px;
  82. border: 5px solid #1a1c1c;
  83. box-sizing: border-box;
  84. display: flex;
  85. flex-direction: column;
  86. font-size: 1.2em;
  87. }
  88. .fullview > div img {
  89. float: right;
  90. width: 120px;
  91. border-radius: 80px;
  92. border: 3px solid #1a1c1c;
  93. margin-bottom: 1em;
  94. }
  95. h1, .desc {
  96. font-family: "Fell Sc";
  97. margin-left: 0.5rem;
  98. }
  99. .fulltext {
  100. flex-grow: 1;
  101. background-color: #99d7e9;
  102. border-radius: 20px;
  103. border: 3px solid #1a1c1c;
  104. color: #1a1c1c;
  105. padding: 0 0.5em;
  106. }
  107. .fulltext p {
  108. margin: 0.5em 0;
  109. }
  110. blockquote {
  111. background: #f9f9f9cc;
  112. border-left: .5em solid #1a1c1c66;
  113. margin: .5em;
  114. padding: .5em;
  115. quotes: "\201C""\201D""\2018""\2019";
  116. }
  117. blockquote:before {
  118. color: #1a1c1c66;
  119. content: open-quote;
  120. font-size: 4em;
  121. line-height: 0.1em;
  122. margin-right: 0.25em;
  123. float: left;
  124. margin-top: 2.5rem;
  125. }