main.css 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. /* Variables */
  2. :root {
  3. --tile-margin: .9vw;
  4. --caption-hmargin: calc(2 * var(--tile-margin));
  5. --caption-vmargin: calc(1.5 * var(--tile-margin));
  6. --body-margin: 3.6vw;
  7. --theme-color: #46c8a5;
  8. /* --tile-margin: 12.75px; */
  9. /* --body-margin: 66px; */
  10. --header-inner-space: calc(8 * var(--tile-margin));
  11. --header-space: calc(10 * var(--tile-margin) - 10px + var(--tile-margin));
  12. }
  13. /* Columns */
  14. @media (min-width: 1501px) {
  15. :root { --columns: 5; }
  16. }
  17. @media (max-width: 1500px) {
  18. :root { --columns: 5; }
  19. }
  20. @media (max-width: 1000px) {
  21. :root { --columns: 4; }
  22. }
  23. @media (max-width: 700px) {
  24. :root { --columns: 3; }
  25. }
  26. @media (max-width: 500px) {
  27. :root { --columns: 2; }
  28. }
  29. @media (max-width: 400px) {
  30. :root { --columns: 2; }
  31. }
  32. /* Font Size */
  33. :root {
  34. /* font-size: 180%; */
  35. font-size: 1.2vw;
  36. font-weight: 100;
  37. }
  38. h1 {
  39. /* font-size: 97%; */
  40. font-size: 1.18vw;
  41. }
  42. /* @media (max-width: 1500px) {
  43. :root { font-size: 22px; }
  44. h1 { font-size: 22px; }
  45. }
  46. @media (max-width: 1240px) {
  47. :root { font-size: 18px; }
  48. }
  49. @media (max-width: 1080px) {
  50. :root { font-size: 16px; }
  51. } */
  52. /* Margins */
  53. /* @media (max-width: 1080px) {
  54. :root {
  55. --tile-margin: 12.75px;
  56. --body-margin: 33px;
  57. }
  58. } */
  59. /* Header */
  60. @media (max-width: 600px) {
  61. #mobile-header { visibility: visible; }
  62. #wide-header { visibility: hidden; }
  63. :root { --header-space: 100px; }
  64. }
  65. @media (min-width: 601px) {
  66. #mobile-header { visibility: hidden; }
  67. #wide-header { visibility: visible; }
  68. }
  69. #logo {
  70. width: 10vw;
  71. margin: 0 .7vw -.9vw .5vw;
  72. }
  73. /* @media (max-width: 460px) {
  74. #logo { width: 130px; }
  75. } */
  76. /* Typographies */
  77. @font-face {
  78. font-family: 'akrobat-regular';
  79. src: url('/static/font/Akrobat-Regular.otf') format('opentype');
  80. }
  81. @font-face {
  82. font-family: 'akrobat-bold';
  83. src: url('/static/font/Akrobat-Bold.otf') format('opentype');
  84. }
  85. /* Rules */
  86. :root {
  87. font-family: 'akrobat-regular';
  88. /* letter-spacing: 1.5px; */
  89. letter-spacing: .07rem;
  90. }
  91. .sec-div {
  92. font-weight: bold;
  93. font-family: 'akrobat-regular';
  94. }
  95. a {
  96. color: black;
  97. margin: .05rem .3rem;
  98. text-decoration: none;
  99. }
  100. a.en {
  101. margin-bottom: .3em;
  102. }
  103. h1 {
  104. font-size: 1.1em;
  105. text-align: center;
  106. /* letter-spacing: 1px; */
  107. letter-spacing: .05rem;
  108. font-weight: 100;
  109. font-family: 'akrobat-bold';
  110. text-decoration: none;
  111. text-transform: uppercase;
  112. margin: .2em 0;
  113. }
  114. h2 {
  115. font-size: .9em;
  116. font-family: 'akrobat-bold';
  117. text-decoration: none;
  118. text-transform: uppercase;
  119. }
  120. a.selected, a[href]:hover {
  121. /* cursor: default; */
  122. /* display: inline-block; */
  123. color: var(--theme-color);
  124. }
  125. div {
  126. display: flex;
  127. }
  128. body {
  129. width: calc(100% - 2*var(--body-margin));
  130. margin: 0 var(--body-margin);
  131. /* width: 94%;
  132. margin: 0 3%; */
  133. /* width: calc(100% - 2*var(--body-margin)); */
  134. /* margin: 0 var(--body-margin); */
  135. position: absolute;
  136. }
  137. #wide-header {
  138. width: calc(100% - 2*(var(--body-margin)));
  139. margin: 0;
  140. /* width: calc(100% - 2*(var(--body-margin) + var(--tile-margin))); */
  141. /* margin: 0 var(--tile-margin); */
  142. /* width: 100%; */
  143. /* margin: 0 calc(var(--body-margin) + var(--tile-margin)); */
  144. display: flex;
  145. flex-direction: column;
  146. /* margin: 0 0 0 var(--tile-margin); */
  147. justify-content: flex-end;
  148. position: fixed;
  149. /* width: calc(100% - 2*var(--body-margin) - 2*var(--tile-margin)); */
  150. background-color: white;
  151. /* padding-bottom: calc(2*var(--tile-margin)); */
  152. /* border-bottom: calc(2*var(--tile-margin)); */
  153. height: var(--header-space);
  154. position: fixed;
  155. z-index: 1;
  156. }
  157. /* header::after {
  158. content: " ";
  159. background-color: black;
  160. height: var(--header-line-width);
  161. width: 100%;
  162. align-self: flex-start;
  163. } */
  164. .header-box {
  165. padding-bottom: calc(2 * var(--tile-margin));
  166. overflow: hidden;
  167. display: flex;
  168. flex-direction: row;
  169. align-items: flex-end;
  170. justify-content: space-between;
  171. flex-wrap: wrap;
  172. height: var(--header-inner-space);
  173. }
  174. .vbox {
  175. display: flex;
  176. flex-direction: column;
  177. align-items: center;
  178. }
  179. .rbox .vbox {
  180. align-items: flex-end;
  181. }
  182. .lbox .vbox {
  183. align-items: flex-start;
  184. }
  185. .hbox {
  186. display: flex;
  187. flex-direction: row;
  188. align-items: center;
  189. }
  190. .lbox {
  191. display: flex;
  192. flex-direction: row;
  193. align-items: flex-end;
  194. justify-content: flex-start;
  195. }
  196. .rbox {
  197. display: flex;
  198. flex-direction: row;
  199. align-items: center;
  200. justify-content: flex-end;
  201. }
  202. .header-subtitle {
  203. display: flex;
  204. flex-direction: row;
  205. flex-wrap: wrap;
  206. justify-content: flex-end;
  207. align-items: center;
  208. margin-top: 0;
  209. }
  210. #alucho-title, #designer-subtitle {
  211. flex-wrap: wrap;
  212. }
  213. .no-bottom {
  214. margin-bottom: 0;
  215. }
  216. .header-title {
  217. display: flex;
  218. flex-direction: row;
  219. flex-wrap: wrap;
  220. justify-content: flex-end;
  221. align-items: center;
  222. /* margin-bottom: 8px; */
  223. }
  224. /* #wide-header > a, #wide-header > h1 {
  225. margin: 0 3px;
  226. } */
  227. /* .header-subtitle > a {
  228. margin: 0 5px;
  229. } */
  230. a.first {
  231. margin-left: var(--tile-margin);
  232. }
  233. a.last {
  234. margin-right: var(--tile-margin);
  235. }
  236. main {
  237. display: flex;
  238. flex-direction: row;
  239. flex-wrap: wrap;
  240. justify-content: flex-start;
  241. margin-top: calc(var(--header-space) - var(--tile-margin));
  242. /* margin: 0; */
  243. /* margin-top: calc(var(--header-space) + var(--body-margin)); */
  244. position: static;
  245. /* position: absolute; */
  246. }
  247. figure {
  248. position: relative;
  249. display: flex;
  250. width: calc(100% / var(--columns) - 2 * var(--tile-margin));
  251. margin: var(--tile-margin);
  252. overflow: hidden;
  253. }
  254. figure img.tile, svg {
  255. display: flex;
  256. width: 100%;
  257. height: 100%;
  258. cursor: pointer;
  259. }
  260. figure figcaption {
  261. font-size: .7em;
  262. padding: var(--caption-vmargin) var(--caption-hmargin);
  263. display: flex;
  264. flex-direction: column;
  265. position: absolute;
  266. background-color: white;
  267. bottom: 0;
  268. width: calc(100% - 2 * var(--caption-hmargin));
  269. -webkit-transform: translateY(100%);
  270. -ms-transform: translateY(100%);
  271. transform: translateY(100%);
  272. transition: .3s ease;
  273. }
  274. figure:hover figcaption {
  275. -webkit-transform: translateY(0);
  276. -ms-transform: translateY(0);
  277. transform: translateY(0);
  278. transition: .3s ease;
  279. }
  280. figcaption h1 {
  281. margin: 0;
  282. /* font-family: 'akrobat-regular'; */
  283. }
  284. .caption {
  285. display: flex;
  286. flex-direction: column;
  287. align-items: flex-start;
  288. }
  289. footer {
  290. display: flex;
  291. flex-direction: column;
  292. margin: 0 var(--tile-margin);
  293. height: var(--body-margin);
  294. font-size: .7em;
  295. font-weight: 900;
  296. }
  297. footer::after {
  298. content: " ";
  299. height: var(--tile-margin);
  300. bottom: 0;
  301. }
  302. .footer-content {
  303. height: calc(var(--body-margin) - var(--tile-margin));
  304. display: flex;
  305. flex-direction: row;
  306. flex-wrap: wrap;
  307. justify-content: space-between;
  308. }
  309. footer .copyright, footer .social {
  310. align-items: center;
  311. }
  312. footer a.first {
  313. margin-left: 0;
  314. }
  315. footer a.last {
  316. margin-right: 0;
  317. }
  318. footer svg {
  319. width: auto;
  320. height: 1.5em;
  321. margin-left: .75em;
  322. }
  323. .social a {
  324. margin: 0;
  325. }
  326. .hidden {
  327. visibility: hidden;
  328. }