front-page.php 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <?php declare( strict_types = 1 ); ?>
  2. <?php
  3. /**
  4. * Title: front-page
  5. * Slug: fotograma/front-page
  6. * Categories: featured
  7. */
  8. ?>
  9. <!-- wp:pattern {"slug":"fotograma/stack-photo"} /-->
  10. <!-- wp:group {"style":{"dimensions":{"minHeight":"100vh"},"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"}},"position":{"type":"sticky","top":"0px"}},"backgroundColor":"base","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  11. <div class="wp-block-group has-base-background-color has-background" style="min-height:100vh;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
  12. <!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}},"border":{"top":{"color":"var:preset|color|contrast","width":"1px"},"right":[],"bottom":{"color":"var:preset|color|contrast","width":"1px"},"left":[]}}} -->
  13. <div class="wp-block-columns" style="border-top-color:var(--wp--preset--color--contrast);border-top-width:1px;border-bottom-color:var(--wp--preset--color--contrast);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
  14. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0"}}} -->
  15. <div class="wp-block-column" style="flex-basis:25%">
  16. <!-- wp:pattern {"slug":"fotograma/header"} /-->
  17. </div>
  18. <!-- /wp:column -->
  19. <!-- wp:column {"width":"25%"} -->
  20. <div class="wp-block-column" style="flex-basis:25%"></div>
  21. <!-- /wp:column -->
  22. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0px"}}} -->
  23. <div class="wp-block-column" style="flex-basis:25%">
  24. <!-- wp:paragraph {"fontSize":"small"} -->
  25. <p class="has-small-font-size"><?php echo esc_html__( 'Jun. 1974: Manhattan Bridge Tower, Brooklyn', 'fotograma' ); ?></p>
  26. <!-- /wp:paragraph -->
  27. <!-- wp:paragraph {"fontSize":"small"} -->
  28. <p class="has-small-font-size"><?php echo esc_html__( 'Photographer: Dick Swanson', 'fotograma' ); ?></p>
  29. <!-- /wp:paragraph -->
  30. </div>
  31. <!-- /wp:column -->
  32. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0px"}}} -->
  33. <div class="wp-block-column" style="flex-basis:25%">
  34. <!-- wp:paragraph {"fontSize":"small"} -->
  35. <p class="has-small-font-size"><?php echo esc_html__( 'Brooklyn, a quintessential 19th-century American city, boasts great bridges linking it to Manhattan, bustling streets, and a mix of habitation and aesthetics. Its &lsquo;worst&rsquo; neighbourhoods preserve some of America&rsquo;s finest architecture, resisting demolition.', 'fotograma' ); ?></p>
  36. <!-- /wp:paragraph -->
  37. </div>
  38. <!-- /wp:column -->
  39. </div>
  40. <!-- /wp:columns -->
  41. <!-- wp:cover {"url":"<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/1974-jun-manhattan-bridge-tower-brooklyn.jpg","dimRatio":0,"focalPoint":{"x":0.5,"y":0},"style":{"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"constrained"}} -->
  42. <div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
  43. <img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/1974-jun-manhattan-bridge-tower-brooklyn.jpg" style="object-position:50% 0%" data-object-fit="cover" data-object-position="50% 0%"/><div class="wp-block-cover__inner-container">
  44. <!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
  45. <p class="has-text-align-center has-large-font-size"></p>
  46. <!-- /wp:paragraph -->
  47. </div>
  48. </div>
  49. <!-- /wp:cover -->
  50. </div>
  51. <!-- /wp:group -->
  52. <!-- wp:group {"style":{"dimensions":{"minHeight":"100vh"},"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"}},"position":{"type":"sticky","top":"0px"}},"backgroundColor":"base","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  53. <div class="wp-block-group has-base-background-color has-background" style="min-height:100vh;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
  54. <!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}},"border":{"top":{"color":"var:preset|color|contrast","width":"1px"},"right":[],"bottom":{"color":"var:preset|color|contrast","width":"1px"},"left":[]}}} -->
  55. <div class="wp-block-columns" style="border-top-color:var(--wp--preset--color--contrast);border-top-width:1px;border-bottom-color:var(--wp--preset--color--contrast);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
  56. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0"}}} -->
  57. <div class="wp-block-column" style="flex-basis:25%">
  58. <!-- wp:pattern {"slug":"fotograma/header"} /-->
  59. </div>
  60. <!-- /wp:column -->
  61. <!-- wp:column {"width":"25%"} -->
  62. <div class="wp-block-column" style="flex-basis:25%"></div>
  63. <!-- /wp:column -->
  64. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0px"}}} -->
  65. <div class="wp-block-column" style="flex-basis:25%">
  66. <!-- wp:paragraph {"fontSize":"small"} -->
  67. <p class="has-small-font-size"><?php echo esc_html__( 'Jun. 1972: Teenager, Second Ward, El Paso', 'fotograma' ); ?></p>
  68. <!-- /wp:paragraph -->
  69. <!-- wp:paragraph {"fontSize":"small"} -->
  70. <p class="has-small-font-size"><?php echo esc_html__( 'Photographer: Danny Lyon', 'fotograma' ); ?></p>
  71. <!-- /wp:paragraph -->
  72. </div>
  73. <!-- /wp:column -->
  74. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0px"}}} -->
  75. <div class="wp-block-column" style="flex-basis:25%">
  76. <!-- wp:paragraph {"fontSize":"small"} -->
  77. <p class="has-small-font-size"><?php echo esc_html__( 'In 1972, El Paso teenagers were shaped by U.S. cultural, political upheaval - the Vietnam War, civil rights, and Watergate. The city&rsquo;s border location and rich, diverse history significantly influenced their daily experiences.', 'fotograma' ); ?></p>
  78. <!-- /wp:paragraph -->
  79. </div>
  80. <!-- /wp:column -->
  81. </div>
  82. <!-- /wp:columns -->
  83. <!-- wp:cover {"url":"<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/1972-jun-a-teenager-in-the-second-ward-chicano-neighborhood-el-paso.jpg","dimRatio":0,"focalPoint":{"x":0.5,"y":0},"isDark":false,"style":{"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"constrained"}} -->
  84. <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
  85. <img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/1972-jun-a-teenager-in-the-second-ward-chicano-neighborhood-el-paso.jpg" style="object-position:50% 0%" data-object-fit="cover" data-object-position="50% 0%"/>
  86. <div class="wp-block-cover__inner-container">
  87. <!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
  88. <p class="has-text-align-center has-large-font-size"></p>
  89. <!-- /wp:paragraph -->
  90. </div>
  91. </div>
  92. <!-- /wp:cover -->
  93. </div>
  94. <!-- /wp:group -->
  95. <!-- wp:group {"style":{"dimensions":{"minHeight":"100vh"},"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"}},"position":{"type":"sticky","top":"0px"}},"backgroundColor":"base","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  96. <div class="wp-block-group has-base-background-color has-background" style="min-height:100vh;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
  97. <!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}},"border":{"top":{"color":"var:preset|color|contrast","width":"1px"},"bottom":{"color":"var:preset|color|contrast","width":"1px"},"right":[],"left":[]}}} -->
  98. <div class="wp-block-columns" style="border-top-color:var(--wp--preset--color--contrast);border-top-width:1px;border-bottom-color:var(--wp--preset--color--contrast);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
  99. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0"}}} -->
  100. <div class="wp-block-column" style="flex-basis:25%">
  101. <!-- wp:pattern {"slug":"fotograma/header"} /-->
  102. </div>
  103. <!-- /wp:column -->
  104. <!-- wp:column {"width":"25%"} -->
  105. <div class="wp-block-column" style="flex-basis:25%"></div>
  106. <!-- /wp:column -->
  107. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0px"}}} -->
  108. <div class="wp-block-column" style="flex-basis:25%">
  109. <!-- wp:paragraph {"fontSize":"small"} -->
  110. <p class="has-small-font-size"><?php echo esc_html__( 'Aug. 1973: Tourists in Buggy, Silver Lake State Park', 'fotograma' ); ?></p>
  111. <!-- /wp:paragraph -->
  112. <!-- wp:paragraph {"fontSize":"small"} -->
  113. <p class="has-small-font-size"><?php echo esc_html__( 'Photographer: Paul Sequeira', 'fotograma' ); ?></p>
  114. <!-- /wp:paragraph -->
  115. </div>
  116. <!-- /wp:column -->
  117. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0px"}}} -->
  118. <div class="wp-block-column" style="flex-basis:25%">
  119. <!-- wp:paragraph {"fontSize":"small"} -->
  120. <p class="has-small-font-size"><?php echo esc_html__( 'Around 1973, the park would have been known for its distinctive features and recreational opportunities, drawing visitors from across the state and beyond.', 'fotograma' ); ?></p>
  121. <!-- /wp:paragraph -->
  122. </div>
  123. <!-- /wp:column -->
  124. </div>
  125. <!-- /wp:columns -->
  126. <!-- wp:cover {"url":"<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/1973-aug-tourists-in-a-dune-buggy-silver-lake-state-park.jpg","dimRatio":0,"focalPoint":{"x":0.5,"y":0.8},"style":{"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"constrained"}} -->
  127. <div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
  128. <img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/1973-aug-tourists-in-a-dune-buggy-silver-lake-state-park.jpg" style="object-position:50% 80%" data-object-fit="cover" data-object-position="50% 80%"/>
  129. <div class="wp-block-cover__inner-container">
  130. <!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
  131. <p class="has-text-align-center has-large-font-size"></p>
  132. <!-- /wp:paragraph -->
  133. </div>
  134. </div>
  135. <!-- /wp:cover -->
  136. </div>
  137. <!-- /wp:group -->
  138. <!-- wp:group {"style":{"dimensions":{"minHeight":"100vh"},"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"}},"position":{"type":"sticky","top":"0px"}},"backgroundColor":"base","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  139. <div class="wp-block-group has-base-background-color has-background" style="min-height:100vh;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
  140. <!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}},"border":{"top":{"color":"var:preset|color|contrast","width":"1px"},"right":[],"bottom":{"color":"var:preset|color|contrast","width":"1px"},"left":[]}}} -->
  141. <div class="wp-block-columns" style="border-top-color:var(--wp--preset--color--contrast);border-top-width:1px;border-bottom-color:var(--wp--preset--color--contrast);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
  142. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0"}}} -->
  143. <div class="wp-block-column" style="flex-basis:25%">
  144. <!-- wp:pattern {"slug":"fotograma/header"} /-->
  145. </div>
  146. <!-- /wp:column -->
  147. <!-- wp:column {"width":"25%"} -->
  148. <div class="wp-block-column" style="flex-basis:25%"></div>
  149. <!-- /wp:column -->
  150. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0px"}}} -->
  151. <div class="wp-block-column" style="flex-basis:25%">
  152. <!-- wp:paragraph {"fontSize":"small"} -->
  153. <p class="has-small-font-size"><?php echo esc_html__( 'May 1972: Railroad and Transmission Lines, Salton Sea', 'fotograma' ); ?></p>
  154. <!-- /wp:paragraph -->
  155. <!-- wp:paragraph {"fontSize":"small"} -->
  156. <p class="has-small-font-size"><?php echo esc_html__( 'Photographer: Charles O&rsquo;Rear', 'fotograma' ); ?></p>
  157. <!-- /wp:paragraph -->
  158. </div>
  159. <!-- /wp:column -->
  160. <!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0px"}}} -->
  161. <div class="wp-block-column" style="flex-basis:25%">
  162. <!-- wp:paragraph {"fontSize":"small"} -->
  163. <p class="has-small-font-size"><?php echo esc_html__( 'By around 1972, this area was already embedded in a network of transportation and utility corridors that reflected both its historical significance and its attempts at economic development.', 'fotograma' ); ?></p>
  164. <!-- /wp:paragraph -->
  165. </div>
  166. <!-- /wp:column -->
  167. </div>
  168. <!-- /wp:columns -->
  169. <!-- wp:cover {"url":"<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/1972-may-railroad-and-transmission-lines-near-salton-sea-california.jpg","dimRatio":0,"style":{"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"constrained"}} -->
  170. <div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
  171. <img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/1972-may-railroad-and-transmission-lines-near-salton-sea-california.jpg" data-object-fit="cover"/>
  172. <div class="wp-block-cover__inner-container">
  173. <!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
  174. <p class="has-text-align-center has-large-font-size"></p>
  175. <!-- /wp:paragraph -->
  176. </div>
  177. </div>
  178. <!-- /wp:cover -->
  179. </div>
  180. <!-- /wp:group -->
  181. <!-- wp:pattern {"slug":"fotograma/stack-contact"} /-->