Skip to content

Commit

Permalink
Update style.scss
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabriziosalmi
fabriziosalmi authored Aug 18, 2024
1 parent 7f27620 commit 947aed9
Showing 1 changed file with 0 additions and 323 deletions.
323 changes: 0 additions & 323 deletions docs/assets/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 947aed9

Please sign in to comment.