diff options
author | Huy Nguyen <huyb.1991@gmail.com> | 2018-05-28 11:31:45 +0300 |
---|---|---|
committer | Huy Nguyen <huyb.1991@gmail.com> | 2018-05-28 11:31:45 +0300 |
commit | 1bc98ad644912c206be8fb224f08858956a5f882 (patch) | |
tree | b55d8c836f07333d30d7726eaada9d47be56acbb /styles |
Initial commit
Diffstat (limited to 'styles')
-rw-r--r-- | styles/main.scss | 12 | ||||
-rw-r--r-- | styles/partials/base.scss | 71 | ||||
-rw-r--r-- | styles/partials/content.scss | 268 | ||||
-rw-r--r-- | styles/partials/error.scss | 22 | ||||
-rw-r--r-- | styles/partials/header.scss | 186 | ||||
-rw-r--r-- | styles/partials/icons.scss | 85 | ||||
-rw-r--r-- | styles/partials/list.scss | 72 | ||||
-rw-r--r-- | styles/partials/paginator.scss | 26 | ||||
-rw-r--r-- | styles/partials/post.scss | 47 | ||||
-rw-r--r-- | styles/partials/reset.scss | 447 | ||||
-rw-r--r-- | styles/partials/shortcodes.scss | 1 | ||||
-rw-r--r-- | styles/partials/table.scss | 73 | ||||
-rw-r--r-- | styles/partials/variables.scss | 100 |
13 files changed, 1410 insertions, 0 deletions
diff --git a/styles/main.scss b/styles/main.scss new file mode 100644 index 0000000..f4e875e --- /dev/null +++ b/styles/main.scss @@ -0,0 +1,12 @@ +@import 'partials/reset'; +@import 'partials/variables'; +@import 'partials/icons'; +@import 'partials/base'; +@import 'partials/header'; +@import 'partials/list'; +@import 'partials/paginator'; +@import 'partials/post'; +@import 'partials/content'; +@import 'partials/shortcodes'; +@import 'partials/table'; +@import 'partials/error'; diff --git a/styles/partials/base.scss b/styles/partials/base.scss new file mode 100644 index 0000000..95d7d8a --- /dev/null +++ b/styles/partials/base.scss @@ -0,0 +1,71 @@ +body { + font-size: 18px; + font-weight: $weight-normal; + line-height: 1.618; + font-family: $family-sans-serif; + color: $text; + background: $white; + text-rendering: optimizeLegibility; + -webkit-overflow-scrolling: touch; // Smoothly on mobile browser +} + +a { + color: $text-link; + text-decoration: none; + font-weight: $weight-bold; + + &:focus, + &:hover { + opacity: 0.7; + outline: none; + } +} + +amp-img { + margin: 0 auto; + box-shadow: 2px 20px 40px 10px $box-shadow-dark; +} + +button:hover { + cursor: pointer; +} + +.main { + margin-left: 20rem; + padding: 1rem 2rem; + max-width: 70rem; + min-height: 100vh; + box-sizing: border-box; + + @media screen and (max-width: $widescreen) { + width: calc(100% - 20rem); + } + + @media (min-width: $tablet) and (max-width: $desktop) { + margin-left: 15rem; + width: calc(100% - 15rem); + } + + @media screen and (max-width: $tablet) { + margin-left: 0; + padding: 0 1rem 1rem; + width: 100%; + min-height: initial; + border-left: none; + border-right: none; + border-top: 1px solid $main-border; + border-bottom: 1px solid $main-border; + } +} + +.footer { + display: none; + + @media screen and (max-width: $tablet) { + display: block; + padding: 1rem; + font-size: $size-7; + text-align: center; + font-family: $family-monospace; + } +} diff --git a/styles/partials/content.scss b/styles/partials/content.scss new file mode 100644 index 0000000..c31a5b6 --- /dev/null +++ b/styles/partials/content.scss @@ -0,0 +1,268 @@ +// Styling content, override elements style general from markdown +.post-content { + line-height: 1.8; + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $text-content-title; + font-weight: bold; + line-height: 1.125; + } + + h1 { + margin-top: 2rem; + margin-bottom: 1rem; + font-size: $size-3; + } + + h2 { + margin-top: 1.75rem; + margin-bottom: 0.75rem; + font-size: $size-4; + } + + h3 { + margin-top: 1.5rem; + margin-bottom: 0.5rem; + font-size: $size-5; + } + + h4 { + margin-top: 1.25rem; + margin-bottom: 0.25rem; + font-size: $size-6; + } + + h5 { + margin-top: 1rem; + margin-bottom: 0; + font-size: $size-7; + } + + h6 { + margin-top: 1rem; + margin-bottom: 0; + font-size: $size-7; + } + + li + li { + margin-top: 0.5rem; + } + + em { + color: $text-light; + font-style: italic; + } + + strong { + color: $text-strong; + } + + del { + color: $text-light; + text-decoration: line-through; + } + + ins { + color: $text-strong; + text-decoration: underline; + } + + hr { + position: relative; + margin: 2rem auto; + border-top: 1px dashed $grey-lighter; + border-bottom: none; + + &::before { + content: "sep line"; + position: absolute; + top: -12px; + left: calc(50% - 40px); + padding: 0 0.5rem; + background-color: $white; + color: $grey-lighter; + font-size: $size-7; + font-family: $family-monospace; + } + } + + p { + margin-top: 1.5rem; + margin-bottom: 1.5rem; + text-align: justify; + } + + blockquote { + background-color: $light; + border-left: 5px solid $border; + padding: 0.5rem 1rem; + margin: 2rem 0; + + p { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + cite { + margin-top: 1.5rem; + color: $text-light; + font-size: 0.9rem; + } + } + + tt, + code { + padding: 0; + padding-top: 0.2em; + padding-bottom: 0.2em; + margin: 0; + font-size: 0.9em; + background-color: $pre-background; + font-family: $family-monospace; + + &::before, + &::after { + letter-spacing: -0.2em; + content: "\00a0"; + } + } + + kbd { + display: inline-block; + padding: 0.25em; + background-color: $white-bis; + border: 1px solid $grey-lighter; + border-bottom-color: $grey-light; + border-radius: $radius; + box-shadow: inset 0 -1px 0 $grey-light; + font-size: 0.8em; + line-height: 1.25; + font-family: $family-monospace; + color: $text; + } + + pre { + margin: 2rem auto; + padding: 1rem; + overflow-x: auto; + border-radius: $radius; + font-size: 0.9rem; + line-height: 1.618; + white-space: pre; + word-wrap: normal; + word-break: normal; + background: $pre-background; + color: $text; + + code { + font-size: 0.9rem; + background-color: transparent; + + &::before, + &::after { + content: none; + } + } + } + + sup, + sub { + font-size: $size-7; + + a { + border-bottom: none; + + &:focus, + &:hover { + border-bottom: none; + } + } + } + + ol { + margin-left: 0; + margin-top: 2rem; + margin-bottom: 2rem; + padding-left: 1.5rem; + list-style: decimal outside; + + ol { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + list-style: lower-roman outside; + } + + ul { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + list-style: disc outside; + } + } + + ul { + margin-left: 0; + margin-top: 2rem; + margin-bottom: 2rem; + padding-left: 1.5rem; + list-style: disc outside; + + ul { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + list-style: circle outside; + } + + ol { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + list-style: decimal outside; + } + } + + dl { + margin-top: 2rem; + margin-bottom: 2rem; + + dt { + color: $primary; + margin-top: 1rem; + + &::after { + content: ':'; + } + } + + dd { + text-indent: 2rem; + margin-left: 0; + margin-top: 0.25rem; + } + } + + figure { + display: block; + margin: 2rem auto; + + img { + max-width: 100%; + box-shadow: 2px 20px 40px 10px $box-shadow-dark; + + @media screen and (max-width: $tablet) { + box-shadow: none; + } + } + + figcaption { + h4 { + color: $grey-light; + font-size: 0.9rem; + text-align: center; + } + } + } +} diff --git a/styles/partials/error.scss b/styles/partials/error.scss new file mode 100644 index 0000000..45924f2 --- /dev/null +++ b/styles/partials/error.scss @@ -0,0 +1,22 @@ +.not-found { + margin: 5rem auto 0; + font-family: $family-monospace; + text-align: center; +} + +.error { + &-emoji { + color: $text-strong; + font-size: $size-1; + } + + &-text { + font-size: $size-5; + } + + &-link { + margin-top: 2rem; + font-size: $size-6; + color: $primary; + } +} diff --git a/styles/partials/header.scss b/styles/partials/header.scss new file mode 100644 index 0000000..f00342c --- /dev/null +++ b/styles/partials/header.scss @@ -0,0 +1,186 @@ +.header { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: 20rem; + padding: 1rem; + box-sizing: border-box; + text-align: center; + background-color: $sidebar-background; + + @media screen and (max-width: $tablet) { + width: 100%; + position: relative; + } + + @media (min-width: $tablet) and (max-width: $desktop) { + width: 15rem; + } +} + +.avatar { + margin-top: 3rem; + border-radius: 20%; + border: 4px solid $media-border; + transition: all $easing $speed; + + &:hover { + border-radius: 50%; + box-shadow: 0 1px 4px $box-shadow-darker; + } + + @media screen and (max-width: $tablet) { + position: absolute; + top: 1rem; + left: 1rem; + width: 2rem; + height: 2rem; + margin-top: 0; + border: 2px solid $media-border; + } +} + +.title { + font-size: $size-4; + font-family: $family-roboto; + font-weight: $weight-bold; + margin: 1rem auto; + + @media screen and (max-width: $tablet) { + margin: 0 auto; + } + + a { + color: $white; + } +} + +.subtitle { + margin-bottom: 1rem; + color: $white; + opacity: 0.8; +} + +// Menu on desktop and header on mobile +.menu { + display: none; + + @media screen and (min-width: $tablet) { + display: block; + } + + &-list { + list-style: none; + padding: 0; + } + + &-item { + padding: 1rem 0; + + a { + font-weight: $weight-light; + opacity: .8; + color: $white; + + &:focus, + &:hover { + opacity: 1; + } + } + + &.is-active { + a { + color: $grey-dark; + opacity: 1; + font-weight: bold; + } + } + } + + &-toggle { + border: none; + outline: none; + font-size: $size-3; + background-color: transparent; + color: $white; + position: absolute; + top: 1rem; + right: 1rem; + + @media screen and (min-width: $tablet) { + display: none; + } + } +} + +// Sidebar on mobile +.sidebar { + background-color: $white; + width: 100vw; + + @media screen and (min-width: $phone) { + width: 50vw; + } + + &-list { + list-style: none; + padding: 0; + margin: 0; + } + + &-menu { + text-align: right; + padding: 16px; + } + + &-item { + font-size: $size-3; + padding: 30px 35px 30px 25px; + border-top: solid 1px $grey-lighter; + + &:hover { + background-color: $light; + } + } + + &-icon { + border: none; + outline: none; + background-color: transparent; + font-family: $family-sans-serif; + font-weight: 100; + font-size: $size-3; + } + + &-link { + color: #000; + font-weight: $weight-light; + } +} + +// Social networks +.social { + &-list { + margin: 0; + padding: 0; + list-style: none; + + @media screen and (min-width: $tablet) { + position: absolute; + bottom: 10px; + left: 0; + right: 0; + } + } + + &-item { + display: inline-block; + margin: 0 0.2rem; + + a { + color: $white; + font-weight: normal; + } + } +} diff --git a/styles/partials/icons.scss b/styles/partials/icons.scss new file mode 100644 index 0000000..10e7280 --- /dev/null +++ b/styles/partials/icons.scss @@ -0,0 +1,85 @@ +@font-face { + font-family: 'fe'; + font-weight: normal; + font-style: normal; + src: url('/fonts/fe.eot?17482317'); + src: url('/fonts/fe.eot?17482317#iefix') format('embedded-opentype'), + url('/fonts/fe.woff2?17482317') format('woff2'), + url('/fonts/fe.woff?17482317') format('woff'), + url('/fonts/fe.ttf?17482317') format('truetype'), + url('/fonts/fe.svg?17482317#fe') format('svg'); +} + +.icon { + font-family: "fe"; + font-style: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + text-align: center; + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} + +// Font code +.icon { + &-menu { &:before { content: $icon-menu; } } + &-email { &:before { content: $icon-email; } } + &-rss { &:before { content: $icon-rss; } } + &-github { &:before { content: $icon-github; } } + &-dribbble { &:before { content: $icon-dribbble; } } + &-linkedin { &:before { content: $icon-linkedin; } } + &-twitter { &:before { content: $icon-twitter; } } + &-facebook { &:before { content: $icon-facebook; } } + &-instagram { &:before { content: $icon-instagram; } } + &-youtube { &:before { content: $icon-youtube; } } + &-google { &:before { content: $icon-google; } } + &-clock { &:before { content: $icon-clock; } } +} + +// Sharing on social networks +.share { + font-family: "fe"; + font-weight: normal; + margin-left: 0.2rem; + display: inline-block; + text-align: center; + border: none; + outline: none; + color: $white; + width: 30px; + height: 30px; + border-radius: 50%; + + &-twitter { + background-color: $color-twitter; + &:before { content: $icon-twitter; } + } + + &-facebook { + background-color: $color-facebook; + &:before { content: $icon-facebook; } + } + + &-google { + background-color: $color-google; + &:before { content: $icon-google; } + } +} diff --git a/styles/partials/list.scss b/styles/partials/list.scss new file mode 100644 index 0000000..3f1e06e --- /dev/null +++ b/styles/partials/list.scss @@ -0,0 +1,72 @@ +// Style for list template +.entry { + &-list { + background-color: $main-background; + + @media screen and (max-width: $tablet) { + padding-top: $space-large; + } + } + + &-single { + line-height: 1.8; + margin-bottom: 22px; + background-color: $white; + box-shadow: 0 0 2px 0 rgba(137, 146, 177, 0.15), 0px 3px 10px 0 rgba(137, 146, 177, 0.1); + border-radius: $radius-large; + + &:hover { + box-shadow: 0px 1px 15px 0 rgba(137, 146, 177, 0.15), 0px 10px 20px 0 rgba(137, 146, 177, 0.15); + } + } + + &-cover { + max-width: 100%; + border-radius: $radius-large $radius-large 0 0; + object-fit: cover; + box-shadow: none; + } + + &-title { + margin: 0; + padding: $space-normal $space-large 0; + } + + &-link { + font-size: $size-4; + font-weight: $weight-bold; + color: $text-title; + } + + &-summary { + padding: 0 $space-large; + text-align: justify; + max-height: 4rem; + overflow: hidden; + } + + &-footer { + margin: 0 $space-large; + padding: $space-small 0; + border-top: 1px solid rgba(0, 0, 0, .15); + display: flex; + justify-content: space-between; + } + + &-meta { + margin: 0; + font-size: $size-7; + letter-spacing: 1px; + text-transform: uppercase; + } + + &-time { + color: #333; + + &:after { + content: ''; + border-right: 1px solid rgba(0, 0, 0, 0.2); + margin: 0px 8px 0px 10px; + } + } +} diff --git a/styles/partials/paginator.scss b/styles/partials/paginator.scss new file mode 100644 index 0000000..45b7644 --- /dev/null +++ b/styles/partials/paginator.scss @@ -0,0 +1,26 @@ +.pagination { + display: flex; + justify-content: flex-start; + + &-btn { + color: $text; + padding: $size-7; + background-color: $white; + border: 1px solid $border; + font-size: $size-7; + text-transform: uppercase; + border-radius: $radius-large; + + &:focus, + &:hover { + color: $white; + background-color: $primary; + border-color: $primary; + } + } + + // Handle casse Prev/Next button with flexbox + &-next { + margin-left: auto; + } +} diff --git a/styles/partials/post.scss b/styles/partials/post.scss new file mode 100644 index 0000000..a8143f1 --- /dev/null +++ b/styles/partials/post.scss @@ -0,0 +1,47 @@ +// Styles for single template +.post { + &-header { + &:after { + display: block; + content: ''; + border-bottom-width: 3px; + border-bottom-style: solid; + width: $space-large*2; + padding-top: $space-small; + border-bottom-color: $primary; + } + } + + &-title { + font-size: $size-3; + color: $text-title; + line-height: 1.5; + margin-top: 1.5rem; + margin-bottom: 0.5rem; + } + + &-footer { + margin: 1rem 0; + line-height: 1.8; + } + + &-tags { + margin-top: 0; + margin-bottom: 1rem; + padding-left: 0; + } + + &-tag { + display: inline-block; + margin: 0 0.5rem 0 0; + border-radius: $radius; + padding: $space-small/2 $space-small; + background: $light; + font-size: $size-7; + + &:hover { + background: $grey-lighter; + box-shadow: 0px 1px 15px 0 rgba(137, 146, 177, 0.15), 0px 10px 20px 0 rgba(137, 146, 177, 0.15); + } + } +} diff --git a/styles/partials/reset.scss b/styles/partials/reset.scss new file mode 100644 index 0000000..6321412 --- /dev/null +++ b/styles/partials/reset.scss @@ -0,0 +1,447 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/styles/partials/shortcodes.scss b/styles/partials/shortcodes.scss new file mode 100644 index 0000000..892ddb2 --- /dev/null +++ b/styles/partials/shortcodes.scss @@ -0,0 +1 @@ +/* Styling for shortcode */ diff --git a/styles/partials/table.scss b/styles/partials/table.scss new file mode 100644 index 0000000..2d1cf5f --- /dev/null +++ b/styles/partials/table.scss @@ -0,0 +1,73 @@ +$table: $grey-dark; +$table-background: $light; +$table-border: $grey-lighter; +$table-head: $grey; +$table-row-hover-background: $grey-lighter; + +table { + background-color: $table-background; + color: $table; + margin: 2rem auto; + width: 100%; + border-collapse: collapse; + border-radius: $radius-large; + + td, + th { + border: 1px solid $table-border; + border-width: 0 0 1px; + padding: 0.5em 0.75em; + vertical-align: center; + } + + th { + color: $text-strong; + } + + tr { + &:hover { + background-color: $table-row-hover-background; + } + } + + thead { + td, + th { + border-width: 0 0 2px; + color: $table-head; + } + } + + tfoot { + td, + th { + border-width: 2px 0 0; + color: $table-head; + } + } + + tbody { + tr { + &:last-child { + td, + th { + border-bottom-width: 0; + } + } + } + } + + // Make border-radius + tr:first-child th:first-child { + border-top-left-radius: $radius-large; + } + tr:first-child th:last-child{ + border-top-right-radius: $radius-large; + } + tr:last-child td:first-child{ + border-bottom-left-radius: $radius-large; + } + tr:last-child td:last-child{ + border-bottom-right-radius: $radius-large; + } +} diff --git a/styles/partials/variables.scss b/styles/partials/variables.scss new file mode 100644 index 0000000..fbda864 --- /dev/null +++ b/styles/partials/variables.scss @@ -0,0 +1,100 @@ +/* Colors */ +$grey-dark: #3d404a; +$grey: rgb(121, 121, 121); +$grey-light: rgb(181, 181, 181); +$grey-lighter: rgb(219, 219, 219); +$white-ter: #f4f3f1; +$white-bis: #fafafa; +$white: #fff; +$green: #6aac0e; +$green-light: #7db500; + +$blue: #3f9adc; +// $blue-light: #00a5ee; + +/* Theme colors */ +$primary: $green; +$light: $white-ter; +$pre-background: $grey-lighter; + +/* Layout */ +$main-background: #f5f5f5; +$sidebar-background: rgba(121, 169, 54, 0.9); + +/* Text colors */ +$text: #777; +$text-title: #2c2c2c; +$text-invert: findcolorinvert($text); +$text-light: $grey; +$text-strong: $grey-dark; +$text-content-title: $green-light; +$text-link: $blue; + +/* Border colors */ +$border: $grey-lighter; +$border-hover: $grey-light; +$main-border: rgba(0, 0, 0, 0.09); +$media-border: $white; + +/* Box shadow colors */ +$box-shadow: rgba(0, 0, 0, 0.04); +$box-shadow-dark: rgba(0, 0, 0, 0.15); +$box-shadow-darker: rgba(0, 0, 0, 0.3); + +/* Typography */ +$family-sans-serif: "Roboto",sans-serif; +$family-monospace: "Roboto Mono",Menlo,Monaco,Consolas,"Courier New",monospace; +$family-roboto: $family-sans-serif; +$size-1: 3rem; +$size-2: 2.5rem; +$size-3: 2rem; +$size-4: 1.5rem; +$size-5: 1.25rem; +$size-6: 1rem; +$size-7: 0.8rem; +$weight-light: 100; +$weight-normal: 300; +$weight-semibold: 400; +$weight-bold: 600; + +/* Radius */ +$radius-small: 2px; +$radius: 3px; +$radius-large: 5px; + +/* Responsive break point */ +$phone: 640px; +$tablet: 800px; +$desktop: 960px; +$widescreen: 1440px; + +/* Icons */ +$icon-menu: '\e802'; +$icon-close: '\e801'; +$icon-email: '\e804'; +$icon-rss: '\e803'; +$icon-github: '\f09b'; +$icon-dribbble: '\f31b'; +$icon-linkedin: '\f318'; +$icon-twitter: '\f309'; +$icon-facebook: '\f30c'; +$icon-instagram: '\f16d'; +$icon-youtube: '\f16a'; +$icon-google: '\f30f'; +$icon-clock: '\e800'; + +$color-linkedin: #007bb6; +$color-twitter: #55acee; +$color-facebook: #3b5998; +$color-instagram: #3f729b; +$color-youtube: #bb0000; +$color-google: #dd4b39; + +/* Animation */ +$easing: ease-out; +$speed: 0.5s; + +/* Metrics */ +$space-small: 10px; +$space-normal: 20px; +$space-large: 30px; |