Update styles

This commit is contained in:
ami_sc 2024-08-11 15:20:02 -04:00
parent d5415a2019
commit 0b90aaf296
3 changed files with 20 additions and 12 deletions

View File

@ -6,8 +6,8 @@
} }
@font-face { @font-face {
font-family: "Fira Code Bold"; font-family: "Fira Code SemiBold";
src: url(../fonts/FiraCode-Bold.ttf); src: url(../fonts/FiraCode-SemiBold.ttf);
} }
/*** Page Contents ***/ /*** Page Contents ***/
@ -18,16 +18,19 @@ html {
height: 100%; height: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #1B1B1B; background-color: #000000;
} }
/* Main Grid */ /* Main Grid */
body { body {
margin: 5rem 10rem 5rem 10rem;
display: grid; display: grid;
grid-template-columns: repeat(4, [col-start] 1fr); grid-template-columns: repeat(12, [col-start] 1fr);
grid-template-rows: 0.2fr 1fr 1fr; grid-template-rows: 0.2fr 1fr 1fr;
gap: 2rem; gap: 2rem;
padding: 2rem;
border-radius: 0.8rem;
background-color: #0F0F0F;
} }
/* Page Header */ /* Page Header */
@ -35,7 +38,7 @@ header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
grid-column: span 4; grid-column: span 12;
padding: 1.2rem; padding: 1.2rem;
background-image: linear-gradient(145deg, #3494E6, #EC6EAD); background-image: linear-gradient(145deg, #3494E6, #EC6EAD);
@ -43,30 +46,33 @@ header {
} }
header h1 { header h1 {
font-family: "Fira Code Bold"; font-family: "Fira Code SemiBold";
color: #FFFFFF; color: #FFFFFF;
margin: 0; margin: 0;
} }
/* Link Box */ /* Link Box */
.link_box { .link_box {
grid-column: span 3;
display: grid; display: grid;
grid-template-columns: repeat(2, [col-start] 1fr); grid-template-columns: repeat(4, [col-start] 1fr);
grid-template-rows: 0.5fr 1fr 1fr; grid-template-rows: 0.5fr 1fr 1fr;
gap: 1rem; gap: 1rem;
max-height: fit-content; max-height: fit-content;
} }
.link_box h2 { .link_box h2 {
grid-column: span 4;
display: flex; display: flex;
margin: 0; margin: 0;
padding: 1rem; padding: 1rem;
background-color: #313131; background-color: #313131;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
grid-column: span 2;
font-family: "Fira Code Bold"; font-family: "Fira Code SemiBold";
font-size: 1.25rem; font-size: 1.25rem;
color: #FFFFFF; color: #FFFFFF;
@ -78,6 +84,8 @@ header h1 {
/* Link */ /* Link */
a { a {
grid-column: span 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -98,7 +106,7 @@ a {
} }
a:hover { a:hover {
font-family: "Fira Code Bold"; font-family: "Fira Code SemiBold";
background: background:
linear-gradient(#505050 0 0) padding-box, linear-gradient(#505050 0 0) padding-box,
linear-gradient(to right, #12c2e9, #c471ed,#f64f59) border-box; linear-gradient(to right, #12c2e9, #c471ed,#f64f59) border-box;
@ -106,7 +114,7 @@ a:hover {
} }
a:active { a:active {
font-family: "Fira Code Bold"; font-family: "Fira Code SemiBold";
background: background:
linear-gradient(#777777 0 0) padding-box, linear-gradient(#777777 0 0) padding-box,
linear-gradient(to right, #12c2e9, #c471ed,#f64f59) border-box; linear-gradient(to right, #12c2e9, #c471ed,#f64f59) border-box;

Binary file not shown.

Binary file not shown.