This commit is contained in:
Editor Rust 2022-12-01 21:53:30 +00:00
parent 5f36307526
commit 68f4bae2da
5 changed files with 239 additions and 80 deletions

133
Styles/home.css Normal file
View file

@ -0,0 +1,133 @@
* {
font-family: "Nunito", "Times New Roman", Times, serif;
}
.content {
transition: .2s;
}
.title {
margin: 2rem 2rem 1rem 2rem;
text-align: center;
}
h2 {
position: relative;
margin: 1rem .75rem .75rem 2.5rem;
font-size: 1.5rem;
transition: .2s;
}
h2::before {
content: "";
position: absolute;
top: .5rem;
left: -.6rem;
height: 1rem;
width: .25rem;
border-radius: 5rem;
background-color: var(--theme-color);
transition: .2s;
}
h2:hover {
margin: 1rem .75rem .75rem 3rem;
}
h2:hover::before {
left: -1.1rem;
}
h3 {
margin: .75rem 0 0 2rem;
}
p {
margin: .5rem 2rem;
}
button {
padding: .2rem .5rem;
font-size: 1.1rem;
color: #fff;
background-color: var(--theme-color);
border: solid .2rem var(--theme-color);
border-radius: .5rem;
box-shadow: 0 .1rem .2rem #ddd;
transition: .15s;
}
button:hover {
color: var(--theme-color);
background-color: transparent;
}
button:active {
transform: scale(.98);
}
a {
color: var(--theme-color);
}
.thoughts {
margin: 2rem 2rem 0 0;
float: right;
color: #888;
text-decoration: none;
font-weight: 700;
font-size: 1.5rem;
font-family: monospace;
}
.funsies {
padding: .5rem 2rem;
}
.funsies p {
margin: 0 .2rem .8rem .2rem;
}
.progress-parent {
display: block;
width: 100%;
background-color: #ddd;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.progress {
height: .5rem;
width: 0%;
background-color: var(--theme-color);
animation: progress 1s linear;
}
@keyframes progress {
to { width: 100%; }
}
.progress {
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
animation-iteration-count: 1;
animation-fill-mode: both;
}
@media (prefers-color-scheme: dark) {
.progress-parent {
background-color: #444;
}
button {
box-shadow: 0 .2rem .2rem #000;
}
}
@media only screen and (min-width: 1200px) {
.content {
padding: 0 6rem;
line-height: 1.7rem;
}
}

71
Styles/styles.css Normal file
View file

@ -0,0 +1,71 @@
* {
padding: 0;
margin: 0;
}
:root {
--theme-color: #f69b46;
}
a {
color: var(--theme-color);
}
@media (prefers-color-scheme: dark) {
body {
background-color: #222;
color: #ddd;
}
}
/* Footer styles */
.footer {
padding: 1rem;
display: grid;
grid-template-columns: auto auto;
background-color: #222;
color: #fff;
border-bottom: solid .4rem var(--theme-color);
font-family: "Nunito", "Times New Roman", Times, serif;
}
.footer h2 {
position: relative;
margin: 1rem .75rem .75rem 2.5rem;
font-size: 1.5rem;
transition: .2s;
}
.footer h2::before {
content: "";
position: absolute;
top: .5rem;
left: -.6rem;
height: 1rem;
width: .25rem;
border-radius: 5rem;
background-color: var(--theme-color);
transition: .2s;
}
.footer h2:hover {
margin: 1rem .75rem .75rem 3rem;
}
.footer h2:hover::before {
left: -1.1rem;
}
.footer p {
margin: .5rem 2rem;
}
.faded-footer {
color: #bbb;
}
@media (prefers-color-scheme: dark) {
.footer {
background-color: #000;
}
}

33
Styles/thoughts.css Normal file
View file

@ -0,0 +1,33 @@
.home {
margin: 1.8rem 2rem 0 0;
float: right;
color: #888;
text-decoration: none;
font-weight: 700;
font-size: 1.5rem;
font-family: monospace;
}
.content {
font-family: "Ubuntu Mono", monospace;
transition: .2s;
}
.article p {
text-indent: 1rem;
line-height: 1.2rem;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #222;
color: #ddd;
}
}
@media only screen and (min-width: 1200px) {
.content {
padding: 0 6rem;
line-height: 1.7rem;
}
}