ami/start
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update styles

Browse Source
This commit is contained in:
ami_sc 2024-08-17 17:16:09 -04:00
parent 96c81e2e56
commit d876bdf2d6
1 changed files with 83 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
assets/css/styles.css
View File

@ -15,10 +15,22 @@
/* Default Container */
html {
display: flex;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #000000;
min-height: 100%;
background:
linear-gradient(120deg, #FF00C7 0%, #51003F 100%),
linear-gradient(120deg, #0030AD 0%, #00071A 100%),
linear-gradient(180deg, #000346 0%, #FF0000 100%),
linear-gradient(60deg, #0029FF 0%, #AA0014 100%),
radial-gradient(100% 165% at 100% 100%, #FF00A8 0%, #00FF47 100%),
radial-gradient(100% 150% at 0% 0%, #FFF500 0%, #51D500 100%);
background-blend-mode:
overlay, color-dodge,
overlay, overlay,
difference, normal;
}
/* Main Grid */
@ -28,9 +40,36 @@ body {
grid-template-rows: 0.2fr 1fr 1fr;
gap: 2rem;
padding: 2rem;
border-radius: 0.8rem;
margin: 1rem;
background-color: #0F0F0F;
background-color: rgb(0 0 0 / 75%);
border-radius: 0.8rem;
}
/* Small Screen Layout */
@media (max-width: 700px) {
.link_box {
grid-column: span 12;
}
}
@media (min-width: 700px) {
.link_box {
grid-column: span 6;
}
}
@media (min-width: 900px) {
.link_box {
grid-column: span 4;
}
}
/* Large Screen Layout */
@media (min-width: 1200px) {
.link_box {
grid-column: span 3;
}
}
/* Page Header */
@ -41,7 +80,7 @@ header {
grid-column: span 12;
padding: 1.2rem;
background-image: linear-gradient(145deg, #3494E6, #EC6EAD);
background-image: linear-gradient(145deg, #525252, #3d72b4);
border-radius: 0.4rem;
}
@ -49,11 +88,12 @@ header h1 {
font-family: "Fira Code SemiBold";
color: #FFFFFF;
margin: 0;
text-shadow: 0.1rem 0.1rem 0.4rem #000000;
}
/* Link Box */
.link_box {
grid-column: span 3;
/* grid-column: span 3; */
display: grid;
grid-template-columns: repeat(4, [col-start] 1fr);
@ -68,18 +108,16 @@ header h1 {
display: flex;
margin: 0;
padding: 1rem;
background-color: #313131;
align-items: center;
justify-content: center;
font-family: "Fira Code SemiBold";
font-size: 1.25rem;
text-shadow: 0.1rem 0.1rem 0.4rem #000000;
color: #FFFFFF;
border-radius: 0.4rem;
border-color: #FFFFFF;
border-style: solid;
border-width: 2px;
}
/* Link */
@ -93,7 +131,7 @@ a {
gap: 1rem;
padding: 1rem;
background-color: #313131;
background-color: #525252;
border-radius: 0.4rem;
border-color: #313131;
border: 2px solid transparent;
@ -125,3 +163,37 @@ a img {
width: 2.5rem;
height: 2.5rem;
}
/* Specific Colors for each Category */
.personal > h2 {
background-image: linear-gradient(to right, #cb2d3e, #ef473a);
}
.home > h2 {
background-image: linear-gradient(to right, #0083B0, #00B4DB);
}
.work > h2 {
background-image: linear-gradient(to right, #4A00E0, #8E2DE2);
}
.finance > h2 {
background-image: linear-gradient(to right, #11998e, #38ef7d);
}
.management > h2 {
background-image: linear-gradient(to right, #EF629F, #EECDA3);
}
.productivity > h2 {
background-image: linear-gradient(to right, #021B79, #0575E6);
}
.entertainment > h2 {
background-image: linear-gradient(to right, #ec008c, #fc6767);
}
.shopping > h2 {
background-image: linear-gradient(to right, #f8b500, #fceabb);
}