mirror of
https://github.com/gcushen/hugo-academic.git
synced 2025-07-26 03:00:50 +02:00
refactor: modularise styles + fix more style lint issues
This commit is contained in:
George Cushen
parent
ac4b4e3157
commit
273405e59b
43 changed files with 1218 additions and 1199 deletions
4
.github/workflows/build-test-site.yaml
vendored
4
.github/workflows/build-test-site.yaml
vendored
|
|
@ -36,8 +36,8 @@ jobs:
|
|||
run: rm -rf node_modules && yarn install --frozen-lockfile
|
||||
working-directory: ./wowchemy
|
||||
|
||||
- name: Check for JS linting errors
|
||||
run: yarn run lint:js
|
||||
- name: Check for linting errors
|
||||
run: yarn run lint
|
||||
working-directory: ./wowchemy
|
||||
|
||||
# format:
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ extends:
|
|||
- stylelint-config-standard
|
||||
- stylelint-config-prettier
|
||||
rules:
|
||||
at-rule-no-unknown: null
|
||||
scss/at-rule-no-unknown: true
|
||||
no-descending-specificity: null
|
||||
at-rule-no-unknown: null # Use SCSS "at" rules
|
||||
scss/at-rule-no-unknown: true # Use SCSS "at" rules
|
||||
no-descending-specificity: null # Todo: remove once investigated/resolved
|
||||
font-family-no-missing-generic-family-keyword:
|
||||
- true
|
||||
- ignoreFontFamilies:
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ if (typeof Fuse === 'function') {
|
|||
let fuse = new Fuse(search_index, fuseOptions);
|
||||
|
||||
// On page load, check for search query in URL.
|
||||
let query = getSearchQuery('q')
|
||||
let query = getSearchQuery('q');
|
||||
if (query) {
|
||||
$('body').addClass('searching');
|
||||
$('.search-results').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 200);
|
||||
|
|
|
|||
|
|
@ -338,282 +338,3 @@ small,
|
|||
.responsive-wrap iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Modals.
|
||||
**************************************************/
|
||||
|
||||
.modal-content {
|
||||
background: $sta-background;
|
||||
}
|
||||
|
||||
.dark .modal-content {
|
||||
background: $sta-dark-background;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0; /* Override default h5 margin. */
|
||||
}
|
||||
|
||||
.modal-content pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border: 0;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#modal-error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Gallery.
|
||||
**************************************************/
|
||||
|
||||
.gallery {
|
||||
margin: 0.5em -4px 1.5em -4px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
// Satisfy Lighthouse criteria even if a lazy image hasn't loaded yet.
|
||||
min-height: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
a[data-fancybox] {
|
||||
text-decoration: none;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.gallery a[data-fancybox] img {
|
||||
height: 250px;
|
||||
width: auto;
|
||||
max-width: inherit;
|
||||
display: inherit;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
box-shadow: none;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.fancybox-caption {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Pager.
|
||||
**************************************************/
|
||||
|
||||
.post-nav {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.post-nav-item {
|
||||
hyphens: auto;
|
||||
word-wrap: break-word;
|
||||
padding: 11px 0 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-nav-item a {
|
||||
color: #2b2b2b;
|
||||
line-height: 1.7;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.post-nav-item .meta-nav {
|
||||
color: #767676;
|
||||
font-weight: 900;
|
||||
line-height: 2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dark .post-nav-item a {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/**************************************************
|
||||
* Tags/Labels
|
||||
**************************************************/
|
||||
|
||||
.badge-light {
|
||||
border: none;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
font-weight: normal;
|
||||
border-radius: 3px;
|
||||
padding: 5px 10px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.article-tags > .badge-light:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.badge-light[href]:focus,
|
||||
.badge-light[href]:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
a.badge:focus,
|
||||
a.badge:hover {
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
}
|
||||
|
||||
.tag-cloud a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 8px 10px;
|
||||
word-wrap: break-word;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.tag-cloud a:active,
|
||||
.tag-cloud a:focus,
|
||||
.tag-cloud a:hover {
|
||||
color: $sta-primary-dark;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.dark .tag-cloud a:active,
|
||||
.dark .tag-cloud a:focus,
|
||||
.dark .tag-cloud a:hover {
|
||||
color: $sta-primary-light;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Button size override
|
||||
*************************************************/
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 0.9; // Anything less and multiline button text may overlap.
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.btn-links .btn {
|
||||
padding: 5px 0.5rem 5px 0.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn.btn-sm {
|
||||
padding: 5px 0.4rem 5px 0.4rem;
|
||||
font-size: 14px;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
.btn-page-header {
|
||||
// Satisfy Lighthouse tap targets criteria.
|
||||
margin: 8px 8px 8px 0;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Toolbar Buttons
|
||||
**************************************************/
|
||||
|
||||
.btn-toolbar .btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 10px 14px 9px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-toolbar .btn:first-child {
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.btn-toolbar .btn:last-child {
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.btn-toolbar .btn.btn-primary:hover,
|
||||
.btn-toolbar .btn.btn-primary:focus {
|
||||
background-color: $sta-primary-light !important;
|
||||
}
|
||||
|
||||
.btn-toolbar .btn.btn-primary:active,
|
||||
.btn-toolbar .btn.btn-primary.active {
|
||||
background-color: $sta-primary-dark !important;
|
||||
}
|
||||
|
||||
.btn-primary:not(:disabled):not(.disabled).active:focus,
|
||||
.btn-primary:not(:disabled):not(.disabled):active:focus,
|
||||
.show > .btn-primary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem $sta-primary-light;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Tables
|
||||
**************************************************/
|
||||
|
||||
/* Based on Bootstrap's `table-responsive` style. */
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
// Override `article-style`'s `break-word` wrapping to make wide tables scrollable.
|
||||
overflow-wrap: normal;
|
||||
word-wrap: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
table > thead > tr > th,
|
||||
table > tbody > tr > th,
|
||||
table > tfoot > tr > th,
|
||||
table > thead > tr > td,
|
||||
table > tbody > tr > td,
|
||||
table > tfoot > tr > td {
|
||||
padding: 8px;
|
||||
line-height: 1.43;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
table > caption + thead > tr:first-child > th,
|
||||
table > colgroup + thead > tr:first-child > th,
|
||||
table > thead:first-child > tr:first-child > th,
|
||||
table > caption + thead > tr:first-child > td,
|
||||
table > colgroup + thead > tr:first-child > td,
|
||||
table > thead:first-child > tr:first-child > td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
table > tbody + tbody {
|
||||
border-top: 2px solid #ddd;
|
||||
}
|
||||
|
||||
table table {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Table Striped */
|
||||
table > tbody > tr:nth-child(odd) > td,
|
||||
table > tbody > tr:nth-child(odd) > th {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
/* Table Hover */
|
||||
table > tbody > tr:hover > td,
|
||||
table > tbody > tr:hover > th {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
|
@ -2,25 +2,37 @@
|
|||
* Dark themed components
|
||||
**************************************************/
|
||||
|
||||
.dark .article-title a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark .pagination li > a,
|
||||
.pagination li > span {
|
||||
background-color: rgb(40, 42, 54);
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
body.dark,
|
||||
.dark .docs-toc-link,
|
||||
.dark .docs-sidebar .nav > li:not(.active) > a,
|
||||
.dark .modal button.close,
|
||||
.dark input,
|
||||
.dark .form-control,
|
||||
.dark .form-control:focus {
|
||||
.dark input {
|
||||
color: rgb(248, 248, 242);
|
||||
background: $sta-dark-background;
|
||||
}
|
||||
|
||||
.dark .form-control {
|
||||
color: rgb(248, 248, 242);
|
||||
background-color: rgb(68, 71, 90);
|
||||
}
|
||||
|
||||
.dark .form-control:focus {
|
||||
background-color: rgb(68, 71, 90);
|
||||
border-color: $sta-primary;
|
||||
box-shadow: 0 0 0 0.2rem $sta-primary-dark;
|
||||
&::placeholder {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus {
|
||||
background-color: rgb(68, 71, 90);
|
||||
border-color: $sta-primary;
|
||||
box-shadow: 0 0 0 0.2rem $sta-primary-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.dark h1,
|
||||
|
|
@ -67,10 +79,6 @@ body.dark,
|
|||
background-color: rgb(60, 62, 74);
|
||||
}
|
||||
|
||||
.dark .article-title a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark .portrait-title h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -91,12 +99,6 @@ body.dark,
|
|||
color: rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
|
||||
.dark .pagination li > a,
|
||||
.pagination li > span {
|
||||
background-color: rgb(40, 42, 54);
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.dark .card {
|
||||
background: #343a40;
|
||||
}
|
||||
|
|
@ -138,3 +140,8 @@ body.dark,
|
|||
.dark .btn.btn-primary.active {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
.dark .docs-sidebar .nav > li:not(.active) > a {
|
||||
color: rgb(248, 248, 242);
|
||||
background: $sta-dark-background;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,633 +0,0 @@
|
|||
/*************************************************
|
||||
* Page Builder: sections and widgets
|
||||
**************************************************/
|
||||
|
||||
.home-section {
|
||||
// Use `background` rather than `background-color` so it can support gradients in theme packs.
|
||||
background: $sta-home-section-odd;
|
||||
position: relative; // Required for component positioning within section.
|
||||
padding: 110px 0 110px 0;
|
||||
z-index: 0; // Explicit z-order otherwise `.home-section-bg` can be hidden by any `.home-section` background.
|
||||
}
|
||||
|
||||
// Responsive fullscreen option for widgets
|
||||
.home-section.fullscreen {
|
||||
min-height: calc(100vh - 70px);
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.home-section.fullscreen {
|
||||
min-height: calc(100vh - 50px);
|
||||
}
|
||||
}
|
||||
.no-navbar .home-section.fullscreen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// Section theming
|
||||
|
||||
.home-section.light,
|
||||
.home-section.light h1 {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.home-section.light a {
|
||||
color: $sta-link;
|
||||
}
|
||||
|
||||
.home-section.dark a {
|
||||
color: $sta-dark-link;
|
||||
}
|
||||
|
||||
/* Override dark colors that may be inherited from body.dark */
|
||||
.home-section.dark,
|
||||
.home-section.dark h1,
|
||||
.home-section.dark h2,
|
||||
.home-section.dark h3,
|
||||
.home-section.dark a:not(.btn) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Underline links in dark sections to separate them from text */
|
||||
.home-section.dark a:not(.btn):not(.hero-cta-alt) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Revert Alert Box Link style (.home-section.dark style above should not be applied to it) */
|
||||
.home-section.dark .alert a {
|
||||
color: inherit !important;
|
||||
text-decoration: inherit !important;
|
||||
}
|
||||
|
||||
/* Big underline style for links in dark sections */
|
||||
|
||||
/* Disabled as it's an experimental style that requires CSS NOT Selector Level 4 (only in Safari) */
|
||||
|
||||
/*
|
||||
.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a) {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a):after {
|
||||
background: #fff;
|
||||
content: "";
|
||||
height: 2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
} */
|
||||
|
||||
// Fill padding of `.home-section` parent
|
||||
.home-section-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%; // Or fill-available when supported.
|
||||
width: 100%; // Or fill-available when supported.
|
||||
z-index: -1; // Place bg div behind content.
|
||||
}
|
||||
|
||||
/* Default background image properties for home sections. */
|
||||
.home-section-bg.bg-image {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* Create a parallax-like scrolling effect on desktop browsers. */
|
||||
.parallax {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
// Workaround issue with mobile browser support for fixed parallax background.
|
||||
@include media-breakpoint-down(md) {
|
||||
.parallax {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.home-section:first-of-type {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.home-section:nth-of-type(even) {
|
||||
background: $sta-home-section-even;
|
||||
}
|
||||
|
||||
.dark .home-section {
|
||||
background: $sta-dark-home-section-odd;
|
||||
}
|
||||
|
||||
.dark .home-section:nth-of-type(even) {
|
||||
background: $sta-dark-home-section-even;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.home-section {
|
||||
padding: 60px 0 60px 0;
|
||||
}
|
||||
.home-section:first-of-type {
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-heading h1 {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.section-subheading {
|
||||
font-size: 1.25rem;
|
||||
font-family: $sta-font-heading, sans-serif;
|
||||
font-weight: bold;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.section-heading p {
|
||||
font-weight: 400;
|
||||
font-size: 1.1rem;
|
||||
color: rgba(0, 0, 0, 0.54); // Accessible contrast, matching footer text color.
|
||||
}
|
||||
|
||||
.dark .section-heading p {
|
||||
color: rgb(158, 158, 158);
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Widgets (common)
|
||||
**************************************************/
|
||||
|
||||
.see-all {
|
||||
margin-top: 2rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Reset code highlighting style in Alerts when Alert is child of a `.dark` widget, but Alert should be light.` */
|
||||
|
||||
/* But will this affect page which should have dark Alert? */
|
||||
.dark .alert pre,
|
||||
.dark .alert code {
|
||||
color: initial;
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Hero Widget
|
||||
**************************************************/
|
||||
|
||||
.wg-hero {
|
||||
padding: 3em 0; // More compact top and bottom padding for Hero.
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.7rem;
|
||||
margin-top: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 768px;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.wg-hero.dark .hero-title,
|
||||
.wg-hero.dark .hero-lead,
|
||||
.wg-hero.dark .hero-cta-alt,
|
||||
.wg-hero.dark .hero-note > * {
|
||||
color: #fff;
|
||||
|
||||
/* text-shadow: 1px 1px 4px rgba(0,0,0,0.5); */
|
||||
|
||||
/* Uncomment to standout on complicated backgrounds. */
|
||||
}
|
||||
|
||||
.wg-hero.dark a:not(.wg-hero .btn) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wg-hero .hero-lead a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wg-hero .cta-btns {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wg-hero .btn {
|
||||
padding: 0.6em 2.1em;
|
||||
}
|
||||
|
||||
.wg-hero.dark .btn {
|
||||
color: $sta-primary-dark;
|
||||
}
|
||||
|
||||
a.hero-cta-alt {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
a.hero-cta-alt:active,
|
||||
a.hero-cta-alt:focus,
|
||||
a.hero-cta-alt:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.wg-hero .btn-lg {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.wg-hero .hero-note {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.hero-media {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Slider Widget
|
||||
**************************************************/
|
||||
|
||||
/* Clear `.home-section` as any padding or animation interferes with Slider's layout and animations. */
|
||||
.home-section.wg-slider {
|
||||
padding: 0;
|
||||
animation: none;
|
||||
animation-delay: unset;
|
||||
}
|
||||
|
||||
/* The Slider widget reuses the Hero widget's `.wg-hero` class.
|
||||
* We must remove any `animation` and `clear` (although Hero no longer sets `clear: both`) in this instance or
|
||||
* multiple slides can be `.active` at once. */
|
||||
.carousel-inner .wg-hero {
|
||||
animation: none;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Featurette Widget
|
||||
**************************************************/
|
||||
|
||||
.featurette {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.featurette .section-subheading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dark .featurette,
|
||||
.dark .featurette .section-subheading {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.featurette-icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: $sta-primary;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* About widget
|
||||
**************************************************/
|
||||
|
||||
#profile {
|
||||
text-align: center;
|
||||
padding: 30px 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
margin: 0 auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// Use smaller avatar size in About widget on small devices.
|
||||
@include media-breakpoint-down(sm) {
|
||||
.wg-about .avatar {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-square {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.portrait-title h2 {
|
||||
font-size: 1.75em;
|
||||
font-weight: 300;
|
||||
color: #000;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
.portrait-title h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
ul.network-icon {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#profile .network-icon {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.network-icon li {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.network-icon li:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.network-icon li:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.big-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
ul.ul-interests li {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
ul.ul-edu {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.ul-edu li {
|
||||
position: relative;
|
||||
padding: 0 15px 4px 3px;
|
||||
}
|
||||
|
||||
ul.ul-edu li .description p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.ul-edu li .description p.course {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
ul.ul-edu li .description p.institution {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Experience
|
||||
**************************************************/
|
||||
|
||||
.exp-title {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.exp-company {
|
||||
font-weight: normal !important;
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.exp-meta {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.experience .card-text,
|
||||
.experience .card-text p {
|
||||
color: #000 !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.dark .experience .text-muted {
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
|
||||
.dark .experience .card-text,
|
||||
.dark .experience .card-text p {
|
||||
color: rgb(248, 248, 242) !important;
|
||||
}
|
||||
|
||||
// For a UL after P, remove the spacing between (P margin-bottom) without affecting any nested lists.
|
||||
.card .card-text p + ul {
|
||||
margin-top: -1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.experience .m-2 .border,
|
||||
.experience .col.border-right {
|
||||
border-color: $sta-primary !important;
|
||||
}
|
||||
|
||||
.experience .m-2 .border.exp-fill {
|
||||
background-color: $sta-primary !important;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Talks
|
||||
**************************************************/
|
||||
|
||||
.talk-metadata {
|
||||
color: #4b4f56;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Projects
|
||||
**************************************************/
|
||||
|
||||
.project-widget-simple li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.project-widget-simple li:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.project-widget-simple .project-title {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.project-widget-simple .project-summary {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.projects-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
/* margin-top: 5rem; */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-toolbar {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
position: relative;
|
||||
width: calc(
|
||||
33.3% - 13.3px
|
||||
); /* Fluid 3 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.project-card {
|
||||
width: calc(
|
||||
50% - 10px
|
||||
); /* Fluid 2 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.project-card {
|
||||
width: 100%; /* 1 column */
|
||||
}
|
||||
}
|
||||
|
||||
.project-item {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.project-card.project-item {
|
||||
margin: 0 0 20px 0; /* Set to Isotope's gutter size */
|
||||
}
|
||||
|
||||
.project-card .card {
|
||||
margin: 0; /* Remove default card margin and use Isotope gutter */
|
||||
}
|
||||
|
||||
.project-showcase .project-item {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.project-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.isotope-item {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.isotope-item:hover {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Accomplishments
|
||||
**************************************************/
|
||||
|
||||
.card.course {
|
||||
margin-bottom: 1rem; /* More compact spacing than Experience widget as typically more items here. */
|
||||
}
|
||||
|
||||
.card.course:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.course .card-subtitle a {
|
||||
border-bottom: solid 1px transparent;
|
||||
}
|
||||
|
||||
.course .card-subtitle a:hover {
|
||||
border-bottom: solid 1px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* People widget
|
||||
**************************************************/
|
||||
|
||||
.people-widget {
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.people-widget .portrait-title h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.people-widget .portrait-title h3 {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.people-widget .avatar {
|
||||
width: 80%;
|
||||
max-width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.people-widget .col-sm-auto {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.people-widget .col-sm-auto {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Contact
|
||||
**************************************************/
|
||||
|
||||
.wg-contact .fa-ul {
|
||||
margin-left: 3.14285714rem; /* Must be > `fa-2x` icon size. */
|
||||
}
|
||||
|
||||
.wg-contact .fa-li {
|
||||
position: absolute;
|
||||
left: -3.14285714rem; /* Negative of `.wg-contact .fa-ul` margin. */
|
||||
width: 2rem; /* Match `fa-2x` icon size. */
|
||||
top: 0.14285714em; /* Default FA value. */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wg-contact li {
|
||||
padding-top: 0.8rem; /* Align text with bottom of `fa-2x` icon. */
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.wg-contact li:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Prevent OpenStreetMap inheriting link color from section of a different theme variation.
|
||||
// E.g. Light colored OpenStreetMap UI inheriting dark themed link (`.home-section.dark a`)
|
||||
// from a dark widget page section.
|
||||
#map a {
|
||||
color: initial;
|
||||
}
|
||||
10
wowchemy/assets/scss/wowchemy/components/_all.scss
Normal file
10
wowchemy/assets/scss/wowchemy/components/_all.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/* Wowchemy Components */
|
||||
|
||||
@import 'author-card';
|
||||
@import 'breadcrumb';
|
||||
@import 'card';
|
||||
@import 'modal';
|
||||
@import 'nav';
|
||||
@import 'pagination';
|
||||
@import 'sharing';
|
||||
@import 'shortcode';
|
||||
49
wowchemy/assets/scss/wowchemy/components/_author-card.scss
Normal file
49
wowchemy/assets/scss/wowchemy/components/_author-card.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/*************************************************
|
||||
* Author profile card
|
||||
**************************************************/
|
||||
|
||||
.author-card .avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.author-card .card-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
|
||||
.author-card .card-title a {
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
|
||||
.dark .author-card .card-title,
|
||||
.dark .author-card .card-title a {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
.author-card p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.author-card .card-subtitle {
|
||||
font-weight: 300;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.dark .author-card .card-subtitle {
|
||||
color: rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
|
||||
.author-card .card-text {
|
||||
color: rgba(0, 0, 0, 0.76);
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dark .author-card .card-text {
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
}
|
||||
32
wowchemy/assets/scss/wowchemy/components/_modal.scss
Normal file
32
wowchemy/assets/scss/wowchemy/components/_modal.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/*************************************************
|
||||
* Modals.
|
||||
**************************************************/
|
||||
|
||||
.modal-content {
|
||||
background: $sta-background;
|
||||
}
|
||||
|
||||
.dark .modal-content {
|
||||
background: $sta-dark-background;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0; /* Override default h5 margin. */
|
||||
}
|
||||
|
||||
.modal-content pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border: 0;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#modal-error {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -2,6 +2,12 @@
|
|||
* Navigation bar
|
||||
**************************************************/
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $sta-menu-primary !important;
|
||||
color: $sta-menu-text !important;
|
||||
z-index: 1032; // I18n dropdown over mobile expanded menu.
|
||||
}
|
||||
|
||||
.navbar {
|
||||
height: 70px;
|
||||
background: $sta-menu-primary;
|
||||
|
|
@ -233,12 +239,6 @@ ul.nav-icons li.nav-item a.nav-link {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $sta-menu-primary !important;
|
||||
color: $sta-menu-text !important;
|
||||
z-index: 1032; // I18n dropdown over mobile expanded menu.
|
||||
}
|
||||
|
||||
.dark .dropdown-menu {
|
||||
background-color: $sta-dark-menu-primary !important;
|
||||
color: $sta-dark-menu-text !important;
|
||||
32
wowchemy/assets/scss/wowchemy/components/_pagination.scss
Normal file
32
wowchemy/assets/scss/wowchemy/components/_pagination.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/*************************************************
|
||||
* Pager.
|
||||
**************************************************/
|
||||
|
||||
.post-nav {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.post-nav-item {
|
||||
hyphens: auto;
|
||||
word-wrap: break-word;
|
||||
padding: 11px 0 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-nav-item a {
|
||||
color: #2b2b2b;
|
||||
line-height: 1.7;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.post-nav-item .meta-nav {
|
||||
color: #767676;
|
||||
font-weight: 900;
|
||||
line-height: 2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dark .post-nav-item a {
|
||||
color: #ddd;
|
||||
}
|
||||
50
wowchemy/assets/scss/wowchemy/components/_sharing.scss
Normal file
50
wowchemy/assets/scss/wowchemy/components/_sharing.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/*************************************************
|
||||
* Sharing
|
||||
**************************************************/
|
||||
|
||||
.share-box {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
ul.share {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.share li {
|
||||
display: inline-flex;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
ul.share li:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
ul.share li i {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
transition: all 150ms ease-in-out;
|
||||
}
|
||||
|
||||
ul.share li a {
|
||||
text-decoration: none !important;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
|
||||
.dark ul.share li a {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
ul.share li:hover i {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
9
wowchemy/assets/scss/wowchemy/elements/_all.scss
Normal file
9
wowchemy/assets/scss/wowchemy/elements/_all.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/* Wowchemy Elements */
|
||||
|
||||
@import 'button';
|
||||
@import 'callout';
|
||||
@import 'content';
|
||||
@import 'icon';
|
||||
@import 'media';
|
||||
@import 'table';
|
||||
@import 'tag';
|
||||
60
wowchemy/assets/scss/wowchemy/elements/_button.scss
Normal file
60
wowchemy/assets/scss/wowchemy/elements/_button.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/*************************************************
|
||||
* Button size override
|
||||
*************************************************/
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 0.9; // Anything less and multiline button text may overlap.
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.btn-links .btn {
|
||||
padding: 5px 0.5rem 5px 0.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn.btn-sm {
|
||||
padding: 5px 0.4rem 5px 0.4rem;
|
||||
font-size: 14px;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
.btn-page-header {
|
||||
// Satisfy Lighthouse tap targets criteria.
|
||||
margin: 8px 8px 8px 0;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Toolbar Buttons
|
||||
**************************************************/
|
||||
|
||||
.btn-toolbar .btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 10px 14px 9px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-toolbar .btn:first-child {
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.btn-toolbar .btn:last-child {
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.btn-toolbar .btn.btn-primary:hover,
|
||||
.btn-toolbar .btn.btn-primary:focus {
|
||||
background-color: $sta-primary-light !important;
|
||||
}
|
||||
|
||||
.btn-toolbar .btn.btn-primary:active,
|
||||
.btn-toolbar .btn.btn-primary.active {
|
||||
background-color: $sta-primary-dark !important;
|
||||
}
|
||||
|
||||
.btn-primary:not(:disabled):not(.disabled).active:focus,
|
||||
.btn-primary:not(:disabled):not(.disabled):active:focus,
|
||||
.show > .btn-primary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem $sta-primary-light;
|
||||
}
|
||||
|
|
@ -79,12 +79,71 @@
|
|||
color: rgba(255, 255, 255, 0.54) !important;
|
||||
}
|
||||
|
||||
.article-style {
|
||||
// Any unresponsive embeds, e.g. Plotly, should be wrapped to handle on a case-by-case basis.
|
||||
// If any unresponsive embeds still remain in the article, prevent article overflow and DIV scrolling.
|
||||
// Note that lazy-loaded images, e.g. Gallery, may cause scrollable Y-overflow if only X-overflow is hidden pre-load.
|
||||
overflow: hidden;
|
||||
|
||||
// Word wrap text content.
|
||||
@include word-wrap();
|
||||
|
||||
// Underline links if they are a similar color to the body text.
|
||||
a {
|
||||
text-decoration: $sta-link-decoration;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td img,
|
||||
td video {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
figure img {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.article-metadata {
|
||||
margin-bottom: 15px;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.03em;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
a:hover {
|
||||
color: $sta-primary;
|
||||
}
|
||||
.author-notes {
|
||||
cursor: help;
|
||||
padding-left: 3px;
|
||||
}
|
||||
.author-highlighted {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* For article page only, not lists. */
|
||||
article .article-metadata {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dark .article-metadata {
|
||||
|
|
@ -95,32 +154,6 @@
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* For article page only, not lists. */
|
||||
article .article-metadata {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-metadata a {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
.dark .article-metadata a {
|
||||
color: rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
|
||||
.article-metadata a:hover {
|
||||
color: $sta-primary;
|
||||
}
|
||||
|
||||
.article-metadata .author-notes {
|
||||
cursor: help;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.article-metadata .author-highlighted {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.article-categories {
|
||||
white-space: nowrap; /* Keep category icon on same line as category links, otherwise context lost. */
|
||||
}
|
||||
|
|
@ -135,95 +168,6 @@ article .article-metadata {
|
|||
content: '\00B7';
|
||||
}
|
||||
|
||||
@mixin word-wrap() {
|
||||
// Break very long words such as pasted URL strings.
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
//-ms-word-break: break-all;
|
||||
//word-break: break-all;
|
||||
word-break: break-word;
|
||||
|
||||
// Add a hyphen where the word breaks, if supported (No Blink).
|
||||
//-ms-hyphens: auto;
|
||||
//-moz-hyphens: auto;
|
||||
//-webkit-hyphens: auto;
|
||||
//hyphens: auto;
|
||||
}
|
||||
|
||||
.article-style {
|
||||
// Any unresponsive embeds, e.g. Plotly, should be wrapped to handle on a case-by-case basis.
|
||||
// If any unresponsive embeds still remain in the article, prevent article overflow and DIV scrolling.
|
||||
// Note that lazy-loaded images, e.g. Gallery, may cause scrollable Y-overflow if only X-overflow is hidden pre-load.
|
||||
overflow: hidden;
|
||||
|
||||
// Word wrap text content.
|
||||
@include word-wrap();
|
||||
}
|
||||
|
||||
// Underline links if they are a similar color to the body text.
|
||||
.article-style a {
|
||||
text-decoration: $sta-link-decoration;
|
||||
}
|
||||
|
||||
.article-style img,
|
||||
.article-style video {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.article-style td img,
|
||||
.article-style td video {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.article-style figure {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.article-style figure img {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Publications
|
||||
**************************************************/
|
||||
|
||||
.pub-banner {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.pub-row-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#container-publications {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.li-cite-author {
|
||||
font-size: 1em;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.li-cite-author a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.dark .li-cite-author a {
|
||||
color: rgb(248, 248, 242);
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Content widgets
|
||||
**************************************************/
|
||||
|
|
@ -246,107 +190,6 @@ article .article-metadata {
|
|||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Sharing
|
||||
**************************************************/
|
||||
|
||||
.share-box {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
ul.share {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.share li {
|
||||
display: inline-flex;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
ul.share li:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
ul.share li i {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
transition: all 150ms ease-in-out;
|
||||
}
|
||||
|
||||
ul.share li a {
|
||||
text-decoration: none !important;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
|
||||
.dark ul.share li a {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
ul.share li:hover i {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Author profile card
|
||||
**************************************************/
|
||||
|
||||
.author-card .avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.author-card .card-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
|
||||
.author-card .card-title a {
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
|
||||
.dark .author-card .card-title,
|
||||
.dark .author-card .card-title a {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
.author-card p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.author-card .card-subtitle {
|
||||
font-weight: 300;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.dark .author-card .card-subtitle {
|
||||
color: rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
|
||||
.author-card .card-text {
|
||||
color: rgba(0, 0, 0, 0.76);
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dark .author-card .card-text {
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Comments
|
||||
**************************************************/
|
||||
|
|
@ -366,3 +209,11 @@ ul.share li:hover i {
|
|||
.article-widget h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Dark theme
|
||||
**************************************************/
|
||||
|
||||
.dark .article-metadata a {
|
||||
color: rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
36
wowchemy/assets/scss/wowchemy/elements/_media.scss
Normal file
36
wowchemy/assets/scss/wowchemy/elements/_media.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/*************************************************
|
||||
* Gallery.
|
||||
**************************************************/
|
||||
|
||||
.gallery {
|
||||
margin: 0.5em -4px 1.5em -4px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
// Satisfy Lighthouse criteria even if a lazy image hasn't loaded yet.
|
||||
min-height: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
a[data-fancybox] {
|
||||
text-decoration: none;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.gallery a[data-fancybox] img {
|
||||
height: 250px;
|
||||
width: auto;
|
||||
max-width: inherit;
|
||||
display: inherit;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
box-shadow: none;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.fancybox-caption {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
62
wowchemy/assets/scss/wowchemy/elements/_table.scss
Normal file
62
wowchemy/assets/scss/wowchemy/elements/_table.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/*************************************************
|
||||
* Tables
|
||||
**************************************************/
|
||||
|
||||
/* Based on Bootstrap's `table-responsive` style. */
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
// Override `article-style`'s `break-word` wrapping to make wide tables scrollable.
|
||||
overflow-wrap: normal;
|
||||
word-wrap: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
table > thead > tr > th,
|
||||
table > tbody > tr > th,
|
||||
table > tfoot > tr > th,
|
||||
table > thead > tr > td,
|
||||
table > tbody > tr > td,
|
||||
table > tfoot > tr > td {
|
||||
padding: 8px;
|
||||
line-height: 1.43;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
table > caption + thead > tr:first-child > th,
|
||||
table > colgroup + thead > tr:first-child > th,
|
||||
table > thead:first-child > tr:first-child > th,
|
||||
table > caption + thead > tr:first-child > td,
|
||||
table > colgroup + thead > tr:first-child > td,
|
||||
table > thead:first-child > tr:first-child > td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
table > tbody + tbody {
|
||||
border-top: 2px solid #ddd;
|
||||
}
|
||||
|
||||
table table {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Table Striped */
|
||||
table > tbody > tr:nth-child(odd) > td,
|
||||
table > tbody > tr:nth-child(odd) > th {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
/* Table Hover */
|
||||
table > tbody > tr:hover > td,
|
||||
table > tbody > tr:hover > th {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
51
wowchemy/assets/scss/wowchemy/elements/_tag.scss
Normal file
51
wowchemy/assets/scss/wowchemy/elements/_tag.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/**************************************************
|
||||
* Tags/Labels
|
||||
**************************************************/
|
||||
|
||||
.badge-light {
|
||||
border: none;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
font-weight: normal;
|
||||
border-radius: 3px;
|
||||
padding: 5px 10px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.article-tags > .badge-light:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.badge-light[href]:focus,
|
||||
.badge-light[href]:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
a.badge:focus,
|
||||
a.badge:hover {
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
}
|
||||
|
||||
.tag-cloud a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 8px 10px;
|
||||
word-wrap: break-word;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.tag-cloud a:active,
|
||||
.tag-cloud a:focus,
|
||||
.tag-cloud a:hover {
|
||||
color: $sta-primary-dark;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.dark .tag-cloud a:active,
|
||||
.dark .tag-cloud a:focus,
|
||||
.dark .tag-cloud a:hover {
|
||||
color: $sta-primary-light;
|
||||
}
|
||||
3
wowchemy/assets/scss/wowchemy/helpers/_all.scss
Normal file
3
wowchemy/assets/scss/wowchemy/helpers/_all.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/* Wowchemy Helpers */
|
||||
|
||||
@import 'word-wrap';
|
||||
14
wowchemy/assets/scss/wowchemy/helpers/_word-wrap.scss
Normal file
14
wowchemy/assets/scss/wowchemy/helpers/_word-wrap.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
@mixin word-wrap() {
|
||||
// Break very long words such as pasted URL strings.
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
//-ms-word-break: break-all;
|
||||
//word-break: break-all;
|
||||
word-break: break-word;
|
||||
|
||||
// Add a hyphen where the word breaks, if supported (No Blink).
|
||||
//-ms-hyphens: auto;
|
||||
//-moz-hyphens: auto;
|
||||
//-webkit-hyphens: auto;
|
||||
//hyphens: auto;
|
||||
}
|
||||
6
wowchemy/assets/scss/wowchemy/layouts/_all.scss
Normal file
6
wowchemy/assets/scss/wowchemy/layouts/_all.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@import 'book';
|
||||
@import 'footer';
|
||||
@import 'listing';
|
||||
@import 'publication';
|
||||
@import 'rtl';
|
||||
@import 'search';
|
||||
|
|
@ -32,13 +32,13 @@
|
|||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.media.stream-item .article-title,
|
||||
.card-simple .article-title {
|
||||
.card-simple .article-title,
|
||||
.media.stream-item .article-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.media.stream-item .article-style,
|
||||
.card-simple .article-style {
|
||||
.card-simple .article-style,
|
||||
.media.stream-item .article-style {
|
||||
margin-top: 2px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
33
wowchemy/assets/scss/wowchemy/layouts/_publication.scss
Normal file
33
wowchemy/assets/scss/wowchemy/layouts/_publication.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/*************************************************
|
||||
* Publications
|
||||
**************************************************/
|
||||
|
||||
.pub-banner {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.pub-row-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#container-publications {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.li-cite-author {
|
||||
font-size: 1em;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.li-cite-author a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.dark .li-cite-author a {
|
||||
color: rgb(248, 248, 242);
|
||||
}
|
||||
|
|
@ -22,22 +22,6 @@
|
|||
background-color: $sta-dark-background;
|
||||
}
|
||||
|
||||
// Hide body scrollbars whilst searching in modal
|
||||
.searching {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.searching .search-modal {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
visibility: visible;
|
||||
z-index: 1031; /* Highest index, higher than navbar. */
|
||||
}
|
||||
|
||||
.searching #search-box #search-query {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-modal > .container {
|
||||
padding-top: 70px; /* Navbar height. */
|
||||
}
|
||||
|
|
@ -94,7 +78,7 @@
|
|||
font-weight: 900;
|
||||
content: '\f002';
|
||||
font-size: 1rem;
|
||||
opacity: 0.25;
|
||||
opacity: 0.5;
|
||||
line-height: 1rem;
|
||||
position: absolute;
|
||||
left: 0.7rem;
|
||||
|
|
@ -102,6 +86,10 @@
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.dark #search-query {
|
||||
background-color: $sta-dark-background;
|
||||
}
|
||||
|
||||
#search-box #search-query {
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 1rem;
|
||||
|
|
@ -112,10 +100,6 @@
|
|||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.dark #search-query {
|
||||
background-color: $sta-dark-background;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: $sta-primary;
|
||||
box-shadow: 0 0 0 0.2rem $sta-primary-light;
|
||||
|
|
@ -212,3 +196,18 @@
|
|||
.dark .ais-search-box--input {
|
||||
background-color: $sta-dark-background;
|
||||
}
|
||||
// Hide body scrollbars whilst searching in modal
|
||||
.searching {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.searching .search-modal {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
visibility: visible;
|
||||
z-index: 1031; /* Highest index, higher than navbar. */
|
||||
}
|
||||
|
||||
.searching #search-box #search-query {
|
||||
width: 100%;
|
||||
}
|
||||
102
wowchemy/assets/scss/wowchemy/widgets/_about.scss
Normal file
102
wowchemy/assets/scss/wowchemy/widgets/_about.scss
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
/*************************************************
|
||||
* About widget
|
||||
**************************************************/
|
||||
|
||||
#profile {
|
||||
text-align: center;
|
||||
padding: 30px 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
margin: 0 auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// Use smaller avatar size in About widget on small devices.
|
||||
@include media-breakpoint-down(sm) {
|
||||
.wg-about .avatar {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-square {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.portrait-title h2 {
|
||||
font-size: 1.75em;
|
||||
font-weight: 300;
|
||||
color: #000;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
.portrait-title h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
ul.network-icon {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#profile .network-icon {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.network-icon li {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.network-icon li:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.network-icon li:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.big-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
ul.ul-interests li {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
ul.ul-edu {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.ul-edu li {
|
||||
position: relative;
|
||||
padding: 0 15px 4px 3px;
|
||||
}
|
||||
|
||||
ul.ul-edu li .description p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.ul-edu li .description p.course {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
ul.ul-edu li .description p.institution {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
8
wowchemy/assets/scss/wowchemy/widgets/_all.scss
Normal file
8
wowchemy/assets/scss/wowchemy/widgets/_all.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@import 'base';
|
||||
@import 'about';
|
||||
@import 'contact';
|
||||
@import 'experience';
|
||||
@import 'featurette';
|
||||
@import 'hero';
|
||||
@import 'people';
|
||||
@import 'portfolio';
|
||||
220
wowchemy/assets/scss/wowchemy/widgets/_base.scss
Normal file
220
wowchemy/assets/scss/wowchemy/widgets/_base.scss
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
/*************************************************
|
||||
* Page Builder: sections and widgets
|
||||
**************************************************/
|
||||
|
||||
.home-section {
|
||||
// Use `background` rather than `background-color` so it can support gradients in theme packs.
|
||||
background: $sta-home-section-odd;
|
||||
position: relative; // Required for component positioning within section.
|
||||
padding: 110px 0 110px 0;
|
||||
z-index: 0; // Explicit z-order otherwise `.home-section-bg` can be hidden by any `.home-section` background.
|
||||
}
|
||||
|
||||
// Responsive fullscreen option for widgets
|
||||
.home-section.fullscreen {
|
||||
min-height: calc(100vh - 70px);
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.home-section.fullscreen {
|
||||
min-height: calc(100vh - 50px);
|
||||
}
|
||||
}
|
||||
.no-navbar .home-section.fullscreen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// Section theming
|
||||
|
||||
.home-section.light,
|
||||
.home-section.light h1 {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.home-section.light a {
|
||||
color: $sta-link;
|
||||
}
|
||||
|
||||
.home-section.dark a {
|
||||
color: $sta-dark-link;
|
||||
}
|
||||
|
||||
/* Override dark colors that may be inherited from body.dark */
|
||||
.home-section.dark,
|
||||
.home-section.dark h1,
|
||||
.home-section.dark h2,
|
||||
.home-section.dark h3,
|
||||
.home-section.dark a:not(.btn) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Underline links in dark sections to separate them from text */
|
||||
.home-section.dark a:not(.btn):not(.hero-cta-alt) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Revert Alert Box Link style (.home-section.dark style above should not be applied to it) */
|
||||
.home-section.dark .alert a {
|
||||
color: inherit !important;
|
||||
text-decoration: inherit !important;
|
||||
}
|
||||
|
||||
/* Big underline style for links in dark sections */
|
||||
|
||||
/* Disabled as it's an experimental style that requires CSS NOT Selector Level 4 (only in Safari) */
|
||||
|
||||
/*
|
||||
.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a) {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a):after {
|
||||
background: #fff;
|
||||
content: "";
|
||||
height: 2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
} */
|
||||
|
||||
// Fill padding of `.home-section` parent
|
||||
.home-section-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%; // Or fill-available when supported.
|
||||
width: 100%; // Or fill-available when supported.
|
||||
z-index: -1; // Place bg div behind content.
|
||||
}
|
||||
|
||||
/* Default background image properties for home sections. */
|
||||
.home-section-bg.bg-image {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* Create a parallax-like scrolling effect on desktop browsers. */
|
||||
.parallax {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
// Workaround issue with mobile browser support for fixed parallax background.
|
||||
@include media-breakpoint-down(md) {
|
||||
.parallax {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.home-section:first-of-type {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.home-section:nth-of-type(even) {
|
||||
background: $sta-home-section-even;
|
||||
}
|
||||
|
||||
.dark .home-section {
|
||||
background: $sta-dark-home-section-odd;
|
||||
}
|
||||
|
||||
.dark .home-section:nth-of-type(even) {
|
||||
background: $sta-dark-home-section-even;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.home-section {
|
||||
padding: 60px 0 60px 0;
|
||||
}
|
||||
.home-section:first-of-type {
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-heading h1 {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.section-subheading {
|
||||
font-size: 1.25rem;
|
||||
font-family: $sta-font-heading, sans-serif;
|
||||
font-weight: bold;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.section-heading p {
|
||||
font-weight: 400;
|
||||
font-size: 1.1rem;
|
||||
color: rgba(0, 0, 0, 0.54); // Accessible contrast, matching footer text color.
|
||||
}
|
||||
|
||||
.dark .section-heading p {
|
||||
color: rgb(158, 158, 158);
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Widgets (common)
|
||||
**************************************************/
|
||||
|
||||
.see-all {
|
||||
margin-top: 2rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Reset code highlighting style in Alerts when Alert is child of a `.dark` widget, but Alert should be light.` */
|
||||
|
||||
/* But will this affect page which should have dark Alert? */
|
||||
.dark .alert pre,
|
||||
.dark .alert code {
|
||||
color: initial;
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Slider Widget
|
||||
**************************************************/
|
||||
|
||||
/* Clear `.home-section` as any padding or animation interferes with Slider's layout and animations. */
|
||||
.home-section.wg-slider {
|
||||
padding: 0;
|
||||
animation: none;
|
||||
animation-delay: unset;
|
||||
}
|
||||
|
||||
/* The Slider widget reuses the Hero widget's `.wg-hero` class.
|
||||
* We must remove any `animation` and `clear` (although Hero no longer sets `clear: both`) in this instance or
|
||||
* multiple slides can be `.active` at once. */
|
||||
.carousel-inner .wg-hero {
|
||||
animation: none;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Talks
|
||||
**************************************************/
|
||||
|
||||
.talk-metadata {
|
||||
color: #4b4f56;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Accomplishments
|
||||
**************************************************/
|
||||
|
||||
.card.course {
|
||||
margin-bottom: 1rem; /* More compact spacing than Experience widget as typically more items here. */
|
||||
}
|
||||
|
||||
.card.course:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.course .card-subtitle a {
|
||||
border-bottom: solid 1px transparent;
|
||||
}
|
||||
|
||||
.course .card-subtitle a:hover {
|
||||
border-bottom: solid 1px;
|
||||
text-decoration: none;
|
||||
}
|
||||
36
wowchemy/assets/scss/wowchemy/widgets/_contact.scss
Normal file
36
wowchemy/assets/scss/wowchemy/widgets/_contact.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/*************************************************
|
||||
* Contact
|
||||
**************************************************/
|
||||
|
||||
.wg-contact .fa-ul {
|
||||
margin-left: 3.14285714rem; /* Must be > `fa-2x` icon size. */
|
||||
}
|
||||
|
||||
.wg-contact .fa-li {
|
||||
position: absolute;
|
||||
left: -3.14285714rem; /* Negative of `.wg-contact .fa-ul` margin. */
|
||||
width: 2rem; /* Match `fa-2x` icon size. */
|
||||
top: 0.14285714em; /* Default FA value. */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wg-contact li {
|
||||
padding-top: 0.8rem; /* Align text with bottom of `fa-2x` icon. */
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.wg-contact li:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Prevent OpenStreetMap inheriting link color from section of a different theme variation.
|
||||
// E.g. Light colored OpenStreetMap UI inheriting dark themed link (`.home-section.dark a`)
|
||||
// from a dark widget page section.
|
||||
#map a {
|
||||
color: initial;
|
||||
}
|
||||
46
wowchemy/assets/scss/wowchemy/widgets/_experience.scss
Normal file
46
wowchemy/assets/scss/wowchemy/widgets/_experience.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/*************************************************
|
||||
* Experience
|
||||
**************************************************/
|
||||
|
||||
.exp-title {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.exp-company {
|
||||
font-weight: normal !important;
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.exp-meta {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.experience .card-text,
|
||||
.experience .card-text p {
|
||||
color: #000 !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.dark .experience .text-muted {
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
|
||||
.dark .experience .card-text,
|
||||
.dark .experience .card-text p {
|
||||
color: rgb(248, 248, 242) !important;
|
||||
}
|
||||
|
||||
// For a UL after P, remove the spacing between (P margin-bottom) without affecting any nested lists.
|
||||
.card .card-text p + ul {
|
||||
margin-top: -1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.experience .m-2 .border,
|
||||
.experience .col.border-right {
|
||||
border-color: $sta-primary !important;
|
||||
}
|
||||
|
||||
.experience .m-2 .border.exp-fill {
|
||||
background-color: $sta-primary !important;
|
||||
}
|
||||
30
wowchemy/assets/scss/wowchemy/widgets/_featurette.scss
Normal file
30
wowchemy/assets/scss/wowchemy/widgets/_featurette.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/*************************************************
|
||||
* Featurette Widget
|
||||
**************************************************/
|
||||
|
||||
.featurette {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.featurette .section-subheading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dark .featurette,
|
||||
.dark .featurette .section-subheading {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.featurette-icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: $sta-primary;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
80
wowchemy/assets/scss/wowchemy/widgets/_hero.scss
Normal file
80
wowchemy/assets/scss/wowchemy/widgets/_hero.scss
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/*************************************************
|
||||
* Hero Widget
|
||||
**************************************************/
|
||||
|
||||
.wg-hero {
|
||||
padding: 3em 0; // More compact top and bottom padding for Hero.
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.7rem;
|
||||
margin-top: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 768px;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.wg-hero.dark .hero-title,
|
||||
.wg-hero.dark .hero-lead,
|
||||
.wg-hero.dark .hero-cta-alt,
|
||||
.wg-hero.dark .hero-note > * {
|
||||
color: #fff;
|
||||
|
||||
/* text-shadow: 1px 1px 4px rgba(0,0,0,0.5); */
|
||||
|
||||
/* Uncomment to standout on complicated backgrounds. */
|
||||
}
|
||||
|
||||
.wg-hero.dark a:not(.wg-hero .btn) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wg-hero .hero-lead a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wg-hero .cta-btns {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wg-hero .btn {
|
||||
padding: 0.6em 2.1em;
|
||||
}
|
||||
|
||||
.wg-hero.dark .btn {
|
||||
color: $sta-primary-dark;
|
||||
}
|
||||
|
||||
a.hero-cta-alt {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
a.hero-cta-alt:active,
|
||||
a.hero-cta-alt:focus,
|
||||
a.hero-cta-alt:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.wg-hero .btn-lg {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.wg-hero .hero-note {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.hero-media {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
33
wowchemy/assets/scss/wowchemy/widgets/_people.scss
Normal file
33
wowchemy/assets/scss/wowchemy/widgets/_people.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/*************************************************
|
||||
* People widget
|
||||
**************************************************/
|
||||
|
||||
.people-widget {
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.people-widget .portrait-title h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.people-widget .portrait-title h3 {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.people-widget .avatar {
|
||||
width: 80%;
|
||||
max-width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.people-widget .col-sm-auto {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.people-widget .col-sm-auto {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
79
wowchemy/assets/scss/wowchemy/widgets/_portfolio.scss
Normal file
79
wowchemy/assets/scss/wowchemy/widgets/_portfolio.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/*************************************************
|
||||
* Projects
|
||||
**************************************************/
|
||||
|
||||
.project-widget-simple li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.project-widget-simple li:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.project-widget-simple .project-title {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.project-widget-simple .project-summary {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.projects-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
/* margin-top: 5rem; */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-toolbar {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
position: relative;
|
||||
width: calc(
|
||||
33.3% - 13.3px
|
||||
); /* Fluid 3 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.project-card {
|
||||
width: calc(
|
||||
50% - 10px
|
||||
); /* Fluid 2 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.project-card {
|
||||
width: 100%; /* 1 column */
|
||||
}
|
||||
}
|
||||
|
||||
.project-item {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.project-card.project-item {
|
||||
margin: 0 0 20px 0; /* Set to Isotope's gutter size */
|
||||
}
|
||||
|
||||
.project-card .card {
|
||||
margin: 0; /* Remove default card margin and use Isotope gutter */
|
||||
}
|
||||
|
||||
.project-showcase .project-item {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.project-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.isotope-item {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.isotope-item:hover {
|
||||
z-index: 3;
|
||||
}
|
||||
|
|
@ -5,19 +5,11 @@
|
|||
* License: https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/LICENSE.md
|
||||
**************************************************/
|
||||
|
||||
@import 'root';
|
||||
@import 'callouts';
|
||||
@import 'shortcodes';
|
||||
@import 'icons';
|
||||
@import 'footer';
|
||||
@import 'nav';
|
||||
@import 'card';
|
||||
@import 'search';
|
||||
@import 'content';
|
||||
@import 'listings';
|
||||
@import 'widgets';
|
||||
@import 'book';
|
||||
@import 'helpers/all';
|
||||
@import 'base';
|
||||
@import 'elements/all';
|
||||
@import 'components/all';
|
||||
@import 'layouts/all';
|
||||
@import 'widgets/all';
|
||||
@import 'dark';
|
||||
@import 'integrations';
|
||||
@import 'rtl';
|
||||
@import 'breadcrumb';
|
||||
|
|
|
|||
|
|
@ -28,8 +28,9 @@
|
|||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"lint": "yarn run lint:js && yarn run lint:style",
|
||||
"lint:js": "eslint assets/js/",
|
||||
"lint:style": "stylelint \"assets/{css,scss}/**/*.{css,scss}\"",
|
||||
"lint:style": "stylelint \"assets/scss/**/*.scss\"",
|
||||
"format": "prettier --write \"*.{css,js,json,md,scss}\" \"./**/*.{css,js,json,md,scss}\"",
|
||||
"stylelint-conflict-check": "stylelint-config-prettier-check"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue