Init Commit
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
|
||||
.icon-threads:before { content: '\e800'; } /* '' */
|
||||
.icon-bluesky:before { content: '\e801'; } /* '' */
|
||||
.icon-x-twitter:before { content: '\e802'; } /* '' */
|
||||
.icon-email:before { content: '\e803'; } /* '' */
|
||||
.icon-tiktok:before { content: '\e804'; } /* '' */
|
||||
.icon-search:before { content: '\e805'; } /* '' */
|
||||
.icon-user:before { content: '\f007'; } /* '' */
|
||||
.icon-table-list:before { content: '\f00b'; } /* '' */
|
||||
.icon-download:before { content: '\f019'; } /* '' */
|
||||
.icon-circle-info:before { content: '\f05a'; } /* '' */
|
||||
.icon-square-twitter:before { content: '\f081'; } /* '' */
|
||||
.icon-square-facebook:before { content: '\f082'; } /* '' */
|
||||
.icon-linkedin:before { content: '\f08c'; } /* '' */
|
||||
.icon-square-github:before { content: '\f092'; } /* '' */
|
||||
.icon-circle-arrow-left:before { content: '\f0a8'; } /* '' */
|
||||
.icon-circle-arrow-right:before { content: '\f0a9'; } /* '' */
|
||||
.icon-circle-arrow-up:before { content: '\f0aa'; } /* '' */
|
||||
.icon-circle-arrow-down:before { content: '\f0ab'; } /* '' */
|
||||
.icon-quote-left:before { content: '\f10d'; } /* '' */
|
||||
.icon-face-smile:before { content: '\f118'; } /* '' */
|
||||
.icon-square-arrow-up-right:before { content: '\f14c'; } /* '' */
|
||||
.icon-youtube:before { content: '\f167'; } /* '' */
|
||||
.icon-square-xing:before { content: '\f169'; } /* '' */
|
||||
.icon-stack-overflow:before { content: '\f16c'; } /* '' */
|
||||
.icon-instagram:before { content: '\f16d'; } /* '' */
|
||||
.icon-dribbble:before { content: '\f17d'; } /* '' */
|
||||
.icon-behance:before { content: '\f1b4'; } /* '' */
|
||||
.icon-file-pdf:before { content: '\f1c1'; } /* '' */
|
||||
.icon-codepen:before { content: '\f1cb'; } /* '' */
|
||||
.icon-yelp:before { content: '\f1e9'; } /* '' */
|
||||
.icon-medium:before { content: '\f23a'; } /* '' */
|
||||
.icon-meetup:before { content: '\f2e0'; } /* '' */
|
||||
.icon-cloud-arrow-down:before { content: '\f381'; } /* '' */
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,89 @@
|
||||
@font-face {
|
||||
font-family: 'adritian-icons';
|
||||
src: url('../fonts/adritian-icons.eot?62019798');
|
||||
src: url('../fonts/adritian-icons.eot?62019798#iefix') format('embedded-opentype'),
|
||||
url('../fonts/adritian-icons.woff2?62019798') format('woff2'),
|
||||
url('../fonts/adritian-icons.woff?62019798') format('woff'),
|
||||
url('../fonts/adritian-icons.ttf?62019798') format('truetype'),
|
||||
url('../fonts/adritian-icons.svg?62019798#adritian-icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
|
||||
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
|
||||
/*
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: 'adritian-icons';
|
||||
src: url('../fonts/adritian-icons.svg?62019798#adritian-icons') format('svg');
|
||||
}
|
||||
}
|
||||
*/
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
font-family: "adritian-icons";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: never;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
.icon-threads:before { content: '\e800'; } /* '' */
|
||||
.icon-bluesky:before { content: '\e801'; } /* '' */
|
||||
.icon-x-twitter:before { content: '\e802'; } /* '' */
|
||||
.icon-email:before { content: '\e803'; } /* '' */
|
||||
.icon-tiktok:before { content: '\e804'; } /* '' */
|
||||
.icon-search:before { content: '\e805'; } /* '' */
|
||||
.icon-user:before { content: '\f007'; } /* '' */
|
||||
.icon-table-list:before { content: '\f00b'; } /* '' */
|
||||
.icon-download:before { content: '\f019'; } /* '' */
|
||||
.icon-circle-info:before { content: '\f05a'; } /* '' */
|
||||
.icon-square-twitter:before { content: '\f081'; } /* '' */
|
||||
.icon-square-facebook:before { content: '\f082'; } /* '' */
|
||||
.icon-linkedin:before { content: '\f08c'; } /* '' */
|
||||
.icon-square-github:before { content: '\f092'; } /* '' */
|
||||
.icon-circle-arrow-left:before { content: '\f0a8'; } /* '' */
|
||||
.icon-circle-arrow-right:before { content: '\f0a9'; } /* '' */
|
||||
.icon-circle-arrow-up:before { content: '\f0aa'; } /* '' */
|
||||
.icon-circle-arrow-down:before { content: '\f0ab'; } /* '' */
|
||||
.icon-quote-left:before { content: '\f10d'; } /* '' */
|
||||
.icon-face-smile:before { content: '\f118'; } /* '' */
|
||||
.icon-square-arrow-up-right:before { content: '\f14c'; } /* '' */
|
||||
.icon-youtube:before { content: '\f167'; } /* '' */
|
||||
.icon-square-xing:before { content: '\f169'; } /* '' */
|
||||
.icon-stack-overflow:before { content: '\f16c'; } /* '' */
|
||||
.icon-instagram:before { content: '\f16d'; } /* '' */
|
||||
.icon-dribbble:before { content: '\f17d'; } /* '' */
|
||||
.icon-behance:before { content: '\f1b4'; } /* '' */
|
||||
.icon-file-pdf:before { content: '\f1c1'; } /* '' */
|
||||
.icon-codepen:before { content: '\f1cb'; } /* '' */
|
||||
.icon-yelp:before { content: '\f1e9'; } /* '' */
|
||||
.icon-medium:before { content: '\f23a'; } /* '' */
|
||||
.icon-meetup:before { content: '\f2e0'; } /* '' */
|
||||
.icon-cloud-arrow-down:before { content: '\f381'; } /* '' */
|
||||
@@ -0,0 +1,85 @@
|
||||
/*
|
||||
Animation example, for spinners
|
||||
*/
|
||||
.animate-spin {
|
||||
-moz-animation: spin 2s infinite linear;
|
||||
-o-animation: spin 2s infinite linear;
|
||||
-webkit-animation: spin 2s infinite linear;
|
||||
animation: spin 2s infinite linear;
|
||||
display: inline-block;
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-o-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-ms-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
/* placeholder */
|
||||
@@ -0,0 +1 @@
|
||||
/* placeholder file: to be populated by npm scripts */
|
||||
@@ -0,0 +1 @@
|
||||
/* You can customize theme styles here */
|
||||
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M-1-2h18v18H-1z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M1.25.25h13.5a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-.75.75H1.25A.75.75 0 0 1 .5 13V1a.75.75 0 0 1 .75-.75zm6.795 6.512L3.236 2.68l-.971 1.143 5.79 4.916 5.686-4.92-.982-1.135-4.713 4.08h-.001z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 419 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M-1-1h18v18H-1z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M8 15.5a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15zM4.25 8a3.75 3.75 0 0 0 7.5 0h-1.5a2.25 2.25 0 1 1-4.5 0h-1.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 337 B |
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
@@ -0,0 +1,98 @@
|
||||
/*!
|
||||
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2024 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
*/
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
console.log('Dark mode toggle script loaded')
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme')
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme)
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
const storedTheme = getStoredTheme()
|
||||
if (storedTheme) {
|
||||
return storedTheme
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
function setTheme(theme) {
|
||||
// Apply a transition class before changing theme
|
||||
document.documentElement.classList.add('theme-transition');
|
||||
|
||||
// Set the new theme
|
||||
if (theme === 'auto') {
|
||||
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
document.documentElement.setAttribute('data-bs-theme', isDark ? 'dark' : 'light');
|
||||
// Store the actual value for smoother transitions
|
||||
document.documentElement.setAttribute('data-theme-auto', 'true');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
document.documentElement.removeAttribute('data-theme-auto');
|
||||
}
|
||||
|
||||
// Remove the transition class after a short delay
|
||||
setTimeout(() => {
|
||||
document.documentElement.classList.remove('theme-transition');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Apply theme immediately to prevent flash
|
||||
setTheme(getPreferredTheme())
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitcher = document.querySelectorAll('.bd-theme-selector')
|
||||
|
||||
if (!themeSwitcher) {
|
||||
return
|
||||
}
|
||||
|
||||
const themeSwitcherText = document.querySelectorAll('.bd-theme-text')
|
||||
const activeTheme = document.querySelectorAll('.current-theme')
|
||||
const btnToActive = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
|
||||
//const iconOfActiveBtn = btnToActive.querySelector('span.theme-icon')
|
||||
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active')
|
||||
element.setAttribute('aria-pressed', 'false')
|
||||
})
|
||||
for (const element of btnToActive){
|
||||
element.setAttribute('aria-pressed', 'true')
|
||||
}
|
||||
for (const element of activeTheme) {
|
||||
element.textContent = btnToActive[0].textContent
|
||||
}
|
||||
const themeSwitcherLabel = `${themeSwitcherText[0].textContent} (${btnToActive[0].dataset.bsThemeValue})`
|
||||
for (const element of themeSwitcher) {
|
||||
element.setAttribute('aria-label', themeSwitcherLabel)
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for system preference changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
|
||||
const storedTheme = getStoredTheme()
|
||||
if (storedTheme === 'auto' || (!storedTheme && document.documentElement.getAttribute('data-theme-auto') === 'true')) {
|
||||
setTheme('auto')
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme())
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const theme = toggle.getAttribute('data-bs-theme-value')
|
||||
setStoredTheme(theme)
|
||||
setTheme(theme)
|
||||
showActiveTheme(theme, true)
|
||||
})
|
||||
})
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,4 @@
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-000000-0');
|
||||
@@ -0,0 +1,56 @@
|
||||
// Wait for the DOM content to be fully loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Create the overlay element if it doesn't exist
|
||||
if (!document.querySelector('.transition-overlay')) {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'transition-overlay';
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
|
||||
// Find all internal links
|
||||
for (const link of document.querySelectorAll('a')) {
|
||||
const href = link.getAttribute('href');
|
||||
|
||||
// Skip if no href
|
||||
if (!href) continue;
|
||||
|
||||
// Skip anchor links (both relative #section and absolute with fragments)
|
||||
if (href.startsWith('#') ||
|
||||
(link.hostname === window.location.hostname &&
|
||||
link.pathname === window.location.pathname &&
|
||||
link.hash)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Only handle links to the same site that aren't anchor links
|
||||
if (link.hostname === window.location.hostname &&
|
||||
!link.hasAttribute('target')) {
|
||||
|
||||
link.addEventListener('click', (e) => {
|
||||
// Don't handle special clicks (modifier keys)
|
||||
if (e.ctrlKey || e.shiftKey || e.metaKey || e.altKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
const destination = link.href;
|
||||
|
||||
// Add active class to trigger the overlay
|
||||
document.body.classList.add('transition-active');
|
||||
|
||||
// Navigate after a slight delay
|
||||
setTimeout(() => {
|
||||
window.location.href = destination;
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// If someone navigates back/forward, we need to hide the overlay
|
||||
window.addEventListener('pageshow', (event) => {
|
||||
// This works for both fresh loads and back-forward cache
|
||||
if (document.body.classList.contains('transition-active')) {
|
||||
document.body.classList.remove('transition-active');
|
||||
}
|
||||
});
|
||||
Binary file not shown.
Binary file not shown.
@@ -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