jekyll-sharp-styleguide 0.1.0

data/_sass/_inputs.scss

@@ -0,0 +1,116 @@
+/*	FORM INPUTS
+=========================================================================================*/
+
+// Default inputs
+input, textarea, select {
+    width: 100%;
+    padding: (($spacer / 4) * 3)  $spacer;
+    border-radius: $border-radius / 2;
+    border: 1px solid rgba($dark, 0.25);
+    font-size: $base-font-size * 1.1;
+    font-weight: bold;
+    outline: none;
+    box-sizing: border-box;
+    font-family: $font-family;
+    margin-bottom: $spacer;
+    background: $white;
+    &:not(:disabled):focus, &.focus {
+        border-color: $accent;
+        transition: border-color 0.3s, box-shadow 0.3s;
+        box-shadow: inset 0 0 0 1px $accent;
+    }
+    &:disabled, &.disabled {
+        cursor: not-allowed;
+        background: $light;
+    }
+}
+
+// Placeholder
+::placeholder, .select-placeholder {
+    color: rgba($dark, 0.3);
+    font-weight: normal;
+}
+
+// Select field
+.select-field {
+    select {
+        appearance: none;
+    }
+    position: relative;
+    svg {
+        position: absolute;
+        right: 20px;
+        top: 17px;
+        opacity: 0.5;
+    }
+}
+
+// Checkbox & Radio
+.checkbox {
+    position: relative;
+    padding-left: 30px;
+    margin-bottom: 10px;
+    display: block;
+    line-height: 20px;
+    cursor: pointer;
+    font-size: 18px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+        &:checked ~ .checkmark {
+            background-color: $accent;
+            border: 0 !important;
+            &:after {
+                display: block;
+            }
+        }
+    }
+    .checkmark {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 20px;
+        width: 20px;
+        border-radius: $border-radius / 2;
+        background: $white;
+        border: 1px solid rgba($dark, 0.25);
+        &:after {
+            content: "";
+            position: absolute;
+            display: none;
+            left: 7px;
+            top: 2px;
+            width: 5px;
+            height: 10px;
+            border: solid $white;
+            border-width: 0 2px 2px 0;
+            -webkit-transform: rotate(45deg);
+            -ms-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+    }
+    &.radio {
+        line-height: 23px;
+        .checkmark {
+            border-radius: 50%;
+            width: 22px;
+            height: 22px;
+            &:after {
+                top: 6px;
+                left: 6px;
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: $white;
+            }
+        }
+    }
+}
+

data/_sass/_lightbox.scss

@@ -0,0 +1,67 @@
+/*	IMAGE & LIGHTBOX
+=========================================================================================*/
+
+// Image
+img {
+    display: block;
+    width: 100%;
+    margin-bottom: $spacer;
+    border-radius: $border-radius;
+    box-shadow: 0 0 80px rgba($dark, 0.2);
+    &.allow-lightbox {
+        cursor: pointer;
+    }
+}
+
+// Lightbox
+.lightbox {
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: rgba($dark, 0.85);
+    z-index: 1000;
+    > div {
+        padding: 5%;
+    }
+    .close {
+        background: transparent;
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        right: 15px;
+        top: 15px;
+        z-index: 1002;
+        cursor: pointer;
+        transition: opacity 0.25s;
+        opacity: 0.8;
+        font-size: 24px;
+        color: $white;
+        &:hover {
+            opacity: 1;
+            transition: opacity 0.2s;
+        }
+    }
+    img {
+        max-height: 90vh;
+    }
+    @media (max-width: $breakpoint-sm) {
+        display: none !important;
+    }
+}
+
+.lightbox-opened {
+    @media (min-width: $breakpoint-sm) {
+        overflow-y: hidden;
+    }
+}
+
+// Exclude from lightbpx
+.no-lightbox {
+    cursor: default;
+    pointer-events: none;
+}

data/_sass/_lists.scss

@@ -0,0 +1,94 @@
+/*	LISTINGS
+=========================================================================================*/
+
+// Unordered list
+ul {
+    margin-bottom: $spacer;
+    &:not(.check-list):not(.icon-list) {
+        list-style: disc;
+        padding-left: $spacer;
+        li {
+            &:not(:last-child) {
+                margin-bottom: ($spacer / 4) * 3;
+            }
+        }
+    }
+}
+
+// Ordered list
+ol {
+    list-style: none;
+    counter-reset: my-counter;
+    padding-left: 25px;
+    margin-bottom: $spacer;
+    li {
+        counter-increment: my-counter;
+        &:not(:last-child) {
+            margin-bottom: ($spacer / 4) * 3;
+        }
+        text-indent: -30px;
+        &:before {
+            content: counter(my-counter)'.';
+            width: 24px;
+            color: $dark;
+            font-weight: bold;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+            display: inline-block;
+            margin-right: 5px;
+            text-indent: 0;
+        }
+    }
+}
+
+// Check list
+.check-list {
+    padding-left: 35px;
+    li {
+        text-indent: -32px;
+        &:not(:last-child) {
+            margin-bottom: ($spacer / 4) * 3;
+        }
+        &:before {
+            content: "\e92b";
+            font-family: 'Feather';
+            line-height: 1;
+            width: 24px;
+            height: 24px;
+            padding: 4px;
+            border-radius: 50%;
+            background: $accent;
+            color: $white;
+            margin-right: $spacer / 2.5;
+        }
+    }
+}
+
+// Number list
+.number-list {
+    list-style: none;
+    counter-reset: my-counter;
+    padding-left: 35px;
+    li {
+        counter-increment: my-counter;
+        &:not(:last-child) {
+            margin-bottom: ($spacer / 4) * 3;
+        }
+        text-indent: -35px;
+        &:before {
+            content: counter(my-counter);
+            color: $white;
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+            display: inline-block;
+            background: $accent;
+            font-weight: normal;
+            border-radius: 100%;
+            margin-right: 10px;
+            text-indent: 0;
+        }
+    }
+}

data/_sass/_loader.scss

@@ -0,0 +1,53 @@
+/*	PAGE LOADER EFFECT
+=========================================================================================*/
+
+// Page loaderr
+.loader {
+	position: fixed !important;
+	display: block;
+	line-height: 110vh;
+	width: 100% !important;
+	height: 100% !important;
+	top: 0;
+	left: 0;
+	text-align: center;
+	background-color: #fff;
+	z-index: 9999;
+    .lds-ring {
+        display: inline-block;
+        position: relative;
+        width: 80px;
+        height: 80px;
+        div {
+            box-sizing: border-box;
+            display: block;
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            margin: 8px;
+            border: 4px solid $accent;
+            border-radius: 50%;
+            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+            border-color: $accent transparent transparent transparent;
+            &:nth-child(1) {
+                animation-delay: -0.45s;
+            }
+            &:nth-child(2) {
+                animation-delay: -0.3s;
+            }
+            &:nth-child(3) {
+                animation-delay: -0.15s;
+            }
+        }
+    }
+}
+
+// The animation
+@keyframes lds-ring {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

data/_sass/_paragraphs.scss

@@ -0,0 +1,60 @@
+/*	TYPOGRAPHY
+=========================================================================================*/
+
+// Base
+body {
+    font-family: $font-family;
+    line-height: 1.6;
+    color: rgba($dark,0.75);
+}
+
+// Paragraphs
+p {
+    margin-bottom: $spacer;
+    font-size: $base-font-size * 1.25;
+    @media (max-width: $breakpoint-sm) {
+        font-size: $base-font-size * 1.1;
+    }
+    @media (max-width: $breakpoint-xs) {
+        font-size: $base-font-size;
+    }
+    code {
+        background: $light;
+        padding: 2px 8px;
+        border-radius: $border-radius / 2;
+        color: #E2577A;
+    }
+}
+
+// Text selection
+::selection {
+    background: $accent;
+    color: $white;
+}
+
+// Small
+small {
+    font-size: $base-font-size;
+}
+
+// Bold
+b, strong {
+    color: $dark;
+    font-weight: bold;
+}
+
+// Link
+a {
+    color: $accent;
+    text-decoration: underline;
+    &:hover {
+        text-decoration: none;
+        color: $accent-hover;
+    }
+}
+
+
+// Divider
+hr {
+    margin: 50px 0;
+}

data/_sass/_reset.scss

@@ -0,0 +1,50 @@
+/*	CSS RESET
+=========================================================================================*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+// HTML5 display-role reset for older browsers
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+html {
+	width: 100vw;
+	overflow-x: hidden;
+}

data/_sass/_tags.scss

@@ -0,0 +1,21 @@
+/*	TAGS
+=========================================================================================*/
+
+.tag-cloud {
+    a {
+        background-color: $accent;
+        border-radius: $border-radius / 2;
+        margin: 0 2px 6px 0;
+        display: inline-block;
+        padding: 0 ($spacer / 2);
+        font-size: $base-font-size;
+        text-transform: lowercase;
+        color: $white;
+        text-decoration: none;
+        transition: background-color 0.25s;
+        &:hover {
+            background: $accent-hover;
+            transition: background-color 0.3s;
+        }
+    }
+}

data/_sass/_tooltips.scss

@@ -0,0 +1,56 @@
+/* TOOLTIPS
+=========================================================================================*/
+
+/**
+ * Simpletooltip is a JQuery plugin, thought to insert short tooltips to any element of your website more easily
+ * v1.3.0
+ *
+ * 2014 Carlos Sanz Garcia
+ * Distributed under GPL-3.0 license
+ *
+ * http://not-only-code.github.com/Simpletooltip
+ */
+ .simpletooltip {
+    cursor: pointer;
+  }
+  .simple-tooltip {
+    position: absolute;
+    display: block;
+    width: auto;
+    max-width: 200px;
+    height: auto;
+    padding: 6px 8px;
+    color: #cccccc;
+    font: normal 13px/1.3em 'Helvetica', 'Arial', 'Sans-serif';
+    border: solid 2px #111111;
+    background-color: #222222;
+    margin-bottom: 30px;
+    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    z-index: 9999;
+  }
+  .simple-tooltip .arrow {
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    border-width: 6px;
+    border-style: solid;
+    border-color: transparent;
+  }
+  .simple-tooltip.top .arrow {
+    left: 50%;
+  }
+  .simple-tooltip.left .arrow {
+    top: 50%;
+  }
+  .simple-tooltip.bottom .arrow {
+    left: 50%;
+  }
+  .simple-tooltip.right .arrow {
+    top: 50%;
+  }

data/_sass/_variables.scss

@@ -0,0 +1,30 @@
+// Colors
+$accent: #2AAC7B;
+$dark: #171010;
+$light: #F6F5F5;
+$white: #ffffff;
+$accent-hover: darken($accent, 5%);
+
+// Fonts
+$font-family: -apple-system, sans-serif;
+$base-font-size: 16px;
+
+// Headings
+$font-size:(
+    h1 : 72px,
+    h2 : 48px,
+    h3 : 36px,
+    h4 : 32px,
+    h5 : 24px
+);
+
+// Radius
+$border-radius: 8px;
+ 
+// Breakpoints
+$breakpoint-sm: 768px;
+$breakpoint-xs: 450px;
+$breakpoint-xxs: 320px;
+
+// Spacing
+$spacer: 20px;

data/_sass/main.scss

@@ -0,0 +1,21 @@
+// Imports
+@import "variables";
+@import "loader";
+@import "helpers";
+@import "reset";
+@import "header";
+@import "content";
+@import "columns";
+@import "paragraphs";
+@import "headings";
+@import "colors";
+@import "lists";
+@import "tags";
+@import "buttons";
+@import "inputs";
+@import "lightbox";
+@import "codes";
+@import "blockquotes";
+@import "tooltips";
+@import "icons";
+@import "footer";

data/assets/css/main.scss

@@ -0,0 +1,4 @@
+---
+---
+
+@import "main";