nick/subwafer.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated style

Browse Source
This commit is contained in:
Nicholas Surmava
2026-03-21 13:58:03 -04:00
parent ca3062f473
commit 59fb78d192
2 changed files with 125 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@@ -8,13 +8,19 @@
<link rel="stylesheet" href="static/css/style.css"> <link rel="stylesheet" href="static/css/style.css">
</head> </head>
<body> <body>
<h1>nicholassurmava.com</h1> <main class="grid-container">
<div class="links"> <main class="grid-container">
<a href="http://git.nicholassurmava.com" target="_blank">git.nicholassurmava.com</a> <a href="http://git.nicholassurmava.com" target="_blank" class="section section-top-left">git.nicholassurmava.com</a>
<a href="#" class="disabled">Résumé</a> <a href="#" class="disabled section section-top-right">Résumé</a>
<a href="#" class="disabled">Projects</a> <a href="#" class="disabled section section-bottom-left">Blog</a>
<a href="#" class="disabled">Blog</a> <a href="#" class="disabled section section-bottom-right">Projects</a>
<div class="section section-right">
<h2>nicholassurmava.com</h2>
</div> </div>
<h2 class="typewriter">Stay_Tuned...</h2> </main>
</main>
<!-- <h2 class="typewriter">Stay_Tuned...</h2> -->
</body> </body>
</html> </html>

115
static/css/style.css
View File

@@ -6,6 +6,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
color-scheme: light dark; color-scheme: light dark;
--white: #cfcfcf; --white: #cfcfcf;
--gray: #979797;
--black: #1a1a1a; --black: #1a1a1a;
} }
/* Fonts */ /* Fonts */
@@ -46,14 +47,91 @@ button { font-size: clamp(0.9rem, 1.1vw, 1rem); }
body { body {
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--white); color: var(--white);
background-color: black; background-color: black;
} }
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);;
grid-template-rows: repeat(2, 1fr);
width: 90vw;
max-width: 900px;
aspect-ratio: 3 / 2;
}
.section-top-left { grid-column: 1 / 4; grid-row: 1; }
.section-top-right { grid-column: 4 / 5; grid-row: 1; }
.section-bottom-left { grid-column: 1; grid-row: 2; }
.section-bottom-right { grid-column: 2 / 5; grid-row: 2; }
.section-right {
grid-column: 5;
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
writing-mode: vertical-rl;
transform: rotate(0deg);
margin: 0;
}
.section {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 1px solid var(--white);
overflow: hidden;
position: relative;
}
.section::after {
content: '';
position: absolute;
left: 0;
top: -100%;
width: 100%;
height: 30px;
background: rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.section:hover::after {
animation: scanline 1.2s linear infinite;
}
@keyframes scanline {
0% { top: -10%; }
100% { top: 110%; }
}
@media (max-width: 600px) {
body {
flex-direction: column;
justify-content: center;
}
.grid-container {
display: flex;
flex-direction: column;
width: 100vw;
height: 50vh;
}
.section {
border: 0;
flex: 1;
}
.section-right {
order: -1;
writing-mode: horizontal-tb;
transform: none;
}
}
a { a {
color: crimson; color: crimson;
text-decoration: none; text-decoration: none;
@@ -100,7 +178,38 @@ h2.typewriter {
padding: 0.5rem; padding: 0.5rem;
} }
a.disabled { /* a.disabled {
pointer-events: none; pointer-events: none;
color: #666; color: #666;
} */
.disabled {
color: var(--gray);
position: relative;
cursor: default;
pointer-events: auto;
}
.disabled::before {
content: 'Stay_Tuned...';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--white);
white-space: nowrap;
opacity: 0;
overflow: hidden;
width: 0;
border-right: 2px solid transparent;
}
a.disabled:hover::before {
opacity: 1;
animation:
typing 2s steps(13, end) forwards,
blink 0.75s step-end infinite;
}
a.disabled:hover {
color: transparent;
} }