Commit

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;
+    background: var(--bg-color);
-    color: #c5e5e5;
+    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;
+    background: var(--bg-color);
-    border-right: 1px solid #2a5a5a;
+    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);
+    color: var(--text-bright);
-}
-
-.nav-icon.active {
-    color: rgba(255, 255, 255, 1);
 }
 
 .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;
+    position: absolute;
-    font-size: 1.1em;
+    left: 0;
+    color: var(--text-bright);
+    text-shadow: 0 0 10px var(--glow-color);
+    background: none;
 }
 
-.project-item {
+.header {
-    border: 1px solid #2a5a5a;
+    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 {
+.project-item:hover,
-    border-color: #c5e5e5;
+.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,
+.project-link {
-.status-item {
+    display: inline-block;
-    border: 1px solid #2a5a5a;
+    color: var(--text-bright);
-    padding: 15px;
+    text-decoration: none;
-    margin: 15px 0;
+    padding: 10px 15px;
-    cursor: pointer;
+    border: 1px solid var(--border-color);
-    transition: all 0.3s ease;
+    transition:
-    position: relative;
+        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,
+.project-link:hover {
-.status-item:hover {
+    border-color: var(--text-bright);
-    border-color: #c5e5e5;
     background: rgba(42, 90, 90, 0.1);
 }
 
-.project-header,
+.status-grid {
-.status-header {
+    display: grid;
-    display: flex;
+    gap: 15px;
-    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-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 {
+.status-details {
-    margin: 4px 0;
+    max-height: 0;
-    padding-left: 15px;
+    overflow: hidden;
-    position: relative;
+    transition:
-}
+        max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
-
+        opacity 0.3s ease,
-.status-metric::before {
+        transform 0.3s ease;
-    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 {
     margin-top: 10px;
+    opacity: 0;
+    transform: translateY(-10px);
 }
 
-.nested-entries {
+.status-details.expanded {
-    margin-left: 20px;
+    max-height: 500px;
-    margin-top: 5px;
+    opacity: 1;
-}
+    transform: translateY(0);
-
-.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);
 }
 
 .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;
+    border: 1px solid var(--border-color);
-    transition: all 0.3s ease;
+    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;
+    }
+}

index.html

@@ -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>