Logged out experience, config, and profiles

3 files changed, 57 insertions, 27 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 9c9d625..d7b561e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -104,6 +104,7 @@ body {
     color: var(--color-text-main);
     font-family: "Raleway", sans-serif;
     font-size: 16px;
+    min-height: 100%;
 }
 
 main {
@@ -113,6 +114,19 @@ main {
     border-radius: 5px;
 }
 
+footer {
+    width: 900px;
+    margin: 0 auto;
+    padding: 0 0 10px 0;
+    color: var(--color-text-duller);
+    text-align: center;
+    font-size: 90%;
+}
+
+footer a {
+    border-bottom: 1px solid var(--color-text-duller);
+}
+
 header {
     display: flex;
 }
@@ -127,6 +141,7 @@ header .logo {
     font-size: 130%;
     color: var(--color-text-main);
     border-bottom: 3px solid rgba(0, 0, 0, 0);
+    z-index: 10;
 }
 
 header .logo:hover {
@@ -144,6 +159,7 @@ header menu {
     display: flex;
     list-style-type: none;
     justify-content: flex-start;
+    z-index: 10;
 }
 
 header menu a {
@@ -151,7 +167,11 @@ header menu a {
     color: #eee;
     line-height: 30px;
     border-bottom: 3px solid rgba(0, 0, 0, 0);
-    border-right: 1px solid var(--color-bg-menu);
+}
+
+body.has-banner header menu a {
+    background: rgba(0, 0, 0, 0.5);
+    border-right: 0;
 }
 
 header menu a:hover,
@@ -159,6 +179,12 @@ header menu a.selected {
     border-bottom: 3px solid var(--color-highlight);
 }
 
+header menu a i {
+    font-size: 24px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
 header menu .gap {
     flex-grow: 1;
 }
@@ -167,17 +193,11 @@ header menu a.identity {
     border-right: 0;
     text-align: right;
     padding-right: 10px;
-    background: var(--color-bg-menu);
+    background: var(--color-bg-menu) !important;
     border-radius: 0 5px 0 0;
     width: 250px;
 }
 
-header menu a i {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: 10px;
-}
-
 header menu a img {
     display: inline-block;
     vertical-align: middle;
@@ -267,8 +287,6 @@ nav a i {
 
 /* Icon menus */
 
-.icon-menu {}
-
 .icon-menu>a {
     display: block;
     margin: 0px 0 20px 0;
@@ -431,6 +449,17 @@ form textarea {
     color: var(--color-text-main);
 }
 
+form .clear {
+    color: var(--color-text-main);
+    font-size: 90%;
+    margin: 5px 0 5px 0;
+}
+
+form .clear input {
+    display: inline;
+    width: 32px;
+}
+
 .right-column form.compose input,
 .right-column form.compose textarea {
     margin: 0 0 10px 0;
@@ -531,6 +560,16 @@ form .button:hover {
     padding: 2px 6px;
 }
 
+/* Logged out homepage */
+
+.about img.banner {
+    width: calc(100% + 30px);
+    height: auto;
+    object-fit: cover;
+    margin: -65px -15px 0 -15px;
+    display: block;
+}
+
 /* Identities */
 
 h1.identity {
@@ -542,7 +581,8 @@ h1.identity .banner {
     height: 200px;
     object-fit: cover;
     display: block;
-    margin: 0 0 20px 0;
+    width: calc(100% + 30px);
+    margin: -65px -15px 20px -15px;
 }
 
 h1.identity .icon {
@@ -723,26 +763,16 @@ h1.identity small {
         border-radius: 0;
     }
 
-    header .logo {
-        border-radius: 0;
+    footer {
+        width: 100%;
+        background-color: var(--color-bg-box);
+        padding: 10px 0;
     }
 
-}
-
-
-
-@media (max-width: 800px) {
-    header menu a {
-        font-size: 0;
-        padding: 10px 20px 4px 20px;
+    header .logo {
+        border-radius: 0;
     }
 
-    header menu a i {
-        display: inline-block;
-        vertical-align: middle;
-        margin: 0;
-        font-size: 20px;
-    }
 }
 
 
diff --git a/static/img/fjords-banner-600.jpg b/static/img/fjords-banner-600.jpg
new file mode 100644
index 0000000..4d4fed8
--- /dev/null
+++ b/static/img/fjords-banner-600.jpg
diff --git a/static/img/fjords-banner-900.jpg b/static/img/fjords-banner-900.jpg
new file mode 100644
index 0000000..2c46c17
--- /dev/null
+++ b/static/img/fjords-banner-900.jpg