some styling
This commit is contained in:
parent
64f8a13ad5
commit
878fe09ce2
4 changed files with 30 additions and 8 deletions
|
@ -1,11 +1,28 @@
|
||||||
.content {
|
.content {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 75em;
|
||||||
|
margin: auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
border: 3px solid var(--accent);
|
||||||
|
border-radius: 5px;
|
||||||
|
opacity: 0.9;
|
||||||
|
background: linear-gradient(to bottom right, var(--background-950), var(--background-900));
|
||||||
|
-webkit-box-shadow: 0 0 20px var(--accent);
|
||||||
|
-moz-box-shadow: 0 0 20px var(--accent);
|
||||||
|
box-shadow: 0 0 20px var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
h1::before {
|
||||||
|
content: "> ";
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
h1 {
|
||||||
|
font-size: 42px;
|
||||||
|
background-image: var(--accent-gradient);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-size: 400%;
|
||||||
|
background-position: 0%;
|
||||||
}
|
}
|
|
@ -5,6 +5,8 @@
|
||||||
--secondary: #76552e;
|
--secondary: #76552e;
|
||||||
--accent: #ffa941;
|
--accent: #ffa941;
|
||||||
|
|
||||||
|
--accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
|
||||||
|
|
||||||
--text-50: #f6f3ee;
|
--text-50: #f6f3ee;
|
||||||
--text-100: #ede6de;
|
--text-100: #ede6de;
|
||||||
--text-200: #dbcebd;
|
--text-200: #dbcebd;
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
@import "color-scheme.css";
|
@import "color-scheme.css";
|
||||||
|
@import "classes.css";
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: terminess-nf;
|
font-family: terminess-nf;
|
||||||
|
|
|
@ -4,11 +4,13 @@ import Layout from "../layouts/Layout.astro";
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<main>
|
<main>
|
||||||
// Title Area
|
<!-- Title Area -->
|
||||||
<section class="content">
|
<section class="content">
|
||||||
<h1 class="title">nelle observer</h1>
|
<h1 class="title"> nelle observer</h1>
|
||||||
<h2 class="subtitle"></h2>
|
<h2 class="subtitle"></h2>
|
||||||
<p>words</p>
|
</section>
|
||||||
|
<section class="content">
|
||||||
|
<p>hello, what brings you here?</p>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
Loading…
Reference in a new issue