jaron/unicord
1
0
Fork 0
mirror of https://github.com/jaronpate/unicord.git synced 2026-10-18 21:47:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: Format CSS with consistent indentation and spacing

Browse Source
This commit is contained in:
Jaron
2025-02-22 23:32:21 -06:00
committed by Jaron (aider)
parent d169adbf3c
commit 72f05e762a
1 changed files with 88 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/app/page.module.css
+85 -84
View File
@@ -1,157 +1,158 @@
.page { .page {
--gray-rgb: 255, 255, 255; --gray-rgb: 255, 255, 255;
--gray-alpha-200: rgba(var(--gray-rgb), 0.145); --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
--gray-alpha-100: rgba(var(--gray-rgb), 0.06); --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
--button-primary-hover: #ccc; --button-primary-hover: #ccc;
--button-secondary-hover: #1a1a1a; --button-secondary-hover: #1a1a1a;
font-family: var(--font-space-grotesk); font-family: var(--font-space-grotesk);
} }
/* pag with header needs margin atop */ /* pag with header needs margin atop */
.pageWithHeader { .pageWithHeader {
margin-top: 4rem; margin-top: 4rem;
} }
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.7rem; padding: 0.7rem;
/* glassy background */ /* glassy background */
background: transparent; background: transparent;
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-bottom: 1px solid var(--gray-alpha-200); border-bottom: 1px solid var(--gray-alpha-200);
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 10; z-index: 10;
} }
.header img { .header img {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: 8px; margin-right: 8px;
} }
.logoMark { .logoMark {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0px; gap: 0px;
font-size: 32px; font-size: 32px;
font-weight: 600; font-weight: 600;
} }
.logoMarkSpan { .logoMarkSpan {
color: #ff0080; color: #ff0080;
} }
.main { .main {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
/* padding: 4rem 0em; */ /* padding: 4rem 0em; */
} }
@keyframes dotPattern { @keyframes dotPattern {
0% { 0% {
background-position: top right; background-position: top right;
} }
100% {
background-position: bottom left; 100% {
} background-position: bottom left;
}
} }
.hero { .hero {
padding: 0 15em 0; padding: 0 15em 0;
height: calc(100vh - 4rem); height: calc(100vh - 4rem);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid var(--gray-alpha-200); border-bottom: 1px solid var(--gray-alpha-200);
} }
.hero::before { .hero::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-image: radial-gradient(circle, #ff0080 1px, transparent 1px); background-image: radial-gradient(circle, #ff0080 1px, transparent 1px);
background-size: 20px 20px; background-size: 20px 20px;
animation: dotPattern 30s linear infinite; animation: dotPattern 30s linear infinite;
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
.hero::after { .hero::after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 50%; height: 50%;
background: linear-gradient(to bottom, transparent, var(--gray-alpha-100)); background: linear-gradient(to bottom, transparent, var(--gray-alpha-100));
pointer-events: none; pointer-events: none;
} }
.codeExample { .codeExample {
flex: 1; flex: 1;
max-width: 60%; max-width: 60%;
height: 75%; height: 75%;
max-height: 500px; max-height: 500px;
} }
.code { .code {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 1em; font-size: 1em;
} }
.codeBlock { .codeBlock {
background: var(--gray-alpha-100); background: var(--gray-alpha-100);
padding: 1em; padding: 1em;
border-radius: 0.5em; border-radius: 0.5em;
} }
.codeBlock pre { .codeBlock pre {
margin: 0; margin: 0;
} }
.codeBlock code { .codeBlock code {
font-size: 1em; font-size: 1em;
} }
.codeBlock code::before { .codeBlock code::before {
content: ""; content: "";
} }
.codeBlock code::after { .codeBlock code::after {
content: ""; content: "";
} }
.codeBlock code:hover { .codeBlock code:hover {
background: var(--gray-alpha-200); background: var(--gray-alpha-200);
} }
.codeBlock code:active { .codeBlock code:active {
background: var(--gray-alpha-200); background: var(--gray-alpha-200);
} }
.codeBlock code:focus { .codeBlock code:focus {
background: var(--gray-alpha-200); background: var(--gray-alpha-200);
} }
.codeBlock code:focus-visible { .codeBlock code:focus-visible {
background: var(--gray-alpha-200); background: var(--gray-alpha-200);
} }
.codeBlock code:focus-within { .codeBlock code:focus-within {
background: var(--gray-alpha-200); background: var(--gray-alpha-200);
} }
.pillars { .pillars {