566 lines
9.8 KiB
SCSS
566 lines
9.8 KiB
SCSS
@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 */
|