💄 Updating the UI and style files.
This commit is contained in:
piharpi
@@ -6,14 +6,25 @@ html {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6,
|
||||
p, blockquote, pre, hr,
|
||||
dl, dd, ol, ul, figure {
|
||||
letter-spacing: .1px;
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
hr,
|
||||
dl,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: $base-font-family;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -21,46 +32,63 @@ dl, dd, ol, ul, figure {
|
||||
*/
|
||||
body {
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
background: $neutral;
|
||||
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
|
||||
background: $base;
|
||||
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $second-font-family;
|
||||
-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;
|
||||
-webkit-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;
|
||||
border-top: 5px solid $black;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
$base-font-size: 18px;
|
||||
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $second-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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-top: $spacing-unit - 20;
|
||||
margin-bottom: $spacing-unit - 20;
|
||||
}
|
||||
|
||||
kbd {
|
||||
-moz-border-radius:3px;
|
||||
-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
|
||||
-webkit-border-radius:3px;
|
||||
-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
|
||||
background-color:#f7f7f7;
|
||||
border:1px solid #ccc;
|
||||
border-radius:3px;
|
||||
box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
|
||||
color:#333;
|
||||
display:inline-block;
|
||||
font-family: Roboto;
|
||||
font-size:14px;
|
||||
line-height:1.4;
|
||||
margin:0 .1em;
|
||||
padding:.1em .6em;
|
||||
text-shadow:0 1px 0 $white;
|
||||
-moz-border-radius: 3px;
|
||||
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
|
||||
-webkit-border-radius: 3px;
|
||||
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
font-family: $syntax-font-family;
|
||||
margin: 0 .1em;
|
||||
padding: .1em .6em;
|
||||
text-shadow: 0 1px 0 $white;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -70,6 +98,8 @@ img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
-webkit-user-drag: none;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -83,7 +113,7 @@ figure {
|
||||
/**
|
||||
* Images
|
||||
*/
|
||||
figure > img {
|
||||
figure>img {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
@@ -99,15 +129,17 @@ figcaption {
|
||||
/**
|
||||
* Lists
|
||||
*/
|
||||
ul, ol {
|
||||
margin-left: $spacing-unit;
|
||||
ul,
|
||||
ol {
|
||||
margin-left: $spacing-unit - 10;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-bottom: 1px;
|
||||
padding-top: 1px;
|
||||
> ul,
|
||||
> ol {
|
||||
|
||||
>ul,
|
||||
>ol {
|
||||
margin-bottom: 2px;
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -116,13 +148,24 @@ li {
|
||||
/**
|
||||
* Headings
|
||||
*/
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: $base-font-weight;
|
||||
}
|
||||
|
||||
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
|
||||
h1>a,
|
||||
h2>a,
|
||||
h3>a,
|
||||
h4>a,
|
||||
h5>a,
|
||||
h6>a {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
@@ -135,12 +178,12 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
|
||||
*/
|
||||
a {
|
||||
color: $black;
|
||||
border-bottom: 1px solid #1635de;
|
||||
border-bottom: 1px solid $smoke;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
border-bottom: 2px solid #1635de;
|
||||
border-bottom: 2px solid $blue;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,18 +198,23 @@ del {
|
||||
* Em
|
||||
*/
|
||||
em {
|
||||
color:inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Blockquotes
|
||||
*/
|
||||
blockquote {
|
||||
color: $grey;
|
||||
border-left: 4px solid $black;
|
||||
padding: 5px 5px 5px 15px;
|
||||
border-radius: 2px;
|
||||
@include relative-font-size(1);
|
||||
color: $gray;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
opacity: .9;
|
||||
border-top: 1px solid $light;
|
||||
border-bottom: 1px solid $light;
|
||||
padding: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 1em;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -179,7 +227,7 @@ blockquote {
|
||||
*/
|
||||
.wrapper {
|
||||
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
|
||||
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
|
||||
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
|
||||
position: relative;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@@ -187,14 +235,32 @@ blockquote {
|
||||
padding-left: $spacing-unit;
|
||||
@extend %clearfix;
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
@include media-query($on-mobile) {
|
||||
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
|
||||
max-width: calc(#{$content-width} - (#{$spacing-unit}));
|
||||
padding-right: $spacing-unit / 2;
|
||||
padding-left: $spacing-unit / 2;
|
||||
max-width: calc(#{$content-width} - (#{$spacing-unit}));
|
||||
padding-right: $spacing-unit - 10;
|
||||
padding-left: $spacing-unit - 10;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Small
|
||||
*/
|
||||
small {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Superscript
|
||||
*/
|
||||
sup {
|
||||
padding: 0px 4px;
|
||||
border-radius: 10%;
|
||||
top: -3px;
|
||||
left: 2px;
|
||||
font-size: small;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* Table
|
||||
@@ -203,13 +269,19 @@ table {
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
background: $white;
|
||||
font-family: 'Roboto Mono';
|
||||
font-family: $first-font-family;
|
||||
font-size: $small-font-size;
|
||||
th {
|
||||
font-weight: 400;
|
||||
|
||||
th {
|
||||
font-weight: 700;
|
||||
background: #f5f5f5;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid #f5f5f5;
|
||||
}
|
||||
th, td, tr {
|
||||
|
||||
th,
|
||||
td,
|
||||
tr {
|
||||
border: 1px solid $light;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
@@ -228,7 +300,7 @@ table {
|
||||
* When mouse block a text set this color
|
||||
*/
|
||||
::selection {
|
||||
background: #D6EDFF;
|
||||
// background: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -237,7 +309,9 @@ table {
|
||||
.gist {
|
||||
table {
|
||||
border: 0;
|
||||
tr, td {
|
||||
|
||||
tr,
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,116 @@
|
||||
// Font family
|
||||
@charset "utf-8";
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');unicode-range:U+0370-03FF;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');unicode-range:U+0370-03FF;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
|
||||
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
@@ -21,7 +118,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
/* cyrillic */
|
||||
@@ -30,7 +127,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
/* greek-ext */
|
||||
@@ -39,7 +136,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
/* greek */
|
||||
@@ -48,7 +145,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@@ -57,7 +154,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@@ -66,7 +163,7 @@
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@@ -75,62 +172,287 @@
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhGq3-OXg.woff2) format('woff2');
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhPq3-OXg.woff2) format('woff2');
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhHq3-OXg.woff2) format('woff2');
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJT9g.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhIq3-OXg.woff2) format('woff2');
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJT9g.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhEq3-OXg.woff2) format('woff2');
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJT9g.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhFq3-OXg.woff2) format('woff2');
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhLq38.woff2) format('woff2');
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdh18Smxg.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdo18Smxg.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdg18Smxg.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdv18Smxg.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdj18Smxg.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdi18Smxg.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSds18Q.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.207/distr/fira_code.css);
|
||||
@@ -2,83 +2,99 @@
|
||||
* Site intro
|
||||
*/
|
||||
|
||||
.site-intro {
|
||||
padding-top: 5em;
|
||||
|
||||
.intro-image {
|
||||
overflow: hidden; // active for border-radius or photo inside the element
|
||||
background: $blue-light;
|
||||
border-radius: 100%;
|
||||
.introduction {
|
||||
margin-top: 5em;
|
||||
margin-bottom: 4em;
|
||||
text-align: center;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.introduction-image {
|
||||
width: 103px;
|
||||
height: 103px;
|
||||
animation: .5s ease-in forwards weeng;
|
||||
user-select: none;
|
||||
border-radius: 100%;
|
||||
-ms-user-select: none;
|
||||
background: #d8deff;
|
||||
-webkit-user-select: none;
|
||||
border: 6px solid #eef1ff;
|
||||
animation: 0.5s ease-in forwards weeng;
|
||||
box-shadow: 0px 0px 2px 9px #f6f6fa;
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-name {
|
||||
|
||||
.introduction-name {
|
||||
margin-top: 8px;
|
||||
font-size: 1.5em;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
color: $black;
|
||||
font-family: $first-font-family;
|
||||
}
|
||||
|
||||
.intro-description {
|
||||
font-size: $base-font-size;
|
||||
color: $grey;
|
||||
margin: 0;
|
||||
.introduction-description {
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
font-size: 16px;
|
||||
color: $gray;
|
||||
opacity: 0.9;
|
||||
max-width: 393px;
|
||||
font-family: $first-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Site header
|
||||
* Site navbar
|
||||
*/
|
||||
|
||||
.site-header {
|
||||
height: 25px;
|
||||
margin: 16px 0 5em 0;
|
||||
.navbar {
|
||||
height: auto;
|
||||
max-width: -webkit-calc(890px - (#{$spacing-unit} * 2));
|
||||
max-width: calc(890px - (#{$spacing-unit} * 2));
|
||||
position: relative;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
border-bottom: 1px solid $light;
|
||||
padding: $spacing-unit - 15px $spacing-unit;
|
||||
@extend %clearfix;
|
||||
}
|
||||
|
||||
/**
|
||||
* Site nav
|
||||
*/
|
||||
|
||||
.site-nav {
|
||||
|
||||
.menu {
|
||||
.trigger {
|
||||
float: left;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.nav-trigger {
|
||||
display: none;
|
||||
.menu-trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
.menu-link {
|
||||
color: $black;
|
||||
box-shadow: 1px 1px 0px 0px #dddddd;
|
||||
font-family: $first-font-family;
|
||||
line-height: $base-line-height - 0.5;
|
||||
text-decoration: none;
|
||||
// text-transform: capitalize;
|
||||
background: #ebebeb;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
padding: 5px 8px;
|
||||
font-size: $small-font-size;
|
||||
opacity: .7;
|
||||
border: 0;
|
||||
font-size: $small-font-size - 1;
|
||||
opacity: 0.7;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
&:hover {
|
||||
@@ -88,21 +104,29 @@
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link.active {
|
||||
.menu-link.active {
|
||||
opacity: 1;
|
||||
border-radius: 4em 1em 2em 1em / 1em 5em 1em 3em;
|
||||
color: $blue;
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
@include media-query($on-palm) {
|
||||
@include media-query($on-mobile) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-bottom: 2px solid #f5f5f5;
|
||||
height: 50px;
|
||||
background: $white;
|
||||
border-bottom: 1px solid $light;
|
||||
|
||||
label[for="nav-trigger"] {
|
||||
display: block;
|
||||
@@ -117,310 +141,111 @@
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
line-height: 0;
|
||||
padding-top: 10px;
|
||||
padding-top: 15px;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
|
||||
> svg path {
|
||||
>svg path {
|
||||
fill: $black;
|
||||
}
|
||||
}
|
||||
|
||||
input ~ .trigger {
|
||||
input[type="checkbox"]:not(:checked)~.trigger {
|
||||
clear: both;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
input:checked ~ .trigger {
|
||||
input[type="checkbox"]:checked~.trigger {
|
||||
position: fixed;
|
||||
animation: 0.2s ease-in forwards weeng;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
.menu-link {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
font-size: $base-font-size;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 1em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-query($on-palm) {
|
||||
.site-nav .page-link.active, .site-nav .page-link { margin-bottom: 18px; padding: 0; border: 0; }
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
|
||||
.site-header {
|
||||
height: 0;
|
||||
margin: 0 0 3em 0;
|
||||
}
|
||||
|
||||
main .content {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.content .see-all-container {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.page_number {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.post-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
display: block;
|
||||
.post-nav-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-nav-item:nth-child(even) {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
border-top: 1px solid $light;
|
||||
}
|
||||
}
|
||||
|
||||
footer.site-footer {
|
||||
margin-top: 3em;
|
||||
.crafted {
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
.copyright {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
@include relative-font-size(1.25);
|
||||
}
|
||||
|
||||
.see-all-container {
|
||||
margin-top: 2em;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 4px 10px;
|
||||
font-size: $small-font-size;
|
||||
text-decoration: none;
|
||||
border: 2px solid $blue;
|
||||
color: $blue;
|
||||
border-radius: 4px;
|
||||
// box-shadow: 1px 1px 0px 0px #dddddd;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
color: $black;
|
||||
border: 2px solid $black;
|
||||
// box-shadow: 0px 0px 0px 0px #dddddd;
|
||||
}
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: $small-font-size;
|
||||
letter-spacing: 2px;
|
||||
color: $black;
|
||||
text-transform: uppercase;
|
||||
.post-header {
|
||||
font-size: 1.2em;
|
||||
font-family: $first-font-family;
|
||||
text-transform: capitalize;
|
||||
font-weight: 700;
|
||||
span[role="img"]{
|
||||
font-weight: 700;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Site `t
|
||||
*/
|
||||
.project-nav {
|
||||
float: right;
|
||||
clear: both;
|
||||
button {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
&:active {
|
||||
background: #ebebeb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 5em;
|
||||
.projects{
|
||||
height: 151px;
|
||||
padding-top: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
.projects-container {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
padding-bottom: 15px;
|
||||
overflow-x: scroll;
|
||||
|
||||
:nth-child(even){
|
||||
margin: 0 15px;
|
||||
}
|
||||
:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.project-item {
|
||||
width: 200px;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
opacity: .8;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
white-space: normal;
|
||||
|
||||
.project-item-title {
|
||||
font-size: $small-font-size;
|
||||
font-weight: 700;
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
letter-spacing: .1px;
|
||||
a {
|
||||
border-bottom: 2px solid $blue-light;
|
||||
}
|
||||
}
|
||||
|
||||
.project-item-description {
|
||||
font-size: $small-font-size;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
margin:0;
|
||||
padding-top: 9px;
|
||||
color: $black;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Site blog
|
||||
*/
|
||||
|
||||
.list-post.blog {
|
||||
padding: 15px 15px 15px 0;
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $light;
|
||||
}
|
||||
}
|
||||
.posts {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 6px;
|
||||
display: flex;
|
||||
@extend %clearfix;
|
||||
|
||||
.list-post.tips {
|
||||
padding: 12px 0 12px 0;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.list-post-title {
|
||||
background: none;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $light;
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $light;
|
||||
}
|
||||
|
||||
.posts-header {
|
||||
display: inline;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.posts-date {
|
||||
font-family: $first-font-family;
|
||||
font-size: 17px;
|
||||
min-width: 55px;
|
||||
color: $gray;
|
||||
padding-right: 10px;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list-post-header {
|
||||
margin-bottom: $spacing-unit - 15;
|
||||
display: inline;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.list-post-meta {
|
||||
font-size: $small-font-size;
|
||||
color: $black;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
/**
|
||||
* Site tips
|
||||
*/
|
||||
|
||||
.list-post-header.tips {
|
||||
.list-post-title {
|
||||
margin: 0;
|
||||
.posts-title {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 0;
|
||||
font-family: $second-font-family;
|
||||
font-weight: normal;
|
||||
}
|
||||
margin: 0;
|
||||
}
|
||||
font-size: 1em;
|
||||
display: inherit;
|
||||
|
||||
.list-post-title {
|
||||
// @include relative-font-size(2);
|
||||
font-weight: 600;
|
||||
font-size: $base-font-size;
|
||||
display: inherit;
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
line-height: 22px;
|
||||
opacity: .8;
|
||||
|
||||
&:hover, &focus {
|
||||
opacity: 1;
|
||||
a {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
line-height: 22px;
|
||||
|
||||
&:hover,
|
||||
&focus {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-query($on-laptop) {
|
||||
// @include relative-font-size(2.25);
|
||||
}
|
||||
}
|
||||
|
||||
.list-post-excerpt {
|
||||
font-size: $base-font-size;
|
||||
display: inline;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
/**
|
||||
* Site image animation
|
||||
* Animation
|
||||
*/
|
||||
|
||||
@keyframes weeng {
|
||||
0% {
|
||||
opacity: .2;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
100% {
|
||||
@@ -433,90 +258,50 @@
|
||||
*/
|
||||
|
||||
.embed-responsive {
|
||||
height: 0;
|
||||
height: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
margin-top: 20px;
|
||||
iframe, object, embed {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.tags { margin-top: 3px; }
|
||||
.tag {
|
||||
color: $grey;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
display: inline-block;
|
||||
font-size: $small-font-size;
|
||||
border-bottom: 2px solid $blue-light;
|
||||
&:hover {
|
||||
color: $black;
|
||||
border-color: $blue-light;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 404 page
|
||||
*/
|
||||
|
||||
.er-wrapper {
|
||||
display: flex;
|
||||
max-width: 530px;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.er-container {
|
||||
top: -30px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
padding-bottom: 56.25%;
|
||||
margin-top: 20px;
|
||||
|
||||
.er-header {
|
||||
font-size: 5em;
|
||||
font-weight: bold;
|
||||
color: $black;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.er-paragraph {
|
||||
font-size: 2.531em;
|
||||
color:#1635de;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.er-by {
|
||||
font-size: $base-font-size;
|
||||
color:$black;
|
||||
display: inline;
|
||||
a {
|
||||
border-bottom: 1px solid #1635de;
|
||||
&:hover, &:focus {
|
||||
border-bottom: 2px solid #1635de;
|
||||
}
|
||||
iframe,
|
||||
object,
|
||||
embed {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Site footer
|
||||
*/
|
||||
.site-footer {
|
||||
a {
|
||||
color: $black;
|
||||
border-bottom: 1px solid $blue;
|
||||
&:hover, &:focus {
|
||||
border-bottom: 2px solid $blue;
|
||||
}
|
||||
.footer {
|
||||
color: $gray;
|
||||
margin-top: 8em;
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
font-size: $small-font-size;
|
||||
font-family: $first-font-family;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
b:not(:last-child) {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
a {
|
||||
border: 0;
|
||||
color: $gray;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom: 2px solid $blue;
|
||||
}
|
||||
}
|
||||
text-align: center;
|
||||
margin: 7em 0 2em 0;
|
||||
font-size: $base-font-size;
|
||||
color: $grey;
|
||||
}
|
||||
235
_sass/bangsring/_page.scss
Normal file
235
_sass/bangsring/_page.scss
Normal file
@@ -0,0 +1,235 @@
|
||||
.wrapper.post {
|
||||
max-width: -webkit-calc(#{660px} - (#{$spacing-unit} * 2));
|
||||
max-width: calc(#{660px} - (#{$spacing-unit} * 2));
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
padding-left: $spacing-unit - 10;
|
||||
padding-right: $spacing-unit - 10;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Post title
|
||||
*/
|
||||
.header {
|
||||
margin-top: 125px;
|
||||
|
||||
.header-title {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
font-family: $first-font-family;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
color: $black;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Post meta
|
||||
*/
|
||||
.post-meta {
|
||||
font-family: $first-font-family;
|
||||
text-align: center;
|
||||
font-size: $small-font-size;
|
||||
margin-bottom: 5em;
|
||||
padding-top: 3px;
|
||||
line-height: 1.3;
|
||||
|
||||
time {
|
||||
color: $gray;
|
||||
position: relative;
|
||||
margin-right: 24px;
|
||||
|
||||
&::after {
|
||||
background: $light;
|
||||
bottom: 1px;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
span[itemprop="author"] {
|
||||
color: $gray;
|
||||
border-bottom: 1px dotted $light;
|
||||
}
|
||||
|
||||
.tags {
|
||||
max-width: 200px;
|
||||
margin: 27px auto 0 auto;
|
||||
|
||||
.tag {
|
||||
color: $gray;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
display: inline-block;
|
||||
font-size: $small-font-size - 4;
|
||||
border-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
border-color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Post content
|
||||
*/
|
||||
.page-content {
|
||||
font-size: 1em;
|
||||
color: $gray;
|
||||
padding-top: 8px;
|
||||
|
||||
iframe {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: auto -2em;
|
||||
|
||||
img {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin-top: 5px;
|
||||
font-style: italic;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
>p {
|
||||
margin: 0;
|
||||
padding-top: $spacing-unit - 15;
|
||||
padding-bottom: $spacing-unit - 15;
|
||||
}
|
||||
|
||||
ul.task-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
li input[type="checkbox"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $first-font-family;
|
||||
color: $black;
|
||||
font-weight: 700;
|
||||
margin-top: $spacing-unit;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include relative-font-size(1.75);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include relative-font-size(1.563);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include relative-font-size(1.438);
|
||||
border-bottom: 1px solid $light;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include relative-font-size(1.188);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include relative-font-size(1);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include relative-font-size(0.875);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 0;
|
||||
border-style: solid;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
font-family: $first-font-family;
|
||||
font-size: $small-font-size;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: 5em;
|
||||
border-top: 1px solid $light;
|
||||
line-height: 1.4;
|
||||
|
||||
.post-nav-item {
|
||||
border-bottom: 0;
|
||||
font-weight: 800;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
h4 {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $gray;
|
||||
font-size: $small-font-size;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
width: 50%;
|
||||
padding-top: 10px;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(odd) {
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
display: block;
|
||||
font-size: $small-font-size;
|
||||
|
||||
.post-nav-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-nav-item:nth-child(even) {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
border-top: 1px solid $light;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
/**
|
||||
* Post title
|
||||
*/
|
||||
.post-header {
|
||||
.post-title {
|
||||
font-size: $small-font-size;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Post meta
|
||||
*/
|
||||
.post-meta {
|
||||
color: $grey;
|
||||
font-size: $small-font-size;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Post content
|
||||
*/
|
||||
.post-content {
|
||||
font-size: $base-font-size;
|
||||
color: $black;
|
||||
line-height: 27px;
|
||||
padding: 5px 0 0 0;
|
||||
|
||||
iframe {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
padding-top: $spacing-unit - 20;
|
||||
padding-bottom: $spacing-unit - 20;
|
||||
}
|
||||
|
||||
ul.task-list {
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
li input[type="checkbox"]{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $black;
|
||||
font-weight: 700;
|
||||
margin-top: $spacing-unit;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include relative-font-size(1.750);
|
||||
|
||||
// Use this media queries like this, if you want responsive font
|
||||
// @include media-query($on-laptop) {
|
||||
// @include relative-font-size(1.75);
|
||||
// }
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include relative-font-size(1.563);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include relative-font-size(1.438);
|
||||
border-bottom: 1px solid $light;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include relative-font-size(1.188);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include relative-font-size(1);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include relative-font-size(.875);
|
||||
}
|
||||
|
||||
ul a, ol a
|
||||
{
|
||||
border-bottom: 1px dashed #d2c7c7;
|
||||
&:hover {
|
||||
border-bottom: 2px solid #1635de;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
border-bottom:0;
|
||||
border-style: solid;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: 5em;
|
||||
border-top: 1px solid $light;
|
||||
|
||||
.post-nav-item {
|
||||
border-bottom: 0;
|
||||
font-weight: 800;
|
||||
padding-bottom: 10px;
|
||||
&:hover, &:focus {
|
||||
h4 {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
color: $grey;
|
||||
font-size: $small-font-size;
|
||||
margin: 0;
|
||||
}
|
||||
width: 50%;
|
||||
padding-top: 10px;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
&:nth-child(odd) {
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
}
|
||||
&:nth-child(even) {
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,182 @@
|
||||
/**
|
||||
* Code formatting
|
||||
*/
|
||||
|
||||
code {
|
||||
letter-spacing: .1px;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "calt"1;
|
||||
font-variant-ligatures: normal;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
font-size: $small-font-size;
|
||||
padding: 1px 3px;
|
||||
font-size: 15px;
|
||||
padding: 1px 4px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
border: 1px solid #d8d8d8;
|
||||
background-color: #f5f5f5;
|
||||
color: #3B454E;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 2px;
|
||||
font-family: $base-syntax-font;
|
||||
font-family: $syntax-font-family;
|
||||
}
|
||||
|
||||
pre.highlight {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
line-height: 24px;
|
||||
color: #3B454E;
|
||||
font-family: $base-syntax-font;
|
||||
> code {
|
||||
font-size: $small-font-size;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
line-height: 24px;
|
||||
border: 0;
|
||||
font-feature-settings: "calt" 1;
|
||||
letter-spacing: .1px;
|
||||
}
|
||||
margin: 0 calc(51% - 50vw);
|
||||
padding: 25px;
|
||||
line-height: 1;
|
||||
font-family: $syntax-font-family;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
|
||||
>code {
|
||||
width: 100%;
|
||||
max-width: 37rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
border: 0;
|
||||
font-variant-ligatures: normal;
|
||||
background-color: transparent;
|
||||
font-feature-settings: "calt"1;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight table td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.highlight table pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.highlight,
|
||||
.highlight .w {
|
||||
color: #fbf1c7;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color: #fb4934;
|
||||
background-color: #282828;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .c,
|
||||
.highlight .cd,
|
||||
.highlight .cm,
|
||||
.highlight .c1,
|
||||
.highlight .cs {
|
||||
color: #928374;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .cp {
|
||||
color: #8ec07c;
|
||||
}
|
||||
|
||||
.highlight .nt {
|
||||
color: #fb4934;
|
||||
}
|
||||
|
||||
.highlight .o,
|
||||
.highlight .ow {
|
||||
color: #fbf1c7;
|
||||
}
|
||||
|
||||
.highlight .p,
|
||||
.highlight .pi {
|
||||
color: #fbf1c7;
|
||||
}
|
||||
|
||||
.highlight .gi {
|
||||
color: #b8bb26;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.highlight .gd {
|
||||
color: #fb4934;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.highlight .gh {
|
||||
color: #b8bb26;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .k,
|
||||
.highlight .kn,
|
||||
.highlight .kp,
|
||||
.highlight .kr,
|
||||
.highlight .kv {
|
||||
color: #fb4934;
|
||||
}
|
||||
|
||||
.highlight .kc {
|
||||
color: #d3869b;
|
||||
}
|
||||
|
||||
.highlight .kt {
|
||||
color: #fabd2f;
|
||||
}
|
||||
|
||||
.highlight .kd {
|
||||
color: #fe8019;
|
||||
}
|
||||
|
||||
.highlight .s,
|
||||
.highlight .sb,
|
||||
.highlight .sc,
|
||||
.highlight .sd,
|
||||
.highlight .s2,
|
||||
.highlight .sh,
|
||||
.highlight .sx,
|
||||
.highlight .s1 {
|
||||
color: #b8bb26;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .si {
|
||||
color: #b8bb26;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .sr {
|
||||
color: #b8bb26;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .se {
|
||||
color: #fe8019;
|
||||
}
|
||||
|
||||
.highlight .nn {
|
||||
color: #8ec07c;
|
||||
}
|
||||
|
||||
.highlight .nc {
|
||||
color: #8ec07c;
|
||||
}
|
||||
|
||||
.highlight .no {
|
||||
color: #d3869b;
|
||||
}
|
||||
|
||||
.highlight .na {
|
||||
color: #b8bb26;
|
||||
}
|
||||
|
||||
.highlight .m,
|
||||
.highlight .mf,
|
||||
.highlight .mh,
|
||||
.highlight .mi,
|
||||
.highlight .il,
|
||||
.highlight .mo,
|
||||
.highlight .mb,
|
||||
.highlight .mx {
|
||||
color: #d3869b;
|
||||
}
|
||||
|
||||
.highlight .ss {
|
||||
color: #83a598;
|
||||
}
|
||||
@@ -1,39 +1,34 @@
|
||||
// Define defaults for each variable.
|
||||
$base-font-family: "Roboto", sans-serif !default;
|
||||
$base-syntax-font: "Roboto Mono", Hack, monospace;
|
||||
$base-font-size: 16px !default;
|
||||
$medium-font-size: $base-font-size * 0.938 !default;
|
||||
$first-font-family: "Roboto",
|
||||
sans-serif !default;
|
||||
$second-font-family: "Source Sans Pro",
|
||||
sans-serif !default;
|
||||
$syntax-font-family: "Fira Code",
|
||||
monospace !default;
|
||||
$base-font-size: 19px !default;
|
||||
$medium-font-size: $base-font-size * 0.938 !default;
|
||||
$small-font-size: $base-font-size * 0.875 !default;
|
||||
$base-font-weight: 400 !default;
|
||||
$base-line-height: 1.5 !default;
|
||||
$spacing-unit: 30px !default;
|
||||
|
||||
// Element Color
|
||||
$light: #ececec !default;
|
||||
$grey: #3B454e !default;
|
||||
$neutral: #f9f9f9 !default;
|
||||
$black: #000 !default;
|
||||
$white: #fff !default;
|
||||
$blue: #0036c7 !default;
|
||||
$blue-light: #d8deff !default;
|
||||
$base-line-height: 1.688 !default;
|
||||
$spacing-unit: 30px !default;
|
||||
|
||||
// Light Element Color
|
||||
$black: #141414 !default;
|
||||
$white: #fff !default;
|
||||
$base: #f9f9f9 !default;
|
||||
$gray: #283c46 !default;
|
||||
$blue: #0036c7 !default;
|
||||
$light: #ececec !default;
|
||||
$smoke: #d2c7c7 !default;
|
||||
|
||||
// Width of the content area
|
||||
$content-width: 800px !default;
|
||||
$content-width: 750px !default;
|
||||
|
||||
// State of device
|
||||
$on-palm: 600px !default;
|
||||
$on-mobile: 500px !default;
|
||||
$on-laptop: 780px !default;
|
||||
|
||||
// Use media queries like this:
|
||||
|
||||
// @include media-query($on-palm) {
|
||||
// .wrapper {
|
||||
// padding-right: $spacing-unit / 2;
|
||||
// padding-left: $spacing-unit / 2;
|
||||
// }
|
||||
// }
|
||||
$on-mobile: 768px;
|
||||
$on-tablet: 769px;
|
||||
$on-desktop: 1024px;
|
||||
$on-widescreen: 1152px;
|
||||
|
||||
@mixin media-query($device) {
|
||||
@media screen and (max-width: $device) {
|
||||
@@ -46,10 +41,8 @@ $on-laptop: 780px !default;
|
||||
}
|
||||
|
||||
// Import Sass partials
|
||||
@import
|
||||
"bangsring/fonts",
|
||||
"bangsring/base",
|
||||
"bangsring/post",
|
||||
"bangsring/layout",
|
||||
"bangsring/syntax"
|
||||
;
|
||||
@import "bangsring/fonts",
|
||||
"bangsring/base",
|
||||
"bangsring/layout",
|
||||
"bangsring/page",
|
||||
"bangsring/syntax";
|
||||
Reference in New Issue
Block a user