Initial website

This commit is contained in:
Deon George
2018-09-03 17:41:16 +10:00
commit fd1bd20c85
238 changed files with 20819 additions and 0 deletions

View File

@@ -0,0 +1,91 @@
.archives-wrap
margin: block-margin 0
.archives
clearfix()
.archive-year-wrap
padding: 18px 30px 17px
font-size: font-size + 2
color: color-default + #111
border-bottom: 1px solid color-border-light
.archive-year
@extend $block-caption
i
margin-right: 8px
.archives
column-gap: 10px
@media mq-tablet
column-count: 2
@media mq-normal
column-count: 3
.archive-article
avoid-column-break()
.archive-article-inner
padding: 10px
margin-bottom: 15px
.archive-article-title
text-decoration: none
font-weight: bold
color: color-default
transition: color 0.2s
line-height: line-height
&:hover
color: color-theme
.archive-article-footer
margin-top: 1em
.archive-article-date
color: color-grey
text-decoration: none
font-size: 0.85em
line-height: 1em
margin-bottom: 0.5em
display: block
#page-nav
clearfix()
float: left
width: 100%
display: block
margin: 30px 0px 45px 0px
text-align: center
color: color-grey
.pages
display: block
font-size: 17px
font-weight: 300
margin-bottom: 1em!important
border: none!important
&:before
content: "\f15c"
font-family: FontAwesome
margin-right: 6px
.page-number,
.extend
color: color-theme
position: relative
overflow: hidden
font-size: 16px
padding: 7px 8px
display: inline
margin: 0 2px
text-decoration: none
border-bottom: 3px solid color-border
border-top: 1px solid #f1f1f1
font-weight: 600
transition: 0.2s ease-in
&:hover,
&:active,
&.current
color: #444
border-bottom: 3px solid color-theme
border-top: 1px solid #f1f1f1
.space
color: color-border

View File

@@ -0,0 +1,440 @@
.article-single
padding: 30px 30px 20px
.article-inner
overflow: hidden
.article-row
clearfix()
width: 100%
float: left
position: relative
padding: 30px 0px 0px 30px
border-bottom: 1px solid #eee
box-sizing: border-box
.article-summary
width: 50%
float: left
margin-bottom: 30px
a
text-decoration: none
color: color-theme
.article-summary-inner
margin-right: 30px
.thumbnail
height: 0
width: 100%
display: block
overflow: hidden
position: relative
margin-bottom: 1em
padding-bottom: 47.11%
.comment-counter
right: 0
top: 15px
color: white
font-size: 12px
padding: 2px 7px
line-height: 19px
position: absolute
display: inline-block
background-color: #82b965
&:before
top: 3px
left: -16px
content: ''
position: absolute
display: inline-block
border: 9px solid transparent
border-right-color: #82b965
.thumbnail-image
display: block
position: absolute
width: 100%
height: 100%
opacity: 1
background-size: cover
background-position: center
transition: opacity 0.3s ease-in
.thumbnail-none
width: 100%
height: 100%
background-size: 100% 100%
background-image: url(thumbnail-default)
.article-title
margin-bottom: 10px
font-size: 22px
font-weight: 400
line-height: 1.5em
word-wrap: break-word
a
transition: color 0.3s ease-in
color: #444
.article-excerpt
position: relative
color: rgb(170, 170, 170)
font-size: 16px
line-height: line-height
overflow: hidden
height: 4 * line-height
&:hover
.thumbnail
.thumbnail-image
opacity: 0.7
.article-title
a
color: color-theme
.article-category
float: left
line-height: 1em
color: #ccc
text-shadow: 0 1px #fff
margin-left: 8px
&:before
content: "\2022"
.article-title
text-decoration: none
font-size: 38px
letter-spacing: -1px
color: color-default
line-height: line-height-title
transition: color 0.2s
margin-bottom: 10px
a&:hover
color: color-theme
.article-meta
@extend $block-caption
clearfix()
line-height: line-height
& > div
float: left
margin-right: 10px
.fa
margin-right: 3px
a
color: color-default
&:hover
color: color-link
.category
text-transform: uppercase
a, i
margin-left: 0
margin-right: 6px
.article-summary
.article-meta
height: line-height
overflow: hidden
a
color: color-theme
& > div
margin-right: 0
.article-tag
.tag-link
&:before
content: "#"
.article-entry
@extend $base-style
clearfix()
color: color-default
font-size: font-size-article
font-weight: 300
line-height: line-height
p, table
margin: line-height 0
h1, h2, h3, h4, h5, h6
font-weight: 600
h1, h2, h3, h4, h5, h6
line-height: line-height-title
margin: line-height-title 0
a
color: color-theme
text-decoration: none
&:hover
text-decoration: underline
ul, ol, dl
margin-top: line-height
margin-bottom: line-height
list-style-position: outside
padding-left: 1.4em
p
margin: 0
img, video
max-width: 100%
height: auto
display: block
margin: auto
iframe
border: none
table
width: 100%
border-collapse: collapse
border-spacing: 0
th
font-weight: 600
border-bottom: 3px solid color-border
padding-bottom: 0.5em
td
border-bottom: 1px solid color-border
padding: 10px 0
blockquote
color: #777
quote: none
margin: 0 0 20px 0
position: relative
font-style: italic
padding-left: 50px
&:before
top: 0
left: 0
color: #ccc
font-size: 32px
content: "\f10d"
position: absolute
text-align: center
font-style: normal
font-family: 'FontAwesome'
footer
font-size: font-size
margin: line-height 0
font-family: font-sans
cite
&:before
content: ""
padding: 0 0.5em
.pullquote
text-align: left
width: 45%
margin: 0
&.left
margin-left: 0.5em
margin-right: 1em
&.right
margin-right: 0.5em
margin-left: 1em
.caption
color: color-grey
display: block
font-size: 0.9em
margin-top: 0.5em
position: relative
text-align: center
// http://webdesignerwall.com/tutorials/css-elastic-videos
.video-container
position: relative
padding-top: (9 / 16 * 100)% // 16:9 ratio
height: 0
overflow: hidden
iframe, object, embed
position: absolute
top: 0
left: 0
width: 100%
height: 100%
margin-top: 0
.article-more-link a
display: inline-block
line-height: 1em
padding: 6px 15px
border-radius: 15px
background: color-background
color: color-grey
text-shadow: 0 1px #fff
text-decoration: none
&:hover
background: color-theme
color: #fff
text-decoration: none
text-shadow: 0 1px darken(color-theme, 20%)
.article-footer
clearfix()
font-size: font-size
line-height: line-height
border-top: 1px solid color-border
padding-top: line-height
a
color: color-grey
text-decoration: none
&:hover
color: color-default
.article-comment-link,
.article-share-link
i
padding-right: 8px
.article-comment-link
float: right
.article-share-link
cursor: pointer
float: right
margin-left: 20px
.article-share-box
position: absolute
display: none
background: #fff
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
border-radius: 3px
margin-left: -145px
overflow: hidden
z-index: 1
&.on
display: block
.article-share-input
width: 100%
background: none
box-sizing: border-box
font: 14px font-sans
padding: 0 15px
color: color-default
outline: none
border: 1px solid color-border
border-radius: 3px 3px 0 0
height: 36px
line-height: 36px
.article-share-links
clearfix()
background: color-background
$article-share-link
width: 50px
height: 36px
display: block
float: left
position: relative
color: #999
text-align: center
line-height: 36px
text-decoration: none
&:before
font-size: 20px
font-family: FontAwesome
absolute-center(@font-size)
&:hover
color: #fff
.article-share-twitter
@extend $article-share-link
&:before
content: "\f099"
&:hover
background: color-twitter
text-shadow: 0 1px darken(color-twitter, 20%)
.article-share-facebook
@extend $article-share-link
&:before
content: "\f09a"
&:hover
background: color-facebook
text-shadow: 0 1px darken(color-facebook, 20%)
.article-share-pinterest
@extend $article-share-link
&:before
content: "\f0d2"
&:hover
background: color-pinterest
text-shadow: 0 1px darken(color-pinterest, 20%)
.article-share-google
@extend $article-share-link
&:before
content: "\f0d5"
&:hover
background: color-google
text-shadow: 0 1px darken(color-google, 20%)
.article-gallery
background: #000
position: relative
.article-gallery-photos
position: relative
overflow: hidden
.article-gallery-img
display: none
max-width: 100%
&:first-child
display: block
&.loaded
position: absolute
display: block
img
display: block
max-width: 100%
margin: 0 auto
.article-gallery
overflow: hidden
background: black
position: relative
text-align: center
margin: line-height 0
.gallery-item
display: none
max-width: 100%
&:before,
&:after
top: 50%
width: 40px
height: 36px
font-size: 36px
line-height: 36px
margin-top: -18px
position: absolute
font-family: FontAwesome
color: rgba(255, 255, 255, .5)
&:hover
&:before,
&:after
color: rgba(255, 255, 255, .8)
&:before
left: 0
content: "\f104"
&:after
right: 0
content: "\f105"
&:first-child
display: block
img
display: block
max-width: 100%
margin: 0 auto
/* right-to-left languages */
.article.rtl
.article-title,
.article-excerpt,
.article-entry p
direction: rtl
.article-meta
& > div
float: right
margin-left: 10px
margin-right: 0
.category
a, i
margin-right: 0
margin-left: 6px
&:first-child
margin-left: 0
/* lightgallery */
.lg-outer
.lg-thumb-item
border-radius: 0 !important

View File

@@ -0,0 +1,6 @@
i.icon
display: inline-block
font-style: normal
text-align: center
&:before
transition: 0.2s ease-in

View File

@@ -0,0 +1,4 @@
#comments
padding: 30px 30px 20px
a
color: color-theme

View File

@@ -0,0 +1,34 @@
#footer
background: color-footer-background
margin-top: 60px
color: color-grey
line-height: line-height
a
color: #ccc
text-decoration: none
&:hover
color: #fff
.credit
padding: 30px 30px 0px 30px
.footer-plugins
padding: 0px 30px 30px 30px
#back-to-top
background: color-background
color: #777
overflow: hidden
text-align: center
width: 60px
height: 30px
display: block
margin: 0 auto -30px
border-radius: 0 0 3px 3px
box-shadow: 0 1px 1px rgba(0,0,0,0.1)
&:hover
color: #444
i
font-size: 38px
line-height: 22px
.logo
width: logo-width * 0.8
height: logo-height * 0.8
background-size: logo-width * 0.8 logo-height * 0.8

View File

@@ -0,0 +1,27 @@
#header
background: color-header-background
padding-bottom: nav-height
position: relative
#header-outer
height: 100%
position: relative
#header-inner
position: relative
#header-title
clearfix()
text-align: center
padding: 10px 10px
.logo-wrap, .subtitle-wrap
float: left
.subtitle-wrap
padding: 10px 0px 0px
margin-left: 20px
.subtitle
font-size: 16px
font-style: italic
line-height: logo-height + 10
color: color-nav-foreground
text-shadow: 0 1px rgba(0, 0, 0, 0.2)

View File

@@ -0,0 +1,130 @@
// Insight Search Styles
ins-container-width = 540px
ins-text-grey = #9a9a9a
ins-border-grey = #e2e2e2
ins-background-grey = #f7f7f7
ins-background-theme = color-theme
$ins-full-screen
top: 0
left: 0
margin: 0
width: 100%
height: 100%
.ins-search
display: none
&.show
display: block
.ins-selectable
cursor: pointer
.ins-search-mask,
.ins-search-container
position: fixed
.ins-search-mask
top: 0
left: 0
width: 100%
height: 100%
z-index: 100
background: rgba(0,0,0,0.5)
.ins-input-wrapper
position: relative
.ins-search-input
width: 100%
border: none
outline: none
font-size: 16px
box-shadow: none
font-weight: 200
border-radius: 0
background: white
line-height: 20px
box-sizing: border-box
padding: 12px 28px 12px 20px
border-bottom: 1px solid ins-border-grey
font-family: "Microsoft Yahei Light", "Microsoft Yahei", Helvetica, Arial, sans-serif
.ins-close
top: 50%
right: 6px
width: 20px
height: 20px
font-size: 16px
margin-top: -11px
position: absolute
text-align: center
display: inline-block
&:hover
color: ins-background-theme
.ins-search-container
left: 50%
top: 100px
z-index: 101
bottom: 100px
box-sizing: border-box
width: ins-container-width
margin-left: -(ins-container-width/2)
@media screen and (max-width: 559px), screen and (max-height: 479px)
top: 0
left: 0
margin: 0
width: 100%
height: 100%
background: ins-background-grey
.ins-section-wrapper
left: 0
right: 0
top: 45px
bottom: 0
overflow-y: auto
position: absolute
.ins-section-container
position: relative
background: ins-background-grey
.ins-section
font-size: 14px
line-height: 16px
.ins-section-header,
.ins-search-item
padding: 8px 15px
.ins-section-header
color: ins-text-grey
border-bottom: 1px solid ins-border-grey
.ins-slug
margin-left: 5px
color: ins-text-grey
&:before
content: '('
&:after
content: ')'
.ins-search-item
header,
.ins-search-preview
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
header
.fa
margin-right: 8px
.ins-search-preview
height: 15px
font-size: 12px
color: ins-text-grey
margin: 5px 0 0 20px
&:hover,
&.active
color: white
background: ins-background-theme
.ins-slug,
.ins-search-preview
color: white

View File

@@ -0,0 +1,120 @@
$nav-link
float: left
color: color-nav-foreground
text-decoration: none
text-shadow: 0 1px rgba(0, 0, 0, 0.2)
display: block
padding: 20px 15px
transition: 0.2s ease-in
&:hover
color: #fff
background: color-nav-hover-background
.nav-container
clearfix()
padding: 0 15px
background: color-nav-background
z-index: 1
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05),
0 -1px 0 rgba(0,0,0,0.2),
inset 1px 0 0 rgba(0,0,0,0.2),
inset -1px 0 0 rgba(0,0,0,0.2)
.nav-icon
@extend $nav-link
line-height: 20px
padding: 15px 14px
text-align: center
font-size: font-size
position: relative
cursor: pointer
#main-nav-toggle
display: none
width: 100%
text-align: right
box-sizing: border-box
border-bottom: 1px solid rgba(255,255,255,0.06)
&:before
content: "\f0c9"
.nav-container-inner
clearfix()
#main-nav
float: left
.main-nav-list
float: left
.main-nav-list-item
position: relative
float: left
&.top-level-menu
& > a:after
content: "\f0d7" !important
float: none
margin-left: 6px
font-size: 14px
line-height: 1.2em
opacity: 0.5
font-family: FontAwesome
display: inline-block
&:hover
& > a
color: #fff
background: rgba(0,0,0,0.1)
.main-nav-list-link
@extend $nav-link
line-height: 20px
padding: 15px 14px
font-size: 16px
&.current
color: #fff
.main-nav-list-child
top: 100%
display: none
padding: 10px 0
overflow: hidden
position: absolute
width: main-nav-child-width
background: color-nav-background url(images/opacity-10.png) repeat
li
box-shadow: 0 1px 0 rgba(255,255,255,0.06)
&:last-child
box-shadow: none
li, li a
width: 100%
display: block
box-sizing: border-box
#sub-nav
float: right
.search-form
padding: 14px 15px 16px
height: 50px
overflow: hidden
box-sizing: border-box
&:before
content: "\f002"
margin-right: 8px
color: color-nav-foreground
font: normal normal normal 16px/1 FontAwesome
.search-form-input,
.search-form-input.ins-search-input,
.search-form-input.st-ui-search-input,
.search-form-input.st-default-search-input
-webkit-appearance: textarea
padding: 0
width: 100px
height: auto !important
border: none !important
outline: none !important
background: none !important
line-height: line-height
transition: 0.2s ease-in
font: 16px font-sans
color: color-nav-foreground
&:focus
width: 200px
&::-webkit-search-results-decoration
&::-webkit-search-cancel-button
-webkit-appearance: none
.search-form-submit
display: none

View File

@@ -0,0 +1,259 @@
#sidebar
if sidebar is right
float: right
margin-right: - sidebar-width
else
float: left
margin-left: - sidebar-width
width: sidebar-width
.sidebar-toggle
display: none
.sidebar-top
clearfix()
background: color-theme
padding: 15px 30px
.sidebar-top-inner
clearfix()
p
float: left
color: rgba(255,255,255,0.8)
font-size: 16px
font-weight: 600
text-transform: uppercase
line-height: 24px
padding: 3px 0
.social-links
float: right
position: relative
padding-top: 2px
li
float: left
margin-left: 8px
a
&:hover
i
&:before
color: #fff
.social-tooltip
position: relative
&:hover
&:after
top: -41px
background: #fff
font-size: 14px
color: #666
content: attr(title)
display: block
right: 0
padding: 5px 15px
position: absolute
white-space: nowrap
border-radius: 3px
box-shadow: 0 0 2px rgba(0,0,0,0.2)
text-transform: uppercase
z-index: 1
&:before
top: -10px
right: 8px
border: solid
border-color: #fff transparent
border-width: 5px 5px 0 5px
content: ""
display: block
position: absolute
z-index: 2
i
color: rgba(255,255,255,0.7)
font-size: font-icon-profile-size
width: font-icon-profile-size
#article-nav
clearfix()
position: relative
.article-nav-link-wrap
position: relative
margin-top: 0
display: block
color: color-grey
padding: 16px 40px 24px
border-bottom: 1px solid color-border
transition: 0.2s ease-in
text-align: center
text-decoration: none
.icon
position: absolute
color: #ccc
font-size: 18px
top: 50%
width: 1em
margin-top: -10px
#icon-chevron-left
left: 10px
#icon-chevron-right
right: 10px
&:hover
background: rgba(0,0,0,0.02)
.icon
color: color-theme
.article-nav-caption
display: block
font-size: 12px
color: color-grey
letter-spacing: 0.5px
line-height: 24px
font-weight: normal
text-transform: uppercase
.article-nav-title
font-size: 15px
color: #666
.widget-wrap
padding: 30px 30px 20px
.widget-title
font-size: 15px
font-weight: 400
text-transform: uppercase
margin-bottom: 6px
.widget
@extend $base-style
line-height: line-height
word-wrap: break-word
font-size: 0.9em
color: color-sidebar-text
border-radius: 3px
a
text-decoration: none
color: color-sidebar-text
&:hover
color: color-sidebar-text-dark
ul, ol, dl
ul, ol, dl
margin-left: 15px
list-style: disc
ul, ol
list-style: none
margin: 0
ul, ol
margin: 0 20px
ul
list-style: disc
ol
list-style: decimal
.widget-list
ul, ol
list-style: none
li
margin: 10px 0
padding-bottom: 10px
font-size: font-size + 1
border-bottom: 1px solid #E4E4E4
&:last-child
margin-bottom: 0px
a
color: color-sidebar-text
&:before
color: #ccc
content: "\f0da"
font-size: 12px
margin-right: 6px
font-family: FontAwesome
transition: 0.2s ease
&:hover:before
color: color-sidebar-text-dark
ul, ol
list-style: none
li
border: none
padding-bottom: 0
.widget-float
a
font-size: font-size + 1
#recent-post
li
clearfix()
padding: 10px 0 10px 94px
border-bottom: 1px solid color-border
&.no-thumbnail
li
padding: 10px 0px
li
.item-thumbnail
opacity: 1
margin-left: -94px
transition: all 0.2s ease
float: left
.thumbnail
width: 80px
height: 80px
display: block
position: relative
overflow: hidden
span
width: 100%
height: 100%
display: block
.thumbnail-image
position: absolute
background-size: cover
background-position: center
.thumbnail-none
background-image: url(thumbnail-default-small)
background-size: 100% 100%
.item-inner
a
.item-category
font-size: 13px
text-transform: uppercase
a
color: color-theme
&:hover
color: color-sidebar-text-dark
a, .icon
margin-right: 5px
.item-title
font-size: 15px
a
color: color-sidebar-text-dark
transition: all 0.2s ease
.item-date
color: #aaa
font-size: 13px
text-transform: uppercase
&:hover
.item-thumbnail
opacity: 0.8
.item-title a
color: color-theme
.category-list-count
.tag-list-count
.archive-list-count
padding-left: 5px
color: color-grey
font-size: 0.85em
&:before
content: "("
&:after
content: ")"
.tagcloud
a
margin-right: 5px
.toc-article
margin: 0
padding: 0
.toc
padding: 0
margin: 10px 0 0
.toc-item
list-style: none