New layout

This commit is contained in:
Felipe M 2020-01-12 20:26:01 +01:00
parent 440e7a3994
commit f6a070f084
Signed by: fmartingr
GPG key ID: 716BC147715E716F
45 changed files with 661 additions and 758 deletions

5
static/js/main.js Normal file
View 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
View file

@ -0,0 +1,3 @@
body.home
img
border-radius: 12px

50
static/sass/_blog.sass Normal file
View 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
View 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
View 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

View 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
View file

@ -0,0 +1,4 @@
=box-sizing($type)
-webkit-box-sizing: $type
-moz-box-sizing: $type
box-sizing: $type

View 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
View 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
View 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

View 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
View file

@ -0,0 +1,9 @@
@import ./variables
@import ./mediaqueries
@import ./mixins
@import ./grid
@import ./layout
@import ./blog
@import ./portfolio
@import ./table
@import ./syntax