Landing page

root/static/css/style.css

@@ -31,16 +31,16 @@ body {
 
 header {
     margin: 0;
-    background-color: #4CAF50;
 }
 
 header nav ul {
     list-style-type: none;
     padding-left: 0;
 }
 
-header nav li {
-    display: inline;
+header nav .nav-item {
+    display: inline-flex;
+    align-items: center;
 }
 
 /* "Logout" must be button for POST request but style like link */
@@ -108,44 +108,17 @@ header #user_nav ul {
     align-items: flex-end;
 }
 
-header #user_nav ul p + div {
-    margin-top: 1em;
-}
-
-header #user_nav ul div:only-child {
-    margin-top: 3em;
-}
-
-header #user_nav h4 {
-    margin: 0;
-    padding: 0 0.5em 0 0.5em;
-    color: #f5f5ef;
-}
-
-header #user_nav h4 a {
-    color: #f5f5ef;
-}
-
-header nav input[name="logout"] {
-    background-color: #4CAF50;
-    color: #333333;
-}
-
-header nav input[name="logout"]:active,
-header nav input[name="logout"]:hover {
-    color: #f5f5ef;
-
-    box-shadow:         0px 0px 0px grey !important;
-}
-
 /*** project nav ***/
 
 header #project_nav a:hover {
-    background-color:#f5f5ef;
-    color: #333333;
+    color: #4CAF50;
 }
 
 /*** submenu nav ***/
+header #submenu_nav {
+    background-color: #4CAF50;
+}
+
 header #submenu_nav a:hover,
 header #submenu_nav a.current {
     color: #f5f5ef !important;
@@ -328,10 +301,52 @@ input[type=number].editable-content:not(:focus) {
     display: none;
 }
 
+.btn:focus {
+    box-shadow: none !important;
+}
+
+a.dark-link, button.dark-link {
+    color: #f5f5ef !important;
+}
+
+a.dark-link:hover, button.dark-link:hover {
+    text-decoration: none !important;
+    color: #4CAF50 !important;
+}
+
+.content-box {
+    background-color: var(--bs-light);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    margin-bottom: 1rem;
+}
+
+.item-box {
+    background-color: #4CAF50;
+    width: 100px;
+    height: 100px;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden; 
+}
+
+.item-box span {
+    display: inline;
+    width: 100%;
+    word-wrap: break-word;
+    white-space: normal;
+    -moz-hyphens: auto;
+   -o-hyphens: auto;
+   -webkit-hyphens: auto;
+   -ms-hyphens: auto;
+   hyphens: auto;
+}
+
 /******** footer part ********/
 
 footer {
-    background-color: #333333;
     color: #f5f5ef;
     position: absolute; /*necessary to position it at the bottom in all cases*/
     bottom: 0;

root/templates/homepage.tt

@@ -1,25 +1,34 @@
 [% INCLUDE 'homepage_intro.tt' %]
 
+<div class="content-box">
 [% INCLUDE 'includes/recipes_of_the_day.tt' %]
 
-<h2>Recent public recipes</h2>
+        <h2>Recent public recipes</h2>
 
-<ul>
+        <ul class="list-unstyled d-flex flex-wrap gap-3">
 [% FOR recipe IN public_recipes %]
-    <li><a href="[% recipe.url %]">[% recipe.name | html %]</a></li>
+                <li><a class="item-box text-white" href="[% recipe.url %]"><span>[% recipe.name | html %]</span></a></li>
+[% END %]
+        </ul>
+
+[% IF public_recipes.size == 0 %]
+        <p><i>It looks like you don't have any recent public recipes yet.</i></p>
 [% END %]
-</ul>
 
 [% IF public_recipes.size == max_recipes %]
-    <p>Browse <a href="[% recipes_url %]">all public recipes</a></p>
+        <p>Browse <a href="[% recipes_url %]">all public recipes</a></p>
 [% END %]
 
-<h2>Active public Projects</h2>
+        <h2>Active public projects</h2>
 
-<ul>
+        <ul class="list-unstyled d-flex flex-wrap gap-3">
 [% FOR proj IN active_public_projects # don't overwrite $project! %]
-    <li>
-        <a href="[% proj.url %]">[% proj.name | html %]</a>
-    </li>
+                <li><a class="item-box text-white" href="[% proj.url %]"><span>[% proj.name | html %]</span></a></li>
 [% END %]
-</ul>
+        </ul>
+
+[% IF active_public_projects.size == 0 %]
+        <p><i>It looks like you don't have any active public projects yet.</i></p>
+[% END %]
+
+</div>

root/templates/homepage_intro.tt

@@ -1 +1,30 @@
-<p>Coocook, a web application for collecting recipes and making food plans.</p>
+<div class="px-4 mb-5">
+    <p>Coocook is a web application for collecting recipes and making food plans. You can ...</p>
+</div>
+<div class="content-box mb-5">
+    <div class="d-flex justify-content-around align-items-center w-100">
+        <div class="d-flex flex-column gap-3 text-center">
+            <i class="material-icons fs-1">menu_book</i>
+            <span>collect recipes</span>
+        </div>
+        <i class="material-icons">east</i>
+        <div class="d-flex flex-column gap-3 text-center">
+            <i class="material-icons fs-1">restaurant_menu</i>
+            <span>create a food plan</span>
+        </div>
+        <i class="material-icons">east</i>
+        <div class="d-flex flex-column gap-3 text-center">
+            <i class="material-icons fs-1">fact_check</i>
+            <span>gather purchase lists</span>
+        </div>
+        <i class="material-icons">east</i>
+        <div class="d-flex flex-column gap-3 text-center">
+            <i class="material-icons fs-1">print</i>
+            <span>print a project overview</span>
+        </div>
+    </div>
+</div>
+<div class="px-4 mb-5">
+    <p>You are more interested in Coocook? Check out the <a href="https://coocook.org/faq">FAQ on Coocook.org</a> and <a href="https://lists.coocook.org/mailman/listinfo/coocook">join our mailing list</a> to get more informations.</p>
+    <p>You celebrate Coocook as much as we do and want to make it better too? Great! <a href="https://github.com/dboehmer/coocook/issues">Report bugs or suggestions for improvement</a> or even become part of the open volunteer development team.</p>
+</div>