Skip to content

Commit

Permalink
finished timeline style
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehulgoel873
mehulgoel873 committed May 16, 2024
1 parent 35590a2 commit fd79983
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 120 deletions.
197 changes: 85 additions & 112 deletions css/experience.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,11 @@
display: flex;
flex-direction: column;
padding: 32px 0 32px 32px;
border-left: 2px solid var(--c-grey-200);
border-left: 4px solid var(--navy-blue);
font-size: 1.125rem;
}


.experience .timeline-item {
display: flex;
gap: 24px;
Expand All @@ -52,8 +53,28 @@
& + .extra-space {
margin-top: 48px;
}

&:hover .card {
border-color: var(--orange);
box-shadow: 0 4px 4px 0 var(--orange-light);
color: var(--orange-light);
}

&:hover .card .button{
border-color: var(--orange-light);
color: var(--orange-light);
}

&:hover .card .button .hover-orange {
filter: invert(88%) sepia(94%) saturate(1799%) hue-rotate(305deg) brightness(101%) contrast(101%);
}

&:hover .icon {
filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%);
}
}


.experience .new-comment {
width: 100%;
input {
Expand Down Expand Up @@ -84,72 +105,53 @@
margin-left: -52px;
flex-shrink: 0;
overflow: hidden;
box-shadow: 0 0 0 6px #fff;
svg {
width: 20px;
height: 20px;
}

&.faded-icon {
background-color: var(--c-grey-100);
color: var(--c-grey-400);
}

&.filled-icon {
background-color: var(--c-blue-500);
color: #fff;
background-color: var(--background);
box-shadow: 0 0 0 8px var(--background);
img {
width: 35px;
height: 35px;
filter: invert(54%) sepia(17%) saturate(958%) hue-rotate(160deg) brightness(90%) contrast(91%);
/* https://isotropic.co/tool/hex-color-to-css-filter/ */
}
}

.experience .timeline-item-description {
display: flex;
padding-top: 6px;
gap: 8px;
color: var(--c-grey-400);
.experience .card {
margin-top: -24px;
margin-bottom: 36px;
color: var(--navy-blue-light);
border: 3px solid var(--navy-blue);
box-shadow: 0 4px 4px 0 var(--navy-blue-light);
border-radius: 6px;
padding: 16px;
font-weight: 600;
h1 {
padding: 0;
margin: 0;

img {
flex-shrink: 0;
}
a {
color: var(--c-grey-500);
font-weight: 500;
text-decoration: none;
&:hover,
&:focus {
outline: 0;
color: var(--c-blue-500);
}
font-weight: 900;
font-size: 2rem;
font-family: "Source Code Pro", monospace;
font-optical-sizing: auto;
font-style: normal;
}
}
h2 {
padding: 0;
margin: 0;

.experience .avatar {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
aspect-ratio: 1 / 1;
flex-shrink: 0;
width: 40px;
height: 40px;
&.small {
width: 28px;
height: 28px;
font-weight: 700;
font-size: 1.25rem;
font-family: "Source Code Pro", monospace;
font-optical-sizing: auto;
font-style: italic;
}

img {
object-fit: cover;
p {
margin-top: 4px;
color: var(--offwhite)
}
}

.experience .comment {
margin-top: 12px;
color: var(--c-grey-500);
border: 1px solid var(--c-grey-200);
box-shadow: 0 4px 4px 0 var(--c-grey-100);
border-radius: 6px;
padding: 16px;
font-size: 1rem;
.experience a {
color: var(--background);
}

.experience .button {
Expand All @@ -158,68 +160,39 @@
display: inline-flex;
vertical-align: middle;
margin-right: 4px;
margin-top: 12px;
align-items: center;
justify-content: center;
font-size: 1rem;
height: 32px;
padding: 0 8px;
background-color: var(--c-grey-100);
height: max-content;
padding: 4px 12px;

border: 5px solid var(--offwhite);
border-radius: 15px;
background-color: var(--background);
color: var(--offwhite);
flex-shrink: 0;
cursor: pointer;
border-radius: 99em;

&:hover {
background-color: var(--c-grey-200);
}

&.square {
border-radius: 50%;
color: var(--c-grey-400);
width: 32px;
height: 32px;
padding: 0;
svg {
width: 24px;
height: 24px;
}

font-weight: 400;
font-size: 1.25rem;
font-family: "Source Code Pro", monospace;
font-optical-sizing: auto;

&:hover {
background-color: var(--c-grey-200);
color: var(--c-grey-500);
}
img {
width: 1.5rem;
height: 1.5rem;
margin: 0px 16px 0px 8px;
filter: invert(100%) sepia(1%) saturate(4960%) hue-rotate(173deg) brightness(89%) contrast(101%);
}
}

.experience .show-replies {
color: var(--c-grey-300);
background-color: transparent;
border: 0;
padding: 0;
margin-top: 16px;
display: flex;
align-items: center;
gap: 6px;
font-size: 1rem;
cursor: pointer;
svg {
flex-shrink: 0;
width: 24px;
height: 24px;
&:hover {
border-color: var(--orange) !important;
color: var(--orange) !important;
}

&:hover,
&:focus {
color: var(--c-grey-500);
&:hover .hover-orange {
filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%) !important;
}
}

.experience .avatar-list {
display: flex;
align-items: center;
& > * {
position: relative;
box-shadow: 0 0 0 2px #fff;
margin-right: -8px;

&:hover .icon {
filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%);
}
}
}
16 changes: 8 additions & 8 deletions css/nav_home.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
body {
margin: 0;
padding: 0;
background-color: #32373B;
background-color: var(--background);
}


Expand Down Expand Up @@ -39,7 +39,7 @@ nav .nav-links a {
display: inline-block;
font-size: 3vh;
text-decoration: none;
color: #fff;
color: var(--offwhite);
padding: 20px 5px;
position: relative;
margin-left: 20px;
Expand All @@ -50,7 +50,7 @@ nav .nav-links a::before {
display: block;
width: 100%;
height: 3px;
background-color: #fff;
background-color: var(--offwhite);
position: absolute;
bottom: 20px;
left: 0;
Expand All @@ -77,7 +77,7 @@ nav .nav-links a:last-child::before {
display: block;
width: 100%;
height: 3px;
background-color: #ffc98c;
background-color: var(--orange-light);
position: absolute;
bottom: 0.5vh;
left: 0;
Expand Down Expand Up @@ -122,7 +122,7 @@ nav .nav-links a:last-child:hover::before {
vertical-align: middle;
max-width: max-content;
margin: 0 auto;
color: #fff;
color: var(--offwhite);
}
.text-wrapper h1 {
margin-top: 0;
Expand Down Expand Up @@ -162,7 +162,7 @@ nav .nav-links a:last-child:hover::before {
bottom: 0;
left: 0;
right: 0;
background-color: #32373B;
background-color: var(--background);
height: 2.25rem;
}

Expand All @@ -173,7 +173,7 @@ nav .nav-links a:last-child:hover::before {
left: 0;
right: 0;
background-color: transparent;
border-left: 3px solid #ff7f2d;
border-left: 3px solid var(--orange);
}

.welcome-section .nav-links {
Expand All @@ -187,7 +187,7 @@ nav .nav-links a:last-child:hover::before {
.welcome-section .nav-links a {
display: inline-block;
text-decoration: none;
color: #fff;
color: var(--offwhite);
padding: 32px 5px;
position: relative;
}
Expand Down
9 changes: 9 additions & 0 deletions css/utlities.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,13 @@ p, a{
--c-grey-500: #3d3d3d;

--c-blue-500: #688afd;

--navy-blue-light: #81b3d3;
--navy-blue: #5889a8;

--background: #32373b;
--offwhite: #DEE1E3; /*filter: invert(100%) sepia(1%) saturate(4960%) hue-rotate(173deg) brightness(89%) contrast(101%); */

--orange-light: #ffbe73; /* filter: invert(88%) sepia(94%) saturate(1799%) hue-rotate(305deg) brightness(101%) contrast(101%);*/
--orange: #ff7f2d; /* filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%); */
}

0 comments on commit fd79983

Please sign in to comment.