453 lines
5.0 KiB
SCSS
453 lines
5.0 KiB
SCSS
|
$local-primary-color: #03A9F4;
|
||
|
$local-light-primary-color: #B3E5FC;
|
||
|
$local-dark-primary-color: #0288D1;
|
||
|
$local-accent-color: #FF5722;
|
||
|
|
||
|
$darkPrimaryColor: #0288D1;
|
||
|
$primaryColor: #03A9F4;
|
||
|
$lightPrimaryColor: #B3E5FC;
|
||
|
$textPrimaryColor: #FFFFFF;
|
||
|
$accentColor: #FF5722;
|
||
|
$primaryTextColor: #212121;
|
||
|
$secondaryTextColor: #727272;
|
||
|
$dividerColor: #B6B6B6;
|
||
|
|
||
|
|
||
|
h1 {
|
||
|
font-size: 2.5rem;
|
||
|
line-height: 3.75rem;
|
||
|
margin: 2.5rem 0 0 0;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
font-size: 2.5rem;
|
||
|
line-height: 3.75rem;
|
||
|
margin: 2.5rem 0 0 0;
|
||
|
}
|
||
|
|
||
|
h3 {
|
||
|
font-size: 2rem;
|
||
|
line-height: 3rem;
|
||
|
margin: 2rem 0 0 0;
|
||
|
}
|
||
|
|
||
|
h4 {
|
||
|
font-size: 1.75rem;
|
||
|
line-height: 2.63rem;
|
||
|
margin: 1.75rem 0 0 0;
|
||
|
}
|
||
|
|
||
|
h5 {
|
||
|
font-size: 1.5rem;
|
||
|
line-height: 2.25rem;
|
||
|
margin: 1.5rem 0 0 0;
|
||
|
}
|
||
|
|
||
|
h6 {
|
||
|
font-size: 1.25rem;
|
||
|
line-height: 1.88rem;
|
||
|
margin: 1.25rem 0 0 0;
|
||
|
}
|
||
|
|
||
|
h1 + p,
|
||
|
h2 + p,
|
||
|
h3 + p,
|
||
|
h4 + p,
|
||
|
h5 + p,
|
||
|
h6 + p {
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
|
||
|
h1 + ul,
|
||
|
h2 + ul,
|
||
|
h3 + ul,
|
||
|
h4 + ul,
|
||
|
h5 + ul,
|
||
|
h6 + ul {
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
|
||
|
h1 + ol,
|
||
|
h2 + ol,
|
||
|
h3 + ol,
|
||
|
h4 + ol,
|
||
|
h5 + ol,
|
||
|
h6 + ol {
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
|
||
|
p,
|
||
|
ul,
|
||
|
ol,
|
||
|
pre,
|
||
|
code {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
|
||
|
ul {
|
||
|
margin-left: 1.5rem;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
color: $local-accent-color;
|
||
|
|
||
|
&:hover {
|
||
|
color: $local-primary-color;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
a.btn {
|
||
|
&:hover {
|
||
|
color: black;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.tags a {
|
||
|
display: inline-block;
|
||
|
margin-bottom: 0.2rem;
|
||
|
padding: 0;
|
||
|
|
||
|
:hover {
|
||
|
color: black;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.logo {
|
||
|
height: 52px;
|
||
|
margin-top: 6px;
|
||
|
width: 52px;
|
||
|
|
||
|
path {
|
||
|
fill: white;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
nav {
|
||
|
background-color: $local-dark-primary-color;
|
||
|
}
|
||
|
|
||
|
.nav-wrapper a {
|
||
|
&:hover {
|
||
|
color: black;
|
||
|
}
|
||
|
|
||
|
i {
|
||
|
font-size: 1.3rem;
|
||
|
position: relative;
|
||
|
right: -0.05em;
|
||
|
}
|
||
|
|
||
|
span {
|
||
|
position: relative;
|
||
|
top: -0.15em;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
a.button-collapse i.mdi.mdi-menu {
|
||
|
font-size: 2.5em;
|
||
|
}
|
||
|
|
||
|
nav .nav-wrapper .mdi {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
li.disabled {
|
||
|
color: rgba(50, 50, 50, 0.2);
|
||
|
}
|
||
|
|
||
|
.tags a {
|
||
|
display: inline-block;
|
||
|
margin-bottom: .2rem;
|
||
|
padding: 0;
|
||
|
|
||
|
:hover {
|
||
|
color: black;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
//span.header-tags {
|
||
|
// float: right;
|
||
|
//}
|
||
|
span.list-blog-date {
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
span.badge {
|
||
|
float: none;
|
||
|
padding: 4px 6px 4px 6px;
|
||
|
position: relative;
|
||
|
right: 0;
|
||
|
}
|
||
|
|
||
|
span.badge.new::after {
|
||
|
content: '';
|
||
|
}
|
||
|
|
||
|
.footer-copyright .container a {
|
||
|
font-weight: 500;
|
||
|
|
||
|
&:hover {
|
||
|
color: white;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.header {
|
||
|
background-color: $local-primary-color;
|
||
|
text-align: center;
|
||
|
|
||
|
h1 {
|
||
|
color: #FFFFFF;
|
||
|
font-size: 4rem;
|
||
|
margin-bottom: 0;
|
||
|
margin-top: 0;
|
||
|
padding-top: 3rem;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
color: #FFFFFF;
|
||
|
font-size: 2rem;
|
||
|
margin-bottom: 0;
|
||
|
margin-top: 0;
|
||
|
padding-bottom: 2rem;
|
||
|
text-align: center;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.breadcrumbs {
|
||
|
margin-top: 1.5rem;
|
||
|
|
||
|
a {
|
||
|
vertical-align: top;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.btn {
|
||
|
background-color: $local-primary-color;
|
||
|
margin-bottom: 1rem;
|
||
|
|
||
|
&:hover {
|
||
|
background-color: $local-light-primary-color;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.btn i,
|
||
|
.btn-large i,
|
||
|
.btn-floating i,
|
||
|
.btn-large i,
|
||
|
.btn-flat i {
|
||
|
font-size: inherit;
|
||
|
}
|
||
|
|
||
|
i.left {
|
||
|
margin-right: 0.5rem;
|
||
|
}
|
||
|
|
||
|
i.right {
|
||
|
margin-left: 0.5rem;
|
||
|
}
|
||
|
|
||
|
span.badge.new {
|
||
|
background-color: $local-primary-color;
|
||
|
letter-spacing: 1px;
|
||
|
}
|
||
|
|
||
|
.list-blog-header {
|
||
|
position: relative;
|
||
|
|
||
|
h4 {
|
||
|
margin-bottom: 0.5rem;
|
||
|
}
|
||
|
|
||
|
img {
|
||
|
border-radius: 0.25rem;
|
||
|
clear: both;
|
||
|
display: block;
|
||
|
margin-top: 1rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.pagination {
|
||
|
display: inline-block;
|
||
|
text-align: center;
|
||
|
|
||
|
li.active {
|
||
|
background-color: $local-accent-color;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.previous {
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
.modular .features,
|
||
|
.modular .callout {
|
||
|
margin-top: 3rem;
|
||
|
|
||
|
h2 {
|
||
|
font-size: 1.75rem;
|
||
|
font-weight: 500;
|
||
|
line-height: 2rem;
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
|
||
|
h3 {
|
||
|
font-size: 1.5rem;
|
||
|
line-height: 1.75rem;
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
|
||
|
h4 {
|
||
|
font-size: 1.5rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.modular .callout h2 {
|
||
|
margin-top: 0.5em;
|
||
|
}
|
||
|
|
||
|
.modular .features .feature {
|
||
|
//float: left;
|
||
|
vertical-align: top;
|
||
|
}
|
||
|
|
||
|
.features.big .feature-content {
|
||
|
padding-right: 2rem;
|
||
|
|
||
|
&.push {
|
||
|
margin-left: 4rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.features.big .feature {
|
||
|
margin: 2rem 0;
|
||
|
|
||
|
h4 {
|
||
|
margin: 0;
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
i {
|
||
|
color: $local-accent-color;
|
||
|
float: left;
|
||
|
font-size: 3rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.features.small .feature {
|
||
|
margin-top: 2rem;
|
||
|
|
||
|
h4 {
|
||
|
font-size: 1.125rem;
|
||
|
}
|
||
|
|
||
|
i {
|
||
|
color: $local-accent-color;
|
||
|
font-size: 3rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.features.small .feature-content {
|
||
|
h4 {
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.feature-content {
|
||
|
p {
|
||
|
margin: 0;
|
||
|
text-align: left;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.callout {
|
||
|
background: #F0F0F0;
|
||
|
padding: 2rem 2rem;
|
||
|
|
||
|
.align-right {
|
||
|
float: right;
|
||
|
margin-left: 1rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
footer.page-footer {
|
||
|
background-color: $local-primary-color;
|
||
|
}
|
||
|
|
||
|
.centered {
|
||
|
display: block;
|
||
|
margin: 0 auto;
|
||
|
}
|
||
|
|
||
|
@media only screen and (min-width: 993px) {
|
||
|
.container {
|
||
|
width: 90%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.collapsible-header {
|
||
|
height: auto;
|
||
|
|
||
|
h1,
|
||
|
h2,
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h6 {
|
||
|
display: table-cell;
|
||
|
margin: 0;
|
||
|
padding-bottom: 0.5em;
|
||
|
padding-top: 0.5em;
|
||
|
vertical-align: top;
|
||
|
}
|
||
|
|
||
|
i {
|
||
|
font-size: inherit;
|
||
|
line-height: inherit;
|
||
|
margin-right: 0.5em;
|
||
|
width: auto;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.collapsible-body {
|
||
|
h1,
|
||
|
h2,
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h5,
|
||
|
h6 {
|
||
|
padding-left: 2rem;
|
||
|
}
|
||
|
|
||
|
iframe,
|
||
|
img {
|
||
|
padding-left: 2rem;
|
||
|
}
|
||
|
|
||
|
p:first-child {
|
||
|
padding-top: 1.5em;
|
||
|
}
|
||
|
|
||
|
p:last-child {
|
||
|
padding-bottom: 1.5em;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
padding: 0 2rem 1em 2em;
|
||
|
}
|
||
|
|
||
|
ul:first-child {
|
||
|
padding-top: 1.5em;
|
||
|
}
|
||
|
|
||
|
ul:last-child {
|
||
|
padding-bottom: 1.5em;
|
||
|
}
|
||
|
|
||
|
ul,
|
||
|
ol {
|
||
|
padding: 0 2rem 1em 2em;
|
||
|
}
|
||
|
}
|