1 files changed, 162 insertions, 0 deletions
diff --git a/design/sass/v8/_birds.scss b/design/sass/v8/_birds.scss
new file mode 100644
index 0000000..c50b22e
--- /dev/null
+++ b/design/sass/v8/_birds.scss
@@ -0,0 +1,162 @@
+.iframe-wrapper {
+    @include constrain_wide()
+}
+
+.taxon {
+    display: none !important;
+}
+
+#birds, .birds {
+    .post--title {
+        @include fontsize(18);
+        a {
+            font-style: normal;
+            @include fontsize(22);
+        }
+    }
+    .audio-figure {
+        audio {
+            display: block;
+            width: 100%;
+        }
+        small { display: block;}
+    }
+    .post--image {
+        position: relative;
+        width: 100%;
+        figcaption {
+            opacity: 0;
+            @include fancy-sans;
+            @include fontsize(13);
+            position: absolute;
+            bottom: 0;
+            text-align: left;
+            width: 99%;
+            background: rgba(0, 0, 0, 0.75);
+            padding: .5em 0 .5em .5em;
+            margin-bottom: .5em;
+            color: #ccc;
+
+            a {
+                color: #ccc;
+            }
+        }
+        img {
+            max-width: 100%;
+            width: 100%;
+            padding: 0;
+            background: none;
+        }
+        .picfull {
+            margin: 0;
+        }
+    }
+    .post--image:hover figcaption {
+        -webkit-transition: opacity .25s ease-in;
+        -moz-transition: opacity .25s ease-in;
+        transition: opacity .25s ease-in;
+        opacity: 1;
+    }
+}
+
+.sci {
+    font-style: italic;
+}
+.birds {
+    article {
+        @include constrain_narrow;
+    }
+    audio { width: 100%;}
+    .audio-figure { 
+        margin-top: 2em;
+        margin-bottom: 2em;
+    }
+    article h2, h3 { font-weight: 400;}
+    article h2 { margin-bottom: 0;}
+    h3 {
+        margin-top: 0;
+    }
+    .map { 
+        margin: 0 auto;
+        width: 99%; 
+        height: 400px; 
+        @include breakpoint(beta) {
+            @include constrain_narrow;
+        }
+    }
+    #endnode {
+        @include breakpoint(beta) {
+            text-align: left;
+        }
+        @include fancy-sans;
+        @include fontsize(14);
+        margin-top: 4rem;
+        h5 {
+            @include fontsize(14);
+            @include smcaps;
+            @include fancy_sans;
+            margin-bottom: 1rem;
+            margin-top: 2rem;
+        }
+        ul {
+            margin-bottom: 2em;
+            li {
+            color: lighten($body_font, 30);
+            &:before {
+              content: "\2022";
+              color: lighten($body_font, 30);
+              margin-right: .35rem;
+          }
+        }
+        }
+        a {
+            text-decoration: none;
+            color: lighten($body_font, 10);
+        }
+        &:before {
+            @include faded_line_after;
+        }
+    }
+    #detail-map-canvas {
+        width: 100vw;
+        @include constrain_wide;
+        position: relative;
+        @include breakpoint(gamma) {
+            left: calc(-20%);
+        }
+        @include breakpoint(delta) {
+            left: calc(-38%);
+        }
+        @include breakpoint(epsilon) {
+            left: calc(-45%);
+        }
+    }
+}
+.life-list {
+    @include constrain_wide;
+    text-align: left;
+    h4 { @include fancy_sans;}
+    ul {
+        @include breakpoint(beta){
+            height: 1200px;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+        }
+        @include breakpoint(gamma){
+            height: 1000px;
+        }
+        @include breakpoint(epsilon){
+            height: 800px;
+        }
+    }
+    li {
+      margin-bottom: .35rem;
+    }
+    a {
+        color: $body_font;
+        text-decoration: none;
+
+    }
+}
+