Merge pull request #274 from sharu725/fix-78

Fix #78 - use grid css to fix sidebar height issue
This commit is contained in:
sharath Kumar 2022-02-07 13:05:20 +05:30 committed by GitHub
commit d0ba287371
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 270 additions and 273 deletions

View File

@ -1,6 +1,6 @@
/* ======= Base ======= */ /* ======= Base ======= */
body { body {
font-family: 'Roboto', sans-serif; font-family: "Roboto", sans-serif;
color: $text-color-secondary; color: $text-color-secondary;
background: $smoky-white; background: $smoky-white;
font-size: 14px; font-size: 14px;
@ -9,7 +9,12 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700; font-weight: 700;
} }
@ -29,6 +34,8 @@ p {
} }
.wrapper { .wrapper {
display: grid;
grid-template-columns: repeat(10, 1fr);
background: $theme-color; background: $theme-color;
max-width: 1000px; max-width: 1000px;
margin: 0 auto; margin: 0 auto;
@ -37,12 +44,9 @@ p {
} }
.sidebar-wrapper { .sidebar-wrapper {
grid-column: span 3;
order: 2;
background: $theme-color; background: $theme-color;
position: absolute;
right: 0;
width: 280px;
height: 100%;
min-height: 800px;
color: #fff; color: #fff;
a { a {
color: #fff; color: #fff;
@ -80,7 +84,9 @@ p {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
} }
.contact-list { .contact-list {
.fas, .fab, .far { .fas,
.fab,
.far {
margin-right: 5px; margin-right: 5px;
font-size: 18px; font-size: 18px;
vertical-align: middle; vertical-align: middle;
@ -154,9 +160,9 @@ p {
} }
.main-wrapper { .main-wrapper {
grid-column: span 7;
background: #fff; background: #fff;
padding: 60px; padding: 60px;
padding-right: 340px;
.section-title { .section-title {
text-transform: uppercase; text-transform: uppercase;
font-size: 20px; font-size: 20px;
@ -170,7 +176,8 @@ p {
margin-bottom: 60px; margin-bottom: 60px;
} }
.experiences-section, .educations-section { .experiences-section,
.educations-section {
.item { .item {
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -180,7 +187,8 @@ p {
overflow: hidden; overflow: hidden;
margin-bottom: 2px; margin-bottom: 2px;
} }
.job-title, .degree { .job-title,
.degree {
color: $text-color; color: $text-color;
font-size: 16px; font-size: 16px;
margin-top: 0; margin-top: 0;
@ -193,7 +201,8 @@ p {
top: 0; top: 0;
color: $text-grey; color: $text-grey;
} }
.company, .university { .company,
.university {
margin-bottom: 10px; margin-bottom: 10px;
color: $text-grey; color: $text-grey;
} }
@ -235,7 +244,6 @@ p {
} }
} }
.skillset { .skillset {
.item { .item {
margin-bottom: 15px; margin-bottom: 15px;
@ -256,9 +264,6 @@ p {
} }
} }
.footer { .footer {
padding-top: 30px; padding-top: 30px;
.copyright { .copyright {
@ -270,5 +275,4 @@ p {
.fa-heart { .fa-heart {
color: $heart; color: $heart;
} }
} }

View File

@ -1,6 +1,5 @@
/* Extra small devices (phones, less than 768px) */ /* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) { @media (max-width: 767px) {
body { body {
padding: 0; padding: 0;
} }
@ -10,6 +9,10 @@
width: inherit; width: inherit;
} }
.wrapper {
display: block;
}
.main-wrapper { .main-wrapper {
padding: 30px; padding: 30px;
} }
@ -23,18 +26,13 @@
.main-wrapper .upper-row { .main-wrapper .upper-row {
margin-bottom: 0; margin-bottom: 0;
} }
} }
/* Small devices (tablets, 768px and up) */ /* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { @media (min-width: 768px) {
} }
/* Medium devices (desktops, 992px and up) */ /* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { @media (min-width: 992px) {
.skillset .level-title { .skillset .level-title {
display: inline-block; display: inline-block;
float: left; float: left;
@ -49,17 +47,12 @@
position: relative; position: relative;
top: 1px; top: 1px;
} }
} }
/* Large devices (large desktops, 1200px and up) */ /* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { @media (min-width: 1200px) {
} }
/* Ex-Large devices (large desktops, 1200px and up) */ /* Ex-Large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) { @media (min-width: 1400px) {
} }