skorotkiewicz/irc-sekor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new dark style

Browse source
This commit is contained in:
Sebastian Korotkiewicz 2025-04-18 22:46:29 +02:00
parent f191f48fa5
commit 2217515180
1 changed files with 295 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

352
src/styles.scss
View file

@ -1,54 +1,68 @@
// Variables // Variables
$primary: #4a6fa5; $primary: #00ff00;
$primary-dark: #385580; $primary-dark: #00cc00;
$secondary: #6c5ce7; $secondary: #660099;
$light: #f8f9fa; $light: #0a0a0a;
$dark: #212529; $dark: #00ff00;
$success: #28a745; $success: #00bb00;
$gray: #6c757d; $gray: #777777;
$gray-light: #e9ecef; $gray-light: #1a1a1a;
$accent: #ff00ff;
$terminal-bg: #0f0f0f;
$terminal-text: #00ff00;
$terminal-font: 'Courier New', monospace;
// Base styles // Base styles
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: $terminal-font;
} }
body { body {
background-color: $light; background-color: $light;
color: $dark; color: $terminal-text;
line-height: 1.6; 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 styles
header { header {
background: linear-gradient(135deg, $primary, $secondary); background: linear-gradient(135deg, $terminal-bg, $secondary);
color: white; color: $primary;
padding: 2rem 0; padding: 2rem 0;
text-align: center; 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 { .logo {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: bold; font-weight: bold;
margin-bottom: 1rem; margin-bottom: 1rem;
text-shadow: 0 0 5px $primary;
letter-spacing: 3px;
} }
.tagline { .tagline {
font-size: 1.2rem; font-size: 1.2rem;
opacity: 0.9; opacity: 0.9;
font-family: $terminal-font;
&:before {
content: "> ";
color: $primary;
}
} }
} }
// Navigation // Navigation
nav { nav {
background-color: white; background-color: $terminal-bg;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 255, 0, 0.2);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
border-bottom: 1px solid $primary-dark;
.navbar { .navbar {
display: flex; display: flex;
@ -65,6 +79,7 @@ nav {
color: $primary; color: $primary;
text-decoration: none; text-decoration: none;
padding: 1rem 0; padding: 1rem 0;
text-shadow: 0 0 3px $primary;
} }
.nav-links { .nav-links {
@ -74,12 +89,16 @@ nav {
li a { li a {
display: block; display: block;
padding: 1rem; padding: 1rem;
color: $dark; color: $primary;
text-decoration: none; text-decoration: none;
transition: color 0.3s; transition: all 0.3s;
border: 1px solid transparent;
&:hover { &: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; font-size: 2.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: $primary; color: $primary;
text-shadow: 0 0 5px $primary;
letter-spacing: 2px;
&:before {
content: "[ ";
color: $accent;
}
&:after {
content: " ]";
color: $accent;
}
} }
p { p {
@ -110,6 +139,10 @@ nav {
max-width: 800px; max-width: 800px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
&:before {
content: "$ ";
color: $primary;
}
} }
} }
@ -117,16 +150,21 @@ nav {
.btn { .btn {
display: inline-block; display: inline-block;
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
background-color: $primary; background-color: $terminal-bg;
color: white; color: $primary;
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: 0;
font-weight: 500; font-weight: 500;
transition: background-color 0.3s, transform 0.2s; transition: all 0.3s;
cursor: pointer; cursor: pointer;
border: 1px solid $primary;
text-transform: uppercase;
letter-spacing: 1px;
&:hover { &: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); transform: translateY(-2px);
} }
@ -138,22 +176,25 @@ nav {
// Connection methods // Connection methods
.connection-methods { .connection-methods {
background-color: white; background-color: $terminal-bg;
border-radius: 8px; border-radius: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
padding: 2rem; padding: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
border: 1px solid $primary;
} }
.method-card { .method-card {
background-color: $gray-light; background-color: $gray-light;
border-radius: 8px; border-radius: 0;
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
transition: transform 0.3s; transition: all 0.3s;
border-left: 3px solid $primary;
&:hover { &:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
} }
.method-title { .method-title {
@ -162,15 +203,25 @@ nav {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
text-transform: uppercase;
letter-spacing: 1px;
&:before {
content: ">";
margin-right: 0.5rem;
color: $accent;
}
} }
.method-icon { .method-icon {
margin-right: 0.5rem; margin-right: 0.5rem;
font-size: 1.4rem; font-size: 1.4rem;
color: $accent;
} }
.method-details { .method-details {
color: $gray; color: $gray;
font-family: $terminal-font;
} }
} }
@ -180,9 +231,12 @@ nav {
color: $primary; color: $primary;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
border-bottom: 1px dashed $primary;
&:hover { &: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 { .feature-card {
background-color: white; background-color: $terminal-bg;
border-radius: 8px; border-radius: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
transition: transform 0.3s; transition: all 0.3s;
border: 1px solid $primary-dark;
&:hover { &:hover {
transform: translateY(-10px); transform: translateY(-10px);
box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
border-color: $primary;
} }
.feature-icon { .feature-icon {
font-size: 2.5rem; font-size: 2.5rem;
color: $primary; color: $primary;
margin-bottom: 1rem; margin-bottom: 1rem;
text-shadow: 0 0 5px $primary;
} }
.feature-title { .feature-title {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: $dark; color: $primary;
text-transform: uppercase;
letter-spacing: 2px;
&:before {
content: "[ ";
color: $accent;
}
&:after {
content: " ]";
color: $accent;
}
} }
.feature-text { .feature-text {
color: $gray; color: $gray;
font-family: $terminal-font;
} }
} }
@ -229,15 +299,37 @@ nav {
margin: 3rem 0 2rem; margin: 3rem 0 2rem;
color: $primary; color: $primary;
font-size: 2rem; 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 section
.faq-item { .faq-item {
background-color: white; background-color: $terminal-bg;
border-radius: 8px; border-radius: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
margin-bottom: 1rem; margin-bottom: 1rem;
overflow: hidden; overflow: hidden;
border: 1px solid $primary-dark;
.faq-question { .faq-question {
background-color: $gray-light; background-color: $gray-light;
@ -247,11 +339,26 @@ nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: $primary;
text-transform: uppercase;
letter-spacing: 1px;
&:before {
content: "?> ";
color: $accent;
}
} }
.faq-answer { .faq-answer {
padding: 1rem; padding: 1rem;
color: $gray; color: $gray;
font-family: $terminal-font;
border-top: 1px dashed $primary-dark;
&:before {
content: "$> ";
color: $primary;
}
} }
} }
@ -262,13 +369,19 @@ nav {
} }
.step { .step {
background-color: white; background-color: $terminal-bg;
border-radius: 8px; border-radius: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
position: relative; position: relative;
padding-left: 3.5rem; 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 { &::before {
counter-increment: step-counter; counter-increment: step-counter;
@ -276,30 +389,34 @@ nav {
position: absolute; position: absolute;
left: 1rem; left: 1rem;
top: 1.5rem; top: 1.5rem;
background-color: $primary; background-color: $terminal-bg;
color: white; color: $primary;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 50%; border-radius: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;
border: 1px solid $primary;
} }
&-title { &-title {
color: $primary; color: $primary;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1.2rem; font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 1px;
} }
} }
// Footer // Footer
footer { footer {
background-color: $dark; background-color: $terminal-bg;
color: white; color: $primary;
padding: 3rem 0; padding: 3rem 0;
margin-top: 3rem; margin-top: 3rem;
border-top: 1px solid $primary;
.footer-content { .footer-content {
max-width: 1200px; max-width: 1200px;
@ -312,8 +429,16 @@ footer {
.footer-section { .footer-section {
h3 { h3 {
color: $gray-light; color: $primary;
margin-bottom: 1rem; 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; color: $gray;
text-decoration: none; text-decoration: none;
transition: color 0.3s; transition: color 0.3s;
&:before {
content: "- ";
color: $primary;
}
&:hover { &:hover {
color: white; color: $primary;
text-shadow: 0 0 3px $primary;
} }
} }
} }
@ -339,8 +470,19 @@ footer {
text-align: center; text-align: center;
padding: 1rem 0; padding: 1rem 0;
color: $gray; color: $gray;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid $primary-dark;
margin-top: 2rem; margin-top: 2rem;
font-family: $terminal-font;
&:before {
content: "/* ";
color: $primary;
}
&:after {
content: " */";
color: $primary;
}
} }
} }
@ -367,12 +509,20 @@ footer {
} }
.code-block { .code-block {
background-color: #f1f1f1; background-color: $terminal-bg;
border-radius: 4px; border-radius: 0;
padding: 0.5rem; padding: 0.8rem;
font-family: monospace; font-family: $terminal-font;
overflow-x: auto; overflow-x: auto;
margin: 0.5rem 0; margin: 0.5rem 0;
color: $primary;
border: 1px solid $primary-dark;
position: relative;
&:before {
content: "> ";
color: $accent;
}
} }
.tip { .tip {
@ -380,12 +530,100 @@ footer {
border-left: 4px solid $primary; border-left: 4px solid $primary;
padding: 1rem; padding: 1rem;
margin: 1rem 0; margin: 1rem 0;
&:before {
content: "! ";
color: $accent;
font-weight: bold;
}
} }
.screenshot { .screenshot {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 8px; border-radius: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
margin: 1rem 0; 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
);
} }