281 lines
4.9 KiB
CSS
281 lines
4.9 KiB
CSS
/* CSS for slidemenu
|
|
* Copyright © 2016, Chris Warrick. All rights reserved.
|
|
* License: 3-clause BSD
|
|
*/
|
|
|
|
/* Color preferences */
|
|
#header, nav#menu li.active a, nav#menu li a:hover, #menu-toggle,
|
|
button.form-control, a.btn {
|
|
background: #5670d4;
|
|
}
|
|
|
|
.entry-title, .entry-title a {
|
|
color: #5670d4;
|
|
}
|
|
|
|
nav#menu li.group, ul.pager li a, input.form-control {
|
|
border: 1px solid #5670d4;
|
|
}
|
|
|
|
nav#menu, nav#menu li a, #menu-toggle.active {
|
|
background: #ccf;
|
|
}
|
|
|
|
#menu-toggle:focus, #menu-toggle:active {
|
|
outline: none;
|
|
color: #ccf;
|
|
}
|
|
|
|
#menu-toggle.active:focus, #menu-toggle.active:active {
|
|
color: #00c;
|
|
}
|
|
/* End of color preferences */
|
|
|
|
/* Display CSS */
|
|
body {
|
|
font-size: 11pt;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
body, #menu-toggle, input.form-control, button.form-control, a.btn {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
#container {
|
|
max-width: 1200px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
@media (max-width: 840px) {
|
|
body {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 841px) and (max-width: 999px) {
|
|
#container {
|
|
max-width: 800px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1000px) and (max-width: 1400px) {
|
|
#container {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
|
|
#header {
|
|
margin-top: 0;
|
|
text-align: center;
|
|
min-height: 100px;
|
|
border-bottom-left-radius: 30px;
|
|
border-bottom-right-radius: 30px;
|
|
box-shadow: #000 0px 0px 20px;
|
|
}
|
|
|
|
#header #brand {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#header #brand a {
|
|
color: white;
|
|
line-height: 100px;
|
|
font-size: 60px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#footer {
|
|
text-align: center;
|
|
color: #555;
|
|
}
|
|
|
|
table {
|
|
margin: 0 auto;
|
|
width: 95%;
|
|
table-layout: fixed;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.table td, .table th {
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
.table th {
|
|
font-weight: bold;
|
|
}
|
|
|
|
nav#menu {
|
|
width: 300px;
|
|
height: 100%;
|
|
margin: 0;
|
|
transition: all 1s ease;
|
|
position: fixed;
|
|
left: 0px;
|
|
top: 0px;
|
|
overflow: auto;
|
|
box-shadow: #000 3px 3px 5px;
|
|
}
|
|
|
|
nav#menu ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
nav#menu ul li {
|
|
display: block;
|
|
margin-right: 0;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
nav#menu li a {
|
|
margin: 0;
|
|
width: 100%;
|
|
text-decoration: none;
|
|
display: block;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-radius: 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
nav#menu li a {
|
|
color: #000;
|
|
}
|
|
|
|
nav#menu li.active a {
|
|
color: white;
|
|
}
|
|
|
|
nav#menu li a:hover {
|
|
color: white;
|
|
}
|
|
|
|
nav#menu li .group-header {
|
|
height: 40px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
nav#menu li.group {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
nav#menu.hide {
|
|
left: -300px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#menu-toggle {
|
|
margin: 0;
|
|
height: 40px;
|
|
width: 100px;
|
|
text-align: center;
|
|
border: 0;
|
|
color: white;
|
|
border-bottom-right-radius: 20px;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
transition: all 1s ease;
|
|
box-shadow: #000 3px 3px 5px;
|
|
z-index: 2;
|
|
}
|
|
|
|
#menu-toggle.active {
|
|
color: #000;
|
|
left: 300px;
|
|
}
|
|
|
|
.entry-title, .entry-title a {
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-size: 20pt;
|
|
}
|
|
|
|
ul.pager {
|
|
display: block;
|
|
list-style: none;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
ul.pager li {
|
|
display: inline;
|
|
margin: 0 15px;
|
|
}
|
|
|
|
ul.pager li a {
|
|
display: inline-block;
|
|
border-radius: 12.5px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
text-decoration: none;
|
|
color: #000;
|
|
padding: 0 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
ul.pager .previous a:before {
|
|
content: "« ";
|
|
}
|
|
|
|
ul.pager .next a:after {
|
|
content: " »";
|
|
}
|
|
|
|
/* reset from base theme */
|
|
.postindexpager .pager .next:before,
|
|
.postindexpager .pager .previous:before,
|
|
.postpromonav .pager .next:after,
|
|
.postpromonav .pager .previous:before {
|
|
content: "";
|
|
}
|
|
|
|
.lead {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
input.form-control {
|
|
font-size: 15px;
|
|
line-height: 30px;
|
|
margin-right: 10px;
|
|
border-radius: 15px;
|
|
padding: 5px;
|
|
height: 20px;
|
|
}
|
|
|
|
button.form-control, a.btn {
|
|
border: 0;
|
|
border-radius: 15px;
|
|
height: 30px;
|
|
color: white;
|
|
display: inline-block;
|
|
padding: 0 10px;
|
|
font-size: 15px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
button.form-control:hover, a.btn:hover {
|
|
color: #ddd;
|
|
}
|
|
|
|
pre.code {
|
|
border: 1px solid #888;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
}
|
|
|
|
div.admonition, div.attention, div.caution, div.danger, div.error, div.hint, div.important, div.note, div.tip, div.warning, div.sidebar {
|
|
border: 1px solid #888;
|
|
}
|
|
|
|
div.admonition p.admonition-title, div.hint p.admonition-title, div.important p.admonition-title, div.note p.admonition-title, div.tip p.admonition-title, div.sidebar p.sidebar-title, div.attention p.admonition-title, div.caution p.admonition-title, div.danger p.admonition-title, div.error p.admonition-title, div.warning p.admonition-title {
|
|
border-bottom: 1px solid #888;
|
|
}
|