This is a gentle fork from https://framagit.org/marienfressinaud/photos.marienfressinaud.fr with a responsive and optimized mindset. https://media.larlet.fr/
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.

main.css 2.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. * {
  2. box-sizing: border-box;
  3. }
  4. html,
  5. body {
  6. margin: 0;
  7. padding: 0;
  8. }
  9. html {
  10. color: #313131;
  11. font-family: "Open Sans";
  12. font-size: 22px;
  13. line-height: 1.5rem;
  14. }
  15. @media(max-width: 70rem) {
  16. html {
  17. font-size: 18px;
  18. }
  19. }
  20. body {
  21. background-color: #f5f5f5;
  22. }
  23. a {
  24. color: #404c9e;
  25. transition: color .2s ease-in-out;
  26. }
  27. a:hover {
  28. color: #7586f0;
  29. text-decoration: none;
  30. }
  31. h1, h2, h3 {
  32. margin-top: 0;
  33. margin-bottom: 0.5rem;
  34. word-wrap: break-word;
  35. }
  36. h1 {
  37. margin-bottom: 1.75rem;
  38. }
  39. h1 { font-size: 2rem; line-height: 2.5rem; }
  40. h2 { font-size: 1.5rem; line-height: 2rem; }
  41. h3 { font-size: 1rem; line-height: 1.5rem; }
  42. * + h1,
  43. * + h2,
  44. * + h3 {
  45. margin-top: 1.5rem;
  46. }
  47. p {
  48. margin-top: 0;
  49. margin-bottom: 1rem;
  50. }
  51. p:last-child {
  52. margin-bottom: 0;
  53. }
  54. ul, ol, dl {
  55. margin-top: 0;
  56. margin-bottom: 1rem;
  57. }
  58. ul:last-child,
  59. ol:last-child,
  60. dl:last-child {
  61. margin-bottom: 0;
  62. }
  63. p + ul,
  64. p + ol,
  65. p + dl {
  66. margin-top: -.5rem;
  67. }
  68. small {
  69. font-size: .8em;
  70. line-height: 1em;
  71. }
  72. strong {
  73. font-weight: bold;
  74. }
  75. img {
  76. max-width: 100%;
  77. height: auto;
  78. }
  79. .app-page-header {
  80. padding-top: .5rem;
  81. padding-bottom: .5rem;
  82. margin-bottom: 2rem;
  83. box-shadow: 0 0 1px #313131;
  84. }
  85. .app-page-header a {
  86. color: #313131;
  87. text-decoration: none;
  88. }
  89. .app-page-header .app-page-header-title {
  90. margin-bottom: 0;
  91. font-size: 1.5rem;
  92. line-height: 2rem;
  93. }
  94. .app-page {
  95. padding-bottom: 10rem;
  96. }
  97. @media(max-width: 70rem) {
  98. .app-page {
  99. padding-bottom: 5rem;
  100. }
  101. }
  102. .container {
  103. max-width: 70rem;
  104. margin-left: auto;
  105. margin-right: auto;
  106. padding-left: .5rem;
  107. padding-right: .5rem;
  108. }
  109. .galleries {
  110. display: flex;
  111. flex-wrap: wrap;
  112. justify-content: space-evenly;
  113. }
  114. .gallery-cover {
  115. width: 20rem;
  116. max-width: 100%;
  117. margin-bottom: 2rem;
  118. margin-right: .5rem;
  119. }
  120. .gallery-cover a {
  121. text-decoration: none;
  122. }
  123. .gallery-cover img {
  124. width: 100%;
  125. height: 12rem;
  126. border-radius: 0.25rem;
  127. }
  128. .gallery-cover .gallery-cover-name {
  129. display: block;
  130. font-size: 1rem;
  131. font-weight: bold;
  132. overflow: hidden;
  133. text-overflow: ellipsis;
  134. }
  135. .gallery-photos {
  136. display: flex;
  137. flex-wrap: wrap;
  138. justify-content: space-evenly;
  139. margin-top: 2rem;
  140. }
  141. .photo {
  142. width: 20rem;
  143. max-width: 100%;
  144. margin-right: .5rem;
  145. margin-bottom: 2rem;
  146. }
  147. .photo img {
  148. width: 100%;
  149. height: 12rem;
  150. }