diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss index d1363e2..e14b4b0 100644 --- a/assets/styles/components/cards.scss +++ b/assets/styles/components/cards.scss @@ -3,17 +3,16 @@ transition: all 0.3s ease-out; overflow: hidden; - &:hover,&:focus { + &:hover, + &:focus { box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); border: 1px solid #fff; transition: all 0.3s ease-out; } - .card-head{ + .card-head { height: 172px; display: flex; - justify-content: center; - align-items: center; overflow: hidden; } @@ -34,6 +33,10 @@ width: 24px; height: 24px; } + + .card-footer { + background: #fff; + } } .post-card { @@ -72,7 +75,6 @@ } } .card-footer { - background: #fff; margin-top: auto; span { diff --git a/assets/styles/sections/projects.scss b/assets/styles/sections/projects.scss index de5a614..2724bac 100644 --- a/assets/styles/sections/projects.scss +++ b/assets/styles/sections/projects.scss @@ -1,71 +1,59 @@ .projects-section { - .card .card-header { - background-color: #f9fafc; - padding: 0.7rem; - padding-bottom: 0rem; - text-decoration: none; + .card { + .card-header { + background-color: #f9fafc; + padding: 0.7rem; + padding-bottom: 0rem; + text-decoration: none; + + .card-img-xs { + margin-right: 0.5rem; + } + .sub-title { + color: #8392a5; + margin-top: 0.4rem; + + span { + &:nth-child(1) { + float: left; + } + &:nth-child(2) { + float: right; + } + } + } + } + + .card-body { + padding: 0.7rem; + } } - - .card .card-img-xs { - margin-right: 0.5rem; - } - - .card .card-header .sub-title span:nth-child(1) { - float: left; - } - .card .card-header .sub-title span:nth-child(2) { - float: right; - } - - .card .card-body { - padding: 0.7rem; - } - - .card .card-header .sub-title { - color: #8392a5; - margin-top: 0.4rem; - } - + .filtr-projects { padding: 1rem !important; } - + .project-card-footer { display: flex; } - + .project-tags-holder { width: 70%; } - + .project-btn-holder { width: 30%; display: flex; justify-content: flex-end; flex-direction: column; + + span { + display: flex; + justify-content: flex-end; + } } - - .project-btn-holder span { - justify-content: flex-end; - display: flex; - } - - /* ============= 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%; @@ -77,58 +65,19 @@ padding: 0; } .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-projects { - padding: 0; - } - .filtr-item { - padding-left: 0.2rem; - padding-right: 0.2rem; flex: 50%; + padding-left: 0.2rem; + padding-right: 0.2rem; max-width: calc(100% / 2 - 0.2rem); } } - - /* Small devices (landscape phones, 576px and up) */ - - @media only screen and (max-width: 576px) { + + @include media('<=small') { .btn { margin-top: 0.3125rem; } .filtr-item { - flex: 100%; max-width: 100%; } } - - /* 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/skills.scss b/assets/styles/sections/skills.scss index 1310668..42d4fce 100644 --- a/assets/styles/sections/skills.scss +++ b/assets/styles/sections/skills.scss @@ -11,22 +11,17 @@ padding: 0.7rem; padding-bottom: 0rem; border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125); + + .card-img-xs { + margin-right: 0.5rem; + margin-bottom: 0.75rem; + } } .card-body { padding-top: 0.2rem; padding-left: 0.7rem; } - .card-img-xs { - margin-right: 0.5rem; - margin-bottom: 0.75rem; - } - } - - h1 > span { - margin-top: -55px; /* Size of fixed header */ - padding-bottom: 55px; - display: block; } @include media('<=medium') {