mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2025-06-07 13:54:14 -04:00
Thoughts
This commit is contained in:
parent
5f36307526
commit
68f4bae2da
5 changed files with 239 additions and 80 deletions
133
Styles/home.css
Normal file
133
Styles/home.css
Normal 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
71
Styles/styles.css
Normal 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
33
Styles/thoughts.css
Normal 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;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue