Init Commit
This commit is contained in:
@@ -0,0 +1,373 @@
|
||||
|
||||
|
||||
|
||||
.blog {
|
||||
|
||||
.post .post-title a {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.has-sidebar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Add specific ordering for sidebar right layout
|
||||
.col-sidebar {
|
||||
width: 100%;
|
||||
min-width: 280px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
min-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.col-content {
|
||||
&.narrow-content {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
// Blog post readability improvements
|
||||
.post-summary,
|
||||
.post-content {
|
||||
line-height: 1.75;
|
||||
font-size: 1.125rem; // 18px
|
||||
color: var(--bs-body-color);
|
||||
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 { font-size: 2.5rem; }
|
||||
h2 { font-size: 2rem; }
|
||||
h3 { font-size: 1.75rem; }
|
||||
h4 { font-size: 1.5rem; }
|
||||
h5 { font-size: 1.25rem; }
|
||||
h6 { font-size: 1.125rem; }
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--bs-primary);
|
||||
padding-left: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
font-style: italic;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--bs-gray-100);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: var(--bs-gray-100);
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem;
|
||||
overflow-x: auto;
|
||||
margin: 1.5rem 0;
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-sidebar {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
|
||||
.sidebar-section {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: #edf1f4;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
// Increase padding and set minimum width on smaller screens
|
||||
@media (max-width: 767px) {
|
||||
padding: 2rem;
|
||||
min-width: 280px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
min-width: 240px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-gray-900);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
a {
|
||||
color: $sidebar-link-color;
|
||||
transition: color 0.2s ease;
|
||||
font-weight: 300;;
|
||||
|
||||
&:hover {
|
||||
color: var(--bs-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.recent-posts {
|
||||
ul li {
|
||||
// Ensure proper wrapping on small screens
|
||||
@media (max-width: 767px) {
|
||||
a {
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-date {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
color: var(--bs-gray-900);
|
||||
}
|
||||
}
|
||||
|
||||
// Categories use the global tag styling for consistency
|
||||
}
|
||||
}
|
||||
|
||||
// Featured posts styling
|
||||
.featured-post-container {
|
||||
width: 100%;
|
||||
.p-4 {
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
.col-lg-8 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
||||
.p-md-5 {
|
||||
padding: 3rem !important;
|
||||
}
|
||||
|
||||
.col-lg-8 {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Featured post thumbnail styling
|
||||
.featured-thumbnail {
|
||||
max-height: 300px;
|
||||
width: auto;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (min-width: 992px) {
|
||||
max-height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
// Secondary featured posts image styling
|
||||
.secondary-featured-img {
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// Table of Contents styling
|
||||
.table-of-contents {
|
||||
margin: 2rem 0;
|
||||
padding: 1.5rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 4px solid var(--bs-primary);
|
||||
|
||||
.toc-heading {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-gray-900);
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
ul {
|
||||
padding-left: 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
a {
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--bs-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.blog {
|
||||
|
||||
.post .post-title a {
|
||||
color: $dark-primary;
|
||||
}
|
||||
|
||||
// Readability improvements for dark mode
|
||||
.post-summary,
|
||||
.post-content {
|
||||
color: var(--bs-gray-200);
|
||||
|
||||
code {
|
||||
background-color: var(--bs-gray-800);
|
||||
color: var(--bs-gray-200);
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: var(--bs-gray-800);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: var(--bs-gray-400);
|
||||
}
|
||||
}
|
||||
|
||||
.blog-sidebar {
|
||||
.sidebar-section {
|
||||
background: var(--bs-gray-800);
|
||||
|
||||
h3 {
|
||||
color: var(--bs-white);
|
||||
}
|
||||
|
||||
/* Remove the general black color for all links */
|
||||
/* ul li a {
|
||||
color: black;
|
||||
} */
|
||||
|
||||
&.recent-posts {
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
color: var(--bs-gray-500);
|
||||
}
|
||||
}
|
||||
|
||||
// Categories dark mode handled by global tag styling
|
||||
}
|
||||
}
|
||||
|
||||
// Table of Contents dark mode styling
|
||||
.table-of-contents {
|
||||
background: var(--bs-gray-800);
|
||||
|
||||
.toc-heading {
|
||||
color: var(--bs-white);
|
||||
}
|
||||
|
||||
.toc-content ul li a {
|
||||
color: var(--bs-gray-300);
|
||||
|
||||
&:hover {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-secondary{
|
||||
color: var(--bs-white);
|
||||
border-color: var(--bs-white);
|
||||
}
|
||||
}
|
||||
|
||||
.posts-list-simple {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li.post {
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 0.9rem;
|
||||
color: var(--bs-secondary-color);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
.experience__company {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
|
||||
/* enhanced contrast */
|
||||
@include color-mode(dark) {
|
||||
.experience__company {
|
||||
color: $dark-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.experience__location {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.experience + .experience {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
body.home div.experience {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.experience a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.experience.selected a,
|
||||
.experience:hover a,
|
||||
.experience:active a,
|
||||
.experience a:hover,
|
||||
.experience a:active {
|
||||
display: block;
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
.experience.selected a .experience__company,
|
||||
.experience:hover a .experience__company,
|
||||
.experience:active a .experience__company,
|
||||
.experience a:hover .experience__company,
|
||||
.experience a:active .experience__company,
|
||||
.experience.selected a .experience__date,
|
||||
.experience:hover a .experience__date,
|
||||
.experience:active a .experience__date,
|
||||
.experience a:hover .experience__date,
|
||||
.experience a:active .experience__date {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
.all-experience-container {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.experience__title {
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.experience__title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.experience__company {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.experience {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&__company-logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 600;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
&__company {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
.job-card {
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
|
||||
html[data-bs-theme="dark"] & {
|
||||
background-color: #2d2d2d;
|
||||
color: white;
|
||||
|
||||
.experience__title,
|
||||
.experience__company,
|
||||
.experience__date,
|
||||
.experience__location {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -0,0 +1,307 @@
|
||||
// Related Posts Styling
|
||||
.related-posts {
|
||||
margin: 2rem 0;
|
||||
padding-top: 2rem;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-gray-900);
|
||||
}
|
||||
|
||||
.related-posts-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.related-post-item {
|
||||
background: var(--bs-gray-100);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-primary);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover h4 {
|
||||
color: var(--bs-link-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.related-post-excerpt {
|
||||
font-size: 0.95rem;
|
||||
color: var(--bs-gray-700);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.related-post-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.post-date {
|
||||
color: var(--bs-gray-600);
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tag {
|
||||
background: var(--bs-primary);
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Social Sharing Styling
|
||||
.social-sharing {
|
||||
margin: 2rem 0;
|
||||
padding-top: 2rem;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-gray-900);
|
||||
}
|
||||
|
||||
.share-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.share-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.share-twitter {
|
||||
background: #1DA1F2;
|
||||
color: white;
|
||||
border-color: #1DA1F2;
|
||||
|
||||
&:hover {
|
||||
background: #1a8cd8;
|
||||
border-color: #1a8cd8;
|
||||
}
|
||||
}
|
||||
|
||||
&.share-linkedin {
|
||||
background: #0077B5;
|
||||
color: white;
|
||||
border-color: #0077B5;
|
||||
|
||||
&:hover {
|
||||
background: #006399;
|
||||
border-color: #006399;
|
||||
}
|
||||
}
|
||||
|
||||
&.share-facebook {
|
||||
background: #1877F2;
|
||||
color: white;
|
||||
border-color: #1877F2;
|
||||
|
||||
&:hover {
|
||||
background: #155db2;
|
||||
border-color: #155db2;
|
||||
}
|
||||
}
|
||||
|
||||
&.share-email {
|
||||
background: var(--bs-gray-700);
|
||||
color: white;
|
||||
border-color: var(--bs-gray-700);
|
||||
|
||||
&:hover {
|
||||
background: var(--bs-gray-800);
|
||||
border-color: var(--bs-gray-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table of Contents Styling
|
||||
.table-of-contents {
|
||||
margin: 2rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--bs-gray-100);
|
||||
border-radius: 0.5rem;
|
||||
border-left: 4px solid var(--bs-primary);
|
||||
|
||||
&.toc-sticky {
|
||||
@media (min-width: 992px) {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
max-height: calc(100vh - 4rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-gray-900);
|
||||
}
|
||||
|
||||
#TableOfContents {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
ul {
|
||||
padding-left: 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
a {
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
transition: color 0.2s ease;
|
||||
display: block;
|
||||
padding: 0.25rem 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--bs-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Comments Section Styling
|
||||
.comments-section {
|
||||
margin: 2rem 0;
|
||||
padding-top: 2rem;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-gray-900);
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Mode Adjustments
|
||||
@include color-mode(dark) {
|
||||
.related-posts {
|
||||
h3 {
|
||||
color: var(--bs-white);
|
||||
}
|
||||
|
||||
.related-post-item {
|
||||
background: var(--bs-gray-800);
|
||||
|
||||
a h4 {
|
||||
color: $dark-primary;
|
||||
}
|
||||
|
||||
.related-post-excerpt {
|
||||
color: var(--bs-gray-300);
|
||||
}
|
||||
|
||||
.related-post-meta {
|
||||
.post-date {
|
||||
color: var(--bs-gray-400);
|
||||
}
|
||||
|
||||
.post-tags .tag {
|
||||
background: $dark-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-sharing {
|
||||
h3 {
|
||||
color: var(--bs-white);
|
||||
}
|
||||
}
|
||||
|
||||
.table-of-contents {
|
||||
background: var(--bs-gray-800);
|
||||
border-left-color: $dark-primary;
|
||||
|
||||
h3 {
|
||||
color: var(--bs-white);
|
||||
}
|
||||
|
||||
#TableOfContents ul li a {
|
||||
color: var(--bs-gray-300);
|
||||
|
||||
&:hover {
|
||||
color: $dark-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
h3 {
|
||||
color: var(--bs-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
$color: white;
|
||||
$color-border: $base-color;
|
||||
$color-dark: scale-color($color, $lightness: -30%);
|
||||
$transition: 280ms all 120ms ease-out;
|
||||
|
||||
.underline-item {
|
||||
border-bottom: 1px solid $color;
|
||||
}
|
||||
|
||||
// prevents the menu content from not being visible
|
||||
// https://github.com/zetxek/adritian-free-hugo-theme/issues/206
|
||||
.header .navbar .nav-item.language-selector,
|
||||
.header .navbar .nav-item.theme-selector {
|
||||
overflow: visible;
|
||||
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.language-selector,
|
||||
.theme-selector {
|
||||
li.choice {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// footer button
|
||||
.footer_right button.btn,
|
||||
.footer_right button.btn:active{
|
||||
color: white;
|
||||
}
|
||||
|
||||
// dropdown item links
|
||||
.footer_right .btn-link .dropdown-item {
|
||||
color: $color;
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
.bd-navbar {
|
||||
padding: .75rem 0;
|
||||
background-color: transparent;
|
||||
|
||||
@media (forced-colors) {
|
||||
background-color: Canvas;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
content: "";
|
||||
background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
|
||||
}
|
||||
|
||||
.bd-navbar-toggle {
|
||||
@include media-breakpoint-down(lg) {
|
||||
width: 4.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
padding: 0;
|
||||
margin-right: -.5rem;
|
||||
border: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-left: -.5rem;
|
||||
}
|
||||
|
||||
.bi {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $white;
|
||||
@include transition(transform .2s ease-in-out);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler,
|
||||
.nav-link {
|
||||
padding-right: $spacer * .25;
|
||||
padding-left: $spacer * .25;
|
||||
color: rgba($white, .85);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav-svg {
|
||||
display: inline-block;
|
||||
vertical-align: -.125rem;
|
||||
}
|
||||
|
||||
.offcanvas-lg {
|
||||
background-color: var(--bd-violet-bg);
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
box-shadow: var(--bs-box-shadow-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-min-width: 12rem;
|
||||
--bs-dropdown-padding-x: .25rem;
|
||||
--bs-dropdown-padding-y: .25rem;
|
||||
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
|
||||
@include rfs(.875rem, --bs-dropdown-font-size);
|
||||
@include font-size(.875rem);
|
||||
@include border-radius(.5rem);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
|
||||
li + li {
|
||||
margin-top: .125rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@include border-radius(.25rem);
|
||||
|
||||
&:active {
|
||||
.bi {
|
||||
color: inherit !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 600;
|
||||
|
||||
.bi {
|
||||
display: block !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-end {
|
||||
--bs-dropdown-min-width: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.bd-navbar {
|
||||
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.transition-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
html[data-bs-theme="dark"] .transition-overlay {
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
.transition-active .transition-overlay {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
@media print {
|
||||
|
||||
.bd-navbar {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
* {
|
||||
color: black !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] body.page-cv .h1,
|
||||
html[data-bs-theme="dark"] .h2,
|
||||
html[data-bs-theme="dark"] .h3,
|
||||
html[data-bs-theme="dark"] .h4,
|
||||
html[data-bs-theme="dark"] .h5,
|
||||
html[data-bs-theme="dark"] .h6,
|
||||
html[data-bs-theme="dark"] h1,
|
||||
html[data-bs-theme="dark"] h2,
|
||||
html[data-bs-theme="dark"] h3,
|
||||
html[data-bs-theme="dark"] h4,
|
||||
html[data-bs-theme="dark"] h5,
|
||||
html[data-bs-theme="dark"] h6,
|
||||
html[data-bs-theme="dark"] .h1,
|
||||
html[data-bs-theme="dark"] .h2,
|
||||
html[data-bs-theme="dark"] .h3,
|
||||
html[data-bs-theme="dark"] .h4,
|
||||
html[data-bs-theme="dark"] .h5,
|
||||
html[data-bs-theme="dark"] .h6,
|
||||
html[data-bs-theme="dark"] h1,
|
||||
html[data-bs-theme="dark"] h2,
|
||||
html[data-bs-theme="dark"] h3,
|
||||
html[data-bs-theme="dark"] h4,
|
||||
html[data-bs-theme="dark"] h5,
|
||||
html[data-bs-theme="dark"] h6 {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.experience__meta {
|
||||
flex: 0 0 200px;
|
||||
}
|
||||
|
||||
.experience__description {
|
||||
flex: 1 1 400px;
|
||||
}
|
||||
|
||||
.experience__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
page-break-after: avoid;
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
section {
|
||||
page-break-after: avoid;
|
||||
break-after: avoid;
|
||||
break-before: avoid;
|
||||
}
|
||||
|
||||
p {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-experience {
|
||||
// Remove decorative elements
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
|
||||
// Ensure black text on white background
|
||||
color: #000 !important;
|
||||
|
||||
// Adjust spacing
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
// Make sure content is visible
|
||||
display: block !important;
|
||||
page-break-inside: avoid;
|
||||
|
||||
.experience {
|
||||
width: 100%;
|
||||
// Improve experience item layout for print
|
||||
page-break-inside: avoid;
|
||||
border: none !important;
|
||||
padding: 0.5cm 0 !important;
|
||||
|
||||
a {
|
||||
// Remove link styling
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
padding: 0 !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
&__company-logo {
|
||||
// Ensure logos print well
|
||||
print-color-adjust: exact;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
// Adjust text for better print readability
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
&__company,
|
||||
&__location,
|
||||
&__date,
|
||||
&__title {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide interactive elements
|
||||
.btn,
|
||||
.all-experience-container {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure job card prints well
|
||||
.job-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #ddd !important;
|
||||
padding: 1cm !important;
|
||||
margin-bottom: 1cm !important;
|
||||
|
||||
.company-logo {
|
||||
print-color-adjust: exact;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,106 @@
|
||||
// Search page styles
|
||||
.search-section {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
#search-results {
|
||||
margin-top: 2rem;
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
// Style for the "Please enter a word or phrase above" message
|
||||
.alert {
|
||||
margin: 1.5rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid #cce5ff;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #e6f2ff;
|
||||
color: #004085;
|
||||
}
|
||||
}
|
||||
|
||||
// Style for the search form
|
||||
#search-query {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
cursor: pointer;
|
||||
background-color: $base-color;
|
||||
color: white;
|
||||
border-color: $base-color;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($base-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Search result item styling
|
||||
#summary-template {
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode overrides
|
||||
@include color-mode(dark) {
|
||||
|
||||
#main-content.search-section {
|
||||
background-color: #181818 !important;
|
||||
color: #f8f9fa;
|
||||
|
||||
h2, h3 {
|
||||
color: #f8f9fa;
|
||||
}
|
||||
}
|
||||
|
||||
#search-query {
|
||||
background-color: #222222;
|
||||
border-color: #333333;
|
||||
color: #f8f9fa;
|
||||
|
||||
&::placeholder {
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba($base-color, 0.25);
|
||||
border-color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: $base-color;
|
||||
color: white;
|
||||
border-color: $base-color;
|
||||
}
|
||||
|
||||
#search-results {
|
||||
background-color: #222222;
|
||||
|
||||
.card-body {
|
||||
background-color: #222222;
|
||||
border-color: #333333;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #e0e0e0;
|
||||
margin: 0;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-color: #333 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
.skill-bar {
|
||||
height: 10px;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-bar-fill {
|
||||
height: 100%;
|
||||
background-color: $primary;
|
||||
border-radius: 5px;
|
||||
transition: width 1s ease-in-out;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background-color: #f8f9fa;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.skill-item:hover {
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.skill-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.skill-years {
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.skill-description {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.site-skills-section {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.site-skills-title {
|
||||
margin-bottom: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.site-skills-description {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.site-skills-section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@include color-mode(dark) {
|
||||
.skill-item {
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.skill-level, .skill-description {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.skill-years {
|
||||
background-color: #444;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.skill-bar {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.skill-bar-fill {
|
||||
background-color: $dark-primary;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/* Preload styles to prevent theme flash */
|
||||
:root {
|
||||
&[data-bs-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--bs-body-color: #fff;
|
||||
--bs-body-bg: #181818;
|
||||
}
|
||||
|
||||
&[data-bs-theme=light] {
|
||||
color-scheme: light;
|
||||
--bs-body-color: #000;
|
||||
--bs-body-bg: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure smooth transition when switching themes */
|
||||
html {
|
||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Prevent flicker on elements that change color with theme */
|
||||
body, p, h1, h2, h3, h4, h5, h6, a {
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Applied during theme changes to ensure smooth transitions */
|
||||
html.theme-transition,
|
||||
html.theme-transition *,
|
||||
html.theme-transition *:before,
|
||||
html.theme-transition *:after {
|
||||
transition: all 0s !important;
|
||||
-webkit-transition: all 0s !important;
|
||||
}
|
||||
|
||||
/* Specific auto mode handling - prevents flash when system preference changes */
|
||||
html[data-theme-auto="true"] {
|
||||
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
// Base colors
|
||||
$base-color: #478079; // #478079 - Your theme's primary color
|
||||
$primary: $base-color;
|
||||
$dark-primary: #66b2a9; // Brighter primary color for dark mode - enhanced contrast
|
||||
|
||||
// Link colors
|
||||
$link-color: $base-color;
|
||||
$link-hover-color: darken($base-color, 15%);
|
||||
$link-decoration: none;
|
||||
$sidebar-link-color: #000; // increased contrast
|
||||
|
||||
// Create CSS custom properties for Bootstrap
|
||||
:root {
|
||||
--bs-link-color: #{$base-color};
|
||||
--bs-link-color-rgb: #{red($base-color)}, #{green($base-color)}, #{blue($base-color)};
|
||||
--bs-link-hover-color: #{darken($base-color, 15%)};
|
||||
--bs-link-hover-color-rgb: #{red(darken($base-color, 15%))}, #{green(darken($base-color, 15%))}, #{blue(darken($base-color, 15%))};
|
||||
--bs-link-decoration: none;
|
||||
}
|
||||
|
||||
// Explicit link override for all <a> tags
|
||||
a {
|
||||
color: $base-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,565 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "variables";
|
||||
@import "theme-init";
|
||||
@import "bootstrap/bootstrap";
|
||||
@import "navbar";
|
||||
@import "menu";
|
||||
@import "raditian";
|
||||
@import "blog";
|
||||
@import "experience";
|
||||
@import "print";
|
||||
@import "search";
|
||||
@import "page-transition";
|
||||
@import "skills";
|
||||
@import "features";
|
||||
|
||||
/** main style **/
|
||||
.header .navbar-brand span:first-child {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.header .container {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
html body ::selection {
|
||||
background-color: $base-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
color: #000;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.btn:focus-visible{
|
||||
box-shadow: 0 0 0 0.2rem $primary;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
h1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
h3,
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
}
|
||||
p {
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 28px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
b, strong{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.display-1 {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
line-height: normal;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.showcase-section .platform-links.shortcode {
|
||||
/* align to the left margin */
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.display-1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.lead a,
|
||||
p a,
|
||||
span a {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
text-underline-position: from-font;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-thickness: 1px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.lead a:hover,
|
||||
p a:hover,
|
||||
span a:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
br {
|
||||
content: "";
|
||||
margin: 2em;
|
||||
display: block;
|
||||
font-size: 24%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.lead {
|
||||
font-size: 18px;
|
||||
}
|
||||
.contact {
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.ml-lg-auto,
|
||||
.mx-lg-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
#mobile-header-language-selector,
|
||||
#mobile-header-color-selector {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#mobile-header-language-selector,
|
||||
#mobile-header-color-selector {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#languages-dropdown-mobile-header,
|
||||
#theme-dropdown-mobile-header {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
a.dropdown-item.translation,
|
||||
li.dropdown-item.current.selected {
|
||||
width: 100%;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
li.dropdown-item.choice a {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.dropdown-menu button[aria-pressed="true"] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] {
|
||||
#dark-toggle {
|
||||
span.dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-bs-theme="light"] {
|
||||
#dark-toggle {
|
||||
span.light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer_links .nav-item .nav-link::after {
|
||||
color: white;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
/* skip to content */
|
||||
.skip-to-content-link {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
z-index: 999;
|
||||
padding: 1em;
|
||||
background-color: white;
|
||||
color: black;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.skip-to-content-link:focus {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* dark mode */
|
||||
@include color-mode(dark) {
|
||||
$primary: $dark-primary;
|
||||
html body,
|
||||
body {
|
||||
color: #fff;
|
||||
background-color: #181818;
|
||||
}
|
||||
.header .navbar-brand span:nth-child(2) {
|
||||
color: #fff;
|
||||
}
|
||||
.header .navbar .nav-item .nav-link::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
.header .navbar .nav-item .nav-link:hover a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
.header.collapse.show::before,
|
||||
.header.collapsing::before {
|
||||
background-color: #181818;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.header .navbar .nav-item:hover .nav-link::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 990px) {
|
||||
.header .navbar .nav-item:first-child {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.header .navbar .nav-item {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
.header--sticky-triggered {
|
||||
background: #181818;
|
||||
}
|
||||
.header .navbar-light .navbar-nav .nav-link,
|
||||
.header .navbar-light .navbar-nav .btn-link {
|
||||
color: #fff;
|
||||
}
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #fff;
|
||||
}
|
||||
.section li::before {
|
||||
background-color: $light-text-emphasis-dark;
|
||||
}
|
||||
.display-1 {
|
||||
color: #fff;
|
||||
}
|
||||
.lead {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lead a,
|
||||
p a,
|
||||
span a {
|
||||
color: #fff;
|
||||
}
|
||||
.lead a:hover,
|
||||
p a:hover,
|
||||
span a:hover {
|
||||
color: $dark-primary;
|
||||
}
|
||||
p {
|
||||
color: $light-text-emphasis-dark;
|
||||
}
|
||||
.platform-links [class^="icon-"] {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.education__degree,
|
||||
.experience__date {
|
||||
color: #a6a6a6;
|
||||
}
|
||||
.education__title {
|
||||
color: #fff;
|
||||
}
|
||||
.education__date {
|
||||
color: #d5d5d5;
|
||||
}
|
||||
.education::before {
|
||||
background-color: #202020;
|
||||
}
|
||||
.testimonial__author-info span {
|
||||
color: #f18983;
|
||||
}
|
||||
.section--contact .container {
|
||||
background-color: #181818;
|
||||
}
|
||||
.contact__info span {
|
||||
color: #fff;
|
||||
}
|
||||
.contact__info h3 {
|
||||
color: #bebdbd;
|
||||
}
|
||||
.section--contact {
|
||||
background-image: url(../img/contact-bg-dark.png);
|
||||
background-color: #181818;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
}
|
||||
.btn-frameless {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
.btn:focus-visible {
|
||||
color: black;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 0 0.2rem $primary;
|
||||
}
|
||||
.btn-frameless.disabled,
|
||||
.btn-frameless.focus,
|
||||
.btn-frameless:disabled,
|
||||
.btn-frameless:focus,
|
||||
.btn-frameless:hover,
|
||||
.btn-frameless:not(:disabled):not(.disabled).active,
|
||||
.btn-frameless:not(:disabled):not(.disabled):active,
|
||||
.show > .btn-frameless.dropdown-toggle {
|
||||
background-color: white;
|
||||
border-color: #fff;
|
||||
color: #181818;
|
||||
}
|
||||
input.form-control,
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
|
||||
textarea {
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
background-color: #181818;
|
||||
}
|
||||
input[type="text"]::placeholder,
|
||||
input[type="email"]::placeholder,
|
||||
textarea::placeholder {
|
||||
color: #6e6e6e;
|
||||
}
|
||||
input[type="text"]:focus,
|
||||
input[type="text"]:active,
|
||||
input[type="email"]:focus,
|
||||
input[type="email"]:active,
|
||||
textarea:focus,
|
||||
textarea:active {
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
.rad-subscription-group input,
|
||||
.rad-subscription-group textarea {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.rad-subscription-group input[type="text"]:focus,
|
||||
.rad-subscription-group input[type="email"]:focus,
|
||||
.rad-subscription-group input[type="password"]:focus,
|
||||
.rad-subscription-group textarea:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.posts-list article.summary {
|
||||
color: #c3c3c3;
|
||||
}
|
||||
.post-summary.post-content p,
|
||||
.post-summary.post-content * {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active,
|
||||
.dropdown-item:focus,
|
||||
.dropdown-item:hover {
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
// Blog post meta section dark mode
|
||||
#blog-single #meta {
|
||||
#topics,
|
||||
.tags {
|
||||
li a {
|
||||
background-color: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a3a3a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// General tags styling for dark mode (consistency across all pages)
|
||||
ul.tags,
|
||||
ul.topics,
|
||||
#topics,
|
||||
ul.list-taxonomy {
|
||||
li a {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: #e8e8e8;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 255, 255, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Blog sidebar dark mode improvements
|
||||
.blog-sidebar {
|
||||
.sidebar-section {
|
||||
background: linear-gradient(135deg, rgba(42, 42, 42, 0.6) 0%, rgba(35, 35, 35, 0.7) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
h3 {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.15);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ul.tags li a {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #e8e8e8;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.recent-posts {
|
||||
ul li {
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.post-date {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* end dark mode */
|
||||
Reference in New Issue
Block a user