diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss index 118fdca..1f1dffc 100644 --- a/docs/assets/css/style.scss +++ b/docs/assets/css/style.scss @@ -3,329 +3,6 @@ @import "{{ site.theme }}"; -// Import the Merriweather and an additional sans-serif font for headings -@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - -// GitHub Dark Theme Color Palette -$background-color: #0d1117; -$background-secondary-color: #161b22; -$text-color: #c9d1d9; -$text-muted-color: #8b949e; -$link-color: #58a6ff; -$link-hover-color: #1f6feb; -$border-color: #30363d; -$accent-color: #2f81f7; -$button-background-color: #238636; -$button-hover-background-color: #2ea043; -$input-background-color: #0d1117; -$code-background-color: #161b22; -$code-text-color: #c9d1d9; -$code-border-color: #30363d; -$code-keyword-color: #ff7b72; -$code-function-color: #d2a8ff; -$code-string-color: #a5d6ff; -$hr-color: #21262d; -$get-background-color: #238636; -$post-background-color: #d93f0b; - -// Global Styling -body { - background-color: $background-color; - color: $text-color; - font-family: 'Merriweather', serif; // Improved readability for body text - line-height: 1.8; // Increased line spacing for better readability - margin: 0; - padding: 0; - transition: background-color 0.3s ease, color 0.3s ease; - scroll-behavior: smooth; // Smooth scrolling for in-page navigation -} - -// Typography -h1, h2, h3, h4, h5, h6 { - color: $text-color; - font-family: 'Roboto', sans-serif; // Introduced a secondary font for headings - font-weight: 700; - margin-bottom: 1em; - padding-bottom: 0.3em; - border-bottom: 2px solid $border-color; - transition: border-color 0.3s ease; - line-height: 1.3; // Adjusted line height for headings to match new font -} - -// Paragraphs -p { - margin-bottom: 1.5em; - color: $text-muted-color; -} - -// Links -a { - color: $link-color; - text-decoration: none; - font-weight: 600; - transition: color 0.3s ease, text-decoration 0.3s ease; - - &:hover { - color: $link-hover-color; - text-decoration: underline; - } -} - -// Inline Code -code { - background-color: $code-background-color; - color: $code-text-color; - padding: 0.2em 0.4em; - border-radius: 4px; - font-family: 'Source Code Pro', monospace; - border: 1px solid $code-border-color; - transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; -} - -// Code Blocks -pre { - background-color: $code-background-color !important; - color: $code-text-color; - border: 1px solid $code-border-color; - padding: 1em; - border-radius: 6px; - overflow-x: auto; - font-family: 'Source Code Pro', monospace; - font-size: 0.95em; - line-height: 1.5; - transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; - - code { - background-color: transparent; - color: inherit; - padding: 0; - border: none; - } - - .hljs-keyword, - .hljs-selector-tag, - .hljs-literal, - .hljs-section, - .hljs-link { - color: $code-keyword-color; - } - - .hljs-function .hljs-title, - .hljs-title.class_, - .hljs-title.function_ { - color: $code-function-color; - } - - .hljs-string, - .hljs-meta .hljs-string { - color: $code-string-color; - } -} - -// Tables -table { - width: 100%; - border-collapse: separate; - border-spacing: 0; - margin: 1.5em 0; - border-radius: 8px; - overflow: hidden; - background-color: $background-secondary-color; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); // Added subtle box shadow for modern look - transition: box-shadow 0.3s ease; - - th, td { - padding: 0.75em; - border: none; - text-align: left; - transition: background-color 0.3s ease, color 0.3s ease; - } - - th { - background-color: $background-secondary-color; - color: $text-color; - font-weight: 600; - border-bottom: 1px solid $border-color; - } - - td { - background-color: $background-color; - color: $text-muted-color; - } - - td.method { - text-align: center; - font-weight: bold; - border-radius: 4px; - padding: 0.4em 0.6em; - color: #ffffff; - transition: background-color 0.3s ease; - - &.get { - background-color: $get-background-color; - } - - &.post { - background-color: $post-background-color; - } - } -} - -// Forms -input, textarea, select { - background-color: $input-background-color; - color: $text-color; - border: 1px solid $border-color; - padding: 0.75em; - border-radius: 4px; - width: 100%; - box-sizing: border-box; - font-family: 'Merriweather', serif; - transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; - - &:focus { - outline: none; - border-color: $accent-color; - background-color: lighten($input-background-color, 5%); - } -} - -// Buttons -button, .button { - background-color: $button-background-color; - color: #ffffff; - border: none; - padding: 0.75em 1.5em; - border-radius: 5px; - font-family: 'Merriweather', serif; - font-weight: 600; - cursor: pointer; - transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - - &:hover { - background-color: $button-hover-background-color; - transform: translateY(-2px); // Subtle lift effect on hover - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); // Enhanced shadow on hover for interactivity - } -} - -// Navbar Styling -.navbar { - background-color: $background-secondary-color; - padding: 1em 2em; - border-bottom: 1px solid $border-color; - display: flex; - justify-content: space-between; - transition: background-color 0.3s ease, border-color 0.3s ease; - - a { - color: $text-color; - margin: 0 1em; - padding: 0.5em 0; - font-weight: 600; - transition: color 0.3s ease, text-decoration 0.3s ease; - - &:hover { - color: $accent-color; - text-decoration: underline; - } - } -} - -// Footer -footer { - background-color: $background-secondary-color; - color: $text-muted-color; - text-align: center; - padding: 1.5em; - border-top: 1px solid $border-color; - margin-top: 2em; - transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; - - a { - color: $link-color; - font-weight: 600; - transition: color 0.3s ease, text-decoration 0.3s ease; - - &:hover { - color: lighten($link-hover-color, 20%); - text-decoration: underline; - } - } -} - -// Blockquotes -blockquote { - border-left: 4px solid $accent-color; - padding: 0.75em 1.5em; - background-color: darken($background-secondary-color, 5%); - color: lighten($text-color, 10%); - margin: 1.5em 0; - border-radius: 4px; - transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; -} - -// Horizontal Rules -hr { - border: 1px solid $hr-color; - margin: 2em 0; - border-radius: 1px; - transition: border-color 0.3s ease; -} - -// Images -img { - max-width: 100%; - height: auto; - border-radius: 4px; - box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3); - margin: 1.5em 0; - transition: box-shadow 0.3s ease, border-radius 0.3s ease; -} - -// Additional Refinements -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 2em; - transition: max-width 0.3s ease; -} - -.section { - padding: 2em 0; - transition: padding 0.3s ease; -} - -// Card Design -.card { - background-color: $background-secondary-color; - border: 1px solid $border-color; - border-radius: 8px; - padding: 1.5em; - margin-bottom: 2em; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); - transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; - - &:hover { - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); // Enhanced shadow on hover for cards - } -} - -.card-title { - font-family: 'Merriweather', serif; - font-size: 1.5em; - margin-bottom: 0.5em; - transition: font-size 0.3s ease; -} - -.card-content { - color: $text-muted-color; - font-size: 1em; - transition: color 0.3s ease, font-size 0.3s ease; -} - // Smooth Scrolling html { scroll-behavior: smooth; // Enables smooth scrolling for the entire page