jekyll-sharp-styleguide 0.1.0

data/_includes/image.html

@@ -0,0 +1,4 @@
+<h3>Lightbox</h3>
+
+<h6>Click to open lightbox</h6>
+<img class="allow-lightbox" src="assets/img/lightbox.jpg">

data/_includes/inputs.html

@@ -0,0 +1,50 @@
+<h3>Inputs</h3>
+
+<div class="row md-3">
+    <div class="col">
+        <h6>Default state</h6>
+        <input type="text" placeholder="Placeholder text">
+    </div>
+    <div class="col">
+        <h6>Focus state</h6>
+        <input class="focus" type="text" placeholder="Placeholder text">
+    </div>
+    <div class="col">
+        <h6>Disabled state</h6>
+        <input type="text" placeholder="Placeholder text" disabled>
+    </div>
+</div>
+
+<h6>Textarea</h6>
+<textarea rows="5" placeholder="Add your comment here"></textarea>
+
+<div class="row md-2">
+    <div class="col">
+        <h6>Select field</h6>
+        <div class="select-field">
+            <select class="select-box">
+                <option value="">Select an option</option>    		
+                <option value="opt-1">Option 1</option>
+                <option value="opt-2">Option 2</option>
+                <option value="opt-3">Option 3</option>
+            </select>
+            <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 1792 1792" width="16"><path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>
+        </div>
+    </div>
+    <div class="col">
+        <h6>Checkbox & radio</h6>
+        <label class="checkbox d-inline-block">
+            <input type="checkbox">
+            <span class="checkmark"></span>
+            Checkbox &nbsp;
+        </label>
+        <label class="checkbox radio d-inline-block">
+            <input type="radio">
+            <span class="checkmark"></span>
+            Radio button
+        </label>
+    </div>
+</div>
+
+
+

data/_includes/lightbox.html

@@ -0,0 +1,8 @@
+<div id="lightbox" class="lightbox">
+    <button class="close" type="button">
+        <i class="feather-x"></i>
+    </button>
+    <div>
+        <img src="/assets/img/lightbox.jpg">
+    </div>
+</div>

data/_includes/lists.html

@@ -0,0 +1,44 @@
+<h3>Lists</h3>
+
+<div class="row md-4 sm-2 xs-1">
+    <div class="col">
+        <h6>Unordered list</h6>
+        <ul>
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+            <li>List item 4</li>
+            <li>List item 5</li>
+        </ul>
+    </div>
+    <div class="col">
+        <h6>Ordered list</h6>
+        <ol>
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+            <li>List item 4</li>
+            <li>List item 5</li>
+        </ol>
+    </div>
+    <div class="col">
+        <h6>Check list</h6>
+        <ul class="check-list">
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+            <li>List item 4</li>
+            <li>List item 5</li>
+        </ul>
+    </div>
+    <div class="col">
+        <h6>Number list</h6>
+        <ol class="number-list">
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+            <li>List item 4</li>
+            <li>List item 5</li>
+        </ol>
+    </div>
+</div>

data/_includes/loader.html

@@ -0,0 +1,5 @@
+<div id="loader" class="loader">
+	<div class="lds-ring">
+		<div></div><div></div><div></div><div></div>
+	</div>
+</div>

data/_includes/paragraphs.html

@@ -0,0 +1,7 @@
+<h3>Paragraphs</h3>
+
+<h6>Body copy</h6>
+<p>Sed elementum vel sapien in ultricies. Sed a dui dui. Fusce <code>commodo</code> esta faucibus lobortis. <b>Nulla facilisi</b>. Fusce sagittis, massa ut faucibus feugiat, velit neque pharetra enim, aliquet mollis <a href="#">lectus tellus quis</a> odio. Sed a ante sed nibh iaculis scelerisque. Vestibulum a magna nunc.</p>
+
+<h6>Small text</h6>
+<p><small>Sed elementum vel sapien in ultricies. Sed a dui dui. Fusce commodo esta faucibus lobortis. Nulla facilisi. Fusce sagittis, massa ut faucibus feugiat, velit neque pharetra enim, aliquet mollis.</small></p>

data/_includes/scripts.html

@@ -0,0 +1,5 @@
+<script src="assets/js/loader.js"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="assets/js/copycode.js"></script>
+<script src="assets/js/tooltip.js"></script>
+<script src="assets/js/main.js"></script>

data/_includes/tags.html

@@ -0,0 +1,23 @@
+<h3>Tags</h3>
+
+<h6>Tagcloud</h6>
+<div class="tag-cloud">
+	<a href="#">html</a>
+    <a href="#">css</a>
+    <a href="#">jquery</a>
+    <a href="#">javascript</a>
+    <a href="#">jekyll</a>
+    <a href="#">php</a>
+    <a href="#">design</a>
+    <a href="#">gulp</a>
+    <a href="#">ui</a>
+    <a href="#">node</a>
+    <a href="#">article</a>
+    <a href="#">basic note</a>
+    <a href="#">ruby</a>
+    <a href="#">python</a>
+    <a href="#">wordpress</a>
+    <a href="#">addon</a>
+    <a href="#">plugin</a>
+    <a href="#">photoshop</a>
+</div>

data/_layouts/default.html

@@ -0,0 +1 @@
+{{ content }}

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_sass/_blockquotes.scss

@@ -0,0 +1,15 @@
+/* BLOCKQUOTES
+=========================================================================================*/
+
+blockquote {
+    padding: $spacer (($spacer / 2) * 3);
+    background: $light;
+    border-left: 5px solid $accent;
+    margin-bottom: $spacer;
+    border-radius: $border-radius / 2;
+    display: block;
+    &.accent {
+        background-color: $accent;
+        opacity: 0.3;
+    }
+}

data/_sass/_buttons.scss

@@ -0,0 +1,37 @@
+/* BUTTONS
+=========================================================================================*/
+
+// Basic button
+button {
+    outline: none;
+    border: 0;
+}
+
+// Theme button
+.btn {
+    background: $accent;
+    color: $white;
+    font-weight: bold;
+    padding: (($spacer / 4) * 3)  (($spacer / 4) * 5);
+    border: 0;
+    display: inline-block;
+    box-shadow: none;
+    font-size: $base-font-size * 1.1;
+    border-radius: $border-radius / 2;
+    margin-bottom: $spacer;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    &:not(.disabled):hover, &.hover {
+        background: $accent-hover;
+        transition: background-color 0.3s;
+        color: $white;
+    }
+    &:disabled, &.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    @media (max-width: $breakpoint-xs) {
+        display: block;
+    }
+}

data/_sass/_codes.scss

@@ -0,0 +1,253 @@
+/*	CODES & HIGHLIGHTS
+=========================================================================================*/
+
+// Code block
+.highlight {
+    background-color: $light;
+    margin-bottom: $spacer;
+    padding: $spacer;
+    border-radius: $border-radius;
+    max-height: 450px;
+    overflow: auto;
+}
+
+// Copy code button
+pre {
+    position: relative;
+    button {
+        position: absolute;
+        right: -5px;
+        top: -5px;
+        border: 0;
+        background: #e7e7e7;
+        padding: 3px 6px;
+        border-radius: $border-radius / 2;
+        font-size: 13px;
+        color: #666;
+        opacity: 0;
+        cursor: pointer;
+        &:hover {
+            background: #d5dae2;
+            color: black;
+            transition: background-color 0.2s;
+        }
+    }
+    &:hover {
+        button {
+            opacity: 1;
+            transition: opacity 0.3s;
+        }
+    }
+}
+
+// Rouge github theme syntax highlight
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight .cm {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .cp {
+  color: #999999;
+  font-weight: bold;
+}
+.highlight .c1 {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .cs {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .err {
+  color: #a61717;
+  background-color: #e3d2d2;
+}
+.highlight .gd {
+  color: #000000;
+  background-color: #ffdddd;
+}
+.highlight .ge {
+  color: #000000;
+  font-style: italic;
+}
+.highlight .gr {
+  color: #aa0000;
+}
+.highlight .gh {
+  color: #999999;
+}
+.highlight .gi {
+  color: #000000;
+  background-color: #ddffdd;
+}
+.highlight .go {
+  color: #888888;
+}
+.highlight .gp {
+  color: #555555;
+}
+.highlight .gs {
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #aaaaaa;
+}
+.highlight .gt {
+  color: #aa0000;
+}
+.highlight .kc {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kd {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kn {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kp {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kr {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kt {
+  color: #445588;
+  font-weight: bold;
+}
+.highlight .k, .highlight .kv {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .mf {
+  color: #009999;
+}
+.highlight .mh {
+  color: #009999;
+}
+.highlight .il {
+  color: #009999;
+}
+.highlight .mi {
+  color: #009999;
+}
+.highlight .mo {
+  color: #009999;
+}
+.highlight .m, .highlight .mb, .highlight .mx {
+  color: #009999;
+}
+.highlight .sa {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .sb {
+  color: #d14;
+}
+.highlight .sc {
+  color: #d14;
+}
+.highlight .sd {
+  color: #d14;
+}
+.highlight .s2 {
+  color: #d14;
+}
+.highlight .se {
+  color: #d14;
+}
+.highlight .sh {
+  color: #d14;
+}
+.highlight .si {
+  color: #d14;
+}
+.highlight .sx {
+  color: #d14;
+}
+.highlight .sr {
+  color: #009926;
+}
+.highlight .s1 {
+  color: #d14;
+}
+.highlight .ss {
+  color: #990073;
+}
+.highlight .s, .highlight .dl {
+  color: #d14;
+}
+.highlight .na {
+  color: #008080;
+}
+.highlight .bp {
+  color: #999999;
+}
+.highlight .nb {
+  color: #0086B3;
+}
+.highlight .nc {
+  color: #445588;
+  font-weight: bold;
+}
+.highlight .no {
+  color: #008080;
+}
+.highlight .nd {
+  color: #3c5d5d;
+  font-weight: bold;
+}
+.highlight .ni {
+  color: #800080;
+}
+.highlight .ne {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nf, .highlight .fm {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nl {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nn {
+  color: #555555;
+}
+.highlight .nt {
+  color: #000080;
+}
+.highlight .vc {
+  color: #008080;
+}
+.highlight .vg {
+  color: #008080;
+}
+.highlight .vi {
+  color: #008080;
+}
+.highlight .nv, .highlight .vm {
+  color: #008080;
+}
+.highlight .ow {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .o {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .w {
+  color: #bbbbbb;
+}

data/_sass/_colors.scss

@@ -0,0 +1,24 @@
+/*	COLOR SWATCHES
+=========================================================================================*/
+
+// Swatch
+.color-item {
+    margin-bottom: $spacer;
+    figure {
+        height: 150px;
+        border-radius: $border-radius;
+        line-height: 150px;
+        text-align: center;
+        @media (max-width: $breakpoint-sm) {
+            height: 200px;
+            line-height: 200px;
+        }
+        @media (max-width: $breakpoint-xs) {
+            height: 100px;
+            line-height: 100px;
+        }
+    }
+    p {
+        margin-bottom: 0;
+    }
+}

data/_sass/_columns.scss

@@ -0,0 +1,42 @@
+/*	COLUMNS LAYOUT
+=========================================================================================*/
+
+// Generate MD columns
+@for $i from 1 through 6 {
+    @media (min-width: $breakpoint-sm) {
+        .md-#{$i} {
+            column-count: $i;
+        }
+    }
+}
+
+// Generate SM columns
+@for $i from 1 through 6 {
+    @media (max-width: $breakpoint-sm) {
+        .sm-#{$i} {
+            column-count: $i;
+        }
+    }
+}
+
+// Generate XS columns
+@for $i from 1 through 6 {
+    @media (max-width: $breakpoint-xs) {
+        .xs-#{$i} {
+            column-count: $i;
+        }
+    }
+}
+
+// Styleguide columns
+.row-columns {
+    .col {
+        height: 300px;
+        @media (max-width: $breakpoint-xs) {
+            height: 300px;
+            &:nth-child(4), &:nth-child(5), &:nth-child(6) {
+                display: none;
+            }
+        }
+    }
+}

data/_sass/_content.scss

@@ -0,0 +1,26 @@
+/*	THE CONTENT
+=========================================================================================*/
+
+main {
+    padding: 100px 0;
+    @media (max-width: $breakpoint-sm) {
+        padding: 75px 0;
+    }
+    @media (max-width: $breakpoint-xs) {
+        padding: 50px 0;
+    }
+}
+
+.container {
+    max-width: 680px;
+    margin: 0 auto;
+    padding: 0 $spacer;
+}
+
+.row {
+    gap: $spacer;
+}
+
+.col {
+    width: 100%;
+}

data/_sass/_footer.scss

@@ -0,0 +1,7 @@
+/*	FOOTER
+=========================================================================================*/
+
+footer {
+    padding: $spacer 0;
+    background-color: $light;
+}

data/_sass/_header.scss

@@ -0,0 +1,37 @@
+/*	HEADER
+=========================================================================================*/
+
+// Header base
+header {
+    background-color: $dark;
+    background-image: url('../img/header_bg.webp');
+    background-size: cover;
+    background-position: center;
+    min-height: 550px;
+    padding-top: 50px;
+    display: flex;
+    align-items: center;
+    h1, h2, h3 {
+        color: $white;
+    }
+    @media (max-width: $breakpoint-sm) {
+        min-height: 450px;
+    }
+}
+
+// Branding logo
+.site-logo {
+    position: absolute;
+    top: $spacer;
+    img {
+        width: 80px;
+        height: auto;
+        opacity: 0.9;
+    }
+    &:hover {
+        img {
+            opacity: 1;
+            transition: opacity 0.3s;
+        }
+    }
+}

data/_sass/_headings.scss

@@ -0,0 +1,66 @@
+/*	HEADINGS
+=========================================================================================*/
+
+// All headings
+h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    margin-bottom: $spacer;
+    line-height: 1;
+    color: $dark;
+}
+
+// Anchor links
+h2, h3, h4 {
+    .anchor {
+        float: left;
+        margin-left: -25px;
+        line-height: 1;
+        opacity: 0;
+        padding-right: 5px;
+        cursor: pointer;
+        i {
+            font-size: 18px;
+            color: $dark;
+            position: relative;
+            top: -3px;
+        }
+        &:hover {
+            opacity: 1;
+        }
+    }
+    &:hover {
+        .anchor {
+            text-decoration: none;
+            opacity: 0.4;
+            &:hover {
+                opacity: 0.7;
+            }
+        }
+    }
+}
+
+// Generate responsive headings
+@each $heading, $size in $font-size {
+    #{$heading}{ 
+        font-size: $size;
+        letter-spacing: -($size / 35);
+        @media (max-width: $breakpoint-sm) {
+            font-size: $size * 0.8;
+        }
+        @media (max-width: $breakpoint-xs) {
+            font-size: $size * 0.6;
+            letter-spacing: -($size / 55);
+        }
+    }
+} 
+
+// H6 styling
+h6 {
+    font-size: 16px;
+    @media (max-width: $breakpoint-sm) {
+        font-size: 14px;
+    }
+    @media (max-width: $breakpoint-xxs) {
+        font-size: 12px;
+    }
+}