181 lines
3.0 KiB
CSS
181 lines
3.0 KiB
CSS
/** index.html **/
|
|
|
|
img.bordered {
|
|
border: 1px solid var(--accent);
|
|
}
|
|
|
|
.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 **/
|
|
|
|
/* -- Typography overrides bootstrap.
|
|
-- default CSS included, can't override less settings from https://getbootstrap.com/docs/3.3/customize/ */
|
|
main {
|
|
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;
|
|
}
|
|
|
|
pre {
|
|
font-size: 12pt !important;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
main {
|
|
font-size: 12pt !important;
|
|
}
|
|
h2 {
|
|
font-size: 24pt !important;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 20pt !important;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 14pt !important;
|
|
}
|
|
|
|
pre {
|
|
font-size: 10pt !important;
|
|
}
|
|
}
|
|
|
|
/* -- voor 20'+ breedbeeldschermen */
|
|
@media only screen and (min-width: 1600px) {
|
|
/* de main content verhogen */
|
|
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: 150px;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
|
|
.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);
|
|
}
|
|
|
|
/* --- goodreads widget styles --- */
|
|
.gr_grid_container {
|
|
}
|
|
|
|
.gr_grid_book_container {
|
|
/* customize book cover container div here */
|
|
float: left;
|
|
width: 98px;
|
|
height: 160px;
|
|
padding: 0px 0px;
|
|
border: 1px solid black;
|
|
margin: 5px;
|
|
overflow: hidden;
|
|
}
|