hugo-toha/static/assets/css/sections/projects.css
Yuriy 64fb493030
Make Skills and Projects cards linkable (#46)
* Project card header is now can be clicked

* skill is card now having url to add on it's header

* urls added to some skills

* div class synced with original

* guthub button text synced with original

* text decoration removed

* remove next line in card header for text

* whole Skill Card now is under hyperlink

* hyperlink class separated from card

* removed text-decoration from .card class

* ProjectCard header hyperlink decoration removed

* call adjustSkillCardsHeight after page is loaded

* Add "#" in href field when respective URL is not provided

Co-authored-by: hossainemruz <emruz@appscode.com>
2020-07-24 02:16:48 +06:00

114 lines
2.1 KiB
CSS

.projects-section .card .card-header {
background-color: #f9fafc;
padding: 0.7rem;
padding-bottom: 0rem;
text-decoration: none;
}
.projects-section .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;
}
.projects-section .card .card-body {
padding: 0.7rem;
}
.projects-section .card .card-header .sub-title {
color: #8392a5;
margin-top: 0.4rem;
}
.filtr-projects {
padding: 1rem !important;
}
/* ============= 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) {
.projects-section {
padding-left: 0;
padding-right: 0;
width: 100%;
}
.projects-section .container {
max-width: 100%;
}
.projects-section .filtr-projects {
padding: 0;
}
.projects-section .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) {
.projects-section {
padding-left: 0;
padding-right: 0;
width: 100%;
}
.projects-section .container {
max-width: 100%;
}
.projects-section .filtr-projects {
padding: 0;
}
.projects-section .filtr-item {
padding-left: 0.2rem;
padding-right: 0.2rem;
flex: 50%;
max-width: calc(100% / 2 - 0.2rem);
}
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
.projects-section .btn {
margin-top: 0.3125rem;
}
.projects-section .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) {
}