---
---
@import "{{ site.theme }}";
// Custom variables
$anya-blue: #2188ff;
$anya-dark: #24292e;
$anya-gray: #373f52;
$anya-light: #f6f8fa;
.wrapper {
max-width: 960px;
}
header {
width: 270px;
.main-nav {
margin-top: 20px;
a.button {
display: block;
width: 100%;
padding: 8px 12px;
margin-bottom: 10px;
font-size: 14px;
color: #676767;
background-color: #f6f8fa;
border: 1px solid #e1e4e8;
border-radius: 6px;
text-align: center;
text-decoration: none;
&:hover {
color: #2E8B57;
background-color: #f3f4f6;
border-color: #2E8B57;
}
}
}
}
section {
width: 650px;
}
.highlight {
background-color: #f6f8fa;
border-radius: 6px;
padding: 16px;
pre {
margin-bottom: 0;
}
}
.project-logo {
max-width: 180px;
margin-bottom: 1.5rem;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.05);
}
}
.page-header {
background: linear-gradient(120deg, $anya-blue, $anya-dark);
padding: 2rem 1rem;
.project-name {
margin-top: 0;
margin-bottom: 0.1rem;
font-weight: 600;
}
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.8;
}
.btn {
margin: 0.5rem;
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
}
}
.main-content {
max-width: 64rem;
padding: 2rem 6rem;
margin: 0 auto;
font-size: 1.1rem;
@media screen and (max-width: 64em) {
padding: 2rem 4rem;
}
@media screen and (max-width: 42em) {
padding: 2rem 1rem;
}
h1, h2, h3, h4, h5, h6 {
color: $anya-dark;
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
}
code {
background-color: $anya-light;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 85%;
}
pre {
background-color: $anya-light;
padding: 1rem;
border-radius: 3px;
> code {
background-color: transparent;
padding: 0;
}
}
}
.support-info {
margin-top: 3rem;
padding: 1.5rem;
background: $anya-light;
border-radius: 6px;
border: 1px solid darken($anya-light, 10%);
h2 {
color: $anya-dark;
margin-top: 0;
margin-bottom: 1rem;
}
p {
margin: 0.5rem 0;
color: $anya-gray;
}
}
.site-footer {
padding-top: 2rem;
margin-top: 2rem;
border-top: solid 1px darken($anya-light, 10%);
.site-footer-owner {
display: block;
font-weight: 600;
color: $anya-dark;
}
.site-footer-version {
display: block;
margin-top: 0.5rem;
color: $anya-gray;
}
}
.quick-nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
.nav-card {
background: $anya-light;
padding: 1.5rem;
border-radius: 6px;
border: 1px solid darken($anya-light, 10%);
transition: transform 0.2s ease;
&:hover {
transform: translateY(-3px);
}
h3 {
margin-top: 0;
color: $anya-dark;
}
p {
color: $anya-gray;
margin-bottom: 0;
}
}
}