11 changed files with 292 additions and 35 deletions
@ -0,0 +1,256 @@ |
|||
@import 'fonts.css'; |
|||
|
|||
body{ |
|||
margin:2em auto; |
|||
min-width: 1080px; |
|||
max-width: 950px; |
|||
font-family: 'Basker'; |
|||
font-size: 14pt; |
|||
line-height: 1.7; |
|||
letter-spacing: 0.25pt; |
|||
color: rgba(40,40,40,1); |
|||
/*background-color: #d0bba0;*/ |
|||
background-color: #ecddcb; |
|||
} |
|||
h1, h2, h3, h4, h5, h6{ |
|||
font-family: 'Belgika-reg'; |
|||
margin-top:1.5em; |
|||
} |
|||
header#banner{ |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
header#banner h1{ |
|||
font-family: 'Syne'; |
|||
font-size: 7.5vw; |
|||
line-height:1.25; |
|||
margin: 0.7em 0; |
|||
} |
|||
header#banner h1 a{ |
|||
text-decoration: none; |
|||
color: darkgoldenrod !important; |
|||
} |
|||
nav#menu{ |
|||
width: calc(100% + 20em); |
|||
text-align: center; |
|||
margin:0 0 0 -11em; |
|||
} |
|||
nav#menu li{ |
|||
width: 10vw; |
|||
height:10vw; |
|||
margin:1em 0; |
|||
padding:1em; |
|||
font-size: 75%; |
|||
line-height: 1.4; |
|||
color: rgba(40,40,40,1); |
|||
border:1px solid; |
|||
border-radius: 1em; |
|||
list-style: none; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
nav#menu li.active{ |
|||
background-color: #95d1e6; |
|||
} |
|||
nav#menu li.pagelink{ |
|||
height: 2.5em; |
|||
} |
|||
nav#menu a{ |
|||
text-decoration: none; |
|||
} |
|||
|
|||
section#content{ |
|||
margin: 4em; |
|||
} |
|||
article{ |
|||
margin: 3em 0 2em 0; |
|||
padding: 2em 3em 0; |
|||
border-top: 1px solid; |
|||
} |
|||
article:first-child{ |
|||
background-color: #95d1e6; |
|||
padding-bottom: 3em; |
|||
margin-bottom: -3em; |
|||
} |
|||
/* start button */ |
|||
article button { |
|||
width: auto; |
|||
top:1em; |
|||
margin:1.5em auto; |
|||
padding:1.5em 3em; |
|||
background-color: rgba(40,40,40,1); |
|||
border:1px solid rgba(40,40,40,1); |
|||
border-radius: 0.5em; |
|||
} |
|||
article a button{ |
|||
font-family: 'Belgika-reg'; |
|||
text-decoration: none !important; |
|||
color: white !important; |
|||
font-size: 16px; |
|||
letter-spacing: 0.1em; |
|||
} |
|||
article a button:hover{ |
|||
cursor: pointer; |
|||
} |
|||
article h2.page-title a{ |
|||
text-decoration: none; |
|||
} |
|||
|
|||
/* big boxes for the section titles */ |
|||
h1.category{ |
|||
width: calc(100% - 4em); |
|||
background-color: rgba(40,40,40,1); |
|||
color:white; |
|||
border-radius: 1em; |
|||
padding: 2em 2em 3em 2em; |
|||
margin: 2em 0; |
|||
font-family: "Basker"; |
|||
font-size: 32px; |
|||
text-align: center; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
/* next & prev buttons */ |
|||
ul.navprevnext{ |
|||
position: relative; |
|||
display: inline-block; |
|||
width: calc(100% - 4em); |
|||
margin:3em 0 0; |
|||
} |
|||
ul.navprevnext li.prev, |
|||
ul.navprevnext li.next, |
|||
ul.navprevnext li.done, |
|||
ul.navprevnext li.none{ |
|||
position: relative; |
|||
width: calc(50% - 17em); |
|||
height: 150px; |
|||
top:0; |
|||
background-color: #95d1e6; |
|||
border-radius: 1em; |
|||
padding:1em 3em; |
|||
font-size: 9pt; |
|||
line-height: 1.4; |
|||
list-style: none; |
|||
border:1px solid black; |
|||
} |
|||
ul.navprevnext a{ |
|||
text-decoration: none; |
|||
} |
|||
ul.navprevnext li.prev:before, |
|||
ul.navprevnext li.next:before{ |
|||
display: block; |
|||
font-style:italic; |
|||
margin:0 0 1em 0; |
|||
} |
|||
ul.navprevnext li.prev:before{ |
|||
content:'←\00a0\00a0\00a0Go to the previous page'; |
|||
margin-left:-1.75em; |
|||
} |
|||
ul.navprevnext li.next:before{ |
|||
content:'Go to the next page\00a0\00a0\00a0→'; |
|||
margin-right:-2em; |
|||
text-align: right; |
|||
} |
|||
ul.navprevnext li.none, |
|||
ul.navprevnext li.prev{ |
|||
float: left; |
|||
left:-9.5em; |
|||
} |
|||
ul.navprevnext li.next, |
|||
ul.navprevnext li.done{ |
|||
float: right; |
|||
right: -9.5em; |
|||
} |
|||
/* you finished this section */ |
|||
ul.navprevnext li.done{ |
|||
background-color: rgba(40,40,40,1); |
|||
color: white; |
|||
} |
|||
ul.navprevnext li.none{ |
|||
background-color: transparent; |
|||
color: transparent; |
|||
border:0; |
|||
} |
|||
|
|||
.footnote{ |
|||
font-size: smaller; |
|||
} |
|||
footer{ |
|||
font-style: normal; |
|||
font-size: smaller; |
|||
clear: both; |
|||
} |
|||
|
|||
/* general elements */ |
|||
a, |
|||
a:visited, |
|||
a:hover, |
|||
a:active{ |
|||
color: rgba(40,40,40,1); |
|||
} |
|||
a.nounderline{ |
|||
text-decoration: none; |
|||
} |
|||
|
|||
hr{ |
|||
width: 100%; |
|||
border:0; |
|||
border-bottom:1px solid rgba(40,40,40,1); |
|||
margin:3em auto; |
|||
} |
|||
sup{ |
|||
line-height: 0; |
|||
font-size: 75%; |
|||
padding-left: 0.2em; |
|||
} |
|||
img, |
|||
video{ |
|||
width: calc(100% + 6em); |
|||
margin: 2em 0 2em -3em; |
|||
} |
|||
blockquote{ |
|||
font-style: italic; |
|||
font-size: 125%; |
|||
line-height: 1.9; |
|||
} |
|||
pre, |
|||
code{ |
|||
color: #c600c6; |
|||
} |
|||
|
|||
.lastupdate{ |
|||
font-size: smaller; |
|||
margin:4em 0; |
|||
} |
|||
|
|||
p { |
|||
word-break: break-word; |
|||
} |
|||
|
|||
/* @media (max-width:770px) { |
|||
nav#menu li { |
|||
width: 50vw; |
|||
height: 24vw; |
|||
font-size: 2em; |
|||
margin: 1em 0.1em; |
|||
} |
|||
|
|||
header#banner h1 { |
|||
font-size: 10vw; |
|||
} |
|||
|
|||
body{ |
|||
margin-left: 9.4vw; |
|||
} |
|||
|
|||
} |
|||
|
|||
@media (max-width:1024px) { |
|||
body { |
|||
margin-left: 13vw; |
|||
} |
|||
|
|||
nav#menu li { |
|||
height: 14vw; |
|||
} |
|||
} */ |
|||
Loading…
Reference in new issue