mirror of
https://github.com/Snigdha-OS/Snigdha-OS.github.io.git
synced 2025-09-07 05:05:18 +02:00
💅 style(): restructured and styled developers page
git graph moving text, some new changes in the images added navbar
This commit is contained in:
183
developers.css
183
developers.css
@@ -9,10 +9,12 @@
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
display: block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url(./assets/background.png);
|
||||
background: url(./assets/back.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
transition: 0.5s;
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
font-weight: 400;
|
||||
@@ -20,7 +22,7 @@ body {
|
||||
}
|
||||
|
||||
body:has(.box[data-color="clr1"]:hover) {
|
||||
background: url(./assets/eshanized.png);
|
||||
background: url(./assets/54362.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@@ -29,12 +31,184 @@ body:has(.box[data-color="clr2"]:hover) {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body:has(.box[data-color="clr3"]:hover) {
|
||||
background: url(./assets/iconixed.jpg);
|
||||
background: url(./assets/2147811240.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body:has(.box[data-color="clr4"]:hover) {
|
||||
background: url(./assets/2147835077.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
/* nav */
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
background-color: rgba(26, 31, 44, 0);
|
||||
z-index: 1000;
|
||||
padding-inline: 5rem;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a::before {
|
||||
background: #754ffe;
|
||||
content: "";
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
a:hover::before {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
|
||||
/* devs */
|
||||
* {
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
.git-i{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.git-contributions {
|
||||
width: 500x;
|
||||
height: 160px;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
border: solid 1px #3d444d;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
|
||||
.contribute-calendar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.weeks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.weeks p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.months {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
height: 22px;
|
||||
gap: 20px;
|
||||
margin-left: 38px;
|
||||
}
|
||||
|
||||
.bottom-scale {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 4px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.bottom-scale p {
|
||||
margin: 0;
|
||||
color: #9198a1;
|
||||
}
|
||||
|
||||
.color-box {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.legend-1 {
|
||||
background-color: #171c21;
|
||||
}
|
||||
|
||||
.legend-2 {
|
||||
background-color: #1f432b;
|
||||
}
|
||||
.legend-3 {
|
||||
background-color: #2e6b38;
|
||||
}
|
||||
.legend-4 {
|
||||
background-color: #52a44f;
|
||||
}
|
||||
.legend-5 {
|
||||
background-color: #6cd064;
|
||||
}
|
||||
|
||||
#led-container {
|
||||
padding: 10px;
|
||||
}
|
||||
.led-row {
|
||||
display: flex;
|
||||
}
|
||||
.led {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin: 1.8px;
|
||||
border-radius: 20%;
|
||||
background-color: #171c21;
|
||||
}
|
||||
.led.on-1 {
|
||||
background-color: #1f432b;
|
||||
}
|
||||
.led.on-2 {
|
||||
background-color: #2e6b38;
|
||||
}
|
||||
.led.on-3 {
|
||||
background-color: #52a44f;
|
||||
}
|
||||
|
||||
.led.on-4 {
|
||||
background-color: #6cd064;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
overflow: hidden;
|
||||
padding-top: 3em;
|
||||
@@ -167,3 +341,4 @@ h2 {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user