style footer, fix blobs, change link styling, various other misc styling changes
This commit is contained in:
parent
4bd9aec6b9
commit
1a734f8282
2 changed files with 44 additions and 12 deletions
|
|
@ -30,6 +30,12 @@
|
|||
color: #e5caff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dark main a {
|
||||
font-family: "Righteous";
|
||||
text-decoration: underline;
|
||||
color: var(--pink);
|
||||
}
|
||||
|
||||
.dark a:hover {
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,12 @@ a {
|
|||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
main a {
|
||||
font-family: "Righteous";
|
||||
text-decoration: underline;
|
||||
color: #910c75;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -40,6 +46,7 @@ html, body {
|
|||
gap: 3em;
|
||||
margin: 0 10em;
|
||||
background: transparent;
|
||||
font-family: "Poppins";
|
||||
}
|
||||
|
||||
.cards {
|
||||
|
|
@ -150,7 +157,7 @@ a.card-link {
|
|||
/* Blobs */
|
||||
.blob-cont {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: -2;
|
||||
|
|
@ -174,18 +181,18 @@ a.card-link {
|
|||
height: 200px;
|
||||
width: 200px;
|
||||
|
||||
animation: blob4 8s infinite linear;
|
||||
animation: blob1 8s infinite linear;
|
||||
}
|
||||
|
||||
#blob2 {
|
||||
background-color: var(--red);
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 100px;
|
||||
right: 0;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
|
||||
animation: blob1 8s infinite ease;
|
||||
animation: blob2 8s infinite ease;
|
||||
}
|
||||
|
||||
#blob3 {
|
||||
|
|
@ -196,7 +203,7 @@ a.card-link {
|
|||
height: 200px;
|
||||
width: 250px;
|
||||
|
||||
animation: blob2 8s infinite ease;
|
||||
animation: blob3 8s infinite ease;
|
||||
}
|
||||
|
||||
#blob4 {
|
||||
|
|
@ -207,28 +214,28 @@ a.card-link {
|
|||
height: 250px;
|
||||
width: 200px;
|
||||
|
||||
animation: blob3 8s infinite linear;
|
||||
animation: blob4 8s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes blob1 {
|
||||
0% {
|
||||
top: 200px;
|
||||
left: 100px;
|
||||
right: 100px;
|
||||
transform: scale(1);
|
||||
}
|
||||
30% {
|
||||
top: 300px;
|
||||
left: 150px;
|
||||
right: 140px;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
60% {
|
||||
top: 100px;
|
||||
left: 200px;
|
||||
right: 180px;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
100% {
|
||||
top: 200px;
|
||||
left: 100px;
|
||||
right: 100px;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
|
@ -270,7 +277,7 @@ a.card-link {
|
|||
60% {
|
||||
top: 250px;
|
||||
right: 100px;
|
||||
transform: scale(1);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
top: 250px;
|
||||
|
|
@ -346,11 +353,17 @@ nav {
|
|||
margin-top: 10vh;
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 75em;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
:root::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -434,3 +447,16 @@ transition: opacity 0.3s ease;
|
|||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
padding: 0.2em 0.3em;
|
||||
background-color: hsl(220, 13%, 18%);
|
||||
color: hsl(220, 14%, 71%);
|
||||
border-radius: 0.3em;
|
||||
white-space: nowrap; /* prevent line breaks in inline code */
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue