From a735dde38b37ad5133b5b3916e31018271dbbf6d Mon Sep 17 00:00:00 2001 From: Emruz Hossain Date: Mon, 29 Mar 2021 02:06:07 +0600 Subject: Fix table CSS in Education section (#269) Signed-off-by: hossainemruz --- static/css/sections/education.css | 190 ++++++++++++++++++++++---------------- 1 file changed, 110 insertions(+), 80 deletions(-) (limited to 'static') diff --git a/static/css/sections/education.css b/static/css/sections/education.css index e095394..f7d518b 100644 --- a/static/css/sections/education.css +++ b/static/css/sections/education.css @@ -1,158 +1,188 @@ .education-section .education-info-table { - width: 100%; + width: 100%; + border: none; } -.education-section .education-info-table tr { - padding: 0.1rem; +.education-section .education-info-table tr:hover { + background: none; +} + +.education-section .education-info-table tr, +.education-section .education-info-table th, +.education-section .education-info-table td { + border: none; + padding: 0; } .education-section .timeframe { - color: #8392A5; - text-align: right; + color: #8392a5; + text-align: right; } + .education-section .icon { - width: 2rem; - padding-left: 0; - padding-right: 0; - position: relative; + width: 2rem; + padding-left: 0; + padding-right: 0; + position: relative; } .education-section .icon .hline { - position: absolute; - left: 1rem; - top: 0; - background-color: #248aaa; - height: 100%; - width: 2px; + position: absolute; + left: 1rem; + top: 0; + background-color: #248aaa; + height: 100%; + width: 2px; } .education-section .education-info-table tr:first-child .hline { - height: 60%; - top: auto; + height: 60%; + top: auto; } .education-section .education-info-table tr:last-child .hline { - height: 50%; + height: 50%; } .education-section .icon-holder { - background-color: #248aaa; - border-radius: 50%; - height: 2rem; - width: 2rem; - padding: 0.2rem; - text-align: center; - color: #e5e9f2; - position: relative; + background-color: #248aaa; + border-radius: 50%; + height: 2rem; + width: 2rem; + padding: 0.2rem; + text-align: center; + color: #e5e9f2; + position: relative; } .education-section .line { - width: 5%; - padding-left: 0; - padding-right: 0; + width: 5%; + padding-left: 0; + padding-right: 0; } .education-section .line div { - height: 2px; - /* width: 100%; */ - margin-right: -1px; - background-color: #248aaa; + height: 2px; + /* width: 100%; */ + margin-right: -1px; + background-color: #248aaa; } .education-section .degree-info { - padding: 1rem; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - border-left: 2px solid #248aaa; - border-top: 1px solid #C0CCDA; - border-bottom: 1px solid #C0CCDA; - border-right: 1px solid #C0CCDA; - border-radius: 5px; + padding: 1rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + border-left: 2px solid #248aaa; + border-top: 1px solid #c0ccda; + border-bottom: 1px solid #c0ccda; + border-right: 1px solid #c0ccda; + border-radius: 5px; } -.education-section .degree-info h5{ - margin-bottom: 0.3rem; +.education-section .degree-info h5 { + margin-bottom: 0.3rem; } .education-section .taken-courses table { - margin-left: 1rem; - width: 100%; - transition: all 0.3s ease-out; + margin-left: 1rem; + width: 100%; + transition: all 0.3s ease-out; + background: none; + border: none; +} + +.education-section .taken-courses tr { + height: auto !important; +} + +.education-section .taken-courses tr, +.education-section .taken-courses td, +.education-section .taken-courses th { + background: none; + border: none; + color: #212529; } .education-section .taken-courses .hidden-course { - display: none; - transition: all 1s ease-out; + display: none; + transition: all 1s ease-out; } .education-section .taken-courses ul { - margin-bottom: 0; + margin-bottom: 0; } /*============ Education Alter Template =============*/ -.education-alt .degree-info{ - border-right: 2px solid #248aaa; +.education-alt .degree-info { + border-right: 2px solid #248aaa; } - /* ============= Device specific fixes ======= */ /* Large screens such as TV */ -@media only screen and (min-width: 1824px) {} +@media only screen and (min-width: 1824px) { +} /* Extra large devices (large desktops, 1200px and up) */ -@media (max-width: 1400px) {} +@media (max-width: 1400px) { +} -@media (max-width: 1200px) {} +@media (max-width: 1200px) { +} /* IPad Pro */ @media (max-width: 1024px) { - .education-section .container { - padding-left: 0; - } + .education-section .container { + padding-left: 0; + } } /* Large devices (desktops, 992px and up) */ -@media (max-width: 992px) {} +@media (max-width: 992px) { +} /* Medium devices (tablets, 768px and up) */ -@media only screen and (max-width: 768px) {} +@media only screen and (max-width: 768px) { +} /* Small devices (landscape phones, 576px and up) */ @media only screen and (max-width: 576px) { - .education-section { - padding-left: 0.5rem; - padding-right: 0.5rem; - } - .education-section .container{ - padding-right: 0; - } - - .education-section .icon { - display: none; - } - .education-section .line{ - display: none; - } - .education-section .timeframe{ - text-align: left; - } + .education-section { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + .education-section .container { + padding-right: 0; + } + + .education-section .icon { + display: none; + } + .education-section .line { + display: none; + } + .education-section .timeframe { + text-align: left; + } } /* iPhoneX, iPhone 6,7,8 */ -@media only screen and (max-width: 375px) {} +@media only screen and (max-width: 375px) { +} /* Galaxy S5, Moto G4 */ -@media only screen and (max-width: 360px) {} +@media only screen and (max-width: 360px) { +} /* iPhone 5 or before */ -@media only screen and (max-width: 320px) {} \ No newline at end of file +@media only screen and (max-width: 320px) { +} -- cgit v1.2.3