summaryrefslogtreecommitdiff
path: root/_sass
diff options
context:
space:
mode:
Diffstat (limited to '_sass')
-rw-r--r--_sass/_base.scss519
-rw-r--r--_sass/_distill.scss45
-rw-r--r--_sass/_layout.scss46
-rw-r--r--_sass/_themes.scss47
-rw-r--r--_sass/_variables.scss38
5 files changed, 695 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;
+}
diff --git a/_sass/_distill.scss b/_sass/_distill.scss
new file mode 100644
index 0000000..24eb4b4
--- /dev/null
+++ b/_sass/_distill.scss
@@ -0,0 +1,45 @@
+/*******************************************************************************
+ * Style overrides for distill blog posts.
+ ******************************************************************************/
+
+d-byline {
+ border-top-color: $grey-color-light !important;
+}
+
+d-byline h3 {
+ color: var(--global-text-color) !important;
+}
+
+d-byline a, d-article d-byline a {
+ color: var(--global-text-color) !important;
+ &:hover {
+ color: var(--global-hover-color) !important;
+ }
+}
+
+d-article {
+ border-top-color: #e8e8e8 !important;
+ a, p, h1, h2, h3, h4, h5, h6, li, table {
+ color: var(--global-text-color) !important;
+ }
+ a, h1, h2, hr {
+ border-bottom-color: $grey-color-light !important;
+ }
+ a:hover {
+ border-bottom-color: var(--global-hover-color) !important;
+ }
+}
+
+d-appendix {
+ border-top-color: $grey-color-light !important;
+ color: var(--global-distill-app-color) !important;
+ h3, li, span {
+ color: var(--global-distill-app-color) !important;
+ }
+ a, a.footnote-backlink {
+ color: var(--global-distill-app-color) !important;
+ &:hover {
+ color: var(--global-hover-color) !important;
+ }
+ }
+}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
new file mode 100644
index 0000000..3a676b1
--- /dev/null
+++ b/_sass/_layout.scss
@@ -0,0 +1,46 @@
+/******************************************************************************
+ * Content
+ ******************************************************************************/
+
+ body {
+ padding-bottom: 70px;
+ color: var(--global-text-color);
+ background-color: var(--global-bg-color);
+ }
+
+ body.fixed-top-nav {
+ // Add some padding for the nav-bar.
+ padding-top: 56px;
+ }
+
+ body.sticky-bottom-footer {
+ // Remove padding below footer.
+ padding-bottom: 0;
+ }
+
+.container {
+ max-width: $max-content-width;
+}
+
+// Profile
+.profile {
+ img {
+ width: 100%;
+ }
+}
+
+// TODO: redefine content layout.
+
+
+/******************************************************************************
+ * Publications
+ ******************************************************************************/
+
+// TODO: redefine publications layout.
+
+
+/*****************************************************************************
+* Projects
+*****************************************************************************/
+
+// TODO: redefine projects layout.
diff --git a/_sass/_themes.scss b/_sass/_themes.scss
new file mode 100644
index 0000000..4b480d6
--- /dev/null
+++ b/_sass/_themes.scss
@@ -0,0 +1,47 @@
+/*******************************************************************************
+ * Themes
+ ******************************************************************************/
+
+:root {
+ --global-bg-color: #{$white-color};
+ --global-code-bg-color: #{$code-bg-color-light};
+ --global-text-color: #{$black-color};
+ --global-text-color-light: #{$grey-color};
+ --global-theme-color: #{$purple-color};
+ --global-hover-color: #{$purple-color};
+ --global-footer-bg-color: #{$grey-color-dark};
+ --global-footer-text-color: #{$grey-color-light};
+ --global-footer-link-color: #{$white-color};
+ --global-distill-app-color: #{$grey-color};
+
+ .fa-sun {
+ display : none;
+ }
+ .fa-moon {
+ padding-left: 10px;
+ padding-top: 12px;
+ display : block;
+ }
+}
+
+html[data-theme='dark'] {
+ --global-bg-color: #{$grey-color-dark};
+ --global-code-bg-color: #{$code-bg-color-dark};
+ --global-text-color: #{$grey-color-light};
+ --global-text-color-light: #{$grey-color-light};
+ --global-theme-color: #{$cyan-color};
+ --global-hover-color: #{$cyan-color};
+ --global-footer-bg-color: #{$grey-color-light};
+ --global-footer-text-color: #{$grey-color-dark};
+ --global-footer-link-color: #{$black-color};
+ --global-distill-app-color: #{$grey-color-light};
+
+ .fa-sun {
+ padding-left: 10px;
+ padding-top: 12px;
+ display : block;
+ }
+ .fa-moon {
+ display : none;
+ }
+}
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
new file mode 100644
index 0000000..2a2cd7f
--- /dev/null
+++ b/_sass/_variables.scss
@@ -0,0 +1,38 @@
+/*******************************************************************************
+ * Variables used throughout the theme.
+ * To adjust anything, simply edit the variables below and rebuild the theme.
+ ******************************************************************************/
+
+
+// Colors
+$red-color: #FF3636 !default;
+$red-color-dark: #B71C1C !default;
+$orange-color: #F29105 !default;
+$blue-color: #0076df !default;
+$blue-color-dark: #00369f !default;
+$cyan-color: #2698BA !default;
+$light-cyan-color: lighten($cyan-color, 25%);
+$green-color: #00ab37 !default;
+$green-color-lime: #B7D12A !default;
+$green-color-dark: #009f06 !default;
+$green-color-light: #ddffdd !default;
+$green-color-bright: #11D68B !default;
+$purple-color: #B509AC !default;
+$light-purple-color: lighten($purple-color, 25%);
+$pink-color: #f92080 !default;
+$pink-color-light: #ffdddd !default;
+$yellow-color: #efcc00 !default;
+
+$grey-color: #828282 !default;
+$grey-color-light: lighten($grey-color, 40%);
+$grey-color-dark: darken($grey-color, 25%);
+
+$white-color: #ffffff !default;
+$black-color: #000000 !default;
+
+
+// Theme colors
+
+$code-bg-color-light: rgba($purple-color, 0.05);
+$code-bg-color-dark: #2c3237 !default;
+
generated by cgit v1.2.3 (git 2.45.2) at 2024-12-25 07:01:30 +0000