New layout
This commit is contained in:
parent
440e7a3994
commit
f6a070f084
45 changed files with 661 additions and 758 deletions
5
static/js/main.js
Normal file
5
static/js/main.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
// Fix for lektor highlight plugin
|
||||
var elements = document.querySelectorAll('div.highlight');
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
elements[i].classList.add('hll');
|
||||
}
|
3
static/sass/_about.sass
Normal file
3
static/sass/_about.sass
Normal file
|
@ -0,0 +1,3 @@
|
|||
body.home
|
||||
img
|
||||
border-radius: 12px
|
50
static/sass/_blog.sass
Normal file
50
static/sass/_blog.sass
Normal file
|
@ -0,0 +1,50 @@
|
|||
article.blog-post
|
||||
.title
|
||||
margin-bottom: 0.3em
|
||||
|
||||
.info
|
||||
font-size: 0.9em
|
||||
|
||||
.content
|
||||
margin-top: 1em
|
||||
text-align: justify
|
||||
|
||||
img
|
||||
border-radius: 6px
|
||||
display: block
|
||||
margin: 0 auto
|
||||
max-width: 100%
|
||||
|
||||
img
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
|
||||
|
||||
blockquote
|
||||
display: block
|
||||
background: #eee
|
||||
font-style: italic
|
||||
padding: 15px 20px 15px 20px
|
||||
font-family: Georgia, serif
|
||||
color: #666
|
||||
text-align: justify
|
||||
|
||||
p
|
||||
margin: 0
|
||||
|
||||
kbd
|
||||
padding: 0.1em 0.6em
|
||||
border: 1px solid #ccc
|
||||
font-size: 11px
|
||||
font-family: Arial,Helvetica,sans-serif
|
||||
background-color: #f7f7f7
|
||||
color: #333
|
||||
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset
|
||||
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset
|
||||
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset
|
||||
-moz-border-radius: 3px
|
||||
-webkit-border-radius: 3px
|
||||
border-radius: 3px
|
||||
display: inline-block
|
||||
margin: 0 0.1em
|
||||
text-shadow: 0 1px 0 #fff
|
||||
line-height: 1.4
|
||||
white-space: nowrap
|
43
static/sass/_grid.sass
Normal file
43
static/sass/_grid.sass
Normal file
|
@ -0,0 +1,43 @@
|
|||
*
|
||||
+box-sizing(border-box)
|
||||
|
||||
$pad: 20px
|
||||
|
||||
.grid
|
||||
background: white
|
||||
margin: 0 0 $pad 0
|
||||
|
||||
&:after
|
||||
// Or @extend clearfix
|
||||
content: ""
|
||||
display: table
|
||||
clear: both
|
||||
|
||||
[class*='col-']
|
||||
float: left
|
||||
padding-right: $pad
|
||||
|
||||
.grid &:last-of-type
|
||||
padding-right: 0
|
||||
|
||||
.col-2-3
|
||||
width: 66%
|
||||
|
||||
.col-1-3
|
||||
width: 33%
|
||||
|
||||
.col-1-2
|
||||
width: 49%
|
||||
|
||||
.col-1-4
|
||||
width: 24%
|
||||
|
||||
.col-1-8
|
||||
width: 12.5%
|
||||
|
||||
// Opt-in outside padding
|
||||
.grid-pad
|
||||
padding: $pad 0 $pad $pad
|
||||
|
||||
[class*='col-']:last-of-type
|
||||
padding-right: $pad
|
103
static/sass/_layout.sass
Normal file
103
static/sass/_layout.sass
Normal file
|
@ -0,0 +1,103 @@
|
|||
body
|
||||
font-family: $font-family
|
||||
font-size: $font-size-base
|
||||
line-height: 1.5em
|
||||
|
||||
.center
|
||||
margin: 0 auto
|
||||
max-width: 920px
|
||||
|
||||
a
|
||||
text-decoration: underilne
|
||||
color: $highlight-color
|
||||
|
||||
&.no-underline
|
||||
text-decoration: none
|
||||
|
||||
hr.light
|
||||
border: 0px
|
||||
margin: 1em 0 1em 0
|
||||
border-top: #CCC 1px solid
|
||||
|
||||
p:first-child
|
||||
margin-top: 0
|
||||
|
||||
.text-left
|
||||
text-align: left
|
||||
|
||||
.text-center
|
||||
text-align: center
|
||||
|
||||
.text-right
|
||||
text-align: right
|
||||
|
||||
.text-bold
|
||||
font-weight: bold
|
||||
|
||||
.text-size-small
|
||||
font-size: $font-size-small
|
||||
|
||||
.text-size-normal
|
||||
font-size: $font-size-normal
|
||||
|
||||
.text-size-enormous
|
||||
font-size: $font-size-enormous
|
||||
|
||||
.float-right
|
||||
float: right
|
||||
|
||||
.float-left
|
||||
float: left
|
||||
|
||||
.clearfloat
|
||||
clear: both
|
||||
|
||||
.display-block
|
||||
display: block
|
||||
|
||||
.block-info
|
||||
background-color: lighten($highlight-color, 40%)
|
||||
padding: 12px
|
||||
|
||||
// New
|
||||
.page-content
|
||||
display: flex
|
||||
margin: 0 auto
|
||||
flex-direction: row
|
||||
max-width: 980px
|
||||
|
||||
@media ($tablet)
|
||||
display: block
|
||||
width: 100%
|
||||
|
||||
header
|
||||
width: 25%
|
||||
text-align: center
|
||||
|
||||
@media ($tablet)
|
||||
width: 100%
|
||||
.avatar
|
||||
max-width: 125px
|
||||
|
||||
h1
|
||||
font-size: 1.3em
|
||||
|
||||
.avatar
|
||||
width: 70%
|
||||
margin: 0 auto
|
||||
border-radius: 12%
|
||||
|
||||
nav
|
||||
a
|
||||
display: block
|
||||
|
||||
.social
|
||||
list-style: none
|
||||
padding: 0
|
||||
|
||||
.main-content
|
||||
@media ($tablet)
|
||||
width: 100%
|
||||
|
||||
width: 75%
|
||||
padding-right: 16px
|
6
static/sass/_mediaqueries.sass
Normal file
6
static/sass/_mediaqueries.sass
Normal file
|
@ -0,0 +1,6 @@
|
|||
$desktop: "max-width: 992px"
|
||||
$until-desktop: "min-width: 768px"
|
||||
$tablet: "max-width: 767px"
|
||||
$until-tablet: "min-width: 767px"
|
||||
$mobile: "max-width: 480px"
|
||||
$until-mobile: "min-width: 480px"
|
4
static/sass/_mixins.sass
Normal file
4
static/sass/_mixins.sass
Normal file
|
@ -0,0 +1,4 @@
|
|||
=box-sizing($type)
|
||||
-webkit-box-sizing: $type
|
||||
-moz-box-sizing: $type
|
||||
box-sizing: $type
|
14
static/sass/_portfolio.sass
Normal file
14
static/sass/_portfolio.sass
Normal file
|
@ -0,0 +1,14 @@
|
|||
.project
|
||||
display: inline-block
|
||||
width: 49%
|
||||
|
||||
img
|
||||
max-height: 250px
|
||||
|
||||
&.project-work-sites
|
||||
width: 24%
|
||||
|
||||
@media ($tablet)
|
||||
.project
|
||||
display: block
|
||||
width: 100% !important
|
72
static/sass/_syntax.sass
Normal file
72
static/sass/_syntax.sass
Normal file
|
@ -0,0 +1,72 @@
|
|||
pre
|
||||
font-size: 84%
|
||||
line-height: 120%
|
||||
padding: 12px
|
||||
color: white
|
||||
overflow-y: scroll
|
||||
|
||||
pre .str, code .str
|
||||
color: #65b042
|
||||
|
||||
pre .kwd, code .kwd
|
||||
color: #e28964
|
||||
|
||||
pre .com, code .com
|
||||
color: #aeaeae
|
||||
font-style: italic
|
||||
|
||||
pre .typ, code .typ
|
||||
color: #89bdff
|
||||
|
||||
pre .lit, code .lit
|
||||
color: #3387cc
|
||||
|
||||
pre .pun, code .pun, pre .pln, code .pln
|
||||
color: #fff
|
||||
|
||||
pre .tag, code .tag
|
||||
color: #89bdff
|
||||
|
||||
pre .atn, code .atn
|
||||
color: #bdb76b
|
||||
|
||||
pre .atv, code .atv
|
||||
color: #65b042
|
||||
|
||||
pre .dec, code .dec
|
||||
color: #3387cc
|
||||
|
||||
ol.linenums
|
||||
margin-top: 0
|
||||
margin-bottom: 0
|
||||
color: #aeaeae
|
||||
|
||||
li
|
||||
&.L0, &.L1, &.L2, &.L3, &.L5, &.L6, &.L7, &.L8
|
||||
list-style-type: none
|
||||
|
||||
@media print
|
||||
pre .str, code .str
|
||||
color: #060
|
||||
pre .kwd, code .kwd
|
||||
color: #006
|
||||
font-weight: bold
|
||||
pre .com, code .com
|
||||
color: #600
|
||||
font-style: italic
|
||||
pre .typ, code .typ
|
||||
color: #404
|
||||
font-weight: bold
|
||||
pre .lit, code .lit
|
||||
color: #044
|
||||
pre .pun, code .pun
|
||||
color: #440
|
||||
pre .pln, code .pln
|
||||
color: #000
|
||||
pre .tag, code .tag
|
||||
color: #006
|
||||
font-weight: bold
|
||||
pre .atn, code .atn
|
||||
color: #404
|
||||
pre .atv, code .atv
|
||||
color: #060
|
18
static/sass/_table.sass
Normal file
18
static/sass/_table.sass
Normal file
|
@ -0,0 +1,18 @@
|
|||
table
|
||||
margin: 0 0 40px 0
|
||||
width: 100%
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2)
|
||||
|
||||
th
|
||||
background: $highlight-color
|
||||
color: white
|
||||
font-weight: bold
|
||||
|
||||
tr
|
||||
background: $lightgray
|
||||
|
||||
&:nth-of-type(odd)
|
||||
background: $darkgray
|
||||
|
||||
td, th
|
||||
padding: 6px
|
11
static/sass/_variables.sass
Normal file
11
static/sass/_variables.sass
Normal file
|
@ -0,0 +1,11 @@
|
|||
$highlight-color: #c24e4a
|
||||
$lightgray: #f6f6f6
|
||||
$darkgray: #e9e9e9
|
||||
|
||||
$font-family: "Antic Slab"
|
||||
|
||||
$font-size-base: 1.2em
|
||||
|
||||
$font-size-small: 0.8em
|
||||
$font-size-normal: 1.3em
|
||||
$font-size-enormous: 5em
|
9
static/sass/style.sass
Normal file
9
static/sass/style.sass
Normal file
|
@ -0,0 +1,9 @@
|
|||
@import ./variables
|
||||
@import ./mediaqueries
|
||||
@import ./mixins
|
||||
@import ./grid
|
||||
@import ./layout
|
||||
@import ./blog
|
||||
@import ./portfolio
|
||||
@import ./table
|
||||
@import ./syntax
|
Loading…
Add table
Add a link
Reference in a new issue