mirror of
https://github.com/restincode/restincode.git
synced 2026-06-11 08:15:18 +02:00
feat(ui): add tombstone card icons, nav bar, and about page
Replace plain text cards with tombstone background images that swap from gray to green on hover. Add header navigation with About, Contribute, and Contact links. Create about page with site description. Simplify header layout and improve text styling for card names.
This commit is contained in:
mauvehed
parent
e2a1b469ea
commit
1746ba18c2
7 changed files with 157 additions and 41 deletions
67
about.html
Normal file
67
about.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>About - Rest In Code</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Site by Connie 'Sunfire' Hill; Content by Rest In Code contributors"
|
||||
/>
|
||||
<meta name="description" content="About Rest In Code" />
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<h1 id="main-title">
|
||||
RestInCode <span id="subtitle">Passed but not Forgotten</span>
|
||||
</h1>
|
||||
<p id="tagline">
|
||||
A memorial site for Hackers and InfoSec people who have passed.
|
||||
</p>
|
||||
<nav class="header-nav">
|
||||
<a href="about.html">About</a>
|
||||
<a href="https://github.com/restincode/restincode">Contribute</a>
|
||||
<a href="https://github.com/restincode/restincode/issues">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content" class="about-layout">
|
||||
<a href="index.html" class="back-link">← Back to memorials</a>
|
||||
|
||||
<h2>About RestInCode</h2>
|
||||
|
||||
<p>
|
||||
RIC is a memorial site for Hackers and Information Security people who
|
||||
have passed. In a community and industry that many of us see as
|
||||
timeless, we are quickly learning that is not the reality, as our dear
|
||||
friends and colleagues more frequently move on. Our ideals, our
|
||||
research, and our spirit persists. Unfortunately, our human shells can't
|
||||
keep up sometimes. We seek to honor those who have touched security,
|
||||
technology, and our lives.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet. We leave this here for the thoughts we want
|
||||
to convey, but can't find the words for it.
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
Memorial content belongs to its respective creators and rights holders. We
|
||||
do our best to identify and credit them.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 6.7 KiB |
BIN
images/tombstone-gray.png
Normal file
BIN
images/tombstone-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
images/tombstone-green.png
Normal file
BIN
images/tombstone-green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
28
index.html
28
index.html
|
|
@ -85,24 +85,22 @@
|
|||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
|
||||
<header>
|
||||
<h1 id="main-title">
|
||||
RestInCode <span id="subtitle">Passed but not Forgotten</span>
|
||||
</h1>
|
||||
<p id="tagline">
|
||||
A memorial site for Hackers and InfoSec people who have passed.
|
||||
</p>
|
||||
<div class="header-inner">
|
||||
<h1 id="main-title">
|
||||
RestInCode <span id="subtitle">Passed but not Forgotten</span>
|
||||
</h1>
|
||||
<p id="tagline">
|
||||
A memorial site for Hackers and InfoSec people who have passed.
|
||||
</p>
|
||||
<nav class="header-nav">
|
||||
<a href="about.html">About</a>
|
||||
<a href="https://github.com/restincode/restincode">Contribute</a>
|
||||
<a href="https://github.com/restincode/restincode/issues">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero" id="main-content" aria-label="About RestInCode">
|
||||
<p>
|
||||
In a community and industry that many of us see as timeless, we are
|
||||
quickly learning that is not the reality, as our dear friends and
|
||||
colleagues more frequently move on. Our ideals, our research, and our
|
||||
spirit persists. Unfortunately, our human shells can't keep up
|
||||
sometimes. We seek to honor those who have touched security, technology,
|
||||
and our lives.
|
||||
</p>
|
||||
|
||||
<div class="people-search-wrapper">
|
||||
<input
|
||||
type="search"
|
||||
|
|
|
|||
|
|
@ -184,9 +184,16 @@
|
|||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
|
||||
<header>
|
||||
<h1 id="main-title">
|
||||
RestInCode - <span id="subtitle">In Memory of </span>
|
||||
</h1>
|
||||
<div class="header-inner">
|
||||
<h1 id="main-title">
|
||||
RestInCode - <span id="subtitle">In Memory of </span>
|
||||
</h1>
|
||||
<nav class="header-nav">
|
||||
<a href="about.html">About</a>
|
||||
<a href="https://github.com/restincode/restincode">Contribute</a>
|
||||
<a href="https://github.com/restincode/restincode/issues">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content" class="memorial-layout">
|
||||
|
|
|
|||
90
style.css
90
style.css
|
|
@ -128,7 +128,7 @@ a:focus-visible {
|
|||
========================================================================== */
|
||||
|
||||
header {
|
||||
padding: 2rem clamp(1.5rem, 5vw, 3rem);
|
||||
padding: 2rem clamp(1.5rem, 5vw, 3rem) 0.75rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--color-header-bg),
|
||||
|
|
@ -138,6 +138,29 @@ header {
|
|||
border-bottom: 2px solid var(--color-accent);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-top: 1.5rem;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.header-nav a:hover {
|
||||
color: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
color: var(--color-text-heading);
|
||||
margin-bottom: 0.25rem;
|
||||
|
|
@ -172,9 +195,9 @@ header h1 {
|
|||
========================================================================== */
|
||||
|
||||
.hero {
|
||||
max-width: 700px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem clamp(1.5rem, 5vw, 3rem) 1rem;
|
||||
padding: 1.5rem clamp(1.5rem, 5vw, 3rem) 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -213,48 +236,69 @@ header h1 {
|
|||
|
||||
.people-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 0.5rem;
|
||||
padding: 1.5rem clamp(1.5rem, 5vw, 3rem) 3rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.person-card {
|
||||
display: block;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--color-bg-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
color: var(--color-text-heading);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
aspect-ratio: 280 / 300;
|
||||
background: url("images/tombstone-gray.png") center / contain no-repeat;
|
||||
color: #9a9a90;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-size: 0.95rem;
|
||||
container-type: inline-size;
|
||||
font-size: clamp(0.55rem, 8cqi, 0.85rem);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
background 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
transform 0.15s ease;
|
||||
text-align: center;
|
||||
padding: 5% 20%;
|
||||
padding-bottom: 20%;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
a.person-card:visited {
|
||||
color: #9a9a90;
|
||||
}
|
||||
|
||||
a.person-card:visited:hover {
|
||||
color: #b0b8a8;
|
||||
}
|
||||
|
||||
.person-card:hover {
|
||||
background: var(--color-bg-elevated);
|
||||
border-color: var(--color-accent);
|
||||
background-image: url("images/tombstone-green.png");
|
||||
transform: translateY(-2px);
|
||||
text-decoration: none;
|
||||
color: var(--color-text-heading);
|
||||
color: #b0b8a8;
|
||||
}
|
||||
|
||||
.person-card.no-link {
|
||||
color: var(--color-text-muted);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.person-card.no-link:hover {
|
||||
background: var(--color-bg-surface);
|
||||
border-color: var(--color-border);
|
||||
background-image: url("images/tombstone-gray.png");
|
||||
color: #b0b8a8;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.about-layout {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem clamp(1.5rem, 5vw, 3rem);
|
||||
}
|
||||
|
||||
.about-layout p {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.contributing-section {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -454,6 +498,6 @@ footer a {
|
|||
}
|
||||
|
||||
.people-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue