converted stylus files to sass, removed stylus dependencies
Ro
4 years ago
parent
16486d771f
commit
2788e64e3b
@ -1,6 +1,6 @@
|
||||
.babelrc
|
||||
README.md
|
||||
*.pug
|
||||
*.styl
|
||||
*.sass
|
||||
*.json
|
||||
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
@use "sass:color"
|
||||
|
||||
//Bulma
|
||||
@import '../../node_modules/bulma/sass/utilities/_all'
|
||||
@import '../../node_modules/bulma/sass/grid/columns'
|
||||
|
||||
//Colors
|
||||
@import 'main/_colors'
|
||||
|
||||
//Mixins
|
||||
@import 'main/_mixins'
|
||||
|
||||
//Normalize
|
||||
@import 'main/_normalize'
|
||||
|
||||
//Typography
|
||||
@import 'main/_typography'
|
||||
|
||||
//Main Structure
|
||||
@import 'main/_structure'
|
||||
|
||||
//Index
|
||||
@import 'main/_index'
|
||||
|
||||
//Settings
|
||||
@import 'main/_settings'
|
||||
|
||||
//Error
|
||||
@import 'main/_error'
|
||||
|
||||
//Navigation
|
||||
@import 'main/_navigation'
|
||||
|
||||
//Forms
|
||||
@import 'main/_forms'
|
||||
|
||||
//Posts
|
||||
@import 'main/_posts'
|
||||
|
||||
//Editor
|
||||
@import 'main/_calendar'
|
||||
@import 'main/_editor'
|
||||
@import 'main/_editor-highlight'
|
||||
@ -1,81 +0,0 @@
|
||||
/**
|
||||
-------------------------------
|
||||
-- Bulma
|
||||
-------------------------------
|
||||
* */
|
||||
@import '../../node_modules/bulma.styl/stylus/utilities/_all'
|
||||
@import '../../node_modules/bulma.styl/stylus/grid/columns'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Colors
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_colors'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Mixins
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_mixins'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Normalize
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_normalize'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Typography
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_typography'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Main Structures
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_structure'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Index
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_index'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Settings
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_settings'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Error
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_error'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Navigation
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_navigation'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Forms
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_forms'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Blog
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_posts'
|
||||
/**
|
||||
-------------------------------
|
||||
-- Editor
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_calendar'
|
||||
@import 'main/_editor'
|
||||
@import 'main/_editor-highlight'
|
||||
@ -0,0 +1,242 @@
|
||||
// TINY DATE
|
||||
.dp-modal
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
// background rgba(255, 255, 255, 0.75)
|
||||
@include background-opacity(color.adjust($primary, $lightness: -70%), 0.75)
|
||||
z-index: 2000
|
||||
|
||||
.dp
|
||||
position: relative
|
||||
background: $primary
|
||||
box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25)
|
||||
line-height: 1.4
|
||||
border-radius: 4px
|
||||
max-height: 400px
|
||||
z-index: 5000
|
||||
padding-top: 6px
|
||||
overflow: hidden
|
||||
-webkit-tap-highlight-color: transparent
|
||||
|
||||
.dp:before
|
||||
content: ' '
|
||||
height: 6px
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
background: $highlight
|
||||
// background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
|
||||
|
||||
.dp-permanent .dp
|
||||
padding-top: 0
|
||||
border: 1px solid #EEE
|
||||
box-shadow: none
|
||||
|
||||
.dp-permanent .dp:before
|
||||
display: none
|
||||
|
||||
.dp-cal
|
||||
min-height: 300px
|
||||
|
||||
.dp-below
|
||||
position: absolute
|
||||
font-size: 0.8em
|
||||
width: 400px
|
||||
max-width: 90vw
|
||||
|
||||
.dp-permanent
|
||||
position: relative
|
||||
font-size: 0.8em
|
||||
width: 400px
|
||||
max-width: 100vw
|
||||
|
||||
.dp-permanent .dp
|
||||
z-index: 0
|
||||
|
||||
.dp-modal .dp
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
max-width: 600px
|
||||
width: calc(100% - 4em)
|
||||
transform: translate(-50%, -50%)
|
||||
animation: slide-up 0.3s forwards
|
||||
|
||||
.dp-months
|
||||
padding: 24px
|
||||
|
||||
.dp-years
|
||||
box-sizing: border-box
|
||||
max-height: 400px
|
||||
padding: 8px 0
|
||||
/* HACK for Chrome on Android */
|
||||
overflow: auto !important
|
||||
|
||||
.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
|
||||
box-sizing: border-box
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
position: relative
|
||||
color: $white
|
||||
border-radius: 2px
|
||||
border: 0
|
||||
background: transparent
|
||||
|
||||
.dp-cal-header
|
||||
position: relative
|
||||
text-align: center
|
||||
padding-bottom: 16px
|
||||
background: color.adjust($primary, $lightness: -10%)
|
||||
|
||||
.dp-next, .dp-prev
|
||||
position: absolute
|
||||
width: 30px
|
||||
height: 30px
|
||||
overflow: hidden
|
||||
top: 14px
|
||||
color: color.adjust($primary, $lightness: -50%)
|
||||
border-radius: 2px
|
||||
border: 0
|
||||
background: transparent
|
||||
|
||||
.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
|
||||
outline: none
|
||||
color: inherit
|
||||
|
||||
.dp-prev
|
||||
left: 24px
|
||||
|
||||
.dp-next
|
||||
right: 24px
|
||||
|
||||
.dp-prev:before, .dp-next:before
|
||||
content: ''
|
||||
border: 2px solid
|
||||
width: 10px
|
||||
height: 10px
|
||||
display: inline-block
|
||||
transform: rotate(-45deg)
|
||||
transition: border-color 0.2s
|
||||
margin: 9px 0 40px 4px
|
||||
|
||||
.dp-prev:before
|
||||
border-right: 0
|
||||
border-bottom: 0
|
||||
|
||||
.dp-next:before
|
||||
border-left: 0
|
||||
border-top: 0
|
||||
margin-left: 0
|
||||
margin-right: 4px
|
||||
|
||||
.dp-cal-month, .dp-cal-year
|
||||
display: inline-block
|
||||
font-size: 1.4em
|
||||
padding: 16px 8px 8px
|
||||
outline: none
|
||||
|
||||
.dp-cal-footer
|
||||
text-align: center
|
||||
background: color.adjust($primary, $lightness: -10%)
|
||||
|
||||
.dp-day-today:after
|
||||
content: ''
|
||||
height: 0
|
||||
width: 0
|
||||
border: 7px solid $highlight
|
||||
border-bottom-color: transparent
|
||||
border-left-color: transparent
|
||||
position: absolute
|
||||
top: 0
|
||||
right: 0
|
||||
|
||||
.dp-close, .dp-clear, .dp-today
|
||||
box-sizing: border-box
|
||||
display: inline-block
|
||||
width: 33%
|
||||
padding: 8px
|
||||
text-decoration: none
|
||||
color: color.adjust($primary, $lightness: -50%)
|
||||
border: 0
|
||||
background: transparent
|
||||
|
||||
.dp-permanent .dp-close, .dp-permanent .dp-clear
|
||||
display: none
|
||||
|
||||
.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
|
||||
background: $highlight
|
||||
color: $white
|
||||
|
||||
@media screen and (min-device-width: 1200px)
|
||||
.dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
|
||||
background: $highlight
|
||||
color: $white
|
||||
|
||||
.dp-col-header, .dp-day
|
||||
width: 14.28571429%
|
||||
display: inline-block
|
||||
padding: 8px
|
||||
text-align: center
|
||||
|
||||
.dp-col-header
|
||||
color: #AAA
|
||||
text-transform: uppercase
|
||||
font-weight: 300
|
||||
font-size: 0.8em
|
||||
padding: 8px 0
|
||||
|
||||
.dp-month
|
||||
width: 33%
|
||||
display: inline-block
|
||||
padding: 8px
|
||||
|
||||
.dp-year
|
||||
display: block
|
||||
padding: 8px 40px
|
||||
width: 100%
|
||||
|
||||
.dp-edge-day
|
||||
color: #AAA
|
||||
|
||||
.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
|
||||
outline: none
|
||||
background: color.adjust($primary, $lightness: -40%)
|
||||
color: $white
|
||||
|
||||
.dp-selected:hover, .dp-selected:focus, .dp-selected
|
||||
background: $highlight
|
||||
color: color.adjust($primary, $lightness: -60%)
|
||||
|
||||
.dp-day-disabled
|
||||
background: transparent
|
||||
color: #DDD
|
||||
|
||||
.dp-day-disabled:focus, .dp-day-disabled:hover
|
||||
background: #DDD
|
||||
|
||||
.dp-focuser
|
||||
position: absolute
|
||||
z-index: 0
|
||||
top: 50%
|
||||
left: 50%
|
||||
|
||||
// Responsive
|
||||
@media (max-width: 480px), (max-height: 480px)
|
||||
.dp-modal .dp
|
||||
font-size: 0.9em
|
||||
width: auto
|
||||
width: 100%
|
||||
|
||||
.dp-day-of-week, .dp-day
|
||||
padding: 8px
|
||||
|
||||
@keyframes slide-up
|
||||
0%
|
||||
transform: translate(-50%, 100%)
|
||||
|
||||
100%
|
||||
transform: translate(-50%, -50%)
|
||||
@ -1,245 +0,0 @@
|
||||
// TINY DATE
|
||||
.dp-modal
|
||||
position fixed
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
// background rgba(255, 255, 255, 0.75)
|
||||
background-opacity($primary - 70%, 0.75)
|
||||
z-index 2000
|
||||
|
||||
.dp
|
||||
position relative
|
||||
background $primary // #FFF
|
||||
box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25)
|
||||
line-height 1.4
|
||||
border-radius 4px
|
||||
max-height 400px
|
||||
z-index 5000
|
||||
padding-top 6px
|
||||
overflow hidden
|
||||
-webkit-tap-highlight-color transparent
|
||||
|
||||
.dp:before
|
||||
content ' '
|
||||
height 6px
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
background $highlight
|
||||
// background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
|
||||
|
||||
.dp-permanent .dp
|
||||
padding-top 0
|
||||
border 1px solid #EEE
|
||||
box-shadow none
|
||||
|
||||
.dp-permanent .dp:before
|
||||
display none
|
||||
|
||||
.dp-cal
|
||||
min-height 300px
|
||||
|
||||
.dp-below
|
||||
position absolute
|
||||
font-size 0.8em
|
||||
width 400px
|
||||
max-width 90vw
|
||||
|
||||
.dp-permanent
|
||||
position relative
|
||||
font-size 0.8em
|
||||
width 400px
|
||||
max-width 100vw
|
||||
|
||||
.dp-permanent .dp
|
||||
z-index 0
|
||||
|
||||
.dp-modal .dp
|
||||
position absolute
|
||||
top 50%
|
||||
left 50%
|
||||
max-width 600px
|
||||
width calc(100% - 4em)
|
||||
transform translate(-50%, -50%)
|
||||
animation slide-up 0.3s forwards
|
||||
|
||||
.dp-months
|
||||
padding 24px
|
||||
|
||||
.dp-years
|
||||
box-sizing border-box
|
||||
max-height 400px
|
||||
padding 8px 0
|
||||
overflow auto !important /* HACK for Chrome on Android */
|
||||
|
||||
.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
|
||||
box-sizing border-box
|
||||
text-align center
|
||||
text-decoration none
|
||||
position relative
|
||||
color $white
|
||||
border-radius 2px
|
||||
border 0
|
||||
background transparent
|
||||
|
||||
.dp-cal-header
|
||||
position relative
|
||||
text-align center
|
||||
padding-bottom 16px
|
||||
background $primary - 10%
|
||||
|
||||
.dp-next, .dp-prev
|
||||
position absolute
|
||||
width 30px
|
||||
height 30px
|
||||
overflow hidden
|
||||
top 14px
|
||||
color $primary - 50%
|
||||
border-radius 2px
|
||||
border 0
|
||||
background transparent
|
||||
|
||||
.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
|
||||
outline none
|
||||
color inherit
|
||||
|
||||
.dp-prev
|
||||
left 24px
|
||||
|
||||
.dp-next
|
||||
right 24px
|
||||
|
||||
.dp-prev:before, .dp-next:before
|
||||
content ''
|
||||
border 2px solid
|
||||
width 10px
|
||||
height 10px
|
||||
display inline-block
|
||||
transform rotate(-45deg)
|
||||
transition border-color 0.2s
|
||||
margin 9px 0 40px 4px
|
||||
|
||||
.dp-prev:before
|
||||
border-right 0
|
||||
border-bottom 0
|
||||
|
||||
.dp-next:before
|
||||
border-left 0
|
||||
border-top 0
|
||||
margin-left 0
|
||||
margin-right 4px
|
||||
|
||||
.dp-cal-month, .dp-cal-year
|
||||
display inline-block
|
||||
font-size 1.4em
|
||||
padding 16px 8px 8px
|
||||
outline none
|
||||
|
||||
.dp-cal-footer
|
||||
text-align center
|
||||
background $primary - 10%
|
||||
|
||||
.dp-day-today:after
|
||||
content ''
|
||||
height 0
|
||||
width 0
|
||||
border 7px solid $highlight
|
||||
border-bottom-color transparent
|
||||
border-left-color transparent
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
|
||||
.dp-close, .dp-clear, .dp-today
|
||||
box-sizing border-box
|
||||
display inline-block
|
||||
width 33%
|
||||
padding 8px
|
||||
text-decoration none
|
||||
color $primary - 50%
|
||||
border 0
|
||||
background transparent
|
||||
|
||||
.dp-permanent .dp-close, .dp-permanent .dp-clear
|
||||
display none
|
||||
|
||||
.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
|
||||
background $highlight
|
||||
color $white
|
||||
|
||||
@media screen and (min-device-width: 1200px)
|
||||
.dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
|
||||
background $highlight
|
||||
color $white
|
||||
|
||||
.dp-col-header, .dp-day
|
||||
width 14.28571429%
|
||||
display inline-block
|
||||
padding 8px
|
||||
text-align center
|
||||
|
||||
.dp-col-header
|
||||
color #AAA
|
||||
text-transform uppercase
|
||||
font-weight 300
|
||||
font-size 0.8em
|
||||
padding 8px 0
|
||||
|
||||
.dp-month
|
||||
width 33%
|
||||
display inline-block
|
||||
padding 8px
|
||||
|
||||
.dp-year
|
||||
display block
|
||||
padding 8px 40px
|
||||
width 100%
|
||||
|
||||
.dp-edge-day
|
||||
color #AAA
|
||||
|
||||
.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
|
||||
outline none
|
||||
background $primary - 40%
|
||||
color $white
|
||||
|
||||
.dp-selected:hover, .dp-selected:focus, .dp-selected
|
||||
background $highlight
|
||||
color $primary - 60%
|
||||
|
||||
.dp-day-disabled
|
||||
background transparent
|
||||
color #DDD
|
||||
|
||||
.dp-day-disabled:focus, .dp-day-disabled:hover
|
||||
background #DDD
|
||||
|
||||
.dp-focuser
|
||||
position absolute
|
||||
z-index 0
|
||||
top 50%
|
||||
left 50%
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Responsive
|
||||
-------------------------------
|
||||
* */
|
||||
@media (max-width: 480px), (max-height: 480px)
|
||||
.dp-modal .dp
|
||||
font-size 0.9em
|
||||
width auto
|
||||
width 100%
|
||||
|
||||
.dp-day-of-week, .dp-day
|
||||
padding 8px
|
||||
|
||||
@keyframes slide-up
|
||||
0%
|
||||
transform translate(-50%, 100%)
|
||||
|
||||
100%
|
||||
transform translate(-50%, -50%)
|
||||
@ -0,0 +1,17 @@
|
||||
$primary: #374857
|
||||
//$primary = #200317; deep sexy purple
|
||||
$secondary: #b2cce5
|
||||
$tertiary: #f5ab35
|
||||
$highlight: #fc6399
|
||||
$white: #f2f1ef
|
||||
$grey: #abb7b7
|
||||
$black: #32302f
|
||||
|
||||
//editor colors
|
||||
$eventCool: #32cd32
|
||||
$eventLame: #F64747
|
||||
|
||||
$editorPrimary: #fde3a7
|
||||
$editorSecondary: #ffa07a
|
||||
$editorTertiary: #89c4f4
|
||||
$editorString: #f6dd74
|
||||
@ -1,19 +0,0 @@
|
||||
$primary = #374857;
|
||||
//$primary = #200317; deep sexy purple
|
||||
$secondary = #b2cce5;
|
||||
$tertiary = #f5ab35;
|
||||
$highlight = #fc6399;
|
||||
$white = #f2f1ef;
|
||||
$grey = #abb7b7;
|
||||
$black = #32302f;
|
||||
|
||||
//editor colors
|
||||
$eventCool = #32cd32
|
||||
$eventLame = #F64747
|
||||
|
||||
$editorPrimary = #fde3a7;
|
||||
$editorSecondary = #ffa07a;
|
||||
$editorTertiary = #89c4f4;
|
||||
$editorString = #f6dd74;
|
||||
|
||||
//Bulma overrides
|
||||
@ -1,46 +1,46 @@
|
||||
|
||||
.hljs
|
||||
display block
|
||||
overflow-x auto
|
||||
padding 0.5em
|
||||
background $primary - 5%
|
||||
display: block
|
||||
overflow-x: auto
|
||||
padding: 0.5em
|
||||
background: color.adjust($primary, $lightness: -6%)
|
||||
|
||||
.hljs, .hljs-subst
|
||||
color #ebdbb2
|
||||
color: #ebdbb2
|
||||
|
||||
.hljs-deletion, .hljs-formula, .hljs-keyword .hljs-selector-tag
|
||||
color $editorPrimary
|
||||
font-style italic
|
||||
color: $editorPrimary
|
||||
font-style: italic
|
||||
|
||||
.hljs-link
|
||||
color $highlight
|
||||
color: $highlight
|
||||
|
||||
.hljs-built_in, .hljs-emphasis, .hljs-name, .hljs-quote, .hljs-strong, .hljs-title, .hljs-variable
|
||||
color $editorSecondary
|
||||
color: $editorSecondary
|
||||
|
||||
.hljs-attr, .hljs-params, .hljs-template-tag, .hljs-type
|
||||
color $editorTertiary
|
||||
color: $editorTertiary
|
||||
|
||||
.hljs-builtin-name, .hljs-doctag, .hljs-literal, .hljs-number
|
||||
color #8f3f71
|
||||
color: #8f3f71
|
||||
|
||||
.hljs-code, .hljs-meta, .hljs-regexp, .hljs-selector-id, .hljs-template-variable
|
||||
color $tertiary
|
||||
color: $tertiary
|
||||
|
||||
.hljs-addition, .hljs-meta-string, .hljs-section, .hljs-selector-attr, .hljs-selector-class, .hljs-string, .hljs-symbol
|
||||
color $editorString
|
||||
color: $editorString
|
||||
|
||||
.hljs-attribute, .hljs-bullet, .hljs-class, .hljs-function, .hljs-function .hljs-keyword, .hljs-meta-keyword, .hljs-selector-pseudo, .hljs-tag
|
||||
color $primary + 50%
|
||||
color: color.adjust($primary, $lightness: 50%)
|
||||
|
||||
.hljs-comment
|
||||
color #928374
|
||||
color: #928374
|
||||
|
||||
.hljs-link_label, .hljs-literal, .hljs-number
|
||||
color #d3869b
|
||||
color: #d3869b
|
||||
|
||||
.hljs-comment, .hljs-emphasis
|
||||
font-style italic
|
||||
font-style: italic
|
||||
|
||||
.hljs-section, .hljs-strong, .hljs-tag
|
||||
font-weight normal
|
||||
font-weight: normal
|
||||
@ -0,0 +1,95 @@
|
||||
#edit-control
|
||||
// margin 10px
|
||||
top: 1px
|
||||
border-radius: 3px
|
||||
// background-opacity($primary - 10%, 0.50)
|
||||
width: 100%
|
||||
max-width: 880px
|
||||
margin-top: 30px
|
||||
z-index: 2000
|
||||
|
||||
button:nth-child(1)
|
||||
border-radius: 3px 0 0 3px
|
||||
button:nth-child(10)
|
||||
border-radius: 0 3px 3px 0
|
||||
|
||||
button
|
||||
background: $secondary
|
||||
width: 10%
|
||||
height: 39px
|
||||
@include object-transitions(0.3s)
|
||||
margin: 0
|
||||
border-radius: 0
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
text-align: center
|
||||
button:hover
|
||||
background: color.adjust($secondary, $lightness: -20%)
|
||||
|
||||
#option-update
|
||||
padding: 5px 5px 1px 5px
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
text-align: center
|
||||
|
||||
.icon-hide
|
||||
display: none
|
||||
visibility: hidden
|
||||
|
||||
.submit-start
|
||||
background: $white
|
||||
|
||||
svg
|
||||
fill: $eventCool
|
||||
|
||||
.submit-cool
|
||||
background: $eventCool
|
||||
|
||||
svg
|
||||
fill: $white
|
||||
|
||||
.submit-delete
|
||||
background: $eventLame !important
|
||||
|
||||
svg
|
||||
fill: $white !important
|
||||
|
||||
|
||||
|
||||
#option-date
|
||||
height: 30px
|
||||
padding-top: 6px
|
||||
|
||||
svg
|
||||
margin: -13px 5px 0 0
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
fill: $white
|
||||
|
||||
.content-editor-btn-icon
|
||||
padding: 5px 5px 1px 5px
|
||||
// border-radius 20px
|
||||
color: $primary
|
||||
|
||||
svg
|
||||
fill: $primary
|
||||
|
||||
.content-editor-btn-text
|
||||
padding: 5px
|
||||
// border-radius 20px
|
||||
color: $primary
|
||||
|
||||
#option-bold
|
||||
font-weight: bold
|
||||
text-decoration: none
|
||||
|
||||
#option-italic
|
||||
font-weight: bold
|
||||
text-decoration: none
|
||||
font-style: italic
|
||||
|
||||
#option-strikethrough
|
||||
font-weight: bold
|
||||
text-decoration: line-through
|
||||
font-style: italic
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
#edit-control
|
||||
// margin 10px
|
||||
top 1px
|
||||
border-radius 3px
|
||||
// background-opacity($primary - 10%, 0.50)
|
||||
width 100%
|
||||
max-width 880px
|
||||
margin-top 30px
|
||||
z-index 2000
|
||||
|
||||
button:nth-child(1)
|
||||
border-radius 3px 0 0 3px
|
||||
button:nth-child(10)
|
||||
border-radius 0 3px 3px 0
|
||||
|
||||
button
|
||||
background $secondary
|
||||
width 10%
|
||||
height 39px
|
||||
object-transitions(0.3s)
|
||||
margin 0
|
||||
border-radius 0
|
||||
display inline-block
|
||||
vertical-align top
|
||||
text-align center
|
||||
button:hover
|
||||
background: $secondary - 20%
|
||||
|
||||
#option-update
|
||||
padding 5px 5px 1px 5px
|
||||
display inline-block
|
||||
vertical-align top
|
||||
text-align center
|
||||
|
||||
.icon-hide
|
||||
display none
|
||||
visibility hidden
|
||||
|
||||
.submit-start
|
||||
background $white
|
||||
|
||||
svg
|
||||
fill $eventCool
|
||||
|
||||
.submit-cool
|
||||
background $eventCool
|
||||
|
||||
svg
|
||||
fill $white
|
||||
|
||||
.submit-delete
|
||||
background $eventLame !important
|
||||
|
||||
svg
|
||||
fill $white !important
|
||||
|
||||
|
||||
|
||||
#option-date
|
||||
height 30px
|
||||
padding-top 6px
|
||||
|
||||
svg
|
||||
margin -13px 5px 0 0
|
||||
display inline-block
|
||||
vertical-align top
|
||||
fill $white
|
||||
|
||||
.content-editor-btn-icon
|
||||
padding 5px 5px 1px 5px
|
||||
// border-radius 20px
|
||||
color $primary
|
||||
|
||||
svg
|
||||
fill $primary
|
||||
|
||||
.content-editor-btn-text
|
||||
padding 5px
|
||||
// border-radius 20px
|
||||
color $primary
|
||||
|
||||
#option-bold
|
||||
font-weight bold
|
||||
text-decoration none
|
||||
|
||||
#option-italic
|
||||
font-weight bold
|
||||
text-decoration none
|
||||
font-style italic
|
||||
|
||||
#option-strikethrough
|
||||
font-weight bold
|
||||
text-decoration line-through
|
||||
font-style italic
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
#error-index
|
||||
width: 100%
|
||||
max-width: 900px
|
||||
margin: 0 auto
|
||||
padding: 10px
|
||||
height: 100%
|
||||
z-index: 10
|
||||
position: relative
|
||||
label#title
|
||||
font-size: 100px
|
||||
color: $highlight
|
||||
font-weight: 500
|
||||
|
||||
label#message
|
||||
font-size: 50px
|
||||
color: $tertiary
|
||||
font-weight: 500
|
||||
|
||||
label#error
|
||||
font-size: 25px
|
||||
color: $eventLame
|
||||
font-weight: 500
|
||||
@ -1,22 +0,0 @@
|
||||
#error-index
|
||||
width 100%
|
||||
max-width 900px
|
||||
margin 0 auto;
|
||||
padding: 10px
|
||||
height 100%
|
||||
z-index 10
|
||||
position relative
|
||||
label#title
|
||||
font-size 100px
|
||||
color $highlight
|
||||
font-weight: 500
|
||||
|
||||
label#message
|
||||
font-size 50px
|
||||
color $tertiary
|
||||
font-weight: 500
|
||||
|
||||
label#error
|
||||
font-size 25px
|
||||
color $eventLame
|
||||
font-weight: 500
|
||||
@ -0,0 +1,58 @@
|
||||
form
|
||||
display: inline-block
|
||||
|
||||
input[type=email], input[type=password], input[type=text]
|
||||
border: 0
|
||||
border-radius: 5px
|
||||
padding: 5px
|
||||
margin: 10px 5px 0 0
|
||||
font: 15px monospace
|
||||
display: inline-block
|
||||
background: color.adjust($primary, $lightness: -50%)
|
||||
color: $white
|
||||
|
||||
textarea
|
||||
border: 0
|
||||
border-radius: 3px
|
||||
color: $white
|
||||
font: 15px monospace
|
||||
|
||||
button, input[type=submit]
|
||||
background: $highlight
|
||||
color: color.adjust($primary, $lightness: -30%)
|
||||
font: 14px $baseType
|
||||
border-radius: 5px
|
||||
position: relative
|
||||
cursor: pointer
|
||||
border: 0
|
||||
padding: 5px 5px 0 5px
|
||||
@include object_transitions(.3s)
|
||||
font: 15px monospace
|
||||
|
||||
select
|
||||
font: 14px monospace
|
||||
border: 1px solid $secondary
|
||||
-webkit-appearance: none
|
||||
-moz-appearance: none
|
||||
appearance: none
|
||||
color: $primary
|
||||
|
||||
::-webkit-input-placeholder
|
||||
font: 14px monospace
|
||||
color: color.adjust($primary, $lightness: 50%)
|
||||
|
||||
:-moz-placeholder
|
||||
/* Firefox 18- */
|
||||
font: 14px monospace
|
||||
color: color.adjust($primary, $lightness: 50%)
|
||||
|
||||
::-moz-placeholder
|
||||
/* Firefox 19+ */
|
||||
font: 14px monospace
|
||||
color: color.adjust($primary, $lightness: 50%)
|
||||
|
||||
:-ms-input-placeholder
|
||||
font: 14px monospace
|
||||
color: color.adjust($primary, $lightness: 50%)
|
||||
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
form
|
||||
display inline-block
|
||||
|
||||
input[type=email], input[type=password], input[type=text]
|
||||
border 0
|
||||
border-radius 3px
|
||||
padding 5px
|
||||
font 1em $monoType
|
||||
display inline-block
|
||||
background-color $primary - 60%
|
||||
color $secondary
|
||||
|
||||
textarea
|
||||
border 0
|
||||
border-radius 3px
|
||||
color $type02
|
||||
font 1em $monoType
|
||||
|
||||
button, input[type=submit]
|
||||
background $highlight
|
||||
color $primary - 60%
|
||||
font 1em $monoType
|
||||
border-radius 3px
|
||||
position relative
|
||||
cursor pointer
|
||||
border 0
|
||||
|
||||
input.large
|
||||
font-size 1.4em
|
||||
padding 10px
|
||||
|
||||
select
|
||||
font 1em $monoType
|
||||
border 1px solid $secondary
|
||||
-webkit-appearance none
|
||||
-moz-appearance none
|
||||
appearance none
|
||||
// background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #000;
|
||||
color $primary
|
||||
|
||||
::-webkit-input-placeholder
|
||||
font 1em $monoType
|
||||
color $secondary
|
||||
|
||||
:-moz-placeholder
|
||||
/* Firefox 18- */
|
||||
font 1em $monoType
|
||||
color $secondary
|
||||
|
||||
::-moz-placeholder
|
||||
/* Firefox 19+ */
|
||||
font 1em $monoType
|
||||
color $secondary
|
||||
|
||||
:-ms-input-placeholder
|
||||
font 1em $monoType
|
||||
color $secondary
|
||||
@ -0,0 +1,251 @@
|
||||
#dash-index-content
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: 0 auto
|
||||
|
||||
#dash-index
|
||||
width: 100%
|
||||
height: 100%
|
||||
z-index: 10
|
||||
position: relative
|
||||
|
||||
#dash-index-wrapper
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: 0 auto
|
||||
|
||||
.dash-init, .dash-restore
|
||||
width: 100%
|
||||
max-width: 900px
|
||||
margin: 0 auto
|
||||
color: $secondary
|
||||
label
|
||||
color: $primary
|
||||
|
||||
form
|
||||
background: $white
|
||||
padding: 15px
|
||||
h1
|
||||
color: $primary
|
||||
p
|
||||
color: color.adjust($primary, $lightness: -60%)
|
||||
border-top: 1px solid $primary
|
||||
border-bottom: 1px solid $primary
|
||||
padding: 10px 0 10px 0
|
||||
input.large[type=email], input[type=password], input[type=text]
|
||||
margin-bottom: 15px
|
||||
margin-top: 5px
|
||||
button
|
||||
height: 30px
|
||||
width: 120px
|
||||
margin: 0 auto
|
||||
display: block
|
||||
.dash-restore
|
||||
display: none
|
||||
visibility: hidden
|
||||
|
||||
#dash-login
|
||||
width: 100%
|
||||
max-width: 900px
|
||||
margin: 0 auto
|
||||
|
||||
#dash-form
|
||||
width: 300px
|
||||
padding: 0.75em
|
||||
background: $primary
|
||||
border-radius: 3px
|
||||
|
||||
input
|
||||
width: 290px
|
||||
margin: 0 0 10px 0
|
||||
height: 30px
|
||||
|
||||
button
|
||||
width: 300px
|
||||
|
||||
#dash-menu
|
||||
padding: 10px
|
||||
width: 90%
|
||||
max-width: 900px
|
||||
margin: 50px auto
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
width: 30%
|
||||
padding: 5px
|
||||
border-radius: 3px
|
||||
color: $white
|
||||
margin: 0 10px 10px 0
|
||||
|
||||
&:hover
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
|
||||
svg
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
fill: $white
|
||||
|
||||
label
|
||||
display: inline-block
|
||||
margin-top: 5px
|
||||
width: 85%
|
||||
text-align: center
|
||||
cursor: pointer
|
||||
|
||||
#dash-recent
|
||||
width: 100%
|
||||
max-width: 900px
|
||||
height: 100%
|
||||
padding: 5px 0 0 0
|
||||
margin: 0 auto
|
||||
|
||||
#recent-list
|
||||
padding: 0.75em
|
||||
position: relative
|
||||
|
||||
.recent-header
|
||||
height: 50px
|
||||
|
||||
h3
|
||||
vertical-align: top
|
||||
display: inline-block
|
||||
width: 50%
|
||||
|
||||
.index-menu
|
||||
width: 50%
|
||||
text-align: right
|
||||
vertical-align: top
|
||||
display: inline-block
|
||||
margin: 24px 0 24px 0
|
||||
right: 10px
|
||||
color: $white
|
||||
|
||||
a
|
||||
text-decoration-color: $highlight
|
||||
|
||||
a.post-link
|
||||
font-size: 1.5em
|
||||
font-weight: 300
|
||||
display: inline-block
|
||||
border-radius: 3px
|
||||
vertical-align: top
|
||||
text-decoration: none
|
||||
position: relative
|
||||
|
||||
label
|
||||
font-size: 1.4em
|
||||
font-weight: 700
|
||||
color: $white
|
||||
padding: 5px
|
||||
vertical-align: top
|
||||
display: inline-block
|
||||
word-wrap: break-word
|
||||
width: 100%
|
||||
text-align: center
|
||||
@include text-drop-shadow($black, 1, 2px, 2px, 0)
|
||||
|
||||
span
|
||||
vertical-align: top
|
||||
margin: 0 auto
|
||||
width: 300px
|
||||
display: block
|
||||
font-family: $monoType
|
||||
font-size: 0.5em
|
||||
padding: 7px
|
||||
color: $white
|
||||
text-align: center
|
||||
//background $primary - 60%
|
||||
border-radius: 0 0 3px 3px
|
||||
|
||||
div
|
||||
width: 100%
|
||||
position: absolute
|
||||
bottom: 0
|
||||
border-radius: 0 0 3px 3px
|
||||
//background-opacity($black, .35)
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
|
||||
|
||||
#options
|
||||
display: block
|
||||
vertical-align: top
|
||||
width: 300px
|
||||
position: relative
|
||||
text-align: center
|
||||
margin: 0 auto
|
||||
background: none
|
||||
.item-options
|
||||
border-radius: 3px
|
||||
margin: 5px
|
||||
display: inline-block
|
||||
.item-options[data-active='false']
|
||||
width: 65px
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
color: $white
|
||||
|
||||
.item-options[data-active='true']
|
||||
width: 70px
|
||||
background: color.adjust($tertiary, $lightness: 20%)
|
||||
color: color.adjust($primary, $lightness: -60%)
|
||||
|
||||
a:nth-child(3)
|
||||
width: 100%
|
||||
margin-bottom: 20px
|
||||
height: 500px
|
||||
|
||||
a:nth-child(4)
|
||||
width: 49%
|
||||
height: 275px
|
||||
margin: 0 15px 15px 0
|
||||
|
||||
a:nth-child(5)
|
||||
width: 49%
|
||||
height: 550px
|
||||
|
||||
a:nth-child(6)
|
||||
width: 49%
|
||||
height: 550px
|
||||
margin :-260px 15px 0 0
|
||||
|
||||
a:nth-child(7)
|
||||
width: 49%
|
||||
height: 275px
|
||||
margin: 15px 0 0 0
|
||||
|
||||
//Reponsive
|
||||
@media only screen and (max-width: 768px)
|
||||
#dash-index-content
|
||||
#dash-index
|
||||
#dash-index-wrapper
|
||||
#dash-recent
|
||||
#recent-list
|
||||
a:nth-child(4), a:nth-child(6)
|
||||
width: 48.9%
|
||||
|
||||
@media only screen and (max-width: 640px)
|
||||
#dash-index-content
|
||||
#dash-index
|
||||
#dash-index-wrapper
|
||||
#dash-recent
|
||||
#recent-list
|
||||
a:nth-child(4), a:nth-child(6)
|
||||
width: 48.5%
|
||||
|
||||
@media only screen and (max-width: 480px)
|
||||
#dash-index-content
|
||||
#dash-index
|
||||
#dash-index-wrapper
|
||||
#dash-recent
|
||||
#recent-list
|
||||
.recent-header
|
||||
h3
|
||||
width: 40%
|
||||
|
||||
.index-menu
|
||||
width: 60%
|
||||
|
||||
a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7)
|
||||
width: 100%
|
||||
margin: 15px 0 0 0
|
||||
height: 400px
|
||||
@ -1,255 +0,0 @@
|
||||
#dash-index-content
|
||||
width 100%
|
||||
height 100%
|
||||
margin 0 auto
|
||||
|
||||
#dash-index
|
||||
width 100%
|
||||
height 100%
|
||||
z-index 10
|
||||
position relative
|
||||
|
||||
#dash-index-wrapper
|
||||
width 100%
|
||||
height 100%
|
||||
margin 0 auto
|
||||
|
||||
.dash-init, .dash-restore
|
||||
width 100%
|
||||
max-width 900px
|
||||
margin 0 auto
|
||||
color $secondary
|
||||
label
|
||||
color $primary
|
||||
|
||||
form
|
||||
background $white
|
||||
padding 15px
|
||||
h1
|
||||
color $primary
|
||||
p
|
||||
color $primary - 60%
|
||||
border-top 1px solid $primary
|
||||
border-bottom 1px solid $primary
|
||||
padding 10px 0 10px 0
|
||||
input.large[type=email], input[type=password], input[type=text]
|
||||
margin-bottom 15px
|
||||
margin-top 5px
|
||||
button
|
||||
height 30px
|
||||
width 120px
|
||||
margin 0 auto
|
||||
display block
|
||||
.dash-restore
|
||||
display: none;
|
||||
visibility hidden;
|
||||
|
||||
#dash-login
|
||||
width 100%
|
||||
max-width 900px
|
||||
margin 0 auto
|
||||
|
||||
#dash-form
|
||||
width 300px
|
||||
padding 0.75em
|
||||
background $primary
|
||||
border-radius 3px
|
||||
|
||||
input
|
||||
width 290px
|
||||
margin 0 0 10px 0
|
||||
height 30px
|
||||
|
||||
button
|
||||
width 300px
|
||||
|
||||
#dash-menu
|
||||
padding 10px
|
||||
width 90%
|
||||
max-width 900px
|
||||
margin 50px auto
|
||||
|
||||
a
|
||||
display inline-block
|
||||
vertical-align top
|
||||
background $primary - 60%
|
||||
width 30%
|
||||
padding 5px
|
||||
border-radius 3px
|
||||
color $white
|
||||
margin 0 10px 10px 0
|
||||
|
||||
&:hover
|
||||
background $primary - 50%
|
||||
|
||||
svg
|
||||
display inline-block
|
||||
vertical-align top
|
||||
fill $white
|
||||
|
||||
label
|
||||
display inline-block
|
||||
margin-top 5px
|
||||
width 85%
|
||||
text-align center
|
||||
cursor pointer
|
||||
|
||||
#dash-recent
|
||||
width 100%
|
||||
max-width 900px
|
||||
height 100%
|
||||
padding 5px 0 0 0
|
||||
margin 0 auto
|
||||
|
||||
#recent-list
|
||||
padding 0.75em
|
||||
position relative
|
||||
|
||||
.recent-header
|
||||
height 50px
|
||||
|
||||
h3
|
||||
vertical-align top
|
||||
display inline-block
|
||||
width 50%
|
||||
|
||||
.index-menu
|
||||
width 50%
|
||||
text-align right
|
||||
vertical-align top
|
||||
display inline-block
|
||||
margin 24px 0 24px 0
|
||||
right 10px
|
||||
color $white
|
||||
|
||||
a
|
||||
text-decoration-color $highlight
|
||||
|
||||
a.post-link
|
||||
font-size 1.5em
|
||||
font-weight 300
|
||||
display inline-block
|
||||
border-radius 3px
|
||||
vertical-align top
|
||||
text-decoration none
|
||||
position relative
|
||||
|
||||
label
|
||||
font-size 1.4em
|
||||
font-weight 700
|
||||
color $white
|
||||
padding 5px
|
||||
vertical-align top
|
||||
display inline-block
|
||||
word-wrap break-word
|
||||
width 100%
|
||||
text-align center
|
||||
text-drop-shadow($black, 1, 2px, 2px, 0)
|
||||
|
||||
span
|
||||
vertical-align top
|
||||
margin 0 auto
|
||||
width 300px
|
||||
display block
|
||||
font-family $monoType
|
||||
font-size 0.5em
|
||||
padding 7px
|
||||
color $white
|
||||
text-align: center
|
||||
//background $primary - 60%
|
||||
border-radius 0 0 3px 3px
|
||||
|
||||
div
|
||||
width 100%
|
||||
position absolute
|
||||
bottom 0
|
||||
border-radius 0 0 3px 3px
|
||||
//background-opacity($black, .35)
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
|
||||
|
||||
#options
|
||||
display block
|
||||
vertical-align: top
|
||||
width 300px
|
||||
position relative
|
||||
text-align: center
|
||||
margin 0 auto
|
||||
background none
|
||||
.item-options
|
||||
border-radius 3px
|
||||
margin 5px
|
||||
display inline-block
|
||||
.item-options[data-active='false']
|
||||
width 65px
|
||||
background $primary - 60%
|
||||
color $white
|
||||
|
||||
.item-options[data-active='true']
|
||||
width 70px
|
||||
background $tertiary + 50%
|
||||
color $primary - 60%
|
||||
|
||||
a:nth-child(3)
|
||||
width 100%
|
||||
margin-bottom 20px
|
||||
height 500px
|
||||
|
||||
a:nth-child(4)
|
||||
width 49%
|
||||
height 275px
|
||||
margin 0 15px 15px 0
|
||||
|
||||
a:nth-child(5)
|
||||
width 49%
|
||||
height 550px
|
||||
|
||||
a:nth-child(6)
|
||||
width 49%
|
||||
height 550px
|
||||
margin -260px 15px 0 0
|
||||
|
||||
a:nth-child(7)
|
||||
width 49%
|
||||
height 275px
|
||||
margin 15px 0 0 0
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Responsive
|
||||
-------------------------------
|
||||
* */
|
||||
@media only screen and (max-width: 768px)
|
||||
#dash-index-content
|
||||
#dash-index
|
||||
#dash-index-wrapper
|
||||
#dash-recent
|
||||
#recent-list
|
||||
a:nth-child(4), a:nth-child(6)
|
||||
width 48.9%
|
||||
|
||||
@media only screen and (max-width: 640px)
|
||||
#dash-index-content
|
||||
#dash-index
|
||||
#dash-index-wrapper
|
||||
#dash-recent
|
||||
#recent-list
|
||||
a:nth-child(4), a:nth-child(6)
|
||||
width 48.5%
|
||||
|
||||
@media only screen and (max-width: 480px)
|
||||
#dash-index-content
|
||||
#dash-index
|
||||
#dash-index-wrapper
|
||||
#dash-recent
|
||||
#recent-list
|
||||
.recent-header
|
||||
h3
|
||||
width 40%
|
||||
|
||||
.index-menu
|
||||
width 60%
|
||||
|
||||
a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7)
|
||||
width 100%
|
||||
margin 15px 0 0 0
|
||||
height 400px
|
||||
@ -0,0 +1,16 @@
|
||||
@mixin text-drop-shadow($rgb_value, $opacity, $offsetX, $offsetY, $blur)
|
||||
text-shadow: $offsetX $offsetY $blur rgba($rgb_value, $opacity)
|
||||
|
||||
@mixin object-transitions($rate)
|
||||
-moz-transition: all $rate linear
|
||||
-webkit-transition: all $rate linear
|
||||
-o-transition: all $rate linear
|
||||
transition: all $rate linear
|
||||
|
||||
|
||||
@mixin background-opacity($rgb_value, $opacity)
|
||||
background: rgba($rgb_value, $opacity)
|
||||
|
||||
@mixin custom-header($weight, $size, $line_height, $color)
|
||||
font: $weight $size/$line_height $bodyTypeSans
|
||||
color: $color
|
||||
@ -1,11 +0,0 @@
|
||||
text-drop-shadow(rgb-value, opacity, offsetX, offsetY, blur)
|
||||
text-shadow offsetX offsetY blur rgba(rgb-value, opacity)
|
||||
|
||||
object-transitions(rate)
|
||||
-moz-transition all rate linear
|
||||
-webkit-transition all rate linear
|
||||
-o-transition all rate linear
|
||||
transition all rate linear
|
||||
|
||||
background-opacity(rgb-value, opacity)
|
||||
background rgba(rgb-value, opacity)
|
||||
@ -0,0 +1,62 @@
|
||||
#nav-index
|
||||
width: 100%
|
||||
max-width: 900px
|
||||
margin: 0 auto
|
||||
|
||||
#nav-index-wrapper
|
||||
padding: 0.75rem
|
||||
|
||||
#nav-pages
|
||||
.nav-item
|
||||
display: block
|
||||
width: 98%
|
||||
background: $primary
|
||||
border-radius: 3px
|
||||
color: $white
|
||||
height: 30px
|
||||
padding: 10px
|
||||
margin: 0 0 10px 0
|
||||
font-size: 1.5em
|
||||
cursor: move
|
||||
|
||||
label
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
padding: 0
|
||||
margin: -15px 0 0 10px
|
||||
cursor: move
|
||||
|
||||
#nav-btns
|
||||
float: right
|
||||
|
||||
button
|
||||
font-size: 0.8em
|
||||
margin: 0 0 0 10px
|
||||
|
||||
@media only screen and (max-width: 375px)
|
||||
#nav-index
|
||||
#nav-index-wrapper
|
||||
#nav-pages
|
||||
.nav-item
|
||||
width: 94.5%
|
||||
font-size: 1em
|
||||
|
||||
label
|
||||
width: 47%
|
||||
vertical-align: top
|
||||
margin-top: 0px
|
||||
line-height: 1em
|
||||
|
||||
@media only screen and (max-width: 320px)
|
||||
#nav-index
|
||||
#nav-index-wrapper
|
||||
#nav-pages
|
||||
.nav-item
|
||||
width: 94.5%
|
||||
font-size: 1em
|
||||
|
||||
label
|
||||
width: 37%
|
||||
vertical-align: top
|
||||
margin-top: 0px
|
||||
line-height: 1em
|
||||
@ -1,62 +0,0 @@
|
||||
#nav-index
|
||||
width 100%
|
||||
max-width 900px
|
||||
margin 0 auto
|
||||
|
||||
#nav-index-wrapper
|
||||
padding 0.75rem
|
||||
|
||||
#nav-pages
|
||||
.nav-item
|
||||
display block
|
||||
width 98%
|
||||
background $primary
|
||||
border-radius 3px
|
||||
color $white
|
||||
height 30px
|
||||
padding 10px
|
||||
margin 0 0 10px 0
|
||||
font-size 1.5em
|
||||
cursor move
|
||||
|
||||
label
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
padding 0
|
||||
margin -15px 0 0 10px
|
||||
cursor move
|
||||
|
||||
#nav-btns
|
||||
float right
|
||||
|
||||
button
|
||||
font-size 0.8em
|
||||
margin 0 0 0 10px
|
||||
|
||||
@media only screen and (max-width: 375px)
|
||||
#nav-index
|
||||
#nav-index-wrapper
|
||||
#nav-pages
|
||||
.nav-item
|
||||
width 94.5%
|
||||
font-size 1em
|
||||
|
||||
label
|
||||
width 47%
|
||||
vertical-align top
|
||||
margin-top 0px
|
||||
line-height 1em
|
||||
|
||||
@media only screen and (max-width: 320px)
|
||||
#nav-index
|
||||
#nav-index-wrapper
|
||||
#nav-pages
|
||||
.nav-item
|
||||
width 94.5%
|
||||
font-size 1em
|
||||
|
||||
label
|
||||
width 37%
|
||||
vertical-align top
|
||||
margin-top 0px
|
||||
line-height 1em
|
||||
@ -0,0 +1,197 @@
|
||||
html
|
||||
line-height: 1.15
|
||||
-ms-text-size-adjust: 100%
|
||||
-webkit-text-size-adjust: 100%
|
||||
|
||||
body
|
||||
margin: 0
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section
|
||||
display: block
|
||||
|
||||
h1
|
||||
font-size: 2em
|
||||
margin: 0.67em 0
|
||||
line-height: 1em
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main
|
||||
display: block
|
||||
|
||||
figure
|
||||
margin: 1em 40px
|
||||
|
||||
hr
|
||||
box-sizing: content-box
|
||||
height: 0
|
||||
overflow: visible
|
||||
|
||||
pre
|
||||
font-family: monospace, monospace
|
||||
font-size: 1em
|
||||
a
|
||||
background-color: transparent
|
||||
-webkit-text-decoration-skip: objects
|
||||
|
||||
a:active,
|
||||
a:hover
|
||||
outline-width: 0
|
||||
|
||||
abbr[title]
|
||||
border-bottom: none
|
||||
text-decoration: underline
|
||||
text-decoration: underline dotted
|
||||
|
||||
b,
|
||||
strong
|
||||
font-weight: inherit
|
||||
font-weight: bolder
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp
|
||||
font-family: monospace, monospace
|
||||
font-size: 1em
|
||||
|
||||
dfn
|
||||
font-style: italic
|
||||
|
||||
mark
|
||||
background-color: #ff0
|
||||
color: #000
|
||||
|
||||
small
|
||||
font-size: 80%
|
||||
|
||||
sub,
|
||||
sup
|
||||
font-size: 60%
|
||||
line-height: 0
|
||||
position: relative
|
||||
vertical-align: baseline
|
||||
|
||||
sub
|
||||
bottom: -0.25em
|
||||
|
||||
sup
|
||||
top: -0.55em
|
||||
background: $primary
|
||||
color: $primary
|
||||
border-radius: 2px
|
||||
padding: 0 2px 0 2px
|
||||
margin: 0 2px 0 0
|
||||
|
||||
audio,
|
||||
video
|
||||
display: inline-block
|
||||
|
||||
audio
|
||||
&:not([controls])
|
||||
display: none
|
||||
height: 0
|
||||
|
||||
img
|
||||
border-style: none
|
||||
|
||||
svg
|
||||
&:not(:root)
|
||||
overflow: hidden
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea
|
||||
font-family: sans-serif
|
||||
font-size: 100%
|
||||
line-height: 1.15
|
||||
margin: 0
|
||||
|
||||
button,
|
||||
input
|
||||
overflow: visible
|
||||
|
||||
button,
|
||||
select
|
||||
text-transform: none
|
||||
|
||||
button, html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"]
|
||||
-webkit-appearance: button
|
||||
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner,
|
||||
button::-moz-focus-inner
|
||||
border-style: none
|
||||
padding: 0
|
||||
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring,
|
||||
button:-moz-focusring
|
||||
outline: 1px dotted ButtonText
|
||||
|
||||
fieldset
|
||||
border: 1px solid #c0c0c0
|
||||
margin: 0 2px
|
||||
padding: 0.35em 0.625em 0.75em
|
||||
|
||||
legend
|
||||
box-sizing: border-box
|
||||
color: inherit
|
||||
display: table
|
||||
max-width: 100%
|
||||
padding: 0
|
||||
white-space: normal
|
||||
|
||||
progress
|
||||
display: inline-block
|
||||
vertical-align: baseline
|
||||
|
||||
textarea
|
||||
overflow: auto
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
box-sizing: border-box
|
||||
padding: 0
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button
|
||||
height: auto
|
||||
|
||||
[type="search"]
|
||||
-webkit-appearance: textfield
|
||||
outline-offset: -2px
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration
|
||||
-webkit-appearance: none
|
||||
|
||||
::-webkit-file-upload-button
|
||||
-webkit-appearance: button
|
||||
font: inherit
|
||||
|
||||
details,
|
||||
menu
|
||||
display: block
|
||||
|
||||
summary
|
||||
display: list-item
|
||||
|
||||
canvas
|
||||
display: inline-block
|
||||
|
||||
template
|
||||
display: none
|
||||
|
||||
[hidden]
|
||||
display: none
|
||||
@ -1,196 +0,0 @@
|
||||
html
|
||||
line-height 1.15
|
||||
-ms-text-size-adjust 100%
|
||||
-webkit-text-size-adjust 100%
|
||||
|
||||
body
|
||||
margin 0
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section
|
||||
display block
|
||||
|
||||
h1
|
||||
font-size 2em
|
||||
margin 0.67em 0
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main
|
||||
display block
|
||||
|
||||
figure
|
||||
margin 1em 40px
|
||||
|
||||
hr
|
||||
box-sizing content-box
|
||||
height 0
|
||||
overflow visible
|
||||
|
||||
pre
|
||||
font-family monospace, monospace
|
||||
font-size 1em
|
||||
a
|
||||
background-color transparent
|
||||
-webkit-text-decoration-skip objects
|
||||
|
||||
a:active,
|
||||
a:hover
|
||||
outline-width 0
|
||||
|
||||
abbr[title]
|
||||
border-bottom none
|
||||
text-decoration underline
|
||||
text-decoration underline dotted
|
||||
|
||||
b,
|
||||
strong
|
||||
font-weight inherit
|
||||
font-weight bolder
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp
|
||||
font-family monospace, monospace
|
||||
font-size 1em
|
||||
|
||||
dfn
|
||||
font-style italic
|
||||
|
||||
mark
|
||||
background-color #ff0
|
||||
color #000
|
||||
|
||||
small
|
||||
font-size 80%
|
||||
|
||||
sub,
|
||||
sup
|
||||
font-size 60%
|
||||
line-height 0
|
||||
position relative
|
||||
vertical-align baseline
|
||||
|
||||
sub
|
||||
bottom -0.25em
|
||||
|
||||
sup
|
||||
top -0.55em
|
||||
background lightness($primary, 80%)
|
||||
color $primary
|
||||
border-radius: 2px;
|
||||
padding 0 2px 0 2px
|
||||
margin: 0 2px 0 0
|
||||
|
||||
audio,
|
||||
video
|
||||
display inline-block
|
||||
|
||||
audio
|
||||
&:not([controls])
|
||||
display none
|
||||
height 0
|
||||
|
||||
img
|
||||
border-style none
|
||||
|
||||
svg
|
||||
&:not(:root)
|
||||
overflow hidden
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea
|
||||
font-family sans-serif
|
||||
font-size 100%
|
||||
line-height 1.15
|
||||
margin 0
|
||||
|
||||
button,
|
||||
input
|
||||
overflow visible
|
||||
|
||||
button,
|
||||
select
|
||||
text-transform none
|
||||
|
||||
button, html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"]
|
||||
-webkit-appearance button
|
||||
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner,
|
||||
button::-moz-focus-inner
|
||||
border-style none
|
||||
padding 0
|
||||
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring,
|
||||
button:-moz-focusring
|
||||
outline 1px dotted ButtonText
|
||||
|
||||
fieldset
|
||||
border 1px solid #c0c0c0
|
||||
margin 0 2px
|
||||
padding 0.35em 0.625em 0.75em
|
||||
|
||||
legend
|
||||
box-sizing border-box
|
||||
color inherit
|
||||
display table
|
||||
max-width 100%
|
||||
padding 0
|
||||
white-space normal
|
||||
|
||||
progress
|
||||
display inline-block
|
||||
vertical-align baseline
|
||||
|
||||
textarea
|
||||
overflow auto
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
box-sizing border-box
|
||||
padding 0
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button
|
||||
height auto
|
||||
|
||||
[type="search"]
|
||||
-webkit-appearance textfield
|
||||
outline-offset -2px
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration
|
||||
-webkit-appearance none
|
||||
|
||||
::-webkit-file-upload-button
|
||||
-webkit-appearance button
|
||||
font inherit
|
||||
|
||||
details,
|
||||
menu
|
||||
display block
|
||||
|
||||
summary
|
||||
display list-item
|
||||
|
||||
canvas
|
||||
display inline-block
|
||||
|
||||
template
|
||||
display none
|
||||
|
||||
[hidden]
|
||||
display none
|
||||
@ -0,0 +1,384 @@
|
||||
#post-index
|
||||
width: 100%
|
||||
max-width: 900px
|
||||
margin: 0 auto
|
||||
|
||||
#post-index-wrapper
|
||||
padding: 0.75rem
|
||||
overflow: hidden
|
||||
|
||||
#post-index-menu
|
||||
color: $white
|
||||
|
||||
a
|
||||
text-decoration-color: $highlight
|
||||
|
||||
a.add-new-post
|
||||
display: inline-block
|
||||
background: $highlight
|
||||
border-radius: 3px
|
||||
padding: 3px
|
||||
color: $white
|
||||
text-align: center
|
||||
margin-bottom: 10px
|
||||
float: right
|
||||
|
||||
.current-filter
|
||||
color: $highlight
|
||||
text-decoration-color: $secondary
|
||||
|
||||
#posts-list
|
||||
margin: 20px 0 0 0
|
||||
|
||||
a.page-link
|
||||
background: $white
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
width: 100%
|
||||
text-decoration: none
|
||||
margin: 0 0 20px 0
|
||||
border-radius: 3px
|
||||
overflow: hidden
|
||||
color: color.adjust($primary, $lightness: -60%)
|
||||
|
||||
label
|
||||
font-size: 2em
|
||||
font-weight: 500
|
||||
padding: 10px
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
width: 100%
|
||||
|
||||
span
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
font-size: 0.8em
|
||||
font-family: $monoType
|
||||
width: 50%
|
||||
padding: 0 0 0 10px
|
||||
|
||||
div.page-bg
|
||||
width: 100%
|
||||
height: 350px
|
||||
background-color: $highlight
|
||||
position: relative
|
||||
#meta
|
||||
width: 100%
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
|
||||
border-radius: 3px
|
||||
margin: auto
|
||||
bottom: 0
|
||||
position: absolute
|
||||
padding: 0 0 20px 0
|
||||
span
|
||||
color: $white
|
||||
text-align: center
|
||||
margin: 0 auto
|
||||
display: block
|
||||
|
||||
label
|
||||
font-size: 1.4em
|
||||
font-weight: 700
|
||||
color: $white
|
||||
padding: 5px
|
||||
vertical-align: top
|
||||
display: inline-block
|
||||
word-wrap: break-word
|
||||
width: 100%
|
||||
text-align: center
|
||||
@include text-drop-shadow($black, 1, 2px, 2px, 0)
|
||||
#options
|
||||
margin: 0 auto
|
||||
width: 275px
|
||||
.meta-options
|
||||
border-radius: 3px
|
||||
margin: 5px
|
||||
display: inline-block
|
||||
text-align: center
|
||||
padding: 2px
|
||||
.meta-options[data-active='false']
|
||||
width: 70px
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
color: $white
|
||||
|
||||
.meta-options[data-active='true']
|
||||
width: 75px
|
||||
background: color.adjust($tertiary, $lightness: 60%)
|
||||
color: color.adjust($primary, $lightness: -60%)
|
||||
|
||||
p
|
||||
padding: 5px 10px 5px 10px
|
||||
font-size: 1.2em
|
||||
font-weight: 400
|
||||
.paginate
|
||||
width: 260px
|
||||
display: block
|
||||
margin: 0 auto
|
||||
a
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
span.count
|
||||
text-align: center
|
||||
padding: 5px
|
||||
margin-top: -2px
|
||||
display: inline-block
|
||||
width: 200px
|
||||
font-size: 1.5em
|
||||
color: $tertiary
|
||||
|
||||
|
||||
#post-edit-index
|
||||
width: 100%
|
||||
overflow: hidden
|
||||
|
||||
#post-edit-index-wrapper
|
||||
width: 100%
|
||||
|
||||
#post-header
|
||||
// width 100%
|
||||
|
||||
background: $highlight
|
||||
#post-header-wrapper
|
||||
max-width: 900px
|
||||
margin: 0 auto
|
||||
padding: 0.75rem
|
||||
label
|
||||
color: $white
|
||||
font-size: 0.8em
|
||||
font-family: $monoType
|
||||
font-weight: 600
|
||||
span
|
||||
color: color.adjust($primary, $lightness: -60%)
|
||||
font-size: 1.5em
|
||||
|
||||
#post-title
|
||||
#post_title
|
||||
background: color.adjust($highlight, $lightness: 10%)
|
||||
font-family: $baseType
|
||||
width: 97.6%
|
||||
height: 80px
|
||||
font-size: 2em
|
||||
color: color.adjust($primary, $lightness: -60%)
|
||||
padding: 5px
|
||||
margin: 0 0 5px 0
|
||||
|
||||
|
||||
#calendar-icon
|
||||
background: color.adjust($primary, $lightness: -15%)
|
||||
border-radius: 3px 0 0 3px
|
||||
display: inline-block
|
||||
padding: 5.2px
|
||||
color: $secondary
|
||||
|
||||
#post-meta
|
||||
#post_tags
|
||||
background: color.adjust($highlight, $lightness: 10%)
|
||||
font-family: $baseType
|
||||
width: 97.6%
|
||||
height: 80px
|
||||
color: color.adjust($primary, $lightness: -60%)
|
||||
padding: 5px
|
||||
margin: 0 0 5px 0
|
||||
|
||||
#post-options
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
width: 100%
|
||||
padding: 0
|
||||
|
||||
button:nth-child(1)
|
||||
border-radius: 3px 0 0 3px
|
||||
|
||||
button:nth-child(4)
|
||||
border-radius: 0 3px 3px 0
|
||||
|
||||
button
|
||||
width: 33.3%
|
||||
height: 39px
|
||||
@include object-transitions(0.3s)
|
||||
margin: 0
|
||||
border-radius: 0
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
text-align: center
|
||||
|
||||
button[data-active='false']
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
svg
|
||||
fill: $white
|
||||
|
||||
button[data-active='true']
|
||||
background: color.adjust($tertiary, $lightness: 5%)
|
||||
svg
|
||||
fill: color.adjust($primary, $lightness: -60%)
|
||||
|
||||
#featured-image-upload, #post-image-upload
|
||||
display: none
|
||||
|
||||
#post-feature
|
||||
width: 100%
|
||||
|
||||
#featured-image-drop
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
width: 100%
|
||||
min-height: 200px
|
||||
background: color.adjust($primary, $lightness: -50%)
|
||||
color: $primary
|
||||
vertical-align: middle
|
||||
font-family: $monoType
|
||||
|
||||
label
|
||||
cursor: pointer
|
||||
|
||||
img
|
||||
width: 100%
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
#featured-new-image-btn
|
||||
position: absolute
|
||||
margin: 20px
|
||||
|
||||
#new-feature-upload
|
||||
padding-top: 4px
|
||||
background: $white
|
||||
|
||||
svg
|
||||
fill: $highlight
|
||||
|
||||
#edit-post
|
||||
width: 100%
|
||||
max-width: 880px
|
||||
margin: 0 auto
|
||||
|
||||
#edit-post-wrapper
|
||||
//width 98.7%
|
||||
max-width: 900px
|
||||
border-radius: 5px
|
||||
//background $primary - 10%
|
||||
margin: 40px 0 40px 0
|
||||
overflow: hidden
|
||||
|
||||
pre
|
||||
margin: 0
|
||||
code
|
||||
font-family: $monoType
|
||||
padding: 5px
|
||||
border-radius: 5px
|
||||
line-height: 1.6em
|
||||
font-size: 1.25em
|
||||
color: $editorPrimary
|
||||
word-wrap: normal
|
||||
white-space: pre-wrap
|
||||
line-break: normal
|
||||
-webkit-line-break: normal
|
||||
-o-line-break: normal
|
||||
-moz-line-break: normal
|
||||
display: inline-block
|
||||
width: 100%
|
||||
max-width: 900px
|
||||
min-height: 200px
|
||||
|
||||
//Responsive
|
||||
@media only screen and (max-width: 800px)
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-date
|
||||
width: 37.6%
|
||||
|
||||
@media only screen and (max-width: 768px)
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-date
|
||||
width: 43.1%
|
||||
|
||||
#post-meta
|
||||
#edit-control
|
||||
max-width: 100%
|
||||
|
||||
button
|
||||
width: 9.91%
|
||||
|
||||
@media only screen and (max-width: 640px)
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-date
|
||||
width: 42%
|
||||
|
||||
@media only screen and (max-width: 480px)
|
||||
#post-index
|
||||
#post-index-wrapper
|
||||
#post-index-menu
|
||||
a
|
||||
font-size: 0.95em
|
||||
|
||||
label
|
||||
display: none
|
||||
visibility: hidden
|
||||
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-options
|
||||
margin: 5px 0 0 0
|
||||
width: 100%
|
||||
padding: 0
|
||||
|
||||
#post-date
|
||||
width: 89.2%
|
||||
|
||||
#post-meta
|
||||
#edit-control
|
||||
button
|
||||
width: 9.91%
|
||||
|
||||
@media only screen and (max-width: 320px)
|
||||
#post-index
|
||||
#post-index-wrapper
|
||||
#post-index-menu
|
||||
a
|
||||
font-size: 0.95em
|
||||
|
||||
label
|
||||
display: none
|
||||
visibility: hidden
|
||||
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post_title
|
||||
width: 96.4%
|
||||
|
||||
#post-options
|
||||
margin: 5px 0 0 0
|
||||
width: 100%
|
||||
padding: 0
|
||||
|
||||
#post-date
|
||||
width: 83.1%
|
||||
|
||||
#post-meta
|
||||
#post_tags
|
||||
width: 96.4%
|
||||
|
||||
#edit-control
|
||||
.content-editor-btn-icon
|
||||
svg.icons
|
||||
width: 20px
|
||||
|
||||
.post-sumbit-btn
|
||||
svg.icons
|
||||
width: 20px
|
||||
|
||||
button
|
||||
width: 10%
|
||||
@ -1,388 +0,0 @@
|
||||
#post-index
|
||||
width 100%
|
||||
max-width 900px
|
||||
margin 0 auto
|
||||
|
||||
#post-index-wrapper
|
||||
padding 0.75rem
|
||||
overflow hidden
|
||||
|
||||
#post-index-menu
|
||||
color $white
|
||||
|
||||
a
|
||||
text-decoration-color $highlight
|
||||
|
||||
a.add-new-post
|
||||
display inline-block
|
||||
background $highlight
|
||||
border-radius 3px
|
||||
padding 3px
|
||||
color $white
|
||||
text-align center
|
||||
margin-bottom 10px
|
||||
float right
|
||||
|
||||
.current-filter
|
||||
color $highlight
|
||||
text-decoration-color $secondary
|
||||
|
||||
#posts-list
|
||||
margin 20px 0 0 0
|
||||
|
||||
a.page-link
|
||||
background $white
|
||||
display inline-block
|
||||
vertical-align top
|
||||
width 100%
|
||||
text-decoration none
|
||||
margin 0 0 20px 0
|
||||
border-radius 3px
|
||||
overflow hidden
|
||||
color $primary - 60%
|
||||
|
||||
label
|
||||
font-size 2em
|
||||
font-weight 500
|
||||
padding 10px
|
||||
display inline-block
|
||||
vertical-align top
|
||||
width 100%
|
||||
|
||||
span
|
||||
display inline-block
|
||||
vertical-align top
|
||||
font-size 0.8em
|
||||
font-family $monoType
|
||||
width 50%
|
||||
padding 0 0 0 10px
|
||||
|
||||
div.page-bg
|
||||
width 100%
|
||||
height 350px
|
||||
background-color $highlight
|
||||
position relative
|
||||
#meta
|
||||
width 100%
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
|
||||
border-radius 3px
|
||||
margin auto
|
||||
bottom 0
|
||||
position absolute
|
||||
padding 0 0 20px 0
|
||||
span
|
||||
color $white
|
||||
text-align center
|
||||
margin 0 auto
|
||||
display block
|
||||
|
||||
label
|
||||
font-size 1.4em
|
||||
font-weight 700
|
||||
color $white
|
||||
padding 5px
|
||||
vertical-align top
|
||||
display inline-block
|
||||
word-wrap break-word
|
||||
width 100%
|
||||
text-align center
|
||||
text-drop-shadow($black, 1, 2px, 2px, 0)
|
||||
#options
|
||||
margin 0 auto
|
||||
width: 275px
|
||||
.meta-options
|
||||
border-radius 3px
|
||||
margin 5px
|
||||
display inline-block
|
||||
text-align: center
|
||||
padding 2px
|
||||
.meta-options[data-active='false']
|
||||
width 70px
|
||||
background $primary - 60%
|
||||
color $white
|
||||
|
||||
.meta-options[data-active='true']
|
||||
width 75px
|
||||
background $tertiary + 50%
|
||||
color $primary - 60%
|
||||
|
||||
p
|
||||
padding 5px 10px 5px 10px
|
||||
font-size 1.2em
|
||||
font-weight 400
|
||||
.paginate
|
||||
width 260px
|
||||
display block
|
||||
margin 0 auto
|
||||
a
|
||||
display inline-block
|
||||
vertical-align: top
|
||||
span.count
|
||||
text-align center
|
||||
padding 5px
|
||||
margin-top -2px
|
||||
display inline-block
|
||||
width 200px
|
||||
font-size: 1.5em
|
||||
color $tertiary
|
||||
|
||||
|
||||
#post-edit-index
|
||||
width 100%
|
||||
overflow hidden
|
||||
|
||||
#post-edit-index-wrapper
|
||||
width 100%
|
||||
|
||||
#post-header
|
||||
// width 100%
|
||||
|
||||
background $highlight
|
||||
#post-header-wrapper
|
||||
max-width 900px
|
||||
margin 0 auto
|
||||
padding 0.75rem
|
||||
label
|
||||
color: $white
|
||||
font-size: 0.8em
|
||||
font-family $monoType
|
||||
font-weight 600
|
||||
span
|
||||
color color $primary - 60%
|
||||
font-size 1.5em
|
||||
|
||||
#post-title
|
||||
#post_title
|
||||
background $highlight + 10%
|
||||
font-family $baseType
|
||||
width 97.6%
|
||||
height 80px
|
||||
font-size 2em
|
||||
color $primary - 60%
|
||||
padding 5px
|
||||
margin 0 0 5px 0
|
||||
|
||||
|
||||
#calendar-icon
|
||||
background $primary - 15%
|
||||
border-radius 3px 0 0 3px
|
||||
display inline-block
|
||||
padding 5.2px
|
||||
color $secondary
|
||||
|
||||
#post-meta
|
||||
#post_tags
|
||||
background $highlight + 10%
|
||||
font-family $baseType
|
||||
width 97.6%
|
||||
height 80px
|
||||
color $primary - 60%
|
||||
padding 5px
|
||||
margin 0 0 5px 0
|
||||
|
||||
#post-options
|
||||
display inline-block
|
||||
vertical-align top
|
||||
width 100%
|
||||
padding 0
|
||||
|
||||
button:nth-child(1)
|
||||
border-radius 3px 0 0 3px
|
||||
|
||||
button:nth-child(4)
|
||||
border-radius 0 3px 3px 0
|
||||
|
||||
button
|
||||
width 33.3%
|
||||
height 39px
|
||||
object-transitions(0.3s)
|
||||
margin 0
|
||||
border-radius 0
|
||||
display inline-block
|
||||
vertical-align top
|
||||
text-align center
|
||||
|
||||
button[data-active='false']
|
||||
background $primary - 60%
|
||||
svg
|
||||
fill $white
|
||||
|
||||
button[data-active='true']
|
||||
background $tertiary + 50%
|
||||
svg
|
||||
fill $primary - 60%
|
||||
|
||||
#featured-image-upload, #post-image-upload
|
||||
display none
|
||||
|
||||
#post-feature
|
||||
width 100%
|
||||
|
||||
#featured-image-drop
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
width 100%
|
||||
min-height 200px
|
||||
background $primary - 50%
|
||||
color $primary
|
||||
vertical-align middle
|
||||
font-family $monoType
|
||||
|
||||
label
|
||||
cursor pointer
|
||||
|
||||
img
|
||||
width 100%
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
#featured-new-image-btn
|
||||
position absolute
|
||||
margin 20px
|
||||
|
||||
#new-feature-upload
|
||||
padding-top 4px
|
||||
background $white
|
||||
|
||||
svg
|
||||
fill $highlight
|
||||
|
||||
#edit-post
|
||||
width 100%
|
||||
max-width 880px
|
||||
margin 0 auto
|
||||
|
||||
#edit-post-wrapper
|
||||
//width 98.7%
|
||||
max-width 900px
|
||||
border-radius 5px
|
||||
//background $primary - 10%
|
||||
margin: 40px 0 40px 0
|
||||
overflow hidden
|
||||
|
||||
pre
|
||||
margin 0
|
||||
code
|
||||
font-family $monoType
|
||||
padding 5px
|
||||
border-radius 5px
|
||||
line-height 1.6em
|
||||
font-size 1.25em
|
||||
color $editorPrimary
|
||||
word-wrap normal
|
||||
white-space pre-wrap
|
||||
line-break normal
|
||||
-webkit-line-break normal
|
||||
-o-line-break normal
|
||||
-moz-line-break normal
|
||||
display inline-block
|
||||
width 100%
|
||||
max-width 900px
|
||||
min-height 200px
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Responsive
|
||||
-------------------------------
|
||||
* */
|
||||
@media only screen and (max-width: 800px)
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-date
|
||||
width 37.6%
|
||||
|
||||
@media only screen and (max-width: 768px)
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-date
|
||||
width 43.1%
|
||||
|
||||
#post-meta
|
||||
#edit-control
|
||||
max-width 100%
|
||||
|
||||
button
|
||||
width 9.91%
|
||||
|
||||
@media only screen and (max-width: 640px)
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-date
|
||||
width 42%
|
||||
|
||||
@media only screen and (max-width: 480px)
|
||||
#post-index
|
||||
#post-index-wrapper
|
||||
#post-index-menu
|
||||
a
|
||||
font-size 0.95em
|
||||
|
||||
label
|
||||
display none
|
||||
visibility hidden
|
||||
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-options
|
||||
margin 5px 0 0 0
|
||||
width 100%
|
||||
padding 0
|
||||
|
||||
#post-date
|
||||
width 89.2%
|
||||
|
||||
#post-meta
|
||||
#edit-control
|
||||
button
|
||||
width 9.91%
|
||||
|
||||
@media only screen and (max-width: 320px)
|
||||
#post-index
|
||||
#post-index-wrapper
|
||||
#post-index-menu
|
||||
a
|
||||
font-size 0.95em
|
||||
|
||||
label
|
||||
display none
|
||||
visibility hidden
|
||||
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post_title
|
||||
width 96.4%
|
||||
|
||||
#post-options
|
||||
margin 5px 0 0 0
|
||||
width 100%
|
||||
padding 0
|
||||
|
||||
#post-date
|
||||
width 83.1%
|
||||
|
||||
#post-meta
|
||||
#post_tags
|
||||
width 96.4%
|
||||
|
||||
#edit-control
|
||||
.content-editor-btn-icon
|
||||
svg.icons
|
||||
width 20px
|
||||
|
||||
.post-sumbit-btn
|
||||
svg.icons
|
||||
width 20px
|
||||
|
||||
button
|
||||
width 10%
|
||||
@ -0,0 +1,176 @@
|
||||
#settings-actions
|
||||
position: fixed
|
||||
width: 40%
|
||||
margin-top: -85px
|
||||
left: 50%
|
||||
margin-left: -20%
|
||||
#buttons
|
||||
width: 155px
|
||||
margin: 0 auto
|
||||
button
|
||||
//width 30%
|
||||
margin: 5px
|
||||
svg
|
||||
fill: $white
|
||||
button[data-render='false']
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
svg
|
||||
fill: $white
|
||||
|
||||
button[data-render='true']
|
||||
background: color.adjust($tertiary, $lightness: 60%)
|
||||
svg
|
||||
fill: color.adjust($primary, $lightness: -60%)
|
||||
|
||||
|
||||
#site-background
|
||||
margin: 0 0 10px 0
|
||||
|
||||
img
|
||||
width: 100%
|
||||
// border 5px solid $white
|
||||
border-radius: 0
|
||||
overflow: hidden
|
||||
cursor: pointer
|
||||
|
||||
label
|
||||
position: absolute
|
||||
color: $white
|
||||
margin: 5px
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
padding: 5px
|
||||
border-radius: 3px
|
||||
|
||||
input
|
||||
visibility: hidden
|
||||
display: none
|
||||
|
||||
#settings-index
|
||||
width: 94%
|
||||
max-width: 900px
|
||||
margin: 0 auto
|
||||
|
||||
#settings-index-wrapper
|
||||
padding: 0.75rem
|
||||
|
||||
button
|
||||
margin-top: 5px
|
||||
width: 100%
|
||||
height: 45px
|
||||
|
||||
#member-settings, #site-settings, #option-settings, #member-utils
|
||||
background: $primary
|
||||
padding: 5px
|
||||
border-radius: 5px 0 5px 0
|
||||
|
||||
label
|
||||
font-family: $monoType
|
||||
color: $white
|
||||
span
|
||||
color: $secondary
|
||||
|
||||
input
|
||||
width: 95%
|
||||
margin: 0 5px 10px 0
|
||||
height: 30px
|
||||
padding: 10px
|
||||
input#backup-upload
|
||||
visibility: hidden
|
||||
display: none
|
||||
.backup-meta
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
color: $white
|
||||
padding: 8px
|
||||
border-radius: 3px
|
||||
margin: 5px 0 0 0
|
||||
|
||||
width: 100%
|
||||
margin: 20px auto
|
||||
|
||||
#member-avatar-drop
|
||||
display: inline-block
|
||||
margin: 0 0 10px 0
|
||||
|
||||
img
|
||||
width: 100%
|
||||
// border 5px solid $white
|
||||
border-radius: 5px
|
||||
overflow: hidden
|
||||
cursor: pointer
|
||||
display: block
|
||||
margin-bottom: 2px
|
||||
|
||||
input
|
||||
visibility: hidden
|
||||
display: none
|
||||
#privacy-toggle
|
||||
width: 50%
|
||||
#render-toggle
|
||||
width: 50%
|
||||
|
||||
#member-info
|
||||
vertical-align: top
|
||||
display: inline-block
|
||||
width: 100%
|
||||
|
||||
input
|
||||
width: 95%
|
||||
margin: 0 5px 10px 0
|
||||
|
||||
textarea
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
width: 95%
|
||||
height: 155px
|
||||
color: $secondary
|
||||
padding: 10px
|
||||
|
||||
#option-settings
|
||||
#theme-settings
|
||||
a
|
||||
width: 95%
|
||||
margin: 0 5px 5px 0
|
||||
height: 25px
|
||||
padding: 10px
|
||||
display: inline-block
|
||||
|
||||
a[data-enabled='false']
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
color: $secondary
|
||||
border-radius: 3px
|
||||
|
||||
a[data-enabled='true']
|
||||
background: $secondary
|
||||
color: $primary
|
||||
border-radius: 3px
|
||||
|
||||
svg
|
||||
fill: $primary
|
||||
display: inline-block
|
||||
float: right
|
||||
|
||||
#mail-settings
|
||||
min-height: 240px
|
||||
|
||||
a.mail-option
|
||||
float: right
|
||||
font-family: $monoType
|
||||
font-size: 0.9em
|
||||
border-radius: 3px
|
||||
text-decoration: none
|
||||
margin: 0 0 0 5px
|
||||
// padding: 1px
|
||||
|
||||
a.mail-option[data-enabled='true']
|
||||
color: $highlight
|
||||
|
||||
a.mail-option[data-enabled='false']
|
||||
color: $white
|
||||
|
||||
input
|
||||
// width 94%
|
||||
margin: 0 5px 5px 0
|
||||
vertical-align: top
|
||||
|
||||
div[data-enabled='false']
|
||||
display: none
|
||||
visibility: hidden
|
||||
@ -1,176 +0,0 @@
|
||||
#settings-actions
|
||||
position fixed
|
||||
width 40%
|
||||
margin-top -85px
|
||||
left 50%
|
||||
margin-left -20%
|
||||
#buttons
|
||||
width 155px
|
||||
margin 0 auto
|
||||
button
|
||||
//width 30%
|
||||
margin 5px
|
||||
svg
|
||||
fill $white
|
||||
button[data-render='false']
|
||||
background $primary - 60%
|
||||
svg
|
||||
fill $white
|
||||
|
||||
button[data-render='true']
|
||||
background $tertiary + 50%
|
||||
svg
|
||||
fill $primary - 60%
|
||||
|
||||
|
||||
#site-background
|
||||
margin 0 0 10px 0
|
||||
|
||||
img
|
||||
width 100%
|
||||
// border 5px solid $white
|
||||
border-radius 0
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
|
||||
label
|
||||
position absolute
|
||||
color $white
|
||||
margin 5px
|
||||
background $primary - 60%
|
||||
padding 5px
|
||||
border-radius 3px
|
||||
|
||||
input
|
||||
visibility hidden
|
||||
display none
|
||||
|
||||
#settings-index
|
||||
width 94%
|
||||
max-width 900px
|
||||
margin 0 auto
|
||||
|
||||
#settings-index-wrapper
|
||||
padding 0.75rem
|
||||
|
||||
button
|
||||
margin-top 5px
|
||||
width 100%
|
||||
height 45px
|
||||
|
||||
#member-settings, #site-settings, #option-settings, #member-utils
|
||||
background $primary
|
||||
padding 5px
|
||||
border-radius 5px 0 5px 0
|
||||
|
||||
label
|
||||
font-family $monoType
|
||||
color $white
|
||||
span
|
||||
color $secondary
|
||||
|
||||
input
|
||||
width 95%
|
||||
margin 0 5px 10px 0
|
||||
height 30px
|
||||
padding 10px
|
||||
input#backup-upload
|
||||
visibility hidden
|
||||
display none
|
||||
.backup-meta
|
||||
background $primary - 60%
|
||||
color $white
|
||||
padding 8px
|
||||
border-radius 3px
|
||||
margin 5px 0 0 0
|
||||
|
||||
width 100%
|
||||
margin 20px auto
|
||||
|
||||
#member-avatar-drop
|
||||
display inline-block
|
||||
margin 0 0 10px 0
|
||||
|
||||
img
|
||||
width 100%
|
||||
// border 5px solid $white
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
display block
|
||||
margin-bottom 2px
|
||||
|
||||
input
|
||||
visibility hidden
|
||||
display none
|
||||
#privacy-toggle
|
||||
width 50%
|
||||
#render-toggle
|
||||
width 50%
|
||||
|
||||
#member-info
|
||||
vertical-align top
|
||||
display inline-block
|
||||
width 100%
|
||||
|
||||
input
|
||||
width 95%
|
||||
margin 0 5px 10px 0
|
||||
|
||||
textarea
|
||||
background $primary - 60%
|
||||
width 95%
|
||||
height 155px
|
||||
color $secondary
|
||||
padding 10px
|
||||
|
||||
#option-settings
|
||||
#theme-settings
|
||||
a
|
||||
width 95%
|
||||
margin 0 5px 5px 0
|
||||
height 25px
|
||||
padding 10px
|
||||
display inline-block
|
||||
|
||||
a[data-enabled='false']
|
||||
background $primary - 60%
|
||||
color $secondary
|
||||
border-radius 3px
|
||||
|
||||
a[data-enabled='true']
|
||||
background $secondary
|
||||
color $primary
|
||||
border-radius 3px
|
||||
|
||||
svg
|
||||
fill $primary
|
||||
display inline-block
|
||||
float right
|
||||
|
||||
#mail-settings
|
||||
min-height 240px
|
||||
|
||||
a.mail-option
|
||||
float right
|
||||
font-family $monoType
|
||||
font-size 0.9em
|
||||
border-radius 3px
|
||||
text-decoration none
|
||||
margin 0 0 0 5px
|
||||
// padding: 1px
|
||||
|
||||
a.mail-option[data-enabled='true']
|
||||
color $highlight
|
||||
|
||||
a.mail-option[data-enabled='false']
|
||||
color $white
|
||||
|
||||
input
|
||||
// width 94%
|
||||
margin 0 5px 5px 0
|
||||
vertical-align top
|
||||
|
||||
div[data-enabled='false']
|
||||
display none
|
||||
visibility hidden
|
||||
@ -0,0 +1,161 @@
|
||||
html, body
|
||||
background-color: color.adjust($primary, $lightness: -20%)
|
||||
font: 400 1em $baseType
|
||||
height: 100%
|
||||
|
||||
a
|
||||
font: 300 1em $baseType
|
||||
color: $secondary
|
||||
text-decoration: underline
|
||||
@include object-transitions(0.1s)
|
||||
|
||||
&:hover
|
||||
color: color.adjust($secondary, $lightness: 10%)
|
||||
|
||||
svg.icons
|
||||
width: 25px
|
||||
fill: $secondary
|
||||
|
||||
#notifications
|
||||
perspective: 1000px
|
||||
position: fixed
|
||||
z-index: 2000
|
||||
height: 55px
|
||||
width: 100%
|
||||
display: block
|
||||
align-items: center
|
||||
justify-content: center
|
||||
padding: 0
|
||||
margin-top: -55px
|
||||
#notifyMessage
|
||||
margin: 0 auto
|
||||
//ks-easing( "out-back" );
|
||||
transition: all 0.6s cubic-bezier(.83,.05,.28,1.0)
|
||||
//padding-top -125px
|
||||
height: 50px
|
||||
width: 500px
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
opacity: 1
|
||||
transform-style: preserve-3d
|
||||
transform: rotateX(-120deg)
|
||||
transform-origin: 50% 0
|
||||
#notify-good, #notify-lame, #notify-working
|
||||
display: none
|
||||
.notify-icon
|
||||
background: $black
|
||||
padding: 8px 5px 5px 5px
|
||||
border-radius: 5px 0 0 5px
|
||||
height: 30px
|
||||
width: 30px
|
||||
text-align: center
|
||||
border: 2px solid $white
|
||||
p
|
||||
color: $white
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
width: 400px
|
||||
height: 28px
|
||||
padding: 15px 0 0 5px
|
||||
border-radius: 0 5px 5px 0
|
||||
border: 2px solid $white
|
||||
text-align: center
|
||||
|
||||
.icons
|
||||
fill: $white
|
||||
|
||||
.notify-close
|
||||
transform-style: preserve-3d
|
||||
transform: rotateX(-120deg)
|
||||
|
||||
.notify-open
|
||||
transform-style: preserve-3d
|
||||
transform: rotateX(0deg)
|
||||
.blog-container
|
||||
width: 100%
|
||||
|
||||
.main-container
|
||||
margin: 0 auto
|
||||
z-index: 10
|
||||
position: relative
|
||||
|
||||
section
|
||||
header
|
||||
width: 100%
|
||||
max-width: 900px
|
||||
margin: 0 auto
|
||||
|
||||
#wrapper
|
||||
padding: 0.75rem
|
||||
|
||||
#left, #right
|
||||
width: 50%
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
|
||||
#the-logo
|
||||
width: 40px
|
||||
|
||||
#right
|
||||
text-align: right
|
||||
color: $white
|
||||
|
||||
a
|
||||
text-decoration-color: $highlight
|
||||
font-weight: 400
|
||||
|
||||
label#the-title
|
||||
font-size: 1.2em
|
||||
font-weight: 400
|
||||
color: $tertiary
|
||||
text-decoration: none
|
||||
display: block
|
||||
line-height: 0.8
|
||||
// word-break: break-all;
|
||||
|
||||
#dash-menu
|
||||
text-align: right
|
||||
|
||||
/* Mozilla based browsers */
|
||||
::-moz-selection
|
||||
background-color: $highlight
|
||||
color: $white
|
||||
|
||||
/* Works in Safari */
|
||||
::selection
|
||||
background-color: $highlight
|
||||
color: $white
|
||||
|
||||
/* Works in Opera */
|
||||
::-o-selection
|
||||
background-color: $highlight
|
||||
color: $white
|
||||
|
||||
::-ms-selection
|
||||
background-color: $highlight
|
||||
color: $white
|
||||
|
||||
/* Works in Internet Explorer */
|
||||
::-webkit-selection
|
||||
background-color: $highlight
|
||||
color: $white
|
||||
|
||||
//Responsive
|
||||
@media only screen and (max-width: 800px)
|
||||
.main-container
|
||||
section
|
||||
header
|
||||
#wrapper
|
||||
#left, #right
|
||||
display: inline-block
|
||||
|
||||
@media only screen and (max-width: 480px)
|
||||
.main-container
|
||||
section
|
||||
header
|
||||
#wrapper
|
||||
#left
|
||||
width: 30%
|
||||
|
||||
#right
|
||||
width: 70%
|
||||
@ -1,164 +0,0 @@
|
||||
html, body
|
||||
background-color $primary - 60%
|
||||
font 400 1em $baseType
|
||||
height 100%
|
||||
|
||||
a
|
||||
font 300 1em $baseType
|
||||
color $secondary
|
||||
text-decoration underline
|
||||
object-transitions(0.1s)
|
||||
|
||||
&:hover
|
||||
color $secondary + 10%
|
||||
|
||||
svg.icons
|
||||
width 25px
|
||||
fill $secondary
|
||||
|
||||
#notifications
|
||||
perspective 1000px
|
||||
position fixed
|
||||
z-index 2000
|
||||
height 55px
|
||||
width 100%
|
||||
display block
|
||||
align-items center
|
||||
justify-content center
|
||||
padding 0
|
||||
margin-top: -55px
|
||||
#notifyMessage
|
||||
margin 0 auto
|
||||
transition all 0.6s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" );
|
||||
//padding-top -125px
|
||||
height 50px;
|
||||
width 500px
|
||||
display: flex;
|
||||
align-items center
|
||||
justify-content center
|
||||
opacity: 1
|
||||
transform-style preserve-3d
|
||||
transform: rotateX(-120deg)
|
||||
transform-origin: 50% 0;
|
||||
#notify-good, #notify-lame, #notify-working
|
||||
display: none
|
||||
.notify-icon
|
||||
background $black
|
||||
padding 8px 5px 5px 5px
|
||||
border-radius 5px 0 0 5px
|
||||
height 30px
|
||||
width 30px
|
||||
text-align center
|
||||
border 2px solid $white
|
||||
p
|
||||
color $white
|
||||
background $primary - 60%
|
||||
width 400px
|
||||
height 28px
|
||||
padding 15px 0 0 5px
|
||||
border-radius 0 5px 5px 0
|
||||
border 2px solid $white
|
||||
text-align center
|
||||
|
||||
.icons
|
||||
fill $white
|
||||
|
||||
.notify-close
|
||||
transform-style preserve-3d
|
||||
transform: rotateX(-120deg)
|
||||
|
||||
.notify-open
|
||||
transform-style preserve-3d
|
||||
transform: rotateX(0deg)
|
||||
.blog-container
|
||||
width 100%
|
||||
|
||||
.main-container
|
||||
margin 0 auto
|
||||
z-index 10
|
||||
position relative
|
||||
|
||||
section
|
||||
header
|
||||
width 100%
|
||||
max-width 900px
|
||||
margin 0 auto
|
||||
|
||||
#wrapper
|
||||
padding 0.75rem
|
||||
|
||||
#left, #right
|
||||
width 50%
|
||||
display inline-block
|
||||
vertical-align top
|
||||
|
||||
#the-logo
|
||||
width 40px
|
||||
|
||||
#right
|
||||
text-align right
|
||||
color $white
|
||||
|
||||
a
|
||||
text-decoration-color $highlight
|
||||
font-weight: 400
|
||||
|
||||
label#the-title
|
||||
font-size 1.2em
|
||||
font-weight 400
|
||||
color $tertiary
|
||||
text-decoration none
|
||||
display block
|
||||
line-height 0.8
|
||||
// word-break: break-all;
|
||||
|
||||
#dash-menu
|
||||
text-align right
|
||||
|
||||
/* Mozilla based browsers */
|
||||
::-moz-selection
|
||||
background-color $highlight
|
||||
color $white
|
||||
|
||||
/* Works in Safari */
|
||||
::selection
|
||||
background-color $highlight
|
||||
color $white
|
||||
|
||||
/* Works in Opera */
|
||||
::-o-selection
|
||||
background-color $highlight
|
||||
color $white
|
||||
|
||||
::-ms-selection
|
||||
background-color $highlight
|
||||
color $white
|
||||
|
||||
/* Works in Internet Explorer */
|
||||
::-webkit-selection
|
||||
background-color $highlight
|
||||
color $white
|
||||
|
||||
/**
|
||||
-------------------------------
|
||||
-- Responsive
|
||||
-------------------------------
|
||||
* */
|
||||
@media only screen and (max-width: 800px)
|
||||
.main-container
|
||||
section
|
||||
header
|
||||
#wrapper
|
||||
#left, #right
|
||||
display inline-block
|
||||
|
||||
@media only screen and (max-width: 480px)
|
||||
.main-container
|
||||
section
|
||||
header
|
||||
#wrapper
|
||||
#left
|
||||
width 30%
|
||||
|
||||
#right
|
||||
width 70%
|
||||
@ -0,0 +1,18 @@
|
||||
$baseType: Helvetica, Arial, sans-serif
|
||||
$monoType: monospace, courier
|
||||
|
||||
h1, h2, h3
|
||||
color: $white
|
||||
|
||||
h1
|
||||
font-size: 2em
|
||||
font-weight: 400
|
||||
|
||||
h2
|
||||
font-size: 1.75em
|
||||
font-weight: 400
|
||||
|
||||
h3
|
||||
font-size: 1.5em
|
||||
font-weight: 300
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
@font-face
|
||||
font-weight 300
|
||||
font-style normal
|
||||
font-family 'Apercu'
|
||||
src url('fonts/Apercu-Light.eot'),
|
||||
url('fonts/Apercu-Light.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/Apercu-Light.woff2') format('woff2'),
|
||||
url('fonts/Apercu-Light.woff') format('woff'),
|
||||
url('fonts/Apercu-Light.ttf') format('truetype'),
|
||||
url('fonts/Apercu-Light.svg?#Apercu') format('svg')
|
||||
|
||||
@font-face
|
||||
font-weight 300
|
||||
font-style italic
|
||||
font-family 'Apercu'
|
||||
src url('fonts/Apercu-LightItalic.eot'),
|
||||
url('fonts/Apercu-LightItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/Apercu-LightItalic.woff2') format('woff2'),
|
||||
url('fonts/Apercu-LightItalic.woff') format('woff'),
|
||||
url('fonts/Apercu-LightItalic.ttf') format('truetype'),
|
||||
url('fonts/Apercu-LightItalic.svg?#Apercu') format('svg')
|
||||
|
||||
@font-face
|
||||
font-weight 400
|
||||
font-style normal
|
||||
font-family 'Apercu'
|
||||
src url('fonts/Apercu.eot'),
|
||||
url('fonts/Apercu.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/Apercu.woff2') format('woff2'),
|
||||
url('fonts/Apercu.woff') format('woff'),
|
||||
url('fonts/Apercu.ttf') format('truetype'),
|
||||
url('fonts/Apercu.svg?#Apercu') format('svg')
|
||||
|
||||
@font-face
|
||||
font-weight 400
|
||||
font-style italic
|
||||
font-family 'Apercu'
|
||||
src url('fonts/Apercu-Italic.eot'),
|
||||
url('fonts/Apercu-Italic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/Apercu-Italic.woff2') format('woff2'),
|
||||
url('fonts/Apercu-Italic.woff') format('woff'),
|
||||
url('fonts/Apercu-Italic.ttf') format('truetype'),
|
||||
url('fonts/Apercu-Italic.svg?#Apercu') format('svg')
|
||||
|
||||
@font-face
|
||||
font-weight 500
|
||||
font-style normal
|
||||
font-family 'Apercu'
|
||||
src url('fonts/Apercu-Medium.eot'),
|
||||
url('fonts/Apercu-Medium.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/Apercu-Medium.woff2') format('woff2'),
|
||||
url('fonts/Apercu-Medium.woff') format('woff'),
|
||||
url('fonts/Apercu-Medium.ttf') format('truetype'),
|
||||
url('fonts/Apercu-Medium.svg?#Apercu') format('svg')
|
||||
|
||||
@font-face
|
||||
font-weight 500
|
||||
font-style italic
|
||||
font-family 'Apercu'
|
||||
src url('fonts/Apercu-MediumItalic.eot'),
|
||||
url('fonts/Apercu-MediumItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/Apercu-MediumItalic.woff2') format('woff2'),
|
||||
url('fonts/Apercu-MediumItalic.woff') format('woff'),
|
||||
url('fonts/Apercu-MediumItalic.ttf') format('truetype'),
|
||||
url('fonts/Apercu-MediumItalic.svg?#Apercu') format('svg')
|
||||
|
||||
@font-face
|
||||
font-weight 600
|
||||
font-style normal
|
||||
font-weight bold
|
||||
font-family 'Apercu'
|
||||
src url('fonts/Apercu-Bold.eot'),
|
||||
url('fonts/Apercu-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/Apercu-Bold.woff2') format('woff2'),
|
||||
url('fonts/Apercu-Bold.woff') format('woff'),
|
||||
url('fonts/Apercu-Bold.ttf') format('truetype'),
|
||||
url('fonts/Apercu-Bold.svg?#Apercu') format('svg')
|
||||
|
||||
@font-face
|
||||
font-weight 600
|
||||
font-style italic
|
||||
font-weight bold
|
||||
font-family 'Apercu'
|
||||
src url('fonts/Apercu-BoldItalic.eot'),
|
||||
url('fonts/Apercu-BoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/Apercu-BoldItalic.woff2') format('woff2'),
|
||||
url('fonts/Apercu-BoldItalic.woff') format('woff'),
|
||||
url('fonts/Apercu-BoldItalic.ttf') format('truetype'),
|
||||
url('fonts/Apercu-Bold.svg?#Apercu') format('svg')
|
||||
|
||||
@font-face
|
||||
font-weight 400
|
||||
font-style normal
|
||||
font-family 'Apercu-Mono'
|
||||
src url('fonts/Apercu-Mono.eot'),
|
||||
url('fonts/Apercu-Mono.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/Apercu-Mono.woff2') format('woff2'),
|
||||
url('fonts/Apercu-Mono.woff') format('woff'),
|
||||
url('fonts/Apercu-Mono.ttf') format('truetype'),
|
||||
url('fonts/Apercu-Mono.svg?#Apercu') format('svg')
|
||||
|
||||
$baseType = Helvetica, Arial, sans-serif;
|
||||
$monoType = monospace, courier
|
||||
|
||||
h1, h2, h3
|
||||
color $white
|
||||
|
||||
h1
|
||||
font-size 2em
|
||||
font-weight 400
|
||||
|
||||
h2
|
||||
font-size 1.75em
|
||||
font-weight 400
|
||||
|
||||
h3
|
||||
font-size 1.5em
|
||||
font-weight 300
|
||||
|
||||
Loading…
Reference in New Issue