project mobile layout
This commit is contained in:
Tyler Koenig
202
style.css
202
style.css
@@ -4,7 +4,8 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
@@ -84,7 +85,7 @@ nav a:hover {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
.card_top {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: 80px;
|
||||
@@ -115,7 +116,7 @@ nav a:hover {
|
||||
color: #29f3c3;
|
||||
}
|
||||
|
||||
.short-bio {
|
||||
.intro_bio {
|
||||
height: 175px;
|
||||
margin: 20px;
|
||||
}
|
||||
@@ -142,23 +143,29 @@ nav a:hover {
|
||||
margin: 16px auto 8px;
|
||||
}
|
||||
|
||||
#bio,
|
||||
#about,
|
||||
#skills {
|
||||
padding: 1.5rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
#about {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: justify;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#projects h2 {
|
||||
text-align: start;
|
||||
padding: 1.5rem;
|
||||
|
||||
}
|
||||
|
||||
#skills ul {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
list-style-type: none;
|
||||
overflow-x:visible;
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
#skills li {
|
||||
@@ -167,96 +174,115 @@ nav a:hover {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.project_img {
|
||||
max-height: 50px;
|
||||
min-width: 300px;
|
||||
background-position-x: center;
|
||||
background-position-y:center ;
|
||||
.project {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
|
||||
border-radius: 10px;
|
||||
margin: 0 0 2rem 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.project_img img {
|
||||
.project a,
|
||||
.project a:hover {
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease-in-out;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.project h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.project__subtitle_small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.project__title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.project__img {
|
||||
max-height: 180px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project__img_link {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.project__bar {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 5px;
|
||||
background-color: #424242;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.project__text {
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.project__info {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: justify;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* end new */
|
||||
|
||||
|
||||
#project-wrapper {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
#project-wrapper h2 {
|
||||
margin: 0;
|
||||
padding: 1.5rem 1.5rem 0 1.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#project-wrapper h3 {
|
||||
font-size: 1.5rem;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
.project .project__tagbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1.5rem 0;
|
||||
text-align: center;
|
||||
font-weight: 200;
|
||||
letter-spacing: 0.01rem;
|
||||
flex-flow: row wrap;
|
||||
font-size: 14px;
|
||||
margin: 20px 0 0 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.project-item a {
|
||||
color: #c9cacc;
|
||||
text-decoration: none;
|
||||
.project .project__tagbox .tag__item {
|
||||
display: inline-block;
|
||||
background: rgba(83, 83, 83, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 2.5px 10px;
|
||||
margin: 0 5px 5px 0;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.project-item a:hover {
|
||||
color: #29f3c3;
|
||||
.project .project__tagbox .tag__item:hover {
|
||||
background: rgba(83, 83, 83, 0.8);
|
||||
}
|
||||
|
||||
.project-desc {
|
||||
margin: 0;
|
||||
padding: 0 0.8rem;
|
||||
.project:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
/* background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
); */
|
||||
background-image: linear-gradient(-70deg, #424242, transparent 30%);
|
||||
opacity: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.project-skills {
|
||||
color: #666;
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
line-height: 1.25rem;
|
||||
text-align: start;
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.project-skills h4 {
|
||||
font-size: 1.5rem;
|
||||
/* flex: 1; */
|
||||
}
|
||||
|
||||
.project-skills li {
|
||||
list-style-type: none;
|
||||
color: #c9cacc;
|
||||
}
|
||||
|
||||
.project-skills ul {
|
||||
/* flex: 9; */
|
||||
line-height: 2rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.project-item img {
|
||||
max-width: 375px;
|
||||
/* width: 90%; */
|
||||
box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
|
||||
-webkit-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
|
||||
.project:hover .project__bar {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
footer {
|
||||
@@ -288,8 +314,6 @@ footer {
|
||||
transition: 160ms ease-in;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
|
||||
/* This pen */
|
||||
|
||||
@@ -404,7 +428,7 @@ a:hover {
|
||||
.postcard:hover .postcard__bar {
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
/* @media screen and (min-width: 769px) {
|
||||
.postcard {
|
||||
flex-wrap: inherit;
|
||||
}
|
||||
@@ -449,8 +473,8 @@ a:hover {
|
||||
right: -12px !important;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1024px) {
|
||||
} */
|
||||
/* @media screen and (min-width: 1024px) {
|
||||
.postcard__text {
|
||||
padding: 2rem 3.5rem;
|
||||
}
|
||||
@@ -468,7 +492,7 @@ a:hover {
|
||||
.postcard.light .postcard__text:before {
|
||||
background: #e1e5ea;
|
||||
}
|
||||
}
|
||||
} */
|
||||
/* COLORS */
|
||||
.postcard .postcard__tagbox .green.play:hover {
|
||||
background: #79dd09;
|
||||
@@ -564,7 +588,7 @@ a:hover {
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
/* @media screen and (min-width: 769px) {
|
||||
.green::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
@@ -621,7 +645,7 @@ a:hover {
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
/* code pen finish */
|
||||
|
||||
@@ -724,5 +748,3 @@ a:hover {
|
||||
justify-content: space-between;
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user