mostly filebased Content Presentation System
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

style.css 3.3KB

4年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. * {
  2. box-sizing: border-box; }
  3. html {
  4. color: #777;
  5. background: #fff; }
  6. a {
  7. color: #777; }
  8. a.content_element_box .hover {
  9. display: none; }
  10. a.content_element_box:hover .hover {
  11. display: inline; }
  12. a.content_element_box:hover .standard {
  13. display: none; }
  14. a.content_element_box div.content_element_box {
  15. display: inline-block;
  16. position: relative;
  17. height: 200px;
  18. margin: 1em; }
  19. a.content_element_box div.content_element_box .image {
  20. height: 100%; }
  21. a.content_element_box div.content_element_box img {
  22. height: 100%;
  23. width: auto; }
  24. a.content_element_box div.content_element_box .caption {
  25. position: absolute;
  26. width: 100%;
  27. bottom: 0;
  28. right: 0;
  29. background: rgba(255, 255, 255, 0.8); }
  30. .content_elment_box_body {
  31. display: none; }
  32. .content_element_devided {
  33. display: grid;
  34. grid-template-columns: 50% 50%; }
  35. .featherlight .featherlight-content {
  36. background: none;
  37. overflow: visible; }
  38. .featherlight .featherlight-content .featherlight-close-icon {
  39. color: #fff;
  40. background: none;
  41. top: -10px;
  42. right: -10px;
  43. font-size: 1.5em; }
  44. @media only screen and (max-width: 750px) {
  45. .featherlight .featherlight-content iframe {
  46. width: 100%;
  47. height: 100%; } }
  48. @media only screen and (max-width: 750px) {
  49. #main-nav {
  50. display: none; } }
  51. #mobile-nav {
  52. display: none; }
  53. @media only screen and (max-width: 750px) {
  54. #mobile-nav {
  55. display: block; }
  56. #mobile-nav a.menu-toggle {
  57. display: block; } }
  58. #mobile-nav .the_list {
  59. display: none; }
  60. #mobile-nav.open .the_list {
  61. display: block;
  62. position: fixed;
  63. top: 0;
  64. left: 0;
  65. z-index: 99;
  66. background: rgba(255, 255, 255, 0.9);
  67. height: 100%;
  68. width: 100%;
  69. overflow: scroll; }
  70. #mobile-nav a.menu-toggle {
  71. position: fixed;
  72. top: 0;
  73. right: 0;
  74. width: 50px;
  75. height: 50px;
  76. z-index: 100;
  77. cursor: pointer;
  78. background: rgba(255, 255, 255, 0.9);
  79. background-image: url("menu-icon.png");
  80. background-position: top;
  81. background-size: 100%; }
  82. #mobile-nav.open a.menu-toggle {
  83. background-position: bottom; }
  84. html, body {
  85. height: 100%;
  86. margin: 0;
  87. padding: 0; }
  88. .content_element_page.wall a.content_element_box {
  89. float: left; }
  90. .content_element_page.wall:after {
  91. content: "";
  92. display: block;
  93. clear: both; }
  94. .content_element_page.wall div.content_element_box {
  95. height: 100px; }
  96. #page-wrap {
  97. display: grid;
  98. grid-template-columns: 250px auto;
  99. grid-template-rows: 200px 100fr 3em;
  100. height: 100vh;
  101. overflow: hidden;
  102. max-width: 1300px;
  103. margin: 0 auto; }
  104. #page-wrap > header {
  105. grid-column: 1 / -1; }
  106. #page-wrap #main-nav {
  107. grid-column: 1 / span 1;
  108. grid-row: 2 / -1; }
  109. #page-wrap #content {
  110. grid-column: 2 / -1;
  111. grid-row: 2 / 3;
  112. overflow-y: auto; }
  113. #page-wrap #main-footer {
  114. grid-column: 2 / -1;
  115. grid-row: -2 / -1; }
  116. #main-nav .level2 .away ul {
  117. display: none; }
  118. #content img {
  119. max-width: 100%; }
  120. a {
  121. text-decoration: none; }
  122. a:hover {
  123. text-decoration: underline; }
  124. ul.nav {
  125. list-style: none; }
  126. ul.nav li {
  127. margin: 0; }
  128. ul.nav .active > a {
  129. font-weight: bold; }
  130. #main-nav {
  131. background: #eec;
  132. border-radius: 1.2em 1.2em 0 0; }
  133. #main-nav ul {
  134. padding-left: 1.5em; }
  135. #main-nav .level1 > li, #main-nav .level2 > li {
  136. margin-top: 1em; }
  137. /*# sourceMappingURL=style.css.map */