# CSS from bolt.new
I had the AI brought to us by the folks behind the awesome [Stackblitz](https://stackblitz.com/) spin up an example page to demonstrate some CSS that I thought might be cool for the Sparksnotes site
# Example Preview
![[Pasted image 20241129061024.png]]
# What's in the Code
### Confirmed Working
- Separate gradient color schemes for headers 1, 2, and 3
- Dark background with animated, glowing radial circles with colors that are consistent with the headers and overall design
- Header font-family `Playfair Display`
### Else
Because Obsidian uses a number of custom variables/classes to reference what shows up on the Obsidian Publish page, some of the code generated by Bolt.new ends up not showing up, presumably because it is being applied to stuff that isn't actually on the page, instead being represented by the custom Obsidian variable they've created for whatever that element is
# CSS Code
```css
:root {
--glow-1: rgb(88, 16, 156);
--glow-2: rgb(16, 156, 149);
--glow-3: rgb(156, 16, 85);
--spark-yellow: rgb(255, 217, 102);
--bg-dark: #0a0a0f;
--text-primary: rgba(255, 255, 255, 0.87);
--text-secondary: rgba(255, 255, 255, 0.6);
}
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(125deg, var(--bg-dark), #000);
position: relative;
overflow-x: hidden;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.6;
font-weight: 400;
}
body::before,
body::after,
.glow-circle {
content: '';
position: fixed;
border-radius: 50%;
filter: blur(80px);
opacity: 0.15;
animation: pulse 8s ease-in-out infinite alternate;
}
body::before {
width: 40vmin;
height: 40vmin;
background: var(--glow-1);
top: 20%;
left: 20%;
animation-delay: 0s;
}
body::after {
width: 45vmin;
height: 45vmin;
background: var(--glow-2);
bottom: 20%;
right: 20%;
animation-delay: -3s;
}
.glow-circle {
width: 35vmin;
height: 35vmin;
background: var(--glow-3);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: -6s;
}
@keyframes pulse {
0% {
opacity: 0.1;
transform: scale(1) translate(0, 0);
}
50% {
opacity: 0.15;
}
100% {
opacity: 0.1;
transform: scale(1.1) translate(2%, 2%);
}
}
#app {
position: relative;
z-index: 1;
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
color: var(--text-primary);
}
.content {
max-width: 800px;
margin: 2rem auto;
text-align: left;
padding: 0 1rem;
}
h1, h2, h3 {
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
position: relative;
display: inline-block;
width: 100%;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
margin-bottom: 0.5em;
color: var(--spark-yellow);
background-image: linear-gradient(135deg, var(--spark-yellow), var(--glow-2), var(--glow-1));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
text-shadow: 0 0 30px rgba(255, 217, 102, 0.3);
}
h2 {
font-size: 2.4em;
line-height: 1.2;
margin-bottom: 0.5em;
color: var(--spark-yellow);
background-image: linear-gradient(135deg, var(--spark-yellow), var(--glow-2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
h3 {
font-size: 1.8em;
line-height: 1.3;
margin-bottom: 0.5em;
color: var(--text-primary);
background-image: linear-gradient(135deg, var(--spark-yellow) 10%, var(--text-primary));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 500;
}
p {
margin-bottom: 1.5em;
font-size: 1.1em;
color: var(--text-primary);
line-height: 1.6;
}
blockquote {
border-left: 4px solid var(--spark-yellow);
margin: 2em 0;
padding: 1em 2em;
background: rgba(255, 217, 102, 0.05);
border-radius: 0 8px 8px 0;
font-style: italic;
color: var(--text-secondary);
}
a, .inline-link {
font-weight: 500;
color: var(--spark-yellow);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover, .inline-link:hover {
color: var(--glow-2);
text-decoration: underline;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: all 0.25s ease;
}
button:hover {
border-color: var(--spark-yellow);
background-color: rgba(255, 217, 102, 0.15);
}
button:focus,
button:focus-visible {
outline: 4px auto var(--spark-yellow);
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em rgba(255, 217, 102, 0.6));
}
.logo.vanilla:hover {
filter: drop-shadow(0 0 2em rgba(255, 217, 102, 0.6));
}
.card {
padding: 2em;
}
```