217 lines
3.3 KiB
SCSS
217 lines
3.3 KiB
SCSS
/*******************************************************************************
|
|
* Styles for the base elements of the theme.
|
|
******************************************************************************/
|
|
|
|
// Typography
|
|
|
|
a, table.table a {
|
|
color: $theme-color;
|
|
display: inline-block;
|
|
&:hover {
|
|
color: $theme-color;
|
|
text-decoration: underline;
|
|
}
|
|
&:hover:after {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// Math
|
|
|
|
.equation {
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
// Profile
|
|
|
|
.profile {
|
|
.address {
|
|
font-family: monospace;
|
|
font-size: 1.2rem;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Navbar customization
|
|
|
|
.navbar {
|
|
box-shadow: none;
|
|
border-bottom: 1px solid $grey-color-light;
|
|
opacity: 0.95;
|
|
}
|
|
.navbar.navbar-light {
|
|
// Remove link decoration
|
|
a {
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.navbar-nav .nav-item .nav-link {
|
|
&:hover {
|
|
color: $theme-color;
|
|
}
|
|
}
|
|
.navbar-nav .nav-item.active>.nav-link {
|
|
background-color: inherit;
|
|
color: $theme-color;
|
|
font-weight: bolder;
|
|
&:hover {
|
|
color: $theme-color;
|
|
}
|
|
}
|
|
.contact-icon {
|
|
font-size: 2rem;
|
|
a {
|
|
color: $grey-color-dark;
|
|
&:hover {
|
|
color: $theme-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-toggler {
|
|
.icon-bar {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background-color: $grey-color-dark;
|
|
border-radius: 1px;
|
|
margin-bottom: 4px;
|
|
transition: all 0.2s;
|
|
}
|
|
.top-bar {
|
|
transform: rotate(45deg);
|
|
transform-origin: 10% 10%;
|
|
}
|
|
.middle-bar {
|
|
opacity: 0;
|
|
}
|
|
.bottom-bar {
|
|
transform: rotate(-45deg);
|
|
transform-origin: 10% 90%;
|
|
}
|
|
}
|
|
|
|
.navbar-toggler.collapsed {
|
|
.top-bar {
|
|
transform: rotate(0);
|
|
}
|
|
.middle-bar {
|
|
opacity: 1;
|
|
}
|
|
.bottom-bar {
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
|
|
|
|
// News
|
|
|
|
.news table td {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
|
|
// Social (bottom)
|
|
|
|
.social {
|
|
text-align: center;
|
|
.contact-icon {
|
|
font-size: 4rem;
|
|
a {
|
|
color: $grey-color-dark;
|
|
&:hover {
|
|
color: $theme-color;
|
|
}
|
|
}
|
|
}
|
|
.contact-note {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
|
|
// Footer
|
|
|
|
footer.fixed-bottom {
|
|
color: lighten($grey-color, 25%);
|
|
background-color: $grey-color-dark;
|
|
font-size: 0.75rem;
|
|
line-height: 35px;
|
|
a {
|
|
color: white;
|
|
&:hover {
|
|
color: lighten($theme-color, 25%);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
footer.sticky-bottom {
|
|
border-top: 1px solid $grey-color-light;
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
|
|
// Blog
|
|
|
|
.header-bar {
|
|
border-bottom: 1px solid $grey-color-light;
|
|
text-align: center;
|
|
padding-top: 2rem;
|
|
padding-bottom: 5rem;
|
|
h1 {
|
|
color: $theme-color;
|
|
font-size: 5rem;
|
|
}
|
|
}
|
|
|
|
.post-list {
|
|
margin: 0;
|
|
margin-bottom: 40px;
|
|
padding: 0;
|
|
li {
|
|
border-bottom: 1px solid $grey-color-light;
|
|
list-style: none;
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
.post-meta {
|
|
color: $grey-color;
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0;
|
|
}
|
|
a {
|
|
color: black;
|
|
text-decoration: none;
|
|
&:hover {
|
|
color: $theme-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination .page-item.active .page-link {
|
|
background-color: $theme-color;
|
|
&:hover {
|
|
background-color: $theme-color;
|
|
}
|
|
}
|
|
|
|
|
|
// Distill
|
|
|
|
.distill {
|
|
a:hover {
|
|
border-bottom-color: $theme-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|