Branch: Tag:

2016-11-14

2016-11-14 07:59:26 by Pontus Östlund <ponost@roxen.com>

Major redesign of the refdoc. Also removed some obsolete stuff.

1: - body { + *, *:after, *:before { +  -webkit-box-sizing: border-box; +  -moz-box-sizing: border-box; +  box-sizing: border-box; + } +  + html { font-size: 90%; } +  + html, body {    margin: 0; -  +  padding: 0; +  height: 100%; +  max-width: 100%; +  min-width: 100%; + } +  + body {    color: #343434; -  background: #ffffff; -  font-family: arial,helvetica,sans-serif; -  font-size: 13px; +  background: #f3f3f3; +  font-family: arial, helvetica, sans-serif; +  font-size: 1rem; +  line-height: 1.5; +  width: 100%;   }    -  + .traditional { +  padding: 20px; +  background: white; + } +  + .traditional pre { +  position: relative; +  overflow: auto; + } +  + .traditional > dl > dd { +  margin-right: 40px; + } +  + /* First H in page */ + .traditional > dl > dt:first-child * { +  margin-top: 0; + } +  + .traditional > dl > dd:last-child { +  margin-bottom: 40px; + } +  + .traditional .header { +  padding: .6rem 1.5rem; +  background: #eee; + } +  + .traditional h1.header, +  .traditional h2.header, +  .traditional h3.header { +  margin: .8rem 0; +  } +  + .traditional h1.header { +  font-size: 2.6rem; + } +  .traditional h1.header .ms { +  font-size: 2.3rem; +  } +  + .traditional h2.header { +  font-size: 2.2rem; +  font-weight: normal; + } +  .traditional h2.header .ms { +  font-size: 1.9rem; +  } +  + .traditional h3.header { +  font-size: 1.8rem; +  font-weight: normal; + } +  .traditional h3.header .ms { +  font-size: 1.5rem; +  } +  + .traditional dd { +  max-width: 100%; +  overflow: auto; + } + .traditional dl dl dt { +  font-weight: bold; + } +  + header { +  padding: 20px; +  background: #323232; +  border-bottom: 6px solid #555; + } +  + header::after { +  display: block; +  content: ' '; +  clear: both; + } + header h1 { margin: 0; vertical-align: middle; } + header a.logo { +  opacity: .7; +  display: inline-block; +  width: 160px; +  height: 28px; +  margin-bottom: -5px; +  background: transparent url(images/pike-logo.png) left center no-repeat; +  background-image: linear-gradient(transparent, transparent), url(images/pike-logo.svg); +  background-size: contain; +  transition: opacity .2s ease-in; + } + header a.logo:hover { +  opacity: 1; + } +  + /* Hides the Pike text in the logo */ + header a span { +  display: none; + } +  + header #version { +  float: right; +  font-size: smaller; +  color: #999; +  margin-top: 5px; + } +  + footer { +  position: relative; +  z-index: 1; +  clear: both; +  padding: 20px; +  background: #f3f3f3; +  border-top: 1px solid #ddd; + } +  + footer #build-date { +  color: #999; +  font-size: smaller; + } +  + a { +  color: #0768b2; +  transition: color .2s ease-in; + } +  + a:hover, a:visited:hover { +  color: #111; + } +  + a:active { +  color: rgb(70, 104, 178); + } +  + a:visited { +  color: #627F94; + } +  + #page { +  padding: 0; +  background: #f3f3f3; +  overflow: hidden; + } +    blockquote { margin-bottom: 14px; }   .diff { padding: 6px }   .title { font-size: 14px; font-weight: bold; text-decoration: none }
26:   }      .navbar { -  background: #f0f0f0; +  overflow: auto;    float: left; -  margin-left: 22px; -  margin-top: 3px; -  min-width: 181px; -  overflow: hidden; +  width: 25%; +  border-right: 1px solid #ddd; +  margin-right: 0px; +  position: relative;   }    - .sidebar { -  background: #f0f0f0; -  font-size: 95%; -  margin: 3px; + .navbar nav .inner { +  padding: 20px; + } +  + .navbar .head { +  border-left: 5px solid #ddd; +  background: #e5e5e5; +  display: block; +  margin-bottom: 1px; +  padding: 5px 10px;    overflow: hidden; -  padding: 3px; +  text-overflow: ellipsis; +  transition: background .2s ease-in, border-color .2s ease-in;   } -  + .navbar .heading { +  display: block; +  color: #666; +  border-bottom: 1px dashed #aaa; +  margin-bottom: 6px; +  padding-bottom: 4px; +  margin-top: 24px; +  vertical-align: text-top; + } + .navbar .heading:before { +  content: '●'; +  margin-right: 5px; +  font-size: large; +  color: #666; +  vertical-align: top; +  margin-top: 0px; +  display: inline-block; +  line-height: 1; +  color: #999; + } + .navbar div + .head { +  margin-top: 18px; + }    - .left { -  float: left; + .navbar .head + div { +  margin-top: 6px;   }    - .right { + .navbar a .head:hover { +  background: #ccc; +  border-color: #bbb; + } +  + .navbar .top:before { +  content: '\27A4'; +  margin-right: 4px; +  display: inline-block; +  transform: rotate(-90deg); + } + .navbar nav { +  position: relative; +  width: auto; + } +  + .navbar.sticky { +  position: fixed; +  overflow: auto; +  height: 100%; +  top: 0px; +  left: 0px; + } +  + .navbar.sticky .inner { +  padding-bottom: 75px; + } +  + .navbar .sidebar { +  opacity: 1; +  transition: opacity .5s ease-out; + } + .navbar .sidebar.init { +  opacity: 0; + } +  + .navbar .sidebar a { display: block; text-decoration: none; } +  + .sidebar a.mod-protected { +  color: #999; + } +  + .sidebar .mod-protected::before { +  content: ' '; +  display: inline-block; +  opacity: .4; +  width: 15px; +  height: 15px; +  margin-right: 5px; +  margin-top: -1px; +  vertical-align: middle; +  background: url(images/eye-slash.svg) 0 50% no-repeat; +  background-size: contain; +  text-decoration: none; + } +  + .content { +  width: 75%;    float: right; -  text-align:right; +  position: relative;   }      .contentbox { -  margin-right: 23px; -  min-width: 520px; +     overflow: hidden; -  padding-left: 23px; -  padding-right: 23px, +  padding: 0 20px 20px 20px; +  border-left: 1px solid #ddd; +  margin-left: -1px;   }    -  + .contentbox::after { +  display: block; +  clear: both; +  content: ' '; + } +    .navbox { -  margin-right: 23px; -  min-width: 520px; -  overflow: hidden; +  width: auto; +  overflow: auto; +  padding: 15px 20px; +  background: #e9e9e9; +  border-bottom: 1px solid #ddd;   }      .navbox .sidebar { -  background: #e0e0e0; +    }    - pre,code { -  font-family: "andale mono", "monotype.com", "courier new", monospace; -  font-size: 90%; + /* Prev/next arrows */ + .prev, .next { +  text-decoration: none; +  font-family: monospace; +  font-size: 14px;   }    -  + .prev { +  float: left; + } +  + .next { +  float: right; + } +  + .prev span, .next span { +  display: inline-block; +  vertical-align: middle; +  margin-top: -2px; + } +  + .prev span { +  transform: rotate(180deg); +  -webkit-transform: rotate(180deg); +  -moz-transform: rotate(180deg); +  margin-right: 6px; + } +  + .next span { +  margin-left: 6px; + } +  + /* Muli-column for all built-in methods on the start page */ + ul.multicol { +  list-style: none; +  margin: 0; +  padding: 0; +  position: relative; +  -webkit-column-count: 4; +  -moz-column-count: 4; +  column-count: 4; +  -webkit-column-gap: 3em; +  -moz-column-gap: 3em; +  column-gap: 3em; + } + ul.multicol li { +  margin: 0; +  padding: 0; +  position: relative; + } + ul.multicol a { +  display: block; +  position: relative; +  -webkit-backface-visibility: hidden; +  transition: transform .2s ease-out; + } + ul.multicol a:hover { +  text-decoration: none; +  // font-weight: bold; +  -webkit-backface-visibility: hidden; + } +  + pre, code, tt, .monospace, .ms { +  font-family: menlo, monospace; +  font-size: .95rem; + } +  + svg a, svg tspan, svg text, svg .reference { +  font-size: 1rem; +  font-family: monospace !important; + } +  + hr { +  border: none; +  height: 1px; +  background: #ddd; +  color: #ddd; +  margin: 25px 0; + } +  + h1, h2, h3, h4 { +  color: #323232; +  line-height: 1; + } +    h1 { -  font-size: 26px; -  font-weight: bold; -  color: #000066; +  font-size: 1.7rem;   }    -  + /* The first H1 in the contentbox */ + .contentbox article:first-child > h1:first-child { +  margin-top: 25px; + } +    h2 { -  font-size: 125%; -  font-weight: bold; -  color: #000066; +  font-size: 1.45rem;    margin-bottom: 4px;   }      h3 { -  font-size: 110%; -  font-weight: bold; -  color: #000066; +  font-size: 1.10rem;   }      small { -  font-size: 75%; +  font-size: .8rem;   }      a.small { -  font-size: 75%; +  font-size: .8rem;    text-decoration: none;   }   
124:    font-family: "andale mono", "monotype.com", "courier new", monospace;    font-size: 75%;   } +  + /* Code doc */ +  + .fixme { color: #a00; } + .expr { color: #8E3DD3; } + .reference { color: #777; } + a.reference, a.reference:visited { color: #0087cc; } + .modifier { color: purple; font-weight: bold; } + .datatype { color: purple; font-weight: bold; } + .variable, .constant, .typedef, .inherit, .directive { +  color: #F000F0; +  font-weight: bold; + } + .parameter, .argument, .argument a { color: #0087cc; font-size: 1rem; } + .argument a { text-decoration: none; } + .method { color: #000066; } + .key { color: green; } +  + .head--doc, +  .head--fixme { font-weight: bold; color: #777; } + .head--fixme { color: #900; } + .homogen--name { font-size: large; } + .group--doc { margin-bottom: 0; } + .group--doc + hr { margin-top: 10px; } + dd[class^='body--'], + dd.example, + dt[class^='head--'] + dd { +  max-width: 100%; +  overflow-x: auto; + } +  + .inheritance-graph { +  position: relative; +  width: 100%; +  max-width: 100%; +  overflow-x: auto; +  padding-left: 40px; + } +  + table.box { +  color: #555; +  margin: 6px 0 12px; +  width: auto; +  border-collapse: collapse; +  border: 1px solid #ccc; + } + table.box tr { +  border-bottom: 1px dashed #bbb; + } + table.box td { +  vertical-align: top; +  padding: 10px 12px; +  border-left: 1px dashed #bbb; + } + table.box td *:first-child { margin-top: 0; } + table.box td *:last-child { margin-bottom: 0; } + table.box table.box { width: 100%; } +  + pre code .comment { color: #999; } + pre code .type { color: #00007B; font-weight: bold; } + pre code .string { color: #037F00; } + pre code .macro { color: #B04700; font-weight: bold; } + pre code .lang, +  pre code .const, +  pre code .mod { color: #863069; font-weight: bold; } + pre code .const { color: #0000ff; } + pre code .delim { color: #00008e; } + pre code .ns { font-weight: bold; } + pre code .nested { opacity: .7; transition: opacity .2s ease-in; } + pre code .nested:hover { opacity: 1; } +  + #burger { +  display: none; +  color: white; + } +  + @media screen and (max-width: 1024px) { +  ul.multicol { +  -webkit-column-count: 3; +  -moz-column-count: 3; +  column-count: 3; +  } + } +  + @media screen and (max-width: 800px) { +  .content { +  width: 100%; +  float: none; +  } +  .contentbox { +  border-left: none; +  margin-left: 0; +  } +  ul.multicol { +  -webkit-column-count: 2; +  -moz-column-count: 2; +  column-count: 2; +  } +  #version { display: none; } +  .navbox .prev, .navbox .next { +  float: none; +  display: block; +  text-align: center; +  white-space: nowrap; +  overflow: hidden; +  text-overflow: ellipsis; +  } +  .navbox .next { +  // text-align: right; +  } +  +  .inheritance-graph { +  padding-left: 0px; +  } +  +  #burger { +  display: block; +  float: right; +  color: white; +  padding: 10px 15px; +  margin-right: -15px; +  margin-top: -2px; +  cursor: pointer; +  border-radius: 2px; +  opacity: .6; +  transition: transform .3s ease-in-out; +  } +  +  body { +  padding-top: 65px; +  transition: padding-top .4s ease-out; +  } +  header { +  padding: 10px 20px; +  position:fixed; +  width: 100%; +  top: 0; +  left: 0; +  z-index: 1; +  transition: padding .3s ease-in; +  } +  +  header h1 { +  display: inline-block; +  margin-top: 7px; +  } +  +  header a { +  height: 26px; +  width: 120px; +  transition: transform .3s ease-in; +  } +  +  body.scrolled { +  padding-top: 46px; +  } +  +  body.scrolled header { +  box-shadow: 0px 1px 5px 0px rgba(0,0,0,.4); +  padding: 0px 20px; +  } +  +  body.scrolled header a { +  transform: scale(.9); +  } +  +  .menu-open { +  overflow: hidden; +  } +  +  .menu-open .navbar { +  display: block; +  } +  +  .menu-open #burger { +  transform: rotate(90deg); +  } +  +  .navbar { +  position: fixed; +  bottom: 0; +  top: 60px; +  right: -100%; +  left: 100%; +  min-width: 100.3%; +  z-index: 2; +  background: #323232; +  color: #ccc; +  overflow-y: auto; +  transition: right .2s ease-out, left .2s ease-in-out; +  } +  +  body.scrolled .navbar { +  top: 40px; +  } +  +  .menu-open .navbar { +  left: 0; +  right: 0; +  } +  +  .navbar .heading { +  color: #ccc; +  } +  +  .navbar .head { +  background: #424242; +  border-left-color: #3a3a3a; +  } +  +  .navbar a { +  color: #999; +  } +  +  .navbar .selected { +  color: #ccc; +  } +  +  dd[class^='body--'], +  dd.example, +  dt[class^='head--'] + dd { +  margin-left: 0px; +  } + } +  + @media screen and (max-width: 600px) { +  .traditional { +  padding: 10px; +  } +  +  .traditional dl dd { +  margin-left: 10px; +  margin-right: 0px; +  } + }