jekyll-theme-chaos 0.1.0

data/_sass/chaos/form.scss

@@ -0,0 +1,96 @@
+// @import "/assets/css/Chaos-style.scss";
+
+.target:target{
+  display: block;
+
+}
+.target{
+  display: none;
+  color: $accent-color;
+}
+button.Chaos-Button{
+  border: 0;
+  padding-top: $spacing-unit * 0.7;
+  padding-bottom: $spacing-unit * 0.5;
+}
+input[type="submit"], button{
+  all: none;
+  border: 0;
+}
+.Chaos-Form{
+  font-size: $base-font-size * 0.8;
+  input,select{
+    border-style:solid;
+    border-width: 0;
+    border-radius: 0;
+    width: 100%;
+    border-color: $accent-color;
+    font-size: $base-font-size;
+    font-family: $base-font-stack;
+    background-color: $background-color;
+    // background-color: rgba(0,0,0,0);
+  }
+  div.input.text{
+    margin: $spacing-unit*1.5 $spacing-unit * 1.4;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  input[required], textarea[required], select[required] {
+    & + label::after{
+          content: " *";
+          color: $brand-color;
+        }
+  }
+  input[type="checkbox"]{
+    width: auto;
+  }
+  select {
+    // -webkit-appearance: none;
+    // -moz-appearance: none;
+    // appearance: none;       /* Remove default arrow */
+    // background-image: url(...);   /* Add custom arrow */
+    border-width: 2px;
+    padding: $spacing-unit;
+    border-radius: $rounding;
+  }
+  input[type="email"], input[type="text"], input[type="tel"], textarea{
+    border-width: 2px;
+    padding: $spacing-unit;
+    border-radius: $rounding;
+    &:focus{
+      border-color: $brand-color;
+      border-width: 3px;
+      outline-color: $brand-color;
+    }
+  }
+  textarea{
+    max-width: 100%;
+    &.expand:focus{
+      height: 40vh;
+    }
+  }
+  fieldset{
+    border: 0;
+    padding:0;
+    &.pair{
+      @media screen and (min-width: $content-width-narrow) {
+        display: flex;
+        .input {
+          max-width: 50%;
+        }
+
+      }
+      display: block;
+      .input{
+        max-width: 100%;
+      }
+
+    }
+  }
+  .form-submit-message:target{
+    display: block;
+  }
+  .form-submit-message{
+    display: none;
+  }
+}

data/_sass/chaos/header.scss

@@ -0,0 +1,118 @@
+
+.nav-hide {
+    top: -$action-bar-height-mobile;
+    @media screen and (min-width: $on-small) {
+        top: -$action-bar-height;
+    }
+}
+
+.nav-visible {
+    top: 0;
+}
+
+.Chaos-Header {
+    transition: top 0.2s ease-in-out;
+    box-shadow: 0 1px 10px $shadow-color;
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    color: $brand-color;
+    text-transform: uppercase;
+    a {
+        font-weight: normal;
+    }
+
+    .edgePadding {
+        flex-basis: 40px;
+        flex-shrink: 10000;
+        flex-grow: 0;
+        min-width: 5px;
+    }
+
+    .centralPadding {
+        flex-basis: 40px;
+        flex-shrink: 10000;
+        flex-grow: 10000;
+        min-width: 20px;
+    }
+
+    .social-links {
+        a {
+            text-decoration: none;
+
+            svg {
+                transition: 0.2s;
+                fill: $brand-text-color;
+                height: 38px;
+
+                &:hover{ fill: invert($brand-text-color);
+                    path, .st0 {
+                        fill: $brand-text-color;
+                    }
+                }
+
+                path, .st0 { fill: invert($brand-text-color); }
+            }
+        }
+
+    }
+
+    .site-title {
+        font-family: $header-font-stack;
+        font-size: $base-font-size * 1.625;
+        &, &:visited { color: $text-color; }
+        transition: 0.1s;
+        &:hover {
+            text-decoration: none;
+            border-bottom: 3px solid $accent-color;
+            color: $background-color;
+        }
+
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        line-height: 1.2;
+    }
+
+    .site-title img {
+        max-height: $action-bar-height-mobile;
+
+
+        @media screen and (min-width: $on-small) {
+            max-height: $action-bar-height;
+        }
+
+        box-sizing: border-box;
+        padding: 10px 0;
+    }
+
+    .site-title .logo-square
+    {
+        display: none;
+        max-width: $action-bar-height-mobile;
+        max-height: $action-bar-height-mobile;
+
+        @media screen and (min-width: $on-small) {
+            max-width: $action-bar-height-mobile;
+            max-height: $action-bar-height;
+        }
+    }
+
+    @media screen and (max-width: 250px) {
+        .site-title .main-logo { display: none; }
+        .site-title .logo-square { display: block; }
+        .centralPadding { min-width: 0;}
+        .site-title span { display: none; }
+    }
+    @media screen and (max-width: 140px) {
+        .site-title .logo-square { display: none; }
+    }
+
+    @import
+        "chaos/desktop-header",
+        "chaos/mobile-header"
+        ;
+}

data/_sass/chaos/map.scss

@@ -0,0 +1,54 @@
+.Chaos-Map-Container{
+  display: flex;
+  #Chaos-Map{
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+  .Chaos-Map-Overlay{
+    @media screen and (min-width: 900px){
+      left:auto;
+      right: 0;
+    }
+    position: absolute;
+    max-width: 100vw;
+    max-height: 100vh;
+    z-index: 2;
+    top:0;
+    left: 0;
+    .Action-List{
+      display: flex;
+      @media screen and (min-width: 900px){
+        flex-direction: column;
+        max-width: 30vw;
+        overflow-y: scroll;
+        overflow-x: auto;
+      }
+      max-height: 100vh;
+      overflow-x: scroll;
+      .Action{
+        &.first{
+          box-shadow: 0 5px 10px $brand-color;
+          order: -2;
+        }
+        @media screen and (min-width: 900px){
+          flex-basis: auto;
+        }
+        flex: 0 0 200px;
+      }
+    }
+  }
+}
+#map{
+    height: 80vh;
+    width: 100%;
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+#national-climate-justice-memorial{
+  order: -1;
+}

data/_sass/chaos/mobile-header.scss

@@ -0,0 +1,228 @@
+.mobile {
+    background-color: $background-color;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-items: space-between;
+    align-items: center;
+    min-height: $action-bar-height-mobile;
+    height: 100%;
+
+    @media screen and (min-width: $on-small) {
+        min-height: $action-bar-height;
+    }
+
+    .nav-trigger { display: none; }
+
+    .site-title {
+        order: 2
+    }
+
+    > .Chaos-Button {
+        position: relative;
+        top: -1px;
+        order: 4;
+        margin-right: 16px;
+        font-size: 15px;
+        line-height: 1;
+        height: 42px;
+        padding: 13px 16px;
+        box-sizing: border-box;
+        display: none;
+
+        @media screen and (min-width: $on-small) {
+            & { display: inline-block;}
+        }
+    }
+
+    .menu-icon {
+        line-height: 0;
+        width: 18px;
+        height: 15px;
+        position: relative;
+        left: 0;
+        top:0;
+        transition: 0.3s;
+        padding: 14px;
+        border-radius: 50%;
+        background-color: $accent-color;
+
+        &:hover {
+            background-color: $accent-color-dark;
+        }
+
+        > svg path { fill: $accent-text-color; }
+    }
+
+    .close-menu, .open-menu {
+        width: 46px;
+        height: 46px;
+        align-self: center;
+        cursor: pointer;
+        order: 4
+    }
+
+    .centralPadding { order: 3}
+
+    .edgePadding {
+        order: 6;
+        max-width: 16px;
+
+        &:first-of-type { order: 1; }
+    }
+
+    input { order: 5}
+
+    .menu-icon { display: block; }
+
+    .desktop-nav { display: none; }
+
+    .social-links {
+        margin: 5px 20px 20px 0;
+        text-align: right;
+        align-items: center;
+
+        svg {
+            width: 42px;
+            height: 42px;
+            transition: 0.2s;
+        }
+    }
+
+    .close-menu {
+        display: none;
+        z-index: 2;
+        position: fixed;
+        top: 6px;
+        right: 16px;
+
+        @media screen and (min-width: $on-small) {
+            top: 14px;
+        }
+
+        .menu-icon {
+            width: 18px;
+            height: 18px;
+            padding: 12px 14px;
+        }
+    }
+
+    input ~ .mobile-drawer-container {
+        right: -100%;
+
+        @media screen and (min-width: $on-medium) {
+            & { display: none; }
+        }
+    }
+
+    input:checked ~ .close-menu { display: block; }
+
+    .mobile-drawer-container {
+        transition: right 0.3s ease-in-out;
+        box-shadow: -1px 0 10px $shadow-color;
+        position: fixed;
+        display: flex;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 1;
+        min-width: 240px;
+        max-width: 400px;
+        width:85%;
+
+        @media screen and (max-width: $on-tiny) {
+            & { min-width: unset; width: 100%;}
+        }
+
+        .mobile-drawer
+        {
+            background-color: $brand-color;
+
+            width: 100%;
+            position: relative;
+            padding-top: $action-bar-height-mobile;
+
+            @media screen and (min-width: $on-small) {
+                padding-top: $action-bar-height;
+            }
+
+
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            align-items: stretch;
+            align-content: space-around;
+
+            > a {
+                align-self: center;
+            }
+
+            .mobile-nav {
+                display: flex;
+                flex-direction: column;
+                flex-wrap: nowrap;
+                justify-content: flex-start;
+                align-items: stretch;
+                align-content: space-around;
+
+                .page-link {
+                    border-top: 1px solid $text-color;
+                    color: $brand-text-color;
+                    line-height: $base-line-height;
+                    font-family: $header-font-stack;
+                    font-size: $base-font-size * 1.5;
+
+                    &:hover {
+                        text-decoration: none;
+                        border-bottom: 1px solid $accent-color;
+                        color: $background-color;
+                    }
+                    padding: 0.5rem;
+                    padding-left: 1.5rem;
+                }
+
+                .page-link:hover + .page-link {
+                    border-top: none;
+                }
+
+            }
+        }
+    }
+
+    input:checked ~ .mobile-drawer-container {
+        right: 0;
+
+        @media screen and (min-width: $on-medium) {
+            & { display: none;}
+        }
+    }
+
+    .scrim {
+        position: fixed;
+        top:0;
+        left:0;
+        right:0;
+        bottom: 0;
+        background-color: black;
+        opacity: 0;
+        z-index: 0;
+        cursor: pointer;
+        display: block;
+        transition: opacity 0.3s ease-in-out;
+        pointer-events:none;
+    }
+
+    input:checked ~ .scrim {
+        pointer-events:initial;
+        opacity: 0.5;
+    }
+
+    @media screen and (min-width: $on-medium) {
+        .open-menu { display: none; }
+    }
+
+    @media screen and (min-width: $on-medium) {
+        & { display: none; }
+    }
+}

data/_sass/chaos/print.scss

@@ -0,0 +1,21 @@
+@media print
+{
+    body {
+        font-size: 12pt;
+    }
+    .Chaos-Header, .Chaos-Footer, .Chaos-Big-Picture, .Chaos-Half-Picture{
+        display: none;
+    }
+    .Chaos-Wrapper-Wide, .Chaos-Wrapper-Narrow {
+        padding-left: 0;
+        padding-right: 0;
+        max-width: none;
+        
+    }
+    .Chaos-Section {
+        padding: 3em 0;
+    }
+    body {
+        display: block;
+    }
+}

data/_sass/chaos.scss

@@ -0,0 +1,43 @@
+// Define defaults for each variable.
+// @font-face{
+//     font-family:"FucXed";
+//     font-style:normal;
+//     font-weight:normal;
+//     src:url("../fucxedcaps-v2-webfont.woff2") format("woff2"),url("../assets/fucxedcaps-v2-webfont.woff") format("woff");
+//     font-display:swap
+// }
+
+
+
+$table-text-align: left !default;
+
+// Width of the content area
+$content-width-narrow:    400px !default;
+$content-width-wide:    600px !default;
+$half-width:    500px !default;
+
+$on-small:         400px !default;
+$on-medium:        800px !default;
+$on-large:         1300px !default;
+
+$spacing-unit:     10px !default;
+$action-bar-height: 72px !default;
+$action-bar-height-mobile: 56px !default;
+$rounding: 5px;
+
+// Blocks
+$block-height: calc(max(min( 50vw, 60vh ), 400px));
+
+// Import partials.
+@import
+  "chaos/base",
+  "chaos/header",
+  "chaos/footer",
+  "chaos/content",
+  "chaos/print",
+  "chaos/form",
+  "chaos/block",
+  "chaos/map",
+  "custom",
+  "an-form"
+;

data/_sass/custom.scss

@@ -0,0 +1 @@
+// Nothing... placeholder for custom styling

data/_templates/an-event.md

@@ -0,0 +1,23 @@
+---
+title: Action Network Event
+slug: an-event
+
+---
+# {{ title }}
+
+{{ share_buttons }}
+{{ image }}
+{{ date }}
+
+## RSVP
+
+{{form}}
+
+## What
+
+{{ content }}
+
+## Where
+
+{{ address }}
+{{map}}

data/assets/css/MarkerCluster.Default.css

@@ -0,0 +1,60 @@
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 0.6);
+	}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}

data/assets/css/MarkerCluster.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}