Browse Source

move 404 to error, archive, comment, contact, footer, help and mixin to scss (#19)

scss-migration
Cian Butler 5 years ago
committed by GitHub
parent
commit
06c64e8be2
14 changed files with 428 additions and 360 deletions
  1. +200
    -0
      source/css/_partial/archive.scss
  2. +0
    -150
      source/css/_partial/archive.styl
  3. +8
    -0
      source/css/_partial/comment.scss
  4. +0
    -6
      source/css/_partial/comment.styl
  5. +154
    -0
      source/css/_partial/contact.scss
  6. +0
    -135
      source/css/_partial/contact.styl
  7. +0
    -0
      source/css/_partial/error.scss
  8. +22
    -0
      source/css/_partial/footer.scss
  9. +0
    -17
      source/css/_partial/footer.styl
  10. +5
    -0
      source/css/_partial/help.scss
  11. +0
    -4
      source/css/_partial/help.styl
  12. +34
    -0
      source/css/_util/mixin.scss
  13. +0
    -31
      source/css/_util/mixin.styl
  14. +5
    -17
      source/css/style.scss

+ 200
- 0
source/css/_partial/archive.scss View File

@@ -0,0 +1,200 @@
.archives {
clearfix()
.article:first-child {
margin: 20px 0
}
}

.archive-year-wrap,
.archive-category-wrap,
.archive-tag-wrap,
.layout-title {
font-size: 1.4em
margin: block-margin 0 20px 0
@media mq-mini {
padding: 0 15px
font-size: 1.2em
}
.fa {
margin-right: 3px
}
.archive-year {
color: color-default
&:hover {
color: color-link
}
}
}
.layout-wrap-inner {
@media mq-mini {
padding: 0 15px
}
}

.archive-article {
clearfix()
avoid-column-break()
@extend .block
padding: 0
margin-bottom: 15px
&.archive-type-summary {
padding: 15px
.article-entry {
padding: 0
p {
margin: 12px 0
}
}
}
.archive-article-content,
.archive-article-thumbnail {
display: table-cell
vertical-align: top
@media mq-mini {
display: block
}
}
.archive-article-thumbnail {
width: 160px
padding-right: 15px
@media mq-mini {
width: 100%
padding-bottom: 15px
}
.thumbnail {
height: 0
width: 100%
padding-bottom: 56.25%
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)
}
}
}
}

.archive-year {
@extend .block-caption
}

.archive-article-header {
a {
@extend .link-dark
}
}

.archive-article-title {
display: block
font-size: 1.6em
line-height: 1.4em
margin-bottom: 12px
@media mq-mini {
display: block
font-size: 1.3em
}
}

.archive-article-date {
display: block
margin-top: 8px
}

.layout-wrap-inner {
&.list-categories {
ul {
margin-left: 15px
list-style: none
li,
.category-list-child {
padding: 10px 0
font-size: font-size
border-bottom: 1px solid border-color
a {
color: color-sidebar-text
}
}
ul, ol {
list-style: none
li {
border: none
&:last-child {
padding-bottom: 0px
}
}
}
li {
a {
&: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
}
}
}
}
}
&.tag-cloud {
a {
@extend .link-dark
margin-right: 8px
&:before {
content: '#'
}
}
}
}

#page-nav {
clearfix()
margin: block-margin auto
text-align: center
color: color-grey
overflow: hidden
a, span {
height: 32px
padding: 0 10px
line-height: 32px
text-align: center
display: inline-block
border-radius: 2px
}
a {
color: color-grey
text-decoration: none
&:hover {
color: white
background: color-link
}
}
.page-number {
display: inline-block
@media mq-mini {
display: none
}
}
.current {
color: color-default
font-weight: bold
}
.space {
color: color-border
}
}

+ 0
- 150
source/css/_partial/archive.styl View File

@@ -1,150 +0,0 @@
.archives
clearfix()
.article:first-child
margin: 20px 0

.archive-year-wrap,
.archive-category-wrap,
.archive-tag-wrap,
.layout-title
font-size: 1.4em
margin: block-margin 0 20px 0
@media mq-mini
padding: 0 15px
font-size: 1.2em
.fa
margin-right: 3px
.archive-year
color: color-default
&:hover
color: color-link
.layout-wrap-inner
@media mq-mini
padding: 0 15px

.archive-article
clearfix()
avoid-column-break()
@extend $block
padding: 0
margin-bottom: 15px
&.archive-type-summary
padding: 15px
.article-entry
padding: 0
p
margin: 12px 0
.archive-article-content,
.archive-article-thumbnail
display: table-cell
vertical-align: top
@media mq-mini
display: block
.archive-article-thumbnail
width: 160px
padding-right: 15px
@media mq-mini
width: 100%
padding-bottom: 15px
.thumbnail
height: 0
width: 100%
padding-bottom: 56.25%
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)

.archive-year
@extend $block-caption

.archive-article-header
a
@extend $link-dark

.archive-article-title
display: block
font-size: 1.6em
line-height: 1.4em
margin-bottom: 12px
@media mq-mini
display: block
font-size: 1.3em

.archive-article-date
display: block
margin-top: 8px

.layout-wrap-inner
&.list-categories
ul
margin-left: 15px
list-style: none
li,
.category-list-child
padding: 10px 0
font-size: font-size
border-bottom: 1px solid border-color
a
color: color-sidebar-text
ul, ol
list-style: none
li
border: none
&:last-child
padding-bottom: 0px
li
a
&: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
&.tag-cloud
a
@extend $link-dark
margin-right: 8px
&:before
content: '#'

#page-nav
clearfix()
margin: block-margin auto
text-align: center
color: color-grey
overflow: hidden
a, span
height: 32px
padding: 0 10px
line-height: 32px
text-align: center
display: inline-block
border-radius: 2px
a
color: color-grey
text-decoration: none
&:hover
color: white
background: color-link
.page-number
display: inline-block
@media mq-mini
display: none
.current
color: color-default
font-weight: bold
.space
color: color-border

+ 8
- 0
source/css/_partial/comment.scss View File

@@ -0,0 +1,8 @@
#comments {
@extend .block
padding: article-padding
margin: block-margin 0
a {
color: color-link
}
}

+ 0
- 6
source/css/_partial/comment.styl View File

@@ -1,6 +0,0 @@
#comments
@extend $block
padding: article-padding
margin: block-margin 0
a
color: color-link

+ 154
- 0
source/css/_partial/contact.scss View File

@@ -0,0 +1,154 @@
#contactform, .form {
margin-top: 2rem
}

.field {
border: none
position: relative
z-index: 1
display: inline-block
margin: 0 1em 0 0
width: 30%
vertical-align: top
overflow: hidden
}

.button {
margin: 16px
}

.message {
width: 96%
}

.field:nth-child(3) {
margin-right: 0
}

.input {
position: relative
text-align: center
display: block
float: right
border: none
border-radius: 0
-webkit-appearance: none /* for box shadows to show on iOS */
width: 100%
background: transparent
padding: 0.5em
margin-bottom: 2em
z-index: 100
opacity: 0
height: 2rem
}

textarea.input {
resize: none
padding-bottom: 0
}

.input:focus {
outline: none
}

.label {
display: inline-block
float: right
color: hsla(221,72%,55%,1)
font-weight: bold
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
width: 100%
position: absolute
text-align: left
padding: 0.5em 0
pointer-events: none
font-size: 1em
}

.label::before,
.label::after {
content: ''
position: absolute
width: 100%
left: 0
}

.label::before {
height: 100%
background: #fff
top: 0
-webkit-transform: translate3d(0, -100%, 0)
transform: translate3d(0, -100%, 0)
-webkit-transition: -webkit-transform 0.3s
transition: transform 0.3s
}

.label::after {
height: 2px
background: hsla(221,72%,55%,1)
top: 100%
-webkit-transition: opacity 0.3s
transition: opacity 0.3s
}

.label-content {
position: relative
display: block
width: 100%
padding: 0
-webkit-transform-origin: 0 0
transform-origin: 0 0
-webkit-transition: -webkit-transform 0.3s, color 0.3s
transition: transform 0.3s, color 0.3s
}

.input:focus,
.input--filled .input {
opacity: 1
-webkit-transition: opacity 0s 0.3s
transition: opacity 0s 0.3s
}

.input:focus + .label::before,
.input--filled .label::before {
-webkit-transform: translate3d(0, 0, 0)
transform: translate3d(0, 0, 0)
}

.input:focus + .label::after,
.input--filled .label::after {
opacity: 0
}

.input:focus + .label .label-content,
.input--filled .label .label-content {
color: #cbc4c6
-webkit-transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1)
transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1)
}

.button, input[type=submit] {
-webkit-appearance: none
border: none
border-radius: 0.25rem
padding: 0.5em
color: #fff
background-color: hsla(221,72%,55%,1)
transition: all 0.3s ease-out
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18),0 2px 10px 0 rgba(0,0,0,0.15)
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18),0 2px 10px 0 rgba(0,0,0,0.15)
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18),0 2px 10px 0 rgba(0,0,0,0.15)
}

.button:hover, .button:focus, .button:active {
-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.23),0 4px 15px 0 rgba(0,0,0,0.20)
-moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.23),0 4px 15px 0 rgba(0,0,0,0.20)
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.23),0 4px 15px 0 rgba(0,0,0,0.20)
}

+ 0
- 135
source/css/_partial/contact.styl View File

@@ -1,135 +0,0 @@
#contactform, .form
margin-top: 2rem

.field
border: none
position: relative
z-index: 1
display: inline-block
margin: 0 1em 0 0
width: 30%
vertical-align: top
overflow: hidden

.button
margin: 16px

.message
width: 96%

.field:nth-child(3)
margin-right: 0

.input
position: relative
text-align: center
display: block
float: right
border: none
border-radius: 0
-webkit-appearance: none /* for box shadows to show on iOS */
width: 100%
background: transparent
padding: 0.5em
margin-bottom: 2em
z-index: 100
opacity: 0
height: 2rem

textarea.input
resize: none
padding-bottom: 0

.input:focus
outline: none

.label
display: inline-block
float: right
color: hsla(221,72%,55%,1)
font-weight: bold
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
width: 100%
position: absolute
text-align: left
padding: 0.5em 0
pointer-events: none
font-size: 1em

.label::before,
.label::after
content: ''
position: absolute
width: 100%
left: 0

.label::before
height: 100%
background: #fff
top: 0
-webkit-transform: translate3d(0, -100%, 0)
transform: translate3d(0, -100%, 0)
-webkit-transition: -webkit-transform 0.3s
transition: transform 0.3s

.label::after
height: 2px
background: hsla(221,72%,55%,1)
top: 100%
-webkit-transition: opacity 0.3s
transition: opacity 0.3s

.label-content
position: relative
display: block
width: 100%
padding: 0
-webkit-transform-origin: 0 0
transform-origin: 0 0
-webkit-transition: -webkit-transform 0.3s, color 0.3s
transition: transform 0.3s, color 0.3s

.input:focus,
.input--filled .input
opacity: 1
-webkit-transition: opacity 0s 0.3s
transition: opacity 0s 0.3s

.input:focus + .label::before,
.input--filled .label::before
-webkit-transform: translate3d(0, 0, 0)
transform: translate3d(0, 0, 0)

.input:focus + .label::after,
.input--filled .label::after
opacity: 0

.input:focus + .label .label-content,
.input--filled .label .label-content
color: #cbc4c6
-webkit-transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1)
transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1)

.button, input[type=submit]
-webkit-appearance: none
border: none
border-radius: 0.25rem
padding: 0.5em
color: #fff
background-color: hsla(221,72%,55%,1)
transition: all 0.3s ease-out
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18),0 2px 10px 0 rgba(0,0,0,0.15)
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18),0 2px 10px 0 rgba(0,0,0,0.15)
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18),0 2px 10px 0 rgba(0,0,0,0.15)

.button:hover, .button:focus, .button:active
-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.23),0 4px 15px 0 rgba(0,0,0,0.20)
-moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.23),0 4px 15px 0 rgba(0,0,0,0.20)
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.23),0 4px 15px 0 rgba(0,0,0,0.20)

source/css/_partial/404.styl → source/css/_partial/error.scss View File


+ 22
- 0
source/css/_partial/footer.scss View File

@@ -0,0 +1,22 @@
#footer {
padding: 20px 0
border-top: 1px solid color-border
color: color-default
font-size: font-size + 2
text-align: center
.outer {
margin-bottom: 0
}
a {
color: color-link
text-decoration: none
&:hover {
text-decoration: underline
}
}
}

#footer-info {
line-height: line-height
font-size: 0.85em
}

+ 0
- 17
source/css/_partial/footer.styl View File

@@ -1,17 +0,0 @@
#footer
padding: 20px 0
border-top: 1px solid color-border
color: color-default
font-size: font-size + 2
text-align: center
.outer
margin-bottom: 0
a
color: color-link
text-decoration: none
&:hover
text-decoration: underline

#footer-info
line-height: line-height
font-size: 0.85em

+ 5
- 0
source/css/_partial/help.scss View File

@@ -0,0 +1,5 @@
#help img {
padding: 5px;
float: left;
max-width: 200px;
}

+ 0
- 4
source/css/_partial/help.styl View File

@@ -1,4 +0,0 @@
#help img
padding: 5px;
float: left;
max-width: 200px;

+ 34
- 0
source/css/_util/mixin.scss View File

@@ -0,0 +1,34 @@
// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
@mixin hide-text() {
text-indent: 100%
white-space: nowrap
overflow: hidden
}

// http://codepen.io/shshaw/full/gEiDt
@mixin absolute-center(width, height = width) {
// margin: auto
// position: absolute
// top: 50%
// top: 0
// left: 0
// bottom: 0
// right: 0
// width: width
// height: height
// overflow: auto
width: width
height: height
position: absolute
top: 50%
left: 50%
margin-top: width * -0.5
margin-left: height * -0.5
}

@mixin avoid-column-break() {
vendor("column-break-inside", avoid, only: webkit)
page-break-inside: avoid // for firefox
overflow: hidden // fix for firefox
break-inside: avoid-column
}

+ 0
- 31
source/css/_util/mixin.styl View File

@@ -1,31 +0,0 @@
// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
hide-text()
text-indent: 100%
white-space: nowrap
overflow: hidden

// http://codepen.io/shshaw/full/gEiDt
absolute-center(width, height = width)
// margin: auto
// position: absolute
// top: 50%
// top: 0
// left: 0
// bottom: 0
// right: 0
// width: width
// height: height
// overflow: auto
width: width
height: height
position: absolute
top: 50%
left: 50%
margin-top: width * -0.5
margin-left: height * -0.5

avoid-column-break()
vendor("column-break-inside", avoid, only: webkit)
page-break-inside: avoid // for firefox
overflow: hidden // fix for firefox
break-inside: avoid-column

+ 5
- 17
source/css/style.scss View File

@@ -55,7 +55,7 @@ code {
float: left;
}

.right, .alignright{
.right, .alignright {
float: right;
}

@@ -79,15 +79,9 @@ code {
}

#main {
@media $mq-normal {
column($main-column)
}
@media $mq-tablet{
/* if sidebar
column(main-column-tablet)
else
width: 100% */
}
@media $mq-normal {
column($main-column)
}
}

@import "_extend"
@@ -101,11 +95,5 @@ code {
@import "_partial/footer"
@import "_partial/sidebar"
@import "_partial/insight"
@import "_partial/404"
@import "_partial/error"
@import "_highlight/index"

/* if sidebar is left
#main
float: right
#profile
float: right */

Loading…
Cancel
Save