Commit
This commit is contained in:
informaticker
parent
3ba5ebeba8
commit
68b1660840
479
assets/index.css
479
assets/index.css
@ -1,3 +1,23 @@
|
||||
:root {
|
||||
--bg-color: #0a0a0a;
|
||||
--border-color: #2a5a5a;
|
||||
--text-muted: #88aaaa;
|
||||
--text-bright: #c5e5e5;
|
||||
--glow-color: rgba(42, 90, 90, 0.4);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 5px var(--glow-color);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px var(--glow-color);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px var(--glow-color);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-behavior: smooth;
|
||||
@ -8,18 +28,52 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0a0a0a;
|
||||
color: #c5e5e5;
|
||||
background: var(--bg-color);
|
||||
color: var(--text-bright);
|
||||
font-family: "Courier New", monospace;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.1),
|
||||
rgba(0, 0, 0, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
margin-left: 80px;
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.terminal::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid var(--border-color);
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
clip-path: polygon(0 2%, 98% 0, 100% 98%, 2% 100%);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@ -28,17 +82,19 @@ body {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 80px;
|
||||
background: #0a0a0a;
|
||||
border-right: 1px solid #2a5a5a;
|
||||
background: var(--bg-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
z-index: 1000;
|
||||
box-shadow: 1px 0 15px var(--glow-color);
|
||||
clip-path: polygon(0 0, 90% 0, 100% 2%, 100% 98%, 90% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
margin: 20px 0;
|
||||
font-size: 24px;
|
||||
@ -47,11 +103,7 @@ body {
|
||||
}
|
||||
|
||||
.nav-icon:hover {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.nav-icon.active {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.section {
|
||||
@ -68,48 +120,148 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid #2a5a5a;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 0.9em;
|
||||
color: #88aaaa;
|
||||
}
|
||||
|
||||
.location {
|
||||
margin-top: 4px;
|
||||
color: #88aaaa;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #88aaaa;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: "◈";
|
||||
margin-right: 10px;
|
||||
font-size: 1.1em;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--text-bright);
|
||||
text-shadow: 0 0 10px var(--glow-color);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
border: 1px solid #2a5a5a;
|
||||
.header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--text-bright),
|
||||
transparent
|
||||
);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 0.9em;
|
||||
color: var(--text-muted);
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
|
||||
.location {
|
||||
margin-top: 4px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.entry-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.nested-entries {
|
||||
margin-left: 20px;
|
||||
margin-top: 5px;
|
||||
border-left: 1px solid var(--border-color);
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nested-entries::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: var(--border-color);
|
||||
box-shadow: 0 0 8px var(--glow-color);
|
||||
}
|
||||
|
||||
.entry {
|
||||
margin: 10px 0;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry::before {
|
||||
content: "▹";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.entry-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry-link:hover {
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.entry-link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--text-bright);
|
||||
transform: scaleX(0);
|
||||
transform-origin: right;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.entry-link:hover::after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.project-item,
|
||||
.status-item {
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transition:
|
||||
border-color 0.3s ease,
|
||||
background-color 0.3s ease;
|
||||
position: relative;
|
||||
background: rgba(42, 90, 90, 0.05);
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
98% 0,
|
||||
100% 15px,
|
||||
100% 100%,
|
||||
2% 100%,
|
||||
0 calc(100% - 15px)
|
||||
);
|
||||
}
|
||||
|
||||
.project-item:hover {
|
||||
border-color: #c5e5e5;
|
||||
.project-item:hover,
|
||||
.status-item:hover {
|
||||
border-color: var(--text-bright);
|
||||
background: rgba(42, 90, 90, 0.1);
|
||||
}
|
||||
|
||||
@ -121,11 +273,11 @@ body {
|
||||
|
||||
.project-header .entry::before {
|
||||
content: "⎔";
|
||||
color: #88aaaa;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
color: #88aaaa;
|
||||
color: var(--text-muted);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
@ -151,67 +303,29 @@ body {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.project-item,
|
||||
.status-item {
|
||||
border: 1px solid #2a5a5a;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
.project-link {
|
||||
display: inline-block;
|
||||
color: var(--text-bright);
|
||||
text-decoration: none;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid var(--border-color);
|
||||
transition:
|
||||
border-color 0.3s ease,
|
||||
background-color 0.3s ease;
|
||||
background: rgba(42, 90, 90, 0.05);
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-item:hover,
|
||||
.status-item:hover {
|
||||
border-color: #c5e5e5;
|
||||
.project-link:hover {
|
||||
border-color: var(--text-bright);
|
||||
background: rgba(42, 90, 90, 0.1);
|
||||
}
|
||||
|
||||
.project-header,
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-header .entry::before,
|
||||
.status-header .entry::before {
|
||||
content: "⎔";
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
color: #88aaaa;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.project-item.expanded .expand-icon,
|
||||
.status-item.expanded .expand-icon {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.project-content,
|
||||
.status-details {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.3s ease,
|
||||
transform 0.3s ease;
|
||||
margin-top: 10px;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.project-content.expanded,
|
||||
.status-details.expanded {
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.status-group {
|
||||
margin-bottom: 20px;
|
||||
.status-grid {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
@ -220,11 +334,6 @@ body {
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.status-item:hover .status-indicator {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.status-online {
|
||||
@ -242,115 +351,22 @@ body {
|
||||
box-shadow: 0 0 10px rgba(255, 152, 0, 0.3);
|
||||
}
|
||||
|
||||
.status-metric {
|
||||
margin: 4px 0;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-metric::before {
|
||||
content: "›";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.loading-indicator,
|
||||
.error-message {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
color: #88aaaa;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
color: #88aaaa;
|
||||
border: 1px solid #2a5a5a;
|
||||
background: none;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.refresh-button::before {
|
||||
content: "⟳";
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.refresh-button:hover {
|
||||
border-color: #c5e5e5;
|
||||
color: #c5e5e5;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.entry-list {
|
||||
.status-details {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.3s ease,
|
||||
transform 0.3s ease;
|
||||
margin-top: 10px;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.nested-entries {
|
||||
margin-left: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.entry {
|
||||
margin: 10px 0;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry::before {
|
||||
content: "▹";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.entry-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.entry-link:hover {
|
||||
color: #c5e5e5;
|
||||
}
|
||||
|
||||
.nested-entries .entry {
|
||||
color: #88aaaa;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.nested-entries .entry:hover {
|
||||
color: #c5e5e5;
|
||||
}
|
||||
|
||||
.nested-entries .entry:hover::before {
|
||||
color: #c5e5e5;
|
||||
}
|
||||
|
||||
.project-link {
|
||||
display: inline-block;
|
||||
color: #c5e5e5;
|
||||
text-decoration: none;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #2a5a5a;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(42, 90, 90, 0.05);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.project-link:hover {
|
||||
border-color: #c5e5e5;
|
||||
background: rgba(42, 90, 90, 0.1);
|
||||
transform: translateX(5px);
|
||||
.status-details.expanded {
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
@ -363,16 +379,26 @@ body {
|
||||
.contact-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #c5e5e5;
|
||||
color: var(--text-bright);
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
border: 1px solid #2a5a5a;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--border-color);
|
||||
transition:
|
||||
border-color 0.3s ease,
|
||||
background-color 0.3s ease;
|
||||
background: rgba(42, 90, 90, 0.05);
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
98% 0,
|
||||
100% 15px,
|
||||
100% 100%,
|
||||
2% 100%,
|
||||
0 calc(100% - 15px)
|
||||
);
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
border-color: #c5e5e5;
|
||||
border-color: var(--text-bright);
|
||||
background: rgba(42, 90, 90, 0.1);
|
||||
}
|
||||
|
||||
@ -380,3 +406,44 @@ body {
|
||||
margin-right: 15px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.terminal {
|
||||
margin-left: 60px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.project-item,
|
||||
.contact-link,
|
||||
.status-item {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.terminal {
|
||||
margin-left: 50px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 18px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
<a
|
||||
href="https://netwatch.elia.network"
|
||||
class="entry-link"
|
||||
>INTERNET AT WAR</a
|
||||
>INTERNET IN TIMES OF WAR</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -166,6 +166,12 @@
|
||||
>⎔ GIT →</a
|
||||
>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a
|
||||
href="https://netwatch.elia.network"
|
||||
class="project-link"
|
||||
>⎔ NETWATCH →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user