new dark style
This commit is contained in:
parent
f191f48fa5
commit
2217515180
1 changed files with 295 additions and 57 deletions
352
src/styles.scss
352
src/styles.scss
|
|
@ -1,54 +1,68 @@
|
|||
// Variables
|
||||
$primary: #4a6fa5;
|
||||
$primary-dark: #385580;
|
||||
$secondary: #6c5ce7;
|
||||
$light: #f8f9fa;
|
||||
$dark: #212529;
|
||||
$success: #28a745;
|
||||
$gray: #6c757d;
|
||||
$gray-light: #e9ecef;
|
||||
$primary: #00ff00;
|
||||
$primary-dark: #00cc00;
|
||||
$secondary: #660099;
|
||||
$light: #0a0a0a;
|
||||
$dark: #00ff00;
|
||||
$success: #00bb00;
|
||||
$gray: #777777;
|
||||
$gray-light: #1a1a1a;
|
||||
$accent: #ff00ff;
|
||||
$terminal-bg: #0f0f0f;
|
||||
$terminal-text: #00ff00;
|
||||
$terminal-font: 'Courier New', monospace;
|
||||
|
||||
// Base styles
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-family: $terminal-font;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $light;
|
||||
color: $dark;
|
||||
color: $terminal-text;
|
||||
line-height: 1.6;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23333' fill-opacity='0.2'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
// Header styles
|
||||
header {
|
||||
background: linear-gradient(135deg, $primary, $secondary);
|
||||
color: white;
|
||||
background: linear-gradient(135deg, $terminal-bg, $secondary);
|
||||
color: $primary;
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
|
||||
border-bottom: 1px solid $primary;
|
||||
|
||||
.logo {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 0 5px $primary;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
font-family: $terminal-font;
|
||||
&:before {
|
||||
content: "> ";
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation
|
||||
nav {
|
||||
background-color: white;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
background-color: $terminal-bg;
|
||||
box-shadow: 0 2px 5px rgba(0, 255, 0, 0.2);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid $primary-dark;
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
|
|
@ -65,6 +79,7 @@ nav {
|
|||
color: $primary;
|
||||
text-decoration: none;
|
||||
padding: 1rem 0;
|
||||
text-shadow: 0 0 3px $primary;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
|
|
@ -74,12 +89,16 @@ nav {
|
|||
li a {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
color: $dark;
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
color: $light;
|
||||
background-color: $primary;
|
||||
border: 1px solid $primary-dark;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,6 +120,16 @@ nav {
|
|||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: $primary;
|
||||
text-shadow: 0 0 5px $primary;
|
||||
letter-spacing: 2px;
|
||||
&:before {
|
||||
content: "[ ";
|
||||
color: $accent;
|
||||
}
|
||||
&:after {
|
||||
content: " ]";
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -110,6 +139,10 @@ nav {
|
|||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
&:before {
|
||||
content: "$ ";
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,16 +150,21 @@ nav {
|
|||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background-color: $primary;
|
||||
color: white;
|
||||
background-color: $terminal-bg;
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 0;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
border: 1px solid $primary;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-dark;
|
||||
background-color: $primary;
|
||||
color: $terminal-bg;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
|
@ -138,22 +176,25 @@ nav {
|
|||
|
||||
// Connection methods
|
||||
.connection-methods {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
background-color: $terminal-bg;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
|
||||
.method-card {
|
||||
background-color: $gray-light;
|
||||
border-radius: 8px;
|
||||
border-radius: 0;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
transition: transform 0.3s;
|
||||
transition: all 0.3s;
|
||||
border-left: 3px solid $primary;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.method-title {
|
||||
|
|
@ -162,15 +203,25 @@ nav {
|
|||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:before {
|
||||
content: ">";
|
||||
margin-right: 0.5rem;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.method-icon {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1.4rem;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.method-details {
|
||||
color: $gray;
|
||||
font-family: $terminal-font;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,9 +231,12 @@ nav {
|
|||
color: $primary;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
|
||||
border-bottom: 1px dashed $primary;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 0 5px $primary;
|
||||
border-bottom: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -195,31 +249,47 @@ nav {
|
|||
}
|
||||
|
||||
.feature-card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
background-color: $terminal-bg;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: transform 0.3s;
|
||||
|
||||
transition: all 0.3s;
|
||||
border: 1px solid $primary-dark;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 2.5rem;
|
||||
color: $primary;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 0 5px $primary;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: $dark;
|
||||
color: $primary;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&:before {
|
||||
content: "[ ";
|
||||
color: $accent;
|
||||
}
|
||||
&:after {
|
||||
content: " ]";
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
color: $gray;
|
||||
font-family: $terminal-font;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -229,15 +299,37 @@ nav {
|
|||
margin: 3rem 0 2rem;
|
||||
color: $primary;
|
||||
font-size: 2rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
position: relative;
|
||||
text-shadow: 0 0 5px $primary;
|
||||
|
||||
&:before, &:after {
|
||||
content: "====================";
|
||||
color: $primary-dark;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -1.5rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: -1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// FAQ section
|
||||
.faq-item {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
background-color: $terminal-bg;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid $primary-dark;
|
||||
|
||||
.faq-question {
|
||||
background-color: $gray-light;
|
||||
|
|
@ -247,11 +339,26 @@ nav {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $primary;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:before {
|
||||
content: "?> ";
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 1rem;
|
||||
color: $gray;
|
||||
font-family: $terminal-font;
|
||||
border-top: 1px dashed $primary-dark;
|
||||
|
||||
&:before {
|
||||
content: "$> ";
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -262,13 +369,19 @@ nav {
|
|||
}
|
||||
|
||||
.step {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
background-color: $terminal-bg;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
padding-left: 3.5rem;
|
||||
border: 1px solid $primary-dark;
|
||||
|
||||
&:hover {
|
||||
border-color: $primary;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
&::before {
|
||||
counter-increment: step-counter;
|
||||
|
|
@ -276,30 +389,34 @@ nav {
|
|||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 1.5rem;
|
||||
background-color: $primary;
|
||||
color: white;
|
||||
background-color: $terminal-bg;
|
||||
color: $primary;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: $primary;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
footer {
|
||||
background-color: $dark;
|
||||
color: white;
|
||||
background-color: $terminal-bg;
|
||||
color: $primary;
|
||||
padding: 3rem 0;
|
||||
margin-top: 3rem;
|
||||
border-top: 1px solid $primary;
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
|
|
@ -312,8 +429,16 @@ footer {
|
|||
|
||||
.footer-section {
|
||||
h3 {
|
||||
color: $gray-light;
|
||||
color: $primary;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 3px $primary;
|
||||
|
||||
&:before {
|
||||
content: "# ";
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -328,9 +453,15 @@ footer {
|
|||
color: $gray;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:before {
|
||||
content: "- ";
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
color: $primary;
|
||||
text-shadow: 0 0 3px $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -339,8 +470,19 @@ footer {
|
|||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
color: $gray;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid $primary-dark;
|
||||
margin-top: 2rem;
|
||||
font-family: $terminal-font;
|
||||
|
||||
&:before {
|
||||
content: "/* ";
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: " */";
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -367,12 +509,20 @@ footer {
|
|||
}
|
||||
|
||||
.code-block {
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
font-family: monospace;
|
||||
background-color: $terminal-bg;
|
||||
border-radius: 0;
|
||||
padding: 0.8rem;
|
||||
font-family: $terminal-font;
|
||||
overflow-x: auto;
|
||||
margin: 0.5rem 0;
|
||||
color: $primary;
|
||||
border: 1px solid $primary-dark;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "> ";
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
|
|
@ -380,12 +530,100 @@ footer {
|
|||
border-left: 4px solid $primary;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
&:before {
|
||||
content: "! ";
|
||||
color: $accent;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
|
||||
margin: 1rem 0;
|
||||
border: 1px solid $primary-dark;
|
||||
filter: brightness(0.9) contrast(1.1) saturate(1.2);
|
||||
}
|
||||
|
||||
// Glitch effect
|
||||
@keyframes glitch {
|
||||
0% {
|
||||
text-shadow: 0.05em 0 0 $accent, -0.05em -0.025em 0 rgba(255, 0, 255, 0.75);
|
||||
}
|
||||
14% {
|
||||
text-shadow: 0.05em 0 0 $accent, -0.05em -0.025em 0 rgba(255, 0, 255, 0.75);
|
||||
}
|
||||
15% {
|
||||
text-shadow: -0.05em -0.025em 0 $accent, 0.025em 0.025em 0 rgba(255, 0, 255, 0.75);
|
||||
}
|
||||
49% {
|
||||
text-shadow: -0.05em -0.025em 0 $accent, 0.025em 0.025em 0 rgba(255, 0, 255, 0.75);
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0.025em 0.05em 0 $accent, 0.05em 0 0 rgba(255, 0, 255, 0.75);
|
||||
}
|
||||
99% {
|
||||
text-shadow: 0.025em 0.05em 0 $accent, 0.05em 0 0 rgba(255, 0, 255, 0.75);
|
||||
}
|
||||
100% {
|
||||
text-shadow: -0.025em 0 0 $accent, -0.025em -0.025em 0 rgba(255, 0, 255, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.glitch-text {
|
||||
animation: glitch 1s linear infinite;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
// Terminal effect
|
||||
.terminal {
|
||||
background-color: $terminal-bg;
|
||||
border: 1px solid $primary;
|
||||
padding: 1rem;
|
||||
font-family: $terminal-font;
|
||||
color: $primary;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "$ ";
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: $primary;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
from, to {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Matrix effect background element
|
||||
.matrix-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
opacity: 0.05;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 255, 0, 0.15) 0px,
|
||||
rgba(0, 255, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue