jekyll-rebellion 0.1.0

data/_sass/rebellion/components.scss

@@ -0,0 +1,326 @@
+h1 {
+    font-family: $header-font-stack;
+    margin-bottom: 1em;
+}
+
+.Rebellion-Section {
+    padding: 50px 0;
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    &:first-of-type {
+        padding-top: $action-bar-height + 50;
+    }
+}
+
+.Rebellion-Big-Picture {
+    background-position: center;
+    background-size: cover;
+    height: 100vh;
+    padding: 0;
+}
+
+.Rebellion-Half-Picture {
+    background-position: center;
+    background-size: cover;
+    height: 60vh;
+    padding: 0;
+}
+
+.Rebellion-Contents {
+    background-color: $accent-color;
+    color: $accent-text-color;
+    line-height: 200%;
+    
+    a {
+        color: $accent-text-color;
+        font-size: $base-font-size * 1.1;
+        border-bottom: 1px dashed $accent-text-color;
+    }
+    a:hover {
+        text-decoration: none;
+        border-bottom: 1px solid $accent-text-color;
+    }
+
+    ol li {
+        list-style-type: decimal;
+    }
+    
+    ol li:before {
+        content: none;
+    }
+}
+
+
+.Rebellion-Near-Bottom {
+    position: absolute;
+    bottom: 10%;
+    left: 0;
+    right: 0;
+}
+
+.Rebellion-Flex-Line {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.Rebellion-PullQuote {
+    background-color: $brand-color;
+    color: $brand-text-color;
+    font-family: $header-font-stack;
+    text-align: center;
+    padding: 130px 0 100px 0;
+
+    h1 {
+        text-align: left;
+    }
+}
+
+.Rebellion-Floating-Boxes {
+    background-color: $background-color;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    align-content: center;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+
+    .Rebellion-Floating-Box {
+        position: relative;
+        background-color: $background-color;
+        font-size: $small-font-size;
+        box-shadow: 0 5px 10px $shadow-color;
+        margin: $spacing-unit;
+        padding: 2*$spacing-unit 0;
+        width: 310px;
+
+        padding-bottom: 46px + 2*$spacing-unit;;
+
+        .at-bottom {
+            position: absolute;
+            bottom: 2*$spacing-unit;
+            width: 100%;
+        }
+
+        .Rebellion-Button {
+            position: relative;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        text-align: center;
+        font-family: $header-font-stack;
+
+        h2 {
+            border-bottom: 4px solid $accent-color;
+            padding: 0 2*$spacing-unit;
+            margin: 0 $spacing-unit;
+        }
+
+        p {
+            text-align: left;
+            font-family: $base-font-stack;
+            padding: 0 2*$spacing-unit;
+        }
+
+        &:nth-of-type(8n + 1) > h2 {
+            border-bottom-color: $xr-yellow;
+        }
+        &:nth-of-type(8n + 2) > h2 {
+            border-bottom-color: $xr-green;
+        }
+        &:nth-of-type(8n + 3) > h2 {
+            border-bottom-color: $xr-pink;
+        }
+        &:nth-of-type(8n + 4) > h2 {
+            border-bottom-color: $xr-dark-blue;
+        }
+        &:nth-of-type(8n + 5) > h2 {
+            border-bottom-color: $xr-purple;
+        }
+        &:nth-of-type(8n + 6) > h2 {
+            border-bottom-color: $xr-light-blue;
+        }
+        &:nth-of-type(8n + 7) > h2 {
+            border-bottom-color: $xr-light-green;
+        }
+        &:nth-of-type(8n + 8) > h2 {
+            border-bottom-color: $xr-pastel-yellow;
+        }
+    }
+}
+
+.Rebellion-Halves {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch; 
+    flex-wrap: wrap-reverse;
+    justify-content: space-between;
+    align-content: center;
+    width: 100%;
+
+    .half {
+        flex-basis: 500px;
+        flex-grow: 1; 
+        padding: 56px $spacing-unit;
+        box-sizing: border-box;
+        background-position: center;
+        background-size: cover;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    
+    .half-image {
+        min-height: 300px;
+
+        @media screen and (min-width: $on-small) {
+            & { min-height: 400px;}
+        }
+    }
+
+    .content-right {
+        max-width: $half-width;
+        float: right;
+    }
+    .content-left {
+        max-width: $half-width;
+    }
+}
+
+.image-right {
+    flex-wrap: wrap-reverse;
+}
+
+.image-left {
+    flex-wrap: wrap-reverse;
+    flex-direction: row-reverse;
+}
+
+.Rebellion-rich-text {
+    padding: $spacing-unit;
+}
+
+.Rebellion-Youtube-Video {
+    text-align: center;
+
+    iframe {
+        width: 100%;
+        max-width: 1400px;
+        height: 56vw;
+        max-height: 720px;
+    }
+}
+
+.Rebellion-Event-List {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+
+    & > .Rebellion-Event-Item:nth-of-type(8n + 1) > .date > .day-number {
+        border-bottom-color: $xr-yellow;
+    }
+    & > .Rebellion-Event-Item:nth-of-type(8n + 2) > .date > .day-number {
+        border-bottom-color: $xr-green;
+    }
+    & > .Rebellion-Event-Item:nth-of-type(8n + 3) > .date > .day-number {
+        border-bottom-color: $xr-pink;
+    }
+    & > .Rebellion-Event-Item:nth-of-type(8n + 4) > .date > .day-number {
+        border-bottom-color: $xr-dark-blue;
+    }
+    & > .Rebellion-Event-Item:nth-of-type(8n + 5) > .date > .day-number {
+        border-bottom-color: $xr-purple;
+    }
+    & > .Rebellion-Event-Item:nth-of-type(8n + 6) > .date > .day-number {
+        border-bottom-color: $xr-light-blue;
+    }
+    & > .Rebellion-Event-Item:nth-of-type(8n + 7) > .date > .day-number {
+        border-bottom-color: $xr-light-green;
+    }
+    & > .Rebellion-Event-Item:nth-of-type(8n + 8) > .date > .day-number {
+        border-bottom-color: $xr-pastel-yellow;
+    }
+}
+
+.Rebellion-Event-List-Short {
+    img { display: none;}
+}
+
+.Rebellion-Event-Item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: $background-color;
+    box-shadow: 0 5px 10px $shadow-color;
+    padding: $spacing-unit;
+    padding-bottom: $spacing-unit /2;
+    margin: $spacing-unit;
+    max-width: $content-width-wide;
+    width: 90%;
+
+    & > img {
+        margin: $spacing-unit 0 $spacing-unit/2 0;
+    }
+
+    .top {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+
+        .date {
+            flex-basis: 60px;
+            flex-grow: 0;
+            flex-shrink: 0;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            font-family: $header-font-stack;
+            padding-right: $spacing-unit;
+
+            .day-number {
+                font-size: $base-font-size * 2;
+                border-bottom: 4px solid $xr-green;
+                line-height: 1;
+            }
+
+            .month {
+                font-size: $small-font-size; //$base-font-size * 0.8;
+                color: $text-color-light;
+            }
+        }
+
+        .description {
+            line-height: 1;
+            width: 100%;
+            font-size: $small-font-size;
+
+            h3 {
+                margin-top: 0;
+            }
+
+            .bottom-line {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+
+                .Rebellion-Button {
+                    margin-left: $spacing-unit;
+                    position: relative;
+                    bottom: $spacing-unit /2;
+                }
+
+            }
+        }
+    }
+}

data/_sass/rebellion/desktop-header.scss

@@ -0,0 +1,81 @@
+.desktop {
+    background-color: $brand-color;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-items: space-between;
+    align-items: center;
+    min-height: $action-bar-height;
+    height: 100%;
+
+    .Rebellion-Button {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-self: center;
+        font-size: 15px;
+        height: 42px;
+        padding: 13px 16px;
+        box-sizing: border-box;
+    }
+
+    .withinPadding {
+        flex-basis: 40px;
+        flex-shrink: 10000;
+        min-width: 15px;
+    }
+
+    .page-link {
+        color: $brand-text-color;
+        line-height: $base-line-height;
+        font-family: $header-font-stack;      
+        transition: 0.1s;
+        line-height: 1;
+        flex-shrink: 0.01;
+        &:hover {
+            text-decoration: none; 
+            border-bottom: 4px solid $accent-color;
+            color: $brand-text-color-invert;
+        }
+
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .social-links-padding {
+        flex-basis: 0;
+        flex-shrink: 10000;
+        min-width: 0;
+        @media screen and (min-width: $on-large) {
+            & {
+                flex-basis: 40px;
+                flex-shrink: 10000;
+                min-width: 15px;
+            }
+        }
+
+    }
+
+    .social-links {
+        align-items: center;
+        justify-items: center;
+        svg {
+            width: 32px;
+            height: 32px;
+            margin-right: 5px;
+        }
+        display: none;
+        @media screen and (min-width: $on-large) {
+            & { display: flex;}
+        }
+    }
+
+    display: none;
+    @media screen and (min-width: $on-medium) {
+        & { display: flex; }
+    }
+}

data/_sass/rebellion/footer.scss

@@ -0,0 +1,83 @@
+.Rebellion-Footer {
+    background-color: $text-color;
+    color: $background-color;
+    padding: 60px 0 20px 0;
+    font-size: $small-font-size;
+
+    a {
+        color: white;
+        text-decoration: underline;
+        font-weight: normal;
+
+        &:hover {
+            color: lighten($brand-color, 20%);
+            text-decoration: none;
+        }
+    }
+
+    .logo-line {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+
+        .site-title {
+            flex: 1 0 auto;
+            
+        }
+
+        .main-logo{
+            height: 46px;
+            max-width: 161px;
+            padding: $spacing-unit 0;
+        }
+    
+        .social-links {
+            a {
+                text-decoration: none;
+
+                svg {
+                    transition: 0.2s; 
+                    fill: $background-color;
+                    height: 38px;
+
+                    &:hover{ fill: $brand-color; }
+
+                    path, .st0 { fill: $text-color; }
+                }
+            }
+        }
+
+        @media screen and (max-width: 200px) {
+            .main-logo { display: none; }
+            .logo-square { display: block; }
+            span { display: none; }
+        }
+    }
+
+    nav {
+        padding: $spacing-unit*2 0 $spacing-unit*3 0;
+       
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        a { text-decoration: none;}
+        a:hover { text-decoration: underline;}
+
+        .col {
+            display: flex;
+            flex-direction: column;
+            padding: 10px 0;
+        }
+    }
+
+    p {
+        text-align: center;
+        font-size: $smaller-font-size;
+    }
+}