From b36d258104bf2ecc6655dd1ab7187b218144cc7e Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Mon, 7 Aug 2023 01:22:21 +0600 Subject: [PATCH] Update publication + accomplishment section Signed-off-by: hossainemruz --- assets/styles/sections/accomplishments.scss | 118 ++++-------- assets/styles/sections/publications.scss | 193 ++++++++------------ 2 files changed, 118 insertions(+), 193 deletions(-) diff --git a/assets/styles/sections/accomplishments.scss b/assets/styles/sections/accomplishments.scss index 77449f7..b922cae 100644 --- a/assets/styles/sections/accomplishments.scss +++ b/assets/styles/sections/accomplishments.scss @@ -1,97 +1,59 @@ .accomplishments-section { - h1 > span{ - margin-top: -55px; /* Size of fixed header */ - padding-bottom:55px; - display: block; + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; } - + .card { background: #fff; border-top: 2px solid #248aaa; height: 100%; + + &:hover, + &:focus { + border-top: 2px solid #248aaa; + } + + .card-header { + background: none; + border: none; + + .sub-title { + color: #8392a5; + margin-top: 0.4rem; + } + } + + .card-body { + padding: 0; + padding-left: 1rem; + padding-right: 1rem; + } + + .card-footer { + background: #fff; + border: none; + padding: 0; + padding-left: 0.7rem; + padding-bottom: 0.3rem; + } } - .card .card-header { - background: none; - border: none; - } - - .card .card-header .sub-title { - color: #8392a5; - margin-top: 0.4rem; - } - - .card .sub-title :nth-child(2) { - float: none !important; - } - - .card .card-body { - padding: 0; - padding-left: 1rem; - padding-right: 1rem; - } - - .card .card-footer { - background: #fff; - border: none; - padding: 0; - padding-left: 0.7rem; - padding-bottom: 0.3rem; - } - - /* ============= Device specific fixes ======= */ - - /* Large screens such as TV */ - @media only screen and (min-width: 1824px) { - } - - /* Extra large devices (large desktops, 1200px and up) */ - - @media (max-width: 1400px) { - } - - @media (max-width: 1200px) { - } - - /* IPad Pro */ - @media (max-width: 1024px) { + + @include media('<=large') { width: 100%; padding: 0; padding-left: 0.2rem; padding-right: 0.2rem; + margin-top: 2rem; .container { max-width: 100%; } } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { - } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { - - } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { + + @include media('<=small') { flex: 100%; max-width: 100%; - margin-top: 2rem; } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { - } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { - } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { - } -} \ No newline at end of file +} diff --git a/assets/styles/sections/publications.scss b/assets/styles/sections/publications.scss index 85baedc..675ceb2 100644 --- a/assets/styles/sections/publications.scss +++ b/assets/styles/sections/publications.scss @@ -1,82 +1,63 @@ .publications-section { - h1 > span{ - margin-top: -55px; /* Size of fixed header */ - padding-bottom:55px; - display: block; + h1 > span { + margin-top: -55px; /* Size of fixed header */ + padding-bottom: 55px; + display: block; } - + .card { background: #fff; border-top: 2px solid #248aaa; + + &:hover, + &:focus { + border-top: 2px solid #248aaa; + } + + .card-header { + background: none; + border: none; + display: flex; + flex-direction: column; + + .sub-title { + color: #8392a5; + margin-top: 0.4rem; + + span:nth-child(2) { + float: right !important; + } + } + } + + .card-body { + padding: 0; + padding-left: 1rem; + padding-right: 1rem; + } + + .card-footer { + background: #fff; + border: none; + padding: 0; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 0.3rem; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } } - .card .card-header { - background: none; - border: none; - display: flex; - flex-direction: column; - } - - .card .card-header .sub-title { - color: #8392a5; - margin-top: 0.4rem; - } - - .card .sub-title :nth-child(2) { - float: right !important; - } - - .card .card-body { - padding: 0; - padding-left: 1rem; - padding-right: 1rem; - } - - .card .card-footer { - background: #fff; - border: none; - padding: 0; - padding-left: 1rem; - padding-right: 1rem; - padding-bottom: 0.3rem; - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - - .card .card-footer .tags { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - } - .card .card-footer .tags .badge { - cursor: auto; - } - + .filtr-publications { padding: 1rem !important; } - - .btn-group{ + + .btn-group { justify-content: center; } - - /* ============= Device specific fixes ======= */ - - /* Large screens such as TV */ - @media only screen and (min-width: 1824px) { - } - - /* Extra large devices (large desktops, 1200px and up) */ - - @media (max-width: 1400px) { - } - - @media (max-width: 1200px) { - } - - /* IPad Pro */ - @media (max-width: 1024px) { + + @include media('<=large') { padding-left: 0; padding-right: 0; width: 100%; @@ -84,66 +65,48 @@ .container { max-width: 100%; } - - .filtr-publications { - padding: 0; - } - - .pub-filtr-item { - padding-left: 0.2rem; - padding-right: 0.2rem; - } - } - - /* Large devices (desktops, 992px and up) */ - - @media (max-width: 992px) { - } - - /* Medium devices (tablets, 768px and up) */ - - @media only screen and (max-width: 768px) { - padding-left: 0; - padding-right: 0; - width: 100%; - .container { - max-width: 100%; - } .filtr-publications { padding: 0; } + .pub-filtr-item { padding-left: 0.2rem; padding-right: 0.2rem; + } + } + + @include media('<=medium') { + .pub-filtr-item { flex: 100%; } } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { - .btn { - margin-top: 0.3125rem; - } + + @include media('<=small') { .pub-filtr-item { flex: 100%; max-width: 100%; } - .card .card-footer .tags { - flex: 100%; + .details-btn { + .btn { + margin-top: 0.5rem; + margin-left: auto; + } + } + + .card { + .card-footer { + padding-left: 0.5rem; + + .tags { + flex: 100%; + max-width: 100%; + + .btn { + margin-top: 0.2rem; + } + } + } } } - - /* iPhoneX, iPhone 6,7,8 */ - @media only screen and (max-width: 375px) { - } - - /* Galaxy S5, Moto G4 */ - @media only screen and (max-width: 360px) { - } - - /* iPhone 5 or before */ - @media only screen and (max-width: 320px) { - } -} \ No newline at end of file +}