Init Commit
This commit is contained in:
@@ -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