388 lines
6.2 KiB
Sass
388 lines
6.2 KiB
Sass
html body
|
|
font-family: 'Source Serif Pro', sans-serif
|
|
|
|
.list
|
|
text-align: left
|
|
padding-left: 4rem
|
|
|
|
|
|
.list h2
|
|
border-top: 1px solid #eee
|
|
padding-top: 1rem
|
|
|
|
|
|
.list h3
|
|
color: #999
|
|
|
|
|
|
.list-ul
|
|
list-style: none
|
|
margin: 0
|
|
padding: 0
|
|
padding-bottom: 4rem
|
|
|
|
|
|
@media (min-width: 768px)
|
|
.list h3
|
|
float: left
|
|
margin-top: 1.5rem
|
|
|
|
|
|
.list-ul
|
|
padding-left: 7rem
|
|
|
|
|
|
|
|
.list-ul li
|
|
padding: 1rem
|
|
|
|
|
|
.list-ul .list-date
|
|
font-weight: normal
|
|
padding-left: 0.6rem
|
|
padding-right: 0.6rem
|
|
color: white
|
|
background-color: var(--accent)
|
|
border-radius: 2rem
|
|
margin-top: 1.5rem
|
|
float: left
|
|
|
|
|
|
.list-ul div
|
|
margin-left: 60px
|
|
|
|
|
|
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover
|
|
background-color: white !important
|
|
border-color: var(--accent) !important
|
|
|
|
|
|
/** commento specific **/
|
|
.commento-root .commento-round-check input[type=checkbox]:checked+label:before,
|
|
.commento-root .commento-round-check input[type=radio]:checked+label:before
|
|
background: var(--accent) !important
|
|
border: 1px solid var(--accent) !important
|
|
|
|
|
|
.commento-root .commento-markdown-help tr td pre
|
|
padding: 0 !important
|
|
|
|
|
|
.commento-button
|
|
color: white !important
|
|
background: var(--accent) !important
|
|
|
|
|
|
.commento-google-button:before
|
|
content: "\f1a0"
|
|
font-family: FontAwesome
|
|
display: inline-block
|
|
padding-right: 3px
|
|
vertical-align: middle
|
|
|
|
.commento-github-button:before
|
|
content: "\f09b"
|
|
font-family: FontAwesome
|
|
display: inline-block
|
|
padding-right: 3px
|
|
vertical-align: middle
|
|
|
|
.commento-twitter-button:before
|
|
content: "\f099"
|
|
font-family: FontAwesome
|
|
display: inline-block
|
|
padding-right: 3px
|
|
vertical-align: middle
|
|
|
|
|
|
.commento-oauth-buttons button
|
|
width: auto !important
|
|
|
|
|
|
.commento-root a,
|
|
.commento-email-button
|
|
color: var(--accent) !important
|
|
|
|
|
|
.commento-name
|
|
font-size: 14pt !important
|
|
|
|
|
|
.commento-root .commento-card .commento-body p,
|
|
.commento-root textarea
|
|
font-size: 12pt !important
|
|
|
|
|
|
.commento-root *,
|
|
.commento-root-font *
|
|
font-family: 'Source Serif Pro', sans-serif !important
|
|
line-height: 1.7 !important
|
|
color: #333
|
|
text-align: left !important
|
|
|
|
|
|
/** index.html **/
|
|
|
|
ul
|
|
list-style: circle
|
|
|
|
|
|
div.highlight
|
|
padding-top: 1.5rem
|
|
padding-bottom: 1.5rem
|
|
|
|
|
|
.text-justify img
|
|
display: block
|
|
margin-left: auto
|
|
margin-right: auto
|
|
border: 1px solid #ccc !important
|
|
border-radius: 4px
|
|
margin-top: 1.5em
|
|
margin-bottom: 1.5em
|
|
|
|
|
|
figure img
|
|
margin-bottom: 0
|
|
|
|
|
|
figure
|
|
margin-bottom: 1.5em !important
|
|
|
|
|
|
figure figcaption
|
|
margin-top: 1rem !important
|
|
|
|
|
|
figure figcaption h4, figure figcaption p
|
|
text-align: center
|
|
margin-top: 0 !important
|
|
font-size: 1.7rem !important
|
|
font-style: italic
|
|
font-weight: normal
|
|
color: #aaa
|
|
|
|
|
|
.avatar-container
|
|
width: 50px
|
|
margin-left: 45px
|
|
|
|
.avatar-container .avatar-img-border
|
|
width: 100%
|
|
border-radius: 50%
|
|
margin-left: -50%
|
|
display: inline-block
|
|
box-shadow: 0 0 8px rgba(0, 0, 0, .8)
|
|
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8)
|
|
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8)
|
|
|
|
.avatar-container .avatar-img
|
|
width: 100%
|
|
border-radius: 50%
|
|
display: block
|
|
|
|
|
|
.intro .freshly-baked
|
|
visibility: hidden
|
|
|
|
|
|
.intro
|
|
margin-top: -150px
|
|
|
|
|
|
@media only screen and (min-width: 500px)
|
|
.intro .freshly-baked
|
|
visibility: visible
|
|
|
|
|
|
|
|
@media only screen and (min-width: 768px)
|
|
.intro
|
|
margin-top: -40px
|
|
|
|
|
|
.avatar-container
|
|
width: 100px
|
|
|
|
|
|
.avatar-container .avatar-img-border
|
|
width: 100%
|
|
box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
|
|
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
|
|
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
|
|
|
|
|
|
.avatar-container .avatar-img
|
|
width: 100%
|
|
|
|
|
|
|
|
/** general **/
|
|
|
|
main, blockquote
|
|
font-size: 14pt !important
|
|
line-height: 1.7
|
|
|
|
|
|
nav
|
|
font-family: 'Open Sans', sans-serif !important
|
|
font-size: 14px !important
|
|
line-height: 1.4 !important
|
|
|
|
|
|
h1, h2, h3, h4, h5, h6
|
|
line-height: 1.8 !important
|
|
font-weight: bold !important
|
|
|
|
|
|
h2
|
|
font-size: 26pt !important
|
|
|
|
|
|
h3
|
|
font-size: 22pt !important
|
|
|
|
|
|
h4
|
|
font-size: 16pt !important
|
|
|
|
|
|
h5
|
|
font-size: 14pt !important
|
|
|
|
|
|
h4 a
|
|
font-weight: normal
|
|
|
|
|
|
pre
|
|
font-size: 12pt !important
|
|
|
|
|
|
@media (max-width: 767px)
|
|
main, blockquote
|
|
font-size: 12pt !important
|
|
|
|
h2
|
|
font-size: 24pt !important
|
|
|
|
|
|
h3
|
|
font-size: 20pt !important
|
|
|
|
|
|
h4
|
|
font-size: 14pt !important
|
|
|
|
|
|
h5
|
|
font-size: 13pt !important
|
|
|
|
|
|
pre
|
|
font-size: 10pt !important
|
|
|
|
|
|
|
|
/* -- voor 20'+ breedbeeldschermen */
|
|
@media only screen and (min-width: 1600px)
|
|
main
|
|
max-width: 930px !important
|
|
|
|
|
|
.big-img .container
|
|
height: 250px !important
|
|
|
|
|
|
|
|
/* -- voor fatsoenlijke schermen */
|
|
@media only screen and (min-width: 768px)
|
|
/* indien header image, hoogte vergroten */
|
|
.big-img .container
|
|
height: 200px
|
|
|
|
|
|
|
|
blockquote
|
|
color: #888 !important
|
|
border-left: 5px solid var(--accent) !important
|
|
|
|
|
|
main
|
|
padding-top: 0 !important
|
|
|
|
|
|
main .text-justify p
|
|
margin: 0 0 20px !important
|
|
|
|
|
|
main .text-justify blockquote p
|
|
margin: 0 !important
|
|
|
|
|
|
a:link, a:visited
|
|
color: var(--accent) !important
|
|
|
|
|
|
.big-img
|
|
background: no-repeat center center
|
|
-webkit-background-size: cover
|
|
-moz-background-size: cover
|
|
background-size: cover
|
|
-o-background-size: cover
|
|
|
|
border-top: 2px solid lightgray
|
|
border-bottom: 1px solid var(--accent)
|
|
|
|
|
|
.item-tag
|
|
color: var(--accent)
|
|
background-color: white !important
|
|
border: 1px solid var(--accent)
|
|
font-size: 1.3rem
|
|
|
|
|
|
|
|
/* --- goodreads widget styles --- */
|
|
.goodreadswidget
|
|
border-bottom: 3px solid var(--accent)
|
|
padding: 0px
|
|
padding-bottom: 10px
|
|
|
|
|
|
.goodreadswidget h2
|
|
visibility: hidden
|
|
display: none
|
|
|
|
|
|
.goodreadswidget .gr_grid_branding
|
|
padding-right: 20px
|
|
font-size: 14pt !important
|
|
|
|
|
|
@media (min-width: 768px)
|
|
.gr_grid_book_container
|
|
height: 600px !important
|
|
|
|
|
|
|
|
.gr_grid_book_container
|
|
float: left
|
|
width: 25%
|
|
height: 300px
|
|
padding: 5px
|
|
overflow: hidden
|
|
|
|
|
|
.gr_grid_book_container img
|
|
width: 100%
|
|
height: 100%
|
|
|
|
|
|
.gr_grid_book_container:hover img
|
|
opacity: 0.3
|
|
|
|
|
|
.gr_grid_book_container img:hover
|
|
background: rgba(100, 100, 100, 0.7)
|