_sass/Base.scss in jekyll-theme-fica-0.1.3 vs _sass/Base.scss in jekyll-theme-fica-0.1.4
- old
+ new
@@ -3,313 +3,395 @@
}
/**
* Reset some basic elements
*/
-body, h1, h2, h3, h4, h5, h6,
-p, blockquote, pre, hr,
-dl, dd, ol, ul, figure {
- margin: 0;
- padding: 0;
-
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+hr,
+dl,
+dd,
+ol,
+ul,
+figure {
+ margin: 0;
+ padding: 0;
}
-
body {
- font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height}
+ $base-font-family;
color: $text-color;
background-color: $background-color;
-webkit-text-size-adjust: 100%;
-webkit-font-feature-settings: "kern" 1;
- -moz-font-feature-settings: "kern" 1;
- -o-font-feature-settings: "kern" 1;
- font-feature-settings: "kern" 1;
+ -moz-font-feature-settings: "kern" 1;
+ -o-font-feature-settings: "kern" 1;
+ font-feature-settings: "kern" 1;
font-kerning: normal;
display: flex;
min-height: 100vh;
flex-direction: column;
overflow-wrap: break-word;
-}
+ &::-webkit-scrollbar {
+ width: 7px;
+ height: 4px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: $background-color;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: $text-color;
+ border-radius: 4px;
+ }
+}
+
/**
* Set `margin-bottom` to maintain vertical rhythm
*/
-h1, h2, h3, h4, h5, h6,
-p, blockquote, pre,
-ul, ol, dl, figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+ul,
+ol,
+dl,
+figure,
%vertical-rhythm {
- margin-bottom: $spacing-unit / 2;
+ margin-bottom: $spacing-unit / 2;
}
hr {
- margin-top: $spacing-unit;
- margin-bottom: $spacing-unit;
+ margin-top: $spacing-unit;
+ margin-bottom: $spacing-unit;
+ background: $text-color;
}
/**
* `main` element
*/
main {
- display: block;
+ display: block;
/* Default value of `display` of `main` element is 'inline' in IE 11. */
animation-name: text_trans;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
@keyframes text_trans {
- 0% {opacity: 0%;}
- 20% {opacity: 20%;}
- 50% {opacity: 50%;}
- 70% {opacity: 70%;}
- 90% {opacity: 90%;}
- 100% {opacity: 100%;}
+ 0% {
+ opacity: 0%;
+ }
+ 20% {
+ opacity: 20%;
+ }
+ 50% {
+ opacity: 50%;
+ }
+ 70% {
+ opacity: 70%;
+ }
+ 90% {
+ opacity: 90%;
+ }
+ 100% {
+ opacity: 100%;
+ }
}
}
/**
* Images
*/
img {
- max-width: 100%;
- vertical-align: middle;
+ max-width: 100%;
+ vertical-align: middle;
}
-
-
/**
* Figures
*/
figure > img {
- display: block;
+ display: block;
}
figcaption {
- font-size: $small-font-size;
+ font-size: $small-font-size;
}
-
-
/**
* Lists
*/
-ul, ol {
- margin-left: $spacing-unit;
+ul,
+ol {
+ margin-left: $spacing-unit;
}
li {
- > ul,
- > ol {
- margin-bottom: 0;
- }
+ > ul,
+ > ol {
+ margin-bottom: 0;
+ }
}
-
-
/**
* Headings
*/
-h2, h3, h4, h5, h6 {
- font-weight: 650;
- font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 650;
+ font-family: $base-font-family;
}
h1 {
- font-weight: 700;
- font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
- font-size: 35px;
+ font-weight: 700;
+ font-family: $base-font-family;
+ font-size: 35px;
}
-
/**
* Links
*/
a {
- color: $link-base-color;
- text-decoration: none;
- transition: $transition-links;
+ color: $link-base-color;
+ text-decoration: none;
+ transition: $transition-links;
- &:visited {
- color: $link-visited-color;
- }
+ &:visited {
+ color: $link-visited-color;
+ }
- &:hover {
- color: $link-hover-color;
- text-decoration: none;
- }
+ &:hover {
+ color: $link-hover-color;
+ text-decoration: none;
+ }
}
-
/**
* Blockquotes
*/
blockquote {
- color: $blockquote-text-color;
- border-left: 4px solid $border-color-01;
- padding-left: $spacing-unit / 2;
- @include relative-font-size(1.125);
- font-style: italic;
+ color: $blockquote-text-color;
+ border-left: 4px solid $border-color-01;
+ padding-left: $spacing-unit / 2;
+ @include relative-font-size(1.125);
+ font-style: italic;
- > :last-child {
- margin-bottom: 0;
- }
+ > :last-child {
+ margin-bottom: 0;
+ }
- i, em {
- font-style: normal;
- }
+ i,
+ em {
+ font-style: normal;
+ }
}
-
-
/**
* Code formatting
*/
pre,
code {
- font-family: $code-font-family;
- font-size: 0.9375em;
- border: 1px solid $border-color-01;
- border-radius: 4px;
- background-color: $code-background-color;
+ font-family: $code-font-family;
+ font-size: 0.9375em;
+ border: 1px solid $border-color-01;
+ border-radius: 4px;
+ background-color: $code-background-color;
+
+ &::-webkit-scrollbar {
+ width: 7px;
+ height: 9px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: $code-background-color;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: $text-color;
+ border-radius: 4px;
+ }
}
code {
- padding: 1px 5px;
+ padding: 1px 5px;
}
pre {
- padding: 8px 12px;
- overflow-x: auto;
+ padding: 8px 12px;
+ overflow-x: auto;
- > code {
- border: 0;
- padding-right: 0;
- padding-left: 0;
- }
+ > code {
+ border: 0;
+ padding-right: 0;
+ padding-left: 0;
+ }
}
.highlight {
- border-radius: 3px;
- background: $code-background-color;
- @extend %vertical-rhythm;
+ border-radius: 3px;
+ background: $code-background-color;
+ @extend %vertical-rhythm;
- .highlighter-rouge & {
- background: $code-background-color;
- }
+ .highlighter-rouge & {
+ background: $code-background-color;
+ }
}
-
-
/**
* Wrapper
*/
.wrapper {
- max-width: calc(#{$content-width} - (#{$spacing-unit}));
- margin-right: auto;
- margin-left: auto;
- padding-right: $spacing-unit / 2;
- padding-left: $spacing-unit / 2;
- @extend %clearfix;
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: $spacing-unit / 2;
+ padding-left: $spacing-unit / 2;
+ @extend %clearfix;
- @media screen and (min-width: $on-large) {
- max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
- padding-right: $spacing-unit;
- padding-left: $spacing-unit;
- }
+ @media screen and (min-width: $on-large) {
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
+ padding-right: $spacing-unit;
+ padding-left: $spacing-unit;
+ }
}
.wrapper_header {
- padding-left: 20px;
- padding-right: auto;
- @extend %clearfix;
- @media screen and (min-width: $on-medium) {
- padding-right: 70px;
- padding-left: 70px;
- }
+ padding-left: 20px;
+ padding-right: auto;
+ @extend %clearfix;
+ @media screen and (min-width: $on-medium) {
+ padding-right: 70px;
+ padding-left: 70px;
+ }
}
.wrapper_footer {
-max-width: calc(#{$content-width} - (#{$spacing-unit}));
-margin-right: auto;
-margin-left: auto;
-padding-right: $spacing-unit / 2;
-padding-left: $spacing-unit / 2;
-@extend %clearfix;
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: $spacing-unit / 2;
+ padding-left: $spacing-unit / 2;
+ @extend %clearfix;
-@media screen and (min-width: $on-large) {
- max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
- padding-right: $spacing-unit;
- padding-left: $spacing-unit;
+ @media screen and (min-width: $on-large) {
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
+ padding-right: $spacing-unit;
+ padding-left: $spacing-unit;
+ }
}
-}
-
-
/**
* Clearfix
*/
%clearfix:after {
- content: "";
- display: table;
- clear: both;
+ content: "";
+ display: table;
+ clear: both;
}
-
-
/**
* Icons
*/
.stackoverflow {
- color: #f66a0a;
+ color: #f66a0a;
}
.youtube {
- color: #dd0505;
+ color: #dd0505;
}
.github {
- color: #f9f9f9
+ color: #f9f9f9;
}
.svg-icon {
- width: 16px;
- height: 16px;
- display: inline-block;
- fill: currentColor;
- padding: 5px 3px 2px 5px;
- vertical-align: text-bottom;
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ fill: currentColor;
+ padding: 5px 3px 2px 5px;
+ vertical-align: text-bottom;
}
-
/**
* Tables
*/
table {
- margin-bottom: $spacing-unit;
- width: 100%;
- text-align: $table-text-align;
- color: $table-text-color;
- border-collapse: collapse;
- border: 1px solid $table-border-color;
- tr {
- &:nth-child(even) {
- background-color: $table-zebra-color;
- }
- }
- th, td {
- padding: ($spacing-unit / 3) ($spacing-unit / 2);
- }
- th {
- background-color: $table-header-bg-color;
- border: 1px solid $table-header-border;
- }
- td {
- border: 1px solid $table-border-color;
- }
+ margin-bottom: $spacing-unit;
+ width: 100%;
+ text-align: $table-text-align;
+ color: $table-text-color;
+ border-collapse: collapse;
+ border: 1px solid $table-border-color;
- @include media-query($on-laptop) {
- display: block;
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
- -ms-overflow-style: -ms-autohiding-scrollbar;
- }
-}
\ No newline at end of file
+ &::-webkit-scrollbar {
+ width: 7px;
+ height: 9px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: $code-background-color;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: $text-color;
+ border-radius: 4px;
+ }
+ tr {
+ &:nth-child(even) {
+ background-color: $table-zebra-color;
+ }
+ }
+ th,
+ td {
+ padding: ($spacing-unit / 3) ($spacing-unit / 2);
+ }
+ th {
+ background-color: $table-header-bg-color;
+ border: 1px solid $table-header-border;
+ }
+ td {
+ border: 1px solid $table-border-color;
+ }
+
+ @include media-query($on-laptop) {
+ display: block;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+ }
+}
+dl {
+ padding: 0;
+
+ dt {
+ padding: 0;
+ margin-top: 1rem;
+ font-size: $base-font-size;
+ font-weight: 690;
+ }
+
+ dd {
+ margin-inline-start: 40px;
+ }
+}
+