Skip to content

Add the pages the relaunch is for, without pointing anyone at them yet #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
openipc-ai wants to merge 1 commit into
base: feat/layout-partials
Choose a base branch
from
Open

Add the pages the relaunch is for, without pointing anyone at them yet #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/assets/stylesheets/application.bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,13 @@ $bootstrap-icons-font-dir: '/fonts';

@import 'base';
@import 'components/navbar';
@import 'components/sections';
@import 'components/cards';
@import 'components/stage-badge';
@import 'components/terminal';
@import 'components/logo-wall';
@import 'components/browser-frame';
@import 'pages/home';
@import 'pages/hardware';
@import 'pages/calculator';
@import 'pages/openwall';
Expand Down
35 changes: 35 additions & 0 deletions app/assets/stylesheets/components/_browser-frame.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// CSS "browser chrome" wrapper that makes plain screenshots look intentional.
.browser-frame {
border: 1px solid $border-color;
border-radius: $border-radius-lg;
box-shadow: $box-shadow-sm;
overflow: hidden;

.browser-frame-bar {
align-items: center;
background: $body-tertiary-bg;
border-bottom: 1px solid $border-color;
display: flex;
gap: .3rem;
padding: .45rem .75rem;

span {
background: $border-color;
border-radius: 50%;
height: .55rem;
width: .55rem;
}

.browser-frame-title {
color: $body-secondary-color;
font-family: $font-family-monospace;
font-size: .7rem;
margin-inline-start: .5rem;
}
}

img {
display: block;
width: 100%;
}
}
61 changes: 61 additions & 0 deletions app/assets/stylesheets/components/_cards.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,64 @@
// Pillar cards (homepage) and project cards (ecosystem/labs).
.pillar-card,
.project-card {
height: 100%;
transition: border-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;

a {
text-decoration: none;
}

&:hover, &:focus-within {
border-color: rgba($indigo, .45);
box-shadow: $box-shadow;

@media (prefers-reduced-motion: no-preference) {
transform: translateY(-2px);
}
}
}

.pillar-card .icon-chip {
align-items: center;
background: rgba($indigo, .08);
border-radius: $border-radius-lg;
color: $indigo;
display: inline-flex;
font-size: 1.5rem;
height: 3rem;
justify-content: center;
width: 3rem;

&.icon-chip--accent {
background: rgba($accent, .15);
color: shade-color($accent, 35%);
}
}

.project-card .card-title {
font-family: $font-family-monospace;
font-size: 1rem;
}

// Live indicator dot (Open Wall strips).
.live-dot {
animation: live-pulse 2s infinite;
background: $accent;
border-radius: 50%;
display: inline-block;
height: .5rem;
width: .5rem;
}

@keyframes live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
.live-dot { animation: none; }
}

// Team member cards: the social icons float over the top edge of the card.
.card-body {
position: relative;
Expand Down
26 changes: 26 additions & 0 deletions app/assets/stylesheets/components/_logo-wall.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// Partner/integrator logo wall: white tiles normalize the mixed PNG set.
.logo-wall {
.logo-tile {
align-items: center;
background: #fff;
border: 1px solid $border-color;
border-radius: $border-radius;
display: flex;
height: 4.5rem;
justify-content: center;
padding: .75rem 1rem;

img {
filter: grayscale(1) opacity(.7);
max-height: 100%;
max-width: 100%;
object-fit: contain;
transition: filter .15s ease-out;
}

&:hover img,
&:focus-within img {
filter: none;
}
}
}
26 changes: 26 additions & 0 deletions app/assets/stylesheets/components/_sections.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// Full-bleed homepage/landing sections. Mark dark ones with data-bs-theme="dark"
// in the markup so Bootstrap color tokens flip accordingly.
.section--ink {
background: $ink;
color: rgba(255, 255, 255, .85);

// Faint engineering dot-grid, used on the hero.
&.section--grid {
background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
background-size: 24px 24px;
}

:focus-visible {
outline-color: #fff;
}
}

.section--alt {
background: $body-tertiary-bg;
}

// Standard inner-page header band.
.page-header {
background: $body-tertiary-bg;
border-bottom: 1px solid $border-color;
}
43 changes: 43 additions & 0 deletions app/assets/stylesheets/components/_stage-badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// Text badge for project/SoC development stages (NEQ/R&D/HLP/WIP/MVP/DONE).
// Replaces the raw stage SVGs in tables and cards; SVG pictograms stay in the legend page.
.stage-badge {
align-items: center;
border: 1px solid $border-color;
border-radius: 50rem;
display: inline-flex;
font-family: $font-family-monospace;
font-size: .6875rem;
font-weight: 600;
gap: .35em;
letter-spacing: .05em;
line-height: 1;
padding: .25em .65em;
text-transform: uppercase;
white-space: nowrap;

&::before {
border-radius: 50%;
content: '';
height: .5em;
width: .5em;
}

@each $stage, $color in $stage-colors {
&.stage-badge--#{$stage} {
border-color: rgba($color, .5);
color: shade-color($color, 25%);

&::before {
background: $color;
}
}
}
}

[data-bs-theme='dark'] .stage-badge {
@each $stage, $color in $stage-colors {
&.stage-badge--#{$stage} {
color: tint-color($color, 35%);
}
}
}
68 changes: 68 additions & 0 deletions app/assets/stylesheets/components/_terminal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
// Terminal-style code block with a copy button. Markup: shared/_terminal partial.
.terminal {
background: $ink;
border-radius: $border-radius-lg;
color: #e7ebf5;
direction: ltr; // shell commands stay LTR even in RTL locales
font-family: $font-family-monospace;
overflow: hidden;
text-align: left;

.terminal-header {
align-items: center;
background: $ink-2;
color: rgba(255, 255, 255, .55);
display: flex;
font-size: .75rem;
gap: .5rem;
padding: .5rem .75rem;

.dots {
display: inline-flex;
gap: .3rem;

span {
background: rgba(255, 255, 255, .25);
border-radius: 50%;
height: .55rem;
width: .55rem;
}
}

.btn-copy {
--bs-btn-color: rgba(255, 255, 255, .55);
--bs-btn-hover-color: #fff;
margin-inline-start: auto;
}
}

pre {
margin: 0;
overflow-x: auto;
padding: .875rem 1rem;

code {
color: inherit;
font-size: .875rem;
}
}

.prompt {
color: rgba(255, 255, 255, .45);
user-select: none;
}
}

// Blinking cursor — allowed in exactly one place (hero microline).
.cursor-blink::after {
animation: cursor-blink 1.1s steps(2) infinite;
content: '▌';
}

@keyframes cursor-blink {
50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
.cursor-blink::after { animation: none; }
}
108 changes: 108 additions & 0 deletions app/assets/stylesheets/pages/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
// Homepage sections.
.hero {
h1 {
font-size: clamp(1.9rem, 4.5vw, 3.2rem);
font-weight: 700;
text-wrap: balance;
}

.hero-lede {
color: rgba(255, 255, 255, .78);
max-width: 60ch;
}

.hero-microline {
color: rgba(255, 255, 255, .55);
font-family: $font-family-monospace;
font-size: .875rem;
}
}

// Live Open Wall mosaic (3x2 tiles).
.wall-mosaic {
display: grid;
gap: 8px;
grid-template-columns: repeat(3, 1fr);

.wall-tile {
background: $ink-2;
border-radius: $border-radius;
display: block;
overflow: hidden;
position: relative;

img {
aspect-ratio: 16 / 9;
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}

&.wall-tile--cta {
align-items: center;
aspect-ratio: 16 / 9;
border: 1px dashed rgba(255, 255, 255, .3);
color: rgba(255, 255, 255, .7);
display: flex;
font-size: .8125rem;
justify-content: center;
padding: .5rem;
text-align: center;
text-decoration: none;

&:hover, &:focus {
border-color: $accent;
color: #fff;
}
}
}

.wall-caption {
background: linear-gradient(transparent, rgba(15, 20, 34, .85));
bottom: 0;
color: rgba(255, 255, 255, .85);
font-family: $font-family-monospace;
font-size: .65rem;
inset-inline: 0;
overflow: hidden;
padding: 1rem .5rem .25rem;
position: absolute;
text-overflow: ellipsis;
white-space: nowrap;
}
}

// "Runs on silicon by" strip.
.silicon-strip {
color: $body-secondary-color;
font-family: $font-family-monospace;
font-size: .875rem;
letter-spacing: .06em;
text-transform: uppercase;
}

// Stats band figures.
.stat-figure {
.stat-value {
color: #fff;
font-family: $font-family-monospace;
font-size: 2.25rem;
font-weight: 600;
line-height: 1.1;
}

.stat-label {
color: rgba(255, 255, 255, .6);
font-size: .875rem;
}
}

// Liberation story panels.
.story-step .story-index {
color: rgba($indigo, .35);
font-family: $font-family-monospace;
font-size: 2rem;
font-weight: 600;
line-height: 1;
}
Loading
Loading