Add tentative "social" sidebar

1 files changed, 30 insertions, 6 deletions

diff --git a/commun.css b/commun.css
index 42ae00c..5778c4a 100644
--- a/commun.css
+++ b/commun.css
@@ -1,24 +1,24 @@
-header {
+header.banner {
     display: flex;
     align-items: center;
 }
 
-header .brand {
+header.banner .brand {
     display: flex;
     align-items: center;
     max-width: 40%;
 }
 
-header .brand img {
+header.banner .brand img {
     transition: filter 1s;
 }
-header .brand h1 {
+header.banner .brand h1 {
     transition: color 1s;
 }
-header .brand:hover img {
+header.banner .brand:hover img {
     filter: brightness(100%) sepia(100%);
 }
-header .brand:hover h1 {
+header.banner .brand:hover h1 {
     color: #d82;
 }
 
@@ -47,6 +47,30 @@ nav ol li {
     flex: 1;
 }
 
+header.social {
+    float: right;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.social img {
+    width: 2em;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.contact {
+    /* Ideally should be just: */
+    /* writing-mode: sideways-lr; */
+    /* but of course We Can't Have Nice Things. */
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+    margin: 0;
+    margin-inline-start: 0.5em;
+}
+
+
 body {
     display: flex;
     flex-direction: column;