summaryrefslogtreecommitdiff
path: root/_sass/_base.scss
diff options
context:
space:
mode:
Diffstat (limited to '_sass/_base.scss')
-rw-r--r--_sass/_base.scss519
1 files changed, 519 insertions, 0 deletions
diff --git a/_sass/_base.scss b/_sass/_base.scss
new file mode 100644
index 0000000..1607440
--- /dev/null
+++ b/_sass/_base.scss
@@ -0,0 +1,519 @@
+/*******************************************************************************
+ * Styles for the base elements of the theme.
+ ******************************************************************************/
+
+// Typography
+
+p, h1, h2, h3, h4, h5, h6, em, div, span, strong {
+ color: var(--global-text-color);
+}
+
+a, table.table a {
+ color: var(--global-theme-color);
+ &:hover {
+ color: var(--global-theme-color);
+ text-decoration: underline;
+ }
+ &:hover:after :not(.nav-item.dropdown) {
+ width: 100%;
+ }
+}
+
+blockquote {
+ background: var(--global-bg-color);
+ border-left: 2px solid var(--global-theme-color);
+ margin: 1.5em 10px;
+ padding: 0.5em 10px;
+ font-size: 1.2rem;
+}
+
+// Math
+
+.equation {
+ margin-bottom: 1rem;
+ text-align: center;
+}
+
+// Caption
+
+.caption {
+ font-size: 0.875rem;
+ margin-top: 0.75rem;
+ margin-bottom: 1.5rem;
+ text-align: center;
+}
+
+// Citation
+.citation, .citation-number {
+ color: var(--global-theme-color);
+}
+
+// Profile
+
+.profile {
+ margin-left: 1rem;
+ width: 100%;
+
+ .address {
+ margin-bottom: 5px;
+ margin-top: 5px;
+ font-family: monospace;
+ p {
+ display: inline-block;
+ margin: 0;
+ }
+ }
+}
+
+@media (min-width: 576px) {
+ .profile {
+ width: 30%;
+ .address {
+ p { display: block; }
+ }
+ }
+}
+
+.post-description {
+ margin-bottom: 2rem;
+ font-size: 0.875rem;
+ a {
+ color: inherit;
+ &:hover {
+ color: var(--global-theme-color);
+ text-decoration: none;
+ }
+ }
+}
+
+
+// Navbar customization
+
+.navbar {
+ box-shadow: none;
+ border-bottom: 1px solid $grey-color-light;
+ background-color: var(--global-bg-color);
+ opacity: 0.95;
+}
+.navbar .dropdown-menu {
+ background-color: var(--global-bg-color);
+ a:not(.active) {
+ color: var(--global-text-color);
+ }
+ a:hover {
+ color: var(--global-hover-color);
+ }
+}
+.dropdown-item {
+ color: var(--global-text-color);
+ &:hover {
+ color: var(--global-hover-color);
+ background-color: var(--global-bg-color);
+ }
+}
+.navbar.navbar-light {
+ a {
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ .navbar-brand {
+ color: var(--global-text-color);
+ }
+ .navbar-nav .nav-item .nav-link {
+ color: var(--global-text-color);
+ &:hover {
+ color: var(--global-hover-color);
+ }
+ }
+ .navbar-nav .nav-item.active>.nav-link {
+ background-color: inherit;
+ font-weight: bolder;
+ color: var(--global-theme-color);
+ &:hover {
+ color: var(--global-hover-color);
+ }
+ }
+ .navbar-brand.social {
+ padding-bottom: 0;
+ padding-top: 0;
+ font-size: 1.7rem;
+ a {
+ i::before {
+ color: var(--global-text-color);
+ -webkit-transition: all 0.2s ease-in-out;
+ }
+ &:hover {
+ i::before {
+ color: var(--global-theme-color);
+ }
+ }
+ }
+ }
+}
+
+.navbar-toggler {
+ .icon-bar {
+ display: block;
+ width: 22px;
+ height: 2px;
+ background-color: var(--global-text-color);
+ 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;
+ color: var(--global-text-color);
+}
+
+.news table th {
+ color: var(--global-text-color);
+}
+
+// Social (bottom)
+
+.social {
+ text-align: center;
+ .contact-icons {
+ font-size: 4rem;
+ a {
+ i::before {
+ color: var(--global-text-color);
+ -webkit-transition: all 0.2s ease-in-out;
+ }
+ &:hover {
+ i::before {
+ color: var(--global-theme-color);
+ }
+ }
+ }
+ }
+ .contact-note {
+ font-size: 0.8rem;
+ }
+}
+
+
+// Footer
+footer.fixed-bottom {
+ background-color: var(--global-footer-bg-color);
+ font-size: 0.75rem;
+ .container {
+ color: var(--global-footer-text-color);
+ padding-top: 9px;
+ padding-bottom: 8px;
+ }
+ a {
+ color: var(--global-footer-link-color);
+ &:hover {
+ color: var(--global-theme-color);
+ 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: var(--global-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: var(--global-text-color-light);
+ font-size: 0.875rem;
+ margin-bottom: 0;
+ }
+ a {
+ color: var(--global-text-color);
+ text-decoration: none;
+ &:hover {
+ color: var(--global-theme-color);
+ }
+ }
+ }
+}
+
+.pagination {
+ .page-item {
+ .page-link {
+ color: var(--global-text-color);
+ &:hover {
+ color: $black-color;
+ }
+ }
+ &.active .page-link {
+ color: $white-color;
+ background-color: var(--global-theme-color);
+ &:hover {
+ background-color: var(--global-theme-color);
+ }
+ }
+ }
+}
+
+
+// Distill
+
+.distill {
+ a:hover {
+ border-bottom-color: var(--global-theme-color);
+ text-decoration: none;
+ }
+}
+
+
+// Projects
+
+.projects {
+ a {
+ text-decoration: none;
+
+ &:hover {
+ .card-title {
+ color: var(--global-theme-color);
+ }
+ }
+ }
+
+ .card {
+ img {
+ width: 100%;
+ }
+ .card-title {
+ color: $black-color;
+ }
+ }
+
+ .card-item {
+ width: auto;
+ margin-bottom: 10px;
+
+ .row {
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ .grid-item {
+ width: 250px;
+ margin-bottom: 10px;
+ }
+
+ h2.category {
+ color: $grey-color-light;
+ border-bottom: 1px solid $grey-color-light;
+ padding-top: 0.5rem;
+ margin-top: 2rem;
+ margin-bottom: 1rem;
+ text-align: right;
+ }
+}
+
+
+// Publications
+
+.publications {
+ margin-top: 2rem;
+ h1 {
+ color: var(--global-theme-color);
+ font-size: 2rem;
+ text-align: center;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ }
+ h2 {
+ margin-bottom: 1rem;
+ span {
+ font-size: 1.5rem;
+ }
+ }
+ h2.year {
+ color: $grey-color-light;
+ border-top: 1px solid $grey-color-light;
+ padding-top: 1rem;
+ margin-top: 2rem;
+ margin-bottom: -2rem;
+ text-align: right;
+ }
+ ol.bibliography {
+ list-style: none;
+ padding: 0;
+ margin-top: 0;
+
+ li {
+ margin-bottom: 1rem;
+ .abbr {
+ height: 2rem;
+ margin-bottom: 0.5rem;
+ abbr {
+ display: inline-block;
+ background-color: var(--global-theme-color);
+ padding-left: 1rem;
+ padding-right: 1rem;
+ a {
+ color: white;
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ }
+ .award {
+ color: var(--global-theme-color) !important;
+ border: 1px solid var(--global-theme-color);
+ }
+ }
+ .title {
+ font-weight: bolder;
+ }
+ .author {
+ a {
+ border-bottom: 1px dashed var(--global-theme-color);
+ &:hover {
+ border-bottom-style: solid;
+ text-decoration: none;
+ }
+ }
+ > em {
+ border-bottom: 1px solid;
+ font-style: normal;
+ }
+ }
+ .links {
+ a.btn {
+ color: var(--global-text-color);
+ border: 1px solid var(--global-text-color);
+ padding-left: 1rem;
+ padding-right: 1rem;
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+ &:hover {
+ color: var(--global-theme-color);
+ border-color: var(--global-theme-color);
+ }
+ }
+ }
+ .hidden {
+ font-size: 0.875rem;
+ max-height: 0px;
+ overflow: hidden;
+ text-align: justify;
+ -webkit-transition: 0.15s ease;
+ -moz-transition: 0.15s ease;
+ -ms-transition: 0.15s ease;
+ -o-transition: 0.15s ease;
+ transition: all 0.15s ease;
+
+ p {
+ line-height: 1.4em;
+ margin: 10px;
+ }
+ pre {
+ font-size: 1em;
+ line-height: 1.4em;
+ padding: 10px;
+ }
+ }
+ .hidden.open {
+ max-height: 100em;
+ -webkit-transition: 0.15s ease;
+ -moz-transition: 0.15s ease;
+ -ms-transition: 0.15s ease;
+ -o-transition: 0.15s ease;
+ transition: all 0.15s ease;
+ }
+ div.abstract.hidden {
+ border: dashed 1px var(--global-bg-color);
+ }
+ div.abstract.hidden.open {
+ border-color: var(--global-text-color);
+ }
+ }
+ }
+}
+
+// Rouge Color Customization
+figure.highlight {
+ margin: 0 0 1rem;
+}
+
+pre {
+ color: var(--global-theme-color);
+ background-color: var(--global-code-bg-color);
+ border-radius: 6px;
+ padding: 6px 12px;
+ pre, code {
+ background-color: transparent;
+ border-radius: 0;
+ padding: 0;
+ }
+}
+
+code {
+ color: var(--global-theme-color);
+ background-color: var(--global-code-bg-color);
+ border-radius: 3px;
+ padding: 3px 3px;
+}
+
+
+// Transitioning Themes
+html.transition,
+html.transition *,
+html.transition *:before,
+html.transition *:after {
+ transition: all 750ms !important;
+ transition-delay: 0 !important;
+}