Fix #78 - use grid css to fix sidebar height issue

This commit is contained in:
sharathdt 2022-02-07 13:04:54 +05:30
parent a69446162e
commit a2cdb2a50d
2 changed files with 270 additions and 273 deletions

View File

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

View File

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