new_site/_sass/_base.scss

156 lines
2.4 KiB
SCSS

/*******************************************************************************
* Styles for the base elements of the theme.
******************************************************************************/
// Typography
a, table.table a {
color: $link-color;
display: inline-block;
&:hover {
color: $link-color;
text-decoration: underline;
}
&:hover:after {
width: 100%;
}
}
// Profile
.profile {
img {
box-shadow: 0 0 5px $grey-color;
}
.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: $link-color;
}
}
.navbar-nav .nav-item.active>.nav-link {
background-color: inherit;
color: $link-color;
font-weight: bolder;
&:hover {
color: $link-color;
}
}
.contact-icon {
font-size: 2rem;
a {
color: $grey-color-dark;
&:hover {
color: $link-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: $link-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($link-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;
}