add makefile

Makefile

@@ -1,50 +1,5 @@
-DOCKER_HOST=playground.pi
+install:
-SITE_URL=iaro.sinewell.de
+	mkdir -p $(DESTDIR)
-PROJECT_NAME=client-iaro
+	cp -r . $(DESTDIR)/
-CONTAINER_NAME_WORDPRESS=${PROJECT_NAME}_wordpress
+	rm $(DESTDIR)/Makefile
-CONTAINER_NAME_DB=${PROJECT_NAME}_db
+	rm $(DESTDIR)/wordpress.yml
-TEMPLATE_NAME=iaro
-
-docker_deploy:
-
-	docker run --rm -it \
-	  -v /tmp/backup:/backup -v /var/lib/docker:/docker \
-		-v $(shell pwd):/docker/volumes/${CONTAINER_NAME_WORDPRESS}/_data/wp-content/themes/${TEMPLATE_NAME} \
-		alpine:edge tar cpfz /backup/volumes.tgz /docker/volumes/${CONTAINER_NAME_WORDPRESS} /docker/volumes/${CONTAINER_NAME_DB}
-	rsync --progress /tmp/backup/volumes.tgz ${DOCKER_HOST}:/tmp/
-
-	-DOCKER_HOST="ssh://${DOCKER_HOST}" docker stop ${CONTAINER_NAME_WORDPRESS}_1 ${CONTAINER_NAME_DB}_1
-	-DOCKER_HOST="ssh://${DOCKER_HOST}" docker rm ${CONTAINER_NAME_WORDPRESS}_1 ${CONTAINER_NAME_DB}_1
-	-DOCKER_HOST="ssh://${DOCKER_HOST}" docker volume rm ${CONTAINER_NAME_WORDPRESS} ${CONTAINER_NAME_DB}
-
-	DOCKER_HOST="ssh://${DOCKER_HOST}" docker run --rm -it \
-	  -v /var/lib/docker:/docker \
-		-v /tmp:/volume-backup \
-		alpine:edge tar --strip-components=2 -xpvf /volume-backup/volumes.tgz -C /docker/volumes/
-	DOCKER_HOST="ssh://${DOCKER_HOST}" docker run --rm -it \
-	  -v /var/lib/docker:/docker \
-		-v /tmp:/volume-backup \
-		alpine:edge sed -i 81idefine\\\(\\\'WP_SITEURL\\\',\\\'https://${SITE_URL}\\\'\\\)\\\;\\ndefine\\\(\\\'WP_HOME\\\',\\\'https://${SITE_URL}\\\'\\\)\\\; /docker/volumes/${CONTAINER_NAME_WORDPRESS}/_data/wp-config.php
-
-	# # Need to fix MaxSessions in remote ssh daemon https://github.com/docker/compose/issues/6463
-
-	cp wordpress.yml /tmp/wordpress.yml
-	sed -e '/${TEMPLATE_NAME}/ s/^#*/#/' -i /tmp/wordpress.yml
-	DOCKER_HOST="ssh://${DOCKER_HOST}" docker-compose -p ${PROJECT_NAME} -f /tmp/wordpress.yml up --no-start
-	DOCKER_HOST="ssh://${DOCKER_HOST}" docker-compose -p ${PROJECT_NAME} -f /tmp/wordpress.yml start
-
-	sleep 20
-	hyperpotamus -v setup-jetpack.yml
-
-docker_up:
-	docker-compose -f wordpress.yml up
-
-generate_pot:
-	wp i18n make-pot kit kit/languages/kit.pot # generate source file
-	for i18n in "de_DE" "fr_FR"; do \
-	   # update translated language file \
-		msgmerge -N kit/languages/$${i18n}.po kit/languages/kit.pot > kit/languages/$${i18n}.po.new ; \
-		mv kit/languages/$${i18n}.po.new kit/languages/$${i18n}.po ;\
-		# generate mo file \
-		msgfmt -o kit/languages/$${i18n}.mo kit/languages/$${i18n}.po ; \
-	done

content.php

@@ -1,3 +1,21 @@
+<section class="hero-main hero">
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns">
+                <div class="column is-two-fifths">
+                    <h1>Mobile Kork Sauna</h1>
+                    <p class="body1">
+                        Handgefertigt in Fachwerkbauweise aus den Naturstoffen Kork und 
+                        Holz. Die mobile Sauna mit Holzofen für den eigenen Garten oder 
+                        direkt am See.
+                    <p> <br> 
+                    <a class="button" href="/anfrage">Jetzt Mietanfrage stellen</a>
+                </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
 <section class="why-signal section">
         <div class="container">
             <div class="columns is-centered">

files/bulma.css

@@ -3314,6 +3314,12 @@ fieldset[disabled] .button {
     margin-right: .25rem
 }
 
+body > .container {
+    padding-top: 30px;
+    flex-grow: 1;
+    width: 100%;
+}
+
 .container {
     flex-grow: 1;
     margin: 0 auto;
@@ -3332,11 +3338,24 @@ fieldset[disabled] .button {
     .hero-body > .container {
        flex-grow: unset;
     }
+    .container {
+        padding: 0 30px;
+    }
+
+    .container .container,
+    footer .container,
+    nav .container {
+        padding: 0 0;
+    }
+
+    .section:not(.features) {
+        padding: 3rem 0rem !important;
+    }
 }
 
 @media screen and (min-width: 1024px) {
     .container {
-        max-width: 960px
+        max-width: 960px;
     }
 }
 
@@ -7851,18 +7870,6 @@ a.navbar-item {
     cursor: pointer
 }
 
-.navbar-link.is-active,
-.navbar-link:focus,
-.navbar-link:focus-within,
-.navbar-link:hover,
-a.navbar-item.is-active,
-a.navbar-item:focus,
-a.navbar-item:focus-within,
-a.navbar-item:hover {
-    background-color: #fafafa;
-    color: #3273dc
-}
-
 .navbar-item {
     display: block;
     flex-grow: 0;

functions.php

@@ -23,6 +23,18 @@ add_action( 'after_setup_theme', 'fachwerksauna_setup' );
 
 function theme_customize_register( $wp_customize ) {
 
+    $wp_customize->add_setting( 'theme_color', array(
+        'default'   => '#ed9b40',
+        'transport' => 'refresh',
+      ) );
+
+    $wp_customize->add_control( new WP_Customize_Color_Control(
+    $wp_customize, 'theme_color', array(
+    'section' => 'colors',
+    'label'   => esc_html__( 'Theme color', 'theme' ),
+    ) ) );
+  
+  
     $wp_customize->add_setting( 'fachwerksauna_footer-text', array(
         'default' => '',
         'type' => 'option',
@@ -43,3 +55,17 @@ function theme_customize_register( $wp_customize ) {
 }
 
 add_action( 'customize_register', 'theme_customize_register' );
+
+function fachwerksauna_customize_css()
+{
+    $theme_color = get_theme_mod('theme_color', '#ed9b40');
+    ?>
+         <style type="text/css">
+             :root {
+                --themeColor: <?php echo $theme_color; ?>;
+            }
+         </style>
+    <?php
+}
+
+add_action( 'wp_head', 'fachwerksauna_customize_css');

index.php

@@ -17,13 +17,13 @@
 
 </head>
 
-<body id="signal" class="index has-navbar-fixed-top">
+<body id="signal" <?php body_class( "has-navbar-fixed-top" ); ?>>
     <nav class="navbar mainNavbar is-fixed-top" role="navigation" aria-label="main navigation">
         <div class="container">
             <div class="navbar-brand">
                 <a href="/">
                     <img class="logo" 
-                        src="<?php echo get_stylesheet_directory_uri().'/files/logo.webp'; ?>">
+                        src="<?php echo get_stylesheet_directory_uri().'/files/logo.png'; ?>">
                 </a>
                 <a
                     role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
@@ -150,25 +150,7 @@
             </div>
         </div>
     </nav>
-    <section class="hero-main hero">
-        <div class="hero-body">
     <div class="container">
-                <div class="columns">
-                    <div class="column is-two-fifths">
-                        <h1>Mobile Kork Sauna</h1>
-                        <p class="body1">
-                            Handgefertigt in Fachwerkbauweise aus den Naturstoffen Kork und 
-                            Holz. Die mobile Sauna mit Holzofen für den eigenen Garten oder 
-                            direkt am See.
-                        <p> <br> 
-                        <!--<a class="get-signal button" href="https://signal.org/download/">Jetzt mieten</a> -->
-                    </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <div class="contentWrapper">
         <?php the_content(); ?>
     </div>
     <footer class="footer">
@@ -193,15 +175,18 @@
                 </div>
             </div>
         </div>
+        <?php wp_footer(); ?>
     </footer>
     <script language="javascript">
-        document.getElementsByClassName('navbar-burger')[0].onclick = function(){
+        var burgerMenu = document.getElementsByClassName('navbar-burger')[0];
-            console.log('ready');
+        burgerMenu.onclick = function(){
             var x = document.getElementById("mainNavbar");
                 if (x.style.display === "block") {
                     x.style.display = "none";
+                    burgerMenu.classList.remove('is-active');
                 } else {
                     x.style.display = "block";
+                    burgerMenu.classList.add('is-active');
                 }
         };
     </script>

style.css

@@ -16,31 +16,32 @@ html { margin-top: 0px !important; }
 body {
     color: #1b1b1b;
     font-family: Inter, sans-serif;
-    overflow-x: hidden
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
 }
 
 a:hover {
-    color: #1851B4;
+    color: var(--themeColor);
-    text-decoration: underline
+    text-decoration: underline;
+    filter: brightness(120%);
 }
 
-.content p {
+.content p, p {
     font-size: 16px;
     font-weight: 400;
     line-height: 22px;
     margin-bottom: 10px;
 }
 
-.contentWrapper > p, ul {
+p a:not(.button), label a {
-    width: 100%;
+    color: var(--themeColor) !important;
-    max-width: 1390px;
+}
-    margin: 0 auto;
+
-    font-size: 16px;
+p a:not(.button):hover, label a:hover {
-    font-weight: 400;
+    filter: brightness(120%);
-    line-height: 22px;
+}
-    margin-bottom: 10px;
-    padding: 0 23px;
-  }
 
 h1 {
     font-size: 60px;
@@ -121,7 +122,7 @@ a.no-underline {
 }
 
 .button {
-    background-color: #ED9B40;
+    background-color: var(--themeColor);
     text-shadow: none;
     border: none;
     border-radius: 8px;
@@ -133,7 +134,7 @@ a.no-underline {
 }
 
 .rentButton {
-    background-color: #ED9B40;
+    background-color: var(--themeColor);
     border-radius: 10px;
     padding: 10px 20px !important;
     margin-left: 10px;
@@ -141,6 +142,41 @@ a.no-underline {
     color: white !important;
 }
 
+.mailpoet_submit, .wp-block-button__link {
+	background-color: var(--themeColor);
+	text-shadow: none;
+	border: none;
+	border-radius: 8px;
+	color: #fff;
+	font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-weight: 600 !important;
+	text-decoration: none;
+	padding: 10px 15px !important;
+	font-size: 14px;	
+}
+
+.mailpoet_submit:hover, .wp-block-button__link:hover {
+	filter: brightness(120%);
+}
+
+.mailpoet_text {
+	padding: 10px !important;
+}
+
+.contact-form label {
+	font-weight: 500;
+}
+
+.contact-form label.textarea {
+	min-height: unset !important;
+	border: 0;
+	padding-left: 0;
+}
+
+.contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="text"], .contact-form input[type="url"] {
+	padding: 10px 7px;
+}
+
 @media screen and (max-width: 1024px) {
     .rentButton {
         margin: 5px 10px;
@@ -148,7 +184,8 @@ a.no-underline {
 }
 
 .rentButton:hover {
-    background-color: #FFAA48 !important;
+    background-color: var(--themeColor) !important;
+    filter: brightness(120%);
 }
 
 .button[disabled] {
@@ -156,7 +193,8 @@ a.no-underline {
 }
 
 .button:hover {
-    background-color: #FFAA48;
+    background-color: var(--themeColor) !important;
+    filter: brightness(120%);
     color: #fff;
     text-decoration: none
 }
@@ -219,6 +257,22 @@ html.has-navbar-fixed-top {
     border-bottom: 1px solid #ebeaeb
 }
 
+body.logged-in,
+body.logged-in nav {
+    margin-top: 32px;
+}
+
+@media (max-width: 782px) {
+    body.logged-in,
+    body.logged-in nav {
+        margin-top: 46px;
+    }
+
+    html #wpadminbar {
+        position: fixed !important;
+    }
+}
+
 @media (min-width: 1024px) {
 
     body.has-navbar-fixed-top,
@@ -278,7 +332,7 @@ html.has-navbar-fixed-top {
 }
 
 .mainNavbar a.navbar-item:hover {
-    color: #C76E08;
+    color: var(--themeColor);
 }
 
 .mainNavbar .language-selector .icon {
@@ -293,6 +347,9 @@ html.has-navbar-fixed-top {
     max-height: 760px;
     min-height: 600px;
     background-position: 70% 0%;
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    margin-top: -30px;
 }
 
 @media (min-width: 1024px) {
@@ -419,7 +476,9 @@ html.has-navbar-fixed-top {
 }
 
 .section.features {
-    background-color: #F6F6F6
+    background-color: #F6F6F6;
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
 }
 
 .section.features .box {