RWF site rewrite in simple html

index.css

@@ -0,0 +1,111 @@
+* {
+  box-sizing: border-box;
+}
+html, body {
+  margin: 0;
+  padding: 0;
+}
+header {
+   position: sticky;
+   top: 0;
+   background: white;
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   flex-wrap: wrap;
+   opacity: 0.975;
+   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+   height: 100px;
+}
+.container {
+  padding: 1em max(calc(100vw - 1200px) / 2, 1em);
+}
+section {
+  max-width: 100%;
+  scroll-margin-top: 100px;
+}
+@media (max-width: 600px) {
+  header { height: 130px; }
+  section { scroll-margin-top: 130px; }
+}
+section:nth-child(even) {
+  background: #f8f8f8;
+}
+.logo img {
+  height: 60px;
+}
+@media (max-width: 600px) {
+  .logo, nav {
+    margin: auto;
+  }
+}
+nav ul {
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  gap: 1.5em;
+}
+nav a {
+  text-decoration: none;
+}
+a {
+  color: #355e3b;
+}
+p, li {
+  line-height: 1.6em;
+}
+#home {
+  height: 50vh;
+}
+#home img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center center;
+}
+
+/* PHOTOS */
+#photos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+}
+#photos img:not(.full) {
+  width: calc(25% - .75em);
+  min-width: 120px;
+  max-height: 12em;
+  object-fit: cover;
+  cursor: pointer;
+  border: 2px solid #355e3b;
+}
+#photos img.full {
+  position: fixed;
+  padding: 1em;
+  top: 0; right: 0; bottom: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  object-fit: contain;
+  cursor: pointer;
+  background: rgba(0,0,0,0.8);
+}
+
+/* COLUMNS */
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+}
+.column {
+  width: 50%;
+}
+@media (max-width: 720px) {
+  .column {
+    width: 100%;
+  }
+}
+
+/* MAP */
+#map {
+  width: 100%;
+  height: 50vh;
+}