Siphalor/siphalor.de
1
0
Fork 0
Code Releases Activity

🎉 Initial commit

Browse Source
This commit is contained in:
piharpi
2019-03-24 17:47:48 +07:00
parent 09ac49afec
commit 2c26100c06
50 changed files with 2213 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
_sass/bangsring/_base.scss Normal file
View File

@@ -0,0 +1,244 @@
/**
* Reset some basic elements
*/
html {
overflow-x: hidden;
width: 100%;
}
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
letter-spacing: .1px;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: $base-font-family;
}
/**
* Basic styling
*/
body {
min-height: 100vh;
overflow-x: hidden;
position: relative;
background: $neutral;
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-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;
font-kerning: normal;
}
/**
* Set `margin-bottom` to maintain vertical rhythm
*/
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;
}
/**
* Images
*/
img {
max-width: 100%;
vertical-align: middle;
-webkit-user-drag: none;
}
/**
* Figures
*/
figure {
position: relative;
}
/**
* Images
*/
figure > img {
display: block;
position: relative;
}
/**
* Caption Image
*/
figcaption {
font-size: 13px;
text-align: center;
}
/**
* Lists
*/
ul, ol {
margin-left: $spacing-unit;
}
li {
padding-bottom: 1px;
padding-top: 1px;
> ul,
> ol {
margin-bottom: 2px;
margin-top: 0;
}
}
/**
* Headings
*/
h1, h2, h3, h4, h5, h6 {
font-weight: $base-font-weight;
}
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
text-decoration: none;
border: none;
&:hover {
text-decoration: none;
border: none;
}
}
/**
* Links
*/
a {
color: $black;
border-bottom: 1px solid #1635de;
text-decoration: none;
&:hover {
color: $black;
border-bottom: 2px solid #1635de;
}
}
/**
* Del
*/
del {
color: inherit;
}
/**
* Em
*/
em {
color:inherit;
}
/**
* Blockquotes
*/
blockquote {
color: $grey;
border-left: 4px solid $black;
padding: 5px 5px 5px 15px;
border-radius: 2px;
@include relative-font-size(1);
> :last-child {
margin-bottom: 0;
margin-top: 0;
}
}
/**
* Wrapper
*/
.wrapper {
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
position: relative;
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit;
padding-left: $spacing-unit;
@extend %clearfix;
@include media-query($on-laptop) {
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;
}
}
/**
* Table
*/
table {
margin: 0 auto;
border-collapse: collapse;
background: $white;
font-family: 'Roboto Mono';
font-size: $small-font-size;
th {
font-weight: 400;
background: #f5f5f5;
}
th, td, tr {
border: 1px solid $light;
padding: 4px 8px;
}
}
/**
* Clearfix
*/
%clearfix:after {
content: "";
display: table;
clear: both;
}
/**
* When mouse block a text set this color
*/
::selection {
background: #D6EDFF;
}
/**
* Github Gist clear border
*/
.gist {
table {
border: 0;
tr, td {
border: 0;
}
}
}

136
_sass/bangsring/_fonts.scss Normal file
View File

@@ -0,0 +1,136 @@
// 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;}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
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;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
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;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
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;
}
/* greek */
@font-face {
font-family: 'Roboto';
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;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
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;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
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;
}
/* latin */
@font-face {
font-family: 'Roboto';
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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhGq3-OXg.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-weight: 400;
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhPq3-OXg.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-weight: 400;
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhHq3-OXg.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhIq3-OXg.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhEq3-OXg.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-weight: 400;
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhFq3-OXg.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-weight: 400;
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhLq38.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;
}

522
_sass/bangsring/_layout.scss Normal file
View File

@@ -0,0 +1,522 @@
/**
* 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%;
width: 103px;
height: 103px;
animation: .5s ease-in forwards weeng;
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
&::after {
content: "";
position: absolute;
background: transparent;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
.intro-name {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 5px;
color: $black;
}
.intro-description {
font-size: $base-font-size;
color: $grey;
margin: 0;
}
}
/**
* Site header
*/
.site-header {
height: 25px;
margin: 16px 0 5em 0;
}
/**
* Site nav
*/
.site-nav {
.trigger {
float: left;
}
.nav-trigger {
display: none;
}
.menu-icon {
display: none;
}
.page-link {
color: $black;
box-shadow: 1px 1px 0px 0px #dddddd;
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;
letter-spacing: 0.5px;
&:hover {
opacity: 1;
}
&:not(:last-child) {
margin-right: 5px;
}
}
.page-link.active {
opacity: 1;
}
@include media-query($on-palm) {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
text-align: center;
background: #fff;
border-bottom: 2px solid #f5f5f5;
label[for="nav-trigger"] {
display: block;
float: right;
width: 36px;
height: 36px;
z-index: 2;
cursor: pointer;
}
.menu-icon {
display: block;
position: absolute;
right: 0;
width: 36px;
height: 26px;
line-height: 0;
padding-top: 10px;
text-align: center;
z-index: 10;
> svg path {
fill: $black;
}
}
input ~ .trigger {
clear: both;
display: none;
}
input:checked ~ .trigger {
position: fixed;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.94);
height: 100vh;
width: 100%;
top: 0;
}
.page-link {
display: block;
box-sizing: border-box;
background: none;
font-size: $base-font-size;
box-shadow: none;
&:not(:last-child) {
margin-right: 0;
}
}
}
}
@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;
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;
}
}
@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;
}
}
}
.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;
font-weight: normal;
}
margin: 0;
}
.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;
color: $blue;
}
}
@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
*/
@keyframes weeng {
0% {
opacity: .2;
}
100% {
opacity: 1;
}
}
/**
* Responsive Embed : vidio
*/
.embed-responsive {
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;
position: relative;
text-align: left;
}
.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;
}
}
}
/**
* Site footer
*/
.site-footer {
a {
color: $black;
border-bottom: 1px solid $blue;
&:hover, &:focus {
border-bottom: 2px solid $blue;
}
}
text-align: center;
margin: 7em 0 2em 0;
font-size: $base-font-size;
color: $grey;
}

144
_sass/bangsring/_post.scss Normal file
View File

@@ -0,0 +1,144 @@
/**
* 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;
}
}
}

36
_sass/bangsring/_syntax.scss Normal file
View File

@@ -0,0 +1,36 @@
/**
* Code formatting
*/
code {
letter-spacing: .1px;
text-rendering: optimizeLegibility;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
font-size: $small-font-size;
padding: 1px 3px;
border: 1px solid #d8d8d8;
background-color: #f5f5f5;
color: #3B454E;
border-radius: 2px;
font-family: $base-syntax-font;
}
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;
}
}

55
_sass/main.scss Normal file
View File

@@ -0,0 +1,55 @@
// 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;
$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;
// Width of the content area
$content-width: 780px !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;
// }
// }
@mixin media-query($device) {
@media screen and (max-width: $device) {
@content;
}
}
@mixin relative-font-size($ratio) {
font-size: $base-font-size * $ratio;
}
// Import Sass partials
@import
"bangsring/fonts",
"bangsring/base",
"bangsring/post",
"bangsring/layout",
"bangsring/syntax"
;