@import “fonts”; @import “rouge-github”;
body {
background-color: #fff; font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color:#727272; font-weight:400; padding: 10px; text-align: justify;
}
h1, h2, h3, h4, h5, h6 {
color:#222; margin:0 0 0px;
}
p, ul, ol, table, pre, dl {
margin:0 0 10px;
}
h1, h2, h3 {
line-height:1.1; text-align: center;
}
h1 {
font-size:28px;
}
h2 {
color:#393939;
}
h3, h4, h5, h6 {
color:#494949;
}
a {
color:#267CB9; text-decoration:none;
}
a:hover, a:focus {
color:#069; font-weight: bold;
}
a small {
font-size:11px; color:#777; // margin-top:-0.3em; display:block;
}
a:hover small {
color:#777;
}
.wrapper {
width:860px; margin:0 auto; display: grid; grid-template-columns: 280px auto; grid-template-rows: auto auto; grid-template-areas: '. section' '. footer'; justify-content: space-around; align-content: space-around; // background-color: #777;
}
blockquote {
border-left:1px solid #e5e5e5; margin:0; padding:0 0 0 10px; font-style:italic;
}
code, pre {
font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace; color:#333;
}
pre {
padding:5px 5px; background: #f8f8f8; border-radius:5px; border:1px solid #e5e5e5; overflow-x: auto;
}
table {
width:100%; border-collapse:collapse;
}
th, td {
text-align:left; padding:5px 10px; border-bottom:1px solid #e5e5e5;
}
dt {
color:#444; font-weight:700;
}
th {
color:#444;
}
header img {
width: 100%; max-width:270px; max-height: 270px; display: block; margin: auto;
}
img {
max-width: 100%; max-height: 40vh; display: block; margin: auto;
} header {
width:270px; float:left; position:fixed; // left: 10px; -webkit-font-smoothing:subpixel-antialiased; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; // background-color: gray;
} header div {
margin-top: 10px;
} header h1 {
text-align: center; padding-bottom: 10px;
} // header img-div { // // border-radius: 50%; // // border: 10px solid #267CB9; // background-color: #069; // max-height: 270px; // overflow: hidden; // width: 100%;
// } ul.downloads {
list-style:none; height:40px; padding:0; background: #f4f4f4; border-radius:5px; border:1px solid #e0e0e0; width:270px;
}
.downloads li {
width:89px; float:left; border-right:1px solid #e0e0e0; height:40px;
}
.downloads li:first-child a {
border-radius:5px 0 0 5px;
}
.downloads li:last-child a {
border-radius:0 5px 5px 0;
}
.downloads a {
line-height:1; font-size:11px; color:#676767; display:block; text-align:center; padding-top:6px; height:34px;
}
.downloads a:hover, .downloads a:focus {
color:#675C5C; font-weight:bold;
}
.downloads ul a:active {
background-color:#f0f0f0;
}
strong {
color:#222; font-weight:700;
}
.downloads li + li + li {
border-right:none; width:89px;
}
.downloads a strong {
font-size:14px; display:block; color:#222;
}
section {
width:500px; // float:right; padding-bottom:20px; grid-area: section; min-height: 80vh; // background-color: green;
} // header { // background-color: #069; // } small {
font-size:11px;
}
hr {
border:0; background:#e5e5e5; height:1px; margin:0 0 20px;
}
// footer { // width:270px; // float:left; // position:fixed; // bottom:50px; // -webkit-font-smoothing:subpixel-antialiased; // } footer {
width:500px; // float:right; padding-bottom:20px; grid-area:footer; // float: right; // position: fixed; // bottom: 0px; // width:270px; // -webkit-font-smoothing:subpixel-antialiased;
} @media print, screen and (max-width: 900px) {
footer,section { width: 410px; } .wrapper { width: 710px; grid-template-columns: 290px; justify-content: space-around; align-content: space-around; }
} @media print, screen and (max-width: 745px) {
.wrapper { width:auto; margin:0; // display: grid; justify-content: space-around; align-content: space-around; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: 'header' 'section' 'footer'; padding:10px; } header { grid-area: header; float: none; position: static;; width: auto; max-width: 90vw; } section { grid-area: section; width: auto; max-width: 90vw; min-height: auto; } footer { grid-area: footer; width: auto; max-width: 90vw; } // header, section, footer { // float:none; // position:static; // width:auto; // } // header { // // padding-right:320px; // display: grid; // grid-template-columns: 1fr; // grid-template-rows: auto minmax(auto, 25vh) minmax(auto, 65vh); // } section { border:1px solid #e5e5e5; border-width:1px 0; padding:20px 0; margin:0 0 20px; } header a small { display:inline; } pre, code { word-wrap:normal; } header { padding: 0; } body { word-wrap:break-word; padding: 10px; } header ul, header p.view { position:static; } // header ul { // position:absolute; // right:50px; // top:52px; // }
}
@media print, screen and (max-width: 480px) {
// body { // padding:10px; // } .downloads { width:99%; } .downloads li, .downloads li + li + li { width:33%; }
}
@media print {
body { padding:0.4in; font-size:12pt; color:#444; }
}