edit styles
This commit is contained in:
parent
2217515180
commit
d83fd345b9
4 changed files with 679 additions and 495 deletions
279
src/styles.scss
279
src/styles.scss
|
|
@ -1,16 +1,16 @@
|
|||
// Variables
|
||||
$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;
|
||||
$primary: #4a9d4a;
|
||||
$primary-dark: #3a7a3a;
|
||||
$secondary: #6a5acd;
|
||||
$light: #1a1a1a;
|
||||
$dark: #4a9d4a;
|
||||
$success: #5cb85c;
|
||||
$gray: #999999;
|
||||
$gray-light: #2a2a2a;
|
||||
$accent: #d35db9;
|
||||
$terminal-bg: #222222;
|
||||
$terminal-text: #c0c0c0;
|
||||
$terminal-font: "Courier New", monospace;
|
||||
|
||||
// Base styles
|
||||
* {
|
||||
|
|
@ -24,7 +24,7 @@ body {
|
|||
background-color: $light;
|
||||
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");
|
||||
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.1'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
// Header styles
|
||||
|
|
@ -33,15 +33,129 @@ header {
|
|||
color: $primary;
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
|
||||
border-bottom: 1px solid $primary;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 1px solid $primary-dark;
|
||||
|
||||
.logo {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 0 5px $primary;
|
||||
letter-spacing: 3px;
|
||||
text-shadow: 0 0 2px $primary;
|
||||
letter-spacing: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
// &:before {
|
||||
// content: "";
|
||||
// display: inline-block;
|
||||
// width: 65px;
|
||||
// height: 50px;
|
||||
// margin-right: 20px;
|
||||
// background-color: $terminal-bg;
|
||||
// border: 2px solid $primary;
|
||||
// border-radius: 8px;
|
||||
// position: relative;
|
||||
// box-shadow: 0 0 8px rgba($primary, 0.3);
|
||||
// overflow: hidden;
|
||||
// }
|
||||
|
||||
/* Chat bubbles */
|
||||
// &:after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// width: 45px;
|
||||
// height: 30px;
|
||||
// left: 10px;
|
||||
// top: 10px;
|
||||
// background: repeating-linear-gradient(
|
||||
// 90deg,
|
||||
// transparent,
|
||||
// transparent 3px,
|
||||
// $primary 3px,
|
||||
// $primary 4px
|
||||
// );
|
||||
// clip-path: polygon(
|
||||
// 0% 0%,
|
||||
// 100% 0%,
|
||||
// 100% 60%,
|
||||
// 80% 60%,
|
||||
// 70% 100%,
|
||||
// 70% 60%,
|
||||
// 0% 60%
|
||||
// );
|
||||
// animation: typeMessage 2s infinite;
|
||||
// }
|
||||
}
|
||||
|
||||
/* Connection dots animation */
|
||||
.logo-dots {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 43px;
|
||||
z-index: 2;
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $accent;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: showDot 3s infinite 0s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
animation: showDot 3s infinite 0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
animation: showDot 3s infinite 0.6s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typeMessage {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
40% {
|
||||
width: 45px;
|
||||
}
|
||||
60% {
|
||||
width: 45px;
|
||||
}
|
||||
100% {
|
||||
width: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showDot {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.tagline {
|
||||
|
|
@ -58,7 +172,7 @@ header {
|
|||
// Navigation
|
||||
nav {
|
||||
background-color: $terminal-bg;
|
||||
box-shadow: 0 2px 5px rgba(0, 255, 0, 0.2);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
|
@ -79,7 +193,48 @@ nav {
|
|||
color: $primary;
|
||||
text-decoration: none;
|
||||
padding: 1rem 0;
|
||||
text-shadow: 0 0 3px $primary;
|
||||
text-shadow: 0 0 1px $primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
margin-right: 10px;
|
||||
background-color: $terminal-bg;
|
||||
border: 1px solid $primary;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 12px;
|
||||
left: 5px;
|
||||
top: 17px;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 1px,
|
||||
$primary 1px,
|
||||
$primary 2px
|
||||
);
|
||||
clip-path: polygon(
|
||||
0% 0%,
|
||||
100% 0%,
|
||||
100% 60%,
|
||||
80% 60%,
|
||||
70% 100%,
|
||||
70% 60%,
|
||||
0% 60%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
|
|
@ -98,7 +253,7 @@ nav {
|
|||
color: $light;
|
||||
background-color: $primary;
|
||||
border: 1px solid $primary-dark;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -120,8 +275,8 @@ nav {
|
|||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: $primary;
|
||||
text-shadow: 0 0 5px $primary;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 2px $primary;
|
||||
letter-spacing: 1px;
|
||||
&:before {
|
||||
content: "[ ";
|
||||
color: $accent;
|
||||
|
|
@ -164,7 +319,7 @@ nav {
|
|||
&:hover {
|
||||
background-color: $primary;
|
||||
color: $terminal-bg;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
|
@ -177,24 +332,25 @@ nav {
|
|||
// Connection methods
|
||||
.connection-methods {
|
||||
background-color: $terminal-bg;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid $primary;
|
||||
border: 1px solid $primary-dark;
|
||||
}
|
||||
|
||||
.method-card {
|
||||
background-color: $gray-light;
|
||||
border-radius: 0;
|
||||
padding: 1.5rem;
|
||||
border-radius: 4px;
|
||||
// padding: 2.5rem;
|
||||
padding: 1rem 1rem 1rem 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.3s;
|
||||
border-left: 3px solid $primary;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.method-title {
|
||||
|
|
@ -250,8 +406,8 @@ nav {
|
|||
|
||||
.feature-card {
|
||||
background-color: $terminal-bg;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
|
|
@ -259,7 +415,7 @@ nav {
|
|||
|
||||
&:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
|
|
@ -267,7 +423,7 @@ nav {
|
|||
font-size: 2.5rem;
|
||||
color: $primary;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 0 5px $primary;
|
||||
text-shadow: 0 0 2px $primary;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
|
|
@ -300,11 +456,12 @@ nav {
|
|||
color: $primary;
|
||||
font-size: 2rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
letter-spacing: 2px;
|
||||
position: relative;
|
||||
text-shadow: 0 0 5px $primary;
|
||||
text-shadow: 0 0 1px $primary;
|
||||
|
||||
&:before, &:after {
|
||||
&:before,
|
||||
&:after {
|
||||
content: "====================";
|
||||
color: $primary-dark;
|
||||
position: absolute;
|
||||
|
|
@ -325,8 +482,8 @@ nav {
|
|||
// FAQ section
|
||||
.faq-item {
|
||||
background-color: $terminal-bg;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid $primary-dark;
|
||||
|
|
@ -370,8 +527,8 @@ nav {
|
|||
|
||||
.step {
|
||||
background-color: $terminal-bg;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
|
|
@ -380,7 +537,7 @@ nav {
|
|||
|
||||
&:hover {
|
||||
border-color: $primary;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
@ -393,7 +550,7 @@ nav {
|
|||
color: $primary;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -416,7 +573,7 @@ footer {
|
|||
color: $primary;
|
||||
padding: 3rem 0;
|
||||
margin-top: 3rem;
|
||||
border-top: 1px solid $primary;
|
||||
border-top: 1px solid $primary-dark;
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
|
|
@ -433,10 +590,24 @@ footer {
|
|||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 3px $primary;
|
||||
text-shadow: 0 0 1px $primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "# ";
|
||||
content: "#";
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
background-color: $terminal-bg;
|
||||
// border: 1px solid $primary;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
|
@ -557,10 +728,12 @@ footer {
|
|||
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);
|
||||
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);
|
||||
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);
|
||||
|
|
@ -569,7 +742,8 @@ footer {
|
|||
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);
|
||||
text-shadow: -0.025em 0 0 $accent,
|
||||
-0.025em -0.025em 0 rgba(255, 0, 255, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -602,7 +776,8 @@ footer {
|
|||
}
|
||||
|
||||
@keyframes blink {
|
||||
from, to {
|
||||
from,
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
|
|
@ -618,11 +793,11 @@ footer {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
opacity: 0.05;
|
||||
opacity: 0.03;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 255, 0, 0.15) 0px,
|
||||
rgba(0, 255, 0, 0.15) 1px,
|
||||
rgba(125, 125, 125, 0.1) 0px,
|
||||
rgba(125, 125, 125, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,15 @@ html(lang="en")
|
|||
title #{title} | IRC*Sekor
|
||||
link(rel="stylesheet", href="styles.css")
|
||||
body
|
||||
//- header
|
||||
//- .logo
|
||||
//- .logo-dots
|
||||
//- .dot
|
||||
//- .dot
|
||||
//- .dot
|
||||
//- | IRC*Sekor
|
||||
//- .tagline #{tagline}
|
||||
|
||||
header
|
||||
.logo IRC*Sekor
|
||||
.tagline #{tagline}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ block content
|
|||
ul
|
||||
li
|
||||
| Using an IRC client:
|
||||
span.code-block ircs://irc.sekor.eu.org:6697
|
||||
pre.code-block ircs://irc.sekor.eu.org:6697
|
||||
li
|
||||
| Or use the
|
||||
a(href="/web/") web client
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ block content
|
|||
ul
|
||||
li
|
||||
| Using an IRC client:
|
||||
span.code-block ircs://irc.sekor.eu.org:6697
|
||||
pre.code-block ircs://irc.sekor.eu.org:6697
|
||||
li
|
||||
| Or use the
|
||||
a(href="/web/") web client
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue