Joel Marcey ea9e0757ff Add initial GitHub pages infra for RocksDB documentation move and update. ()
This is the initial commit with the templates necessary to have our RocksDB user documentation hosted on GitHub pages.

Ensure you meet requirements here: https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/#requirements

Then you can run this right now by doing the following:

```
% bundle install
% bundle exec jekyll serve --config=_config.yml,_config_local_dev.yml
```

Then go to: http://127.0.0.1:4000/

Obviously, this is just the skeleton. Moving forward we will do these things in separate pull requests:

- Replace logos with RocksDB logos
- Update the color schemes
- Add current information on rocksdb.org to markdown in this infra
- Migrate current Wodpress blog to Jekyll and Disqus comments
- Etc.
2016-08-24 15:35:38 -07:00

493 lines
7.6 KiB
SCSS

body {
background: $secondary-bg;
color: $text;
font: normal #{$base-font-size}/#{$base-line-height} $base-font-family;
height: 100vh;
text-align: left;
text-rendering: optimizeLegibility;
}
img {
max-width: 100%;
}
article {
p {
img {
max-width: 100%;
display:block;
margin-left: auto;
margin-right: auto;
}
}
}
a {
border-bottom: 1px dotted $primary-bg;
color: $text;
text-decoration: none;
-webkit-transition: background 0.3s, color 0.3s;
transition: background 0.3s, color 0.3s;
}
blockquote {
padding: 15px 30px 15px 15px;
margin: 20px 0 0 10px;
background-color: rgba(204, 122, 111, 0.1);
border-left: 10px solid rgba(191, 87, 73, 0.2);
}
#fb_oss a {
border: 0;
}
h1, h2, h3, h4 {
font-family: $header-font-family;
font-weight: 900;
}
.navPusher {
border-top: $header-height + $header-ptop + $header-pbot solid $primary-bg;
height: 100%;
left: 0;
position: relative;
z-index: 99;
}
.homeContainer {
background: $primary-bg;
color: $primary-overlay;
a {
color: $primary-overlay;
}
.homeSplashFade {
color: white;
}
.homeWrapper {
padding: 2em 10px;
text-align: left;
.wrapper {
margin: 0px auto;
max-width: $content-width;
padding: 0 20px;
}
.projectLogo {
img {
height: 100px;
margin-bottom: 0px;
}
}
h1#project_title {
font-family: $header-font-family;
font-size: 300%;
letter-spacing: -0.08em;
line-height: 1em;
margin-bottom: 80px;
}
h2#project_tagline {
font-family: $header-font-family;
font-size: 200%;
letter-spacing: -0.04em;
line-height: 1em;
}
}
}
.wrapper {
margin: 0px auto;
max-width: $content-width;
padding: 0 10px;
}
.projectLogo {
display: none;
img {
height: 100px;
margin-bottom: 0px;
}
}
section#intro {
margin: 40px 0;
}
.fbossFontLight {
font-family: $base-font-family;
font-weight: 300;
font-style: normal;
}
.fb-like {
display: block;
margin-bottom: 20px;
width: 100%;
}
.center {
display: block;
text-align: center;
}
.mainContainer {
background: $secondary-bg;
overflow: auto;
.mainWrapper {
padding: 4vh 10px;
text-align: left;
.allShareBlock {
padding: 10px 0;
.pluginBlock {
margin: 12px 0;
padding: 0;
}
}
a {
&:hover,
&:focus {
background: $primary-bg;
color: $primary-overlay;
}
}
em, i {
font-style: italic;
}
strong, b {
font-weight: bold;
}
h1 {
font-size: 300%;
line-height: 1em;
padding: 1.4em 0 1em;
text-align: left;
}
h2 {
font-size: 250%;
line-height: 1em;
margin-bottom: 20px;
padding: 1.4em 0 20px;
text-align: left;
& {
border-bottom: 1px solid darken($primary-bg, 10%);
color: darken($primary-bg, 10%);
font-size: 22px;
padding: 10px 0;
}
&.blockHeader {
border-bottom: 1px solid white;
color: white;
font-size: 22px;
margin-bottom: 20px;
padding: 10px 0;
}
}
h3 {
font-size: 150%;
line-height: 1.2em;
padding: 1em 0 0.8em;
}
h4 {
font-size: 130%;
line-height: 1.2em;
padding: 1em 0 0.8em;
}
p {
padding: 0.8em 0;
}
ul {
list-style: disc;
}
ol, ul {
padding-left: 24px;
li {
padding-bottom: 4px;
padding-left: 6px;
}
}
strong {
font-weight: bold;
}
.post {
position: relative;
.katex {
font-weight: 700;
}
&.basicPost {
margin-top: 30px;
}
a {
color: $primary-bg;
&:hover,
&:focus {
color: #fff;
}
}
h2 {
border-bottom: 4px solid $primary-bg;
font-size: 130%;
}
h3 {
border-bottom: 1px solid $primary-bg;
font-size: 110%;
}
ol {
list-style: decimal outside none;
}
.post-header {
padding: 1em 0;
h1 {
font-size: 150%;
line-height: 1em;
padding: 0.4em 0 0;
a {
border: none;
}
}
.post-meta {
color: $primary-bg;
font-family: $header-font-family;
text-align: center;
}
}
.postSocialPlugins {
padding-top: 1em;
}
.docPagination {
background: $primary-bg;
bottom: 0px;
left: 0px;
position: absolute;
right: 0px;
.pager {
display: inline-block;
width: 50%;
}
.pagingNext {
float: right;
text-align: right;
}
a {
border: none;
color: $primary-overlay;
display: block;
padding: 4px 12px;
&:hover {
background-color: $secondary-bg;
color: $text;
}
.pagerLabel {
display: inline;
}
.pagerTitle {
display: none;
}
}
}
}
.posts {
.post {
margin-bottom: 6vh;
}
}
}
}
#integrations_title {
font-size: 250%;
margin: 80px 0;
}
.ytVideo {
height: 0;
overflow: hidden;
padding-bottom: 53.4%; /* 16:9 */
padding-top: 25px;
position: relative;
}
.ytVideo iframe,
.ytVideo object,
.ytVideo embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
@media only screen and (min-width: 480px) {
h1#project_title {
font-size: 500%;
}
h2#project_tagline {
font-size: 250%;
}
.projectLogo {
img {
margin-bottom: 10px;
height: 200px;
}
}
.homeContainer .homeWrapper {
padding-left: 10px;
padding-right: 10px;
}
.mainContainer {
.mainWrapper {
.post {
h2 {
font-size: 180%;
}
h3 {
font-size: 120%;
}
.docPagination {
a {
.pagerLabel {
display: none;
}
.pagerTitle {
display: inline;
}
}
}
}
}
}
}
@media only screen and (min-width: 900px) {
.homeContainer {
.homeWrapper {
position: relative;
#inner {
box-sizing: border-box;
max-width: 600px;
padding-right: 40px;
}
.projectLogo {
align-items: center;
bottom: 0;
display: flex;
justify-content: flex-end;
left: 0;
padding: 2em 20px 4em;
position: absolute;
right: 20px;
top: 0;
img {
height: 100%;
max-height: 250px;
}
}
}
}
}
@media only screen and (min-width: 1024px) {
.mainContainer {
.mainWrapper {
.post {
box-sizing: border-box;
display: block;
.post-header {
h1 {
font-size: 250%;
}
}
}
.posts {
.post {
margin-bottom: 4vh;
width: 100%;
}
}
}
}
}
@media only screen and (min-width: 1200px) {
.homeContainer {
.homeWrapper {
#inner {
max-width: 750px;
}
}
}
.wrapper {
max-width: 1100px;
}
}
@media only screen and (min-width: 1500px) {
.homeContainer {
.homeWrapper {
#inner {
max-width: 1100px;
padding-bottom: 40px;
padding-top: 40px;
}
}
}
.wrapper {
max-width: 1400px;
}
}