mobile styling
This commit is contained in:
Tyler Koenig
537
style.css
537
style.css
@@ -42,6 +42,7 @@ nav ul {
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 1rem;
|
||||
text-decoration: none;
|
||||
border-radius: 500px;
|
||||
padding: 0.2rem;
|
||||
@@ -58,6 +59,14 @@ nav a:hover {
|
||||
transition: 150ms ease;
|
||||
}
|
||||
|
||||
.side__nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* header {
|
||||
color: #c9cacc;
|
||||
margin: 0 auto;
|
||||
@@ -89,108 +98,6 @@ nav a:hover {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
.card {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.card {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.project {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* flex-wrap: nowrap; */
|
||||
/* flex-direction: column; */
|
||||
}
|
||||
|
||||
.project .project__title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.project__tagbox {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.project .project__img {
|
||||
max-width: 300px;
|
||||
max-height: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.project .project__text {
|
||||
padding: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
.project .media.project__text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: #18151f;
|
||||
top: -20%;
|
||||
height: 130%;
|
||||
width: 55px;
|
||||
}
|
||||
.project:hover .project__img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.project:nth-child(2n + 1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.project:nth-child(2n + 0) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.project:nth-child(2n + 1) .project__text::before {
|
||||
left: -12px !important;
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
.project:nth-child(2n + 0) .project__text::before {
|
||||
right: -12px !important;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.top__wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#profile {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#about p {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#about {
|
||||
right: 0;
|
||||
/* max-width: 500px; */
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.project {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.card {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.project {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
.card_top {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
@@ -215,7 +122,8 @@ nav a:hover {
|
||||
}
|
||||
|
||||
.name a {
|
||||
color: #c9cacc;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
@@ -238,6 +146,11 @@ nav a:hover {
|
||||
.contact-links a {
|
||||
margin: 0 10px;
|
||||
padding: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.contact-links a:hover {
|
||||
transition: color 0.3s ease-in-out;
|
||||
color: #c9cacc;
|
||||
}
|
||||
|
||||
@@ -391,7 +304,7 @@ nav a:hover {
|
||||
|
||||
.project:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* position: absolute; */
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@@ -448,11 +361,11 @@ footer {
|
||||
.light {
|
||||
background: #f3f5f7;
|
||||
}
|
||||
a,
|
||||
/* a,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
} */
|
||||
|
||||
/* Cards */
|
||||
.postcard {
|
||||
@@ -553,224 +466,6 @@ a:hover {
|
||||
.postcard:hover .postcard__bar {
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
.postcard {
|
||||
flex-wrap: inherit;
|
||||
}
|
||||
.postcard .postcard__title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.postcard .postcard__tagbox {
|
||||
justify-content: start;
|
||||
}
|
||||
.postcard .postcard__img {
|
||||
max-width: 300px;
|
||||
max-height: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.postcard .postcard__text {
|
||||
padding: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
.postcard .media.postcard__text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: #18151f;
|
||||
top: -20%;
|
||||
height: 130%;
|
||||
width: 55px;
|
||||
}
|
||||
.postcard:hover .postcard__img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.postcard:nth-child(2n + 1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.postcard:nth-child(2n + 0) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.postcard:nth-child(2n + 1) .postcard__text::before {
|
||||
left: -12px !important;
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
.postcard:nth-child(2n + 0) .postcard__text::before {
|
||||
right: -12px !important;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
/* @media screen and (min-width: 1024px) {
|
||||
.postcard__text {
|
||||
padding: 2rem 3.5rem;
|
||||
}
|
||||
.postcard__text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -20%;
|
||||
height: 130%;
|
||||
width: 55px;
|
||||
}
|
||||
.postcard.dark .postcard__text:before {
|
||||
background: #18151f;
|
||||
}
|
||||
.postcard.light .postcard__text:before {
|
||||
background: #e1e5ea;
|
||||
}
|
||||
} */
|
||||
/* COLORS */
|
||||
.postcard .postcard__tagbox .green.play:hover {
|
||||
background: #79dd09;
|
||||
color: black;
|
||||
}
|
||||
.green .postcard__title:hover {
|
||||
color: #79dd09;
|
||||
}
|
||||
.green .postcard__bar {
|
||||
background-color: #79dd09;
|
||||
}
|
||||
.green::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.green:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.postcard .postcard__tagbox .blue.play:hover {
|
||||
background: #0076bd;
|
||||
}
|
||||
.blue .postcard__title:hover {
|
||||
color: #0076bd;
|
||||
}
|
||||
.blue .postcard__bar {
|
||||
background-color: #0076bd;
|
||||
}
|
||||
.blue::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.blue:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.postcard .postcard__tagbox .red.play:hover {
|
||||
background: #bd150b;
|
||||
}
|
||||
.red .postcard__title:hover {
|
||||
color: #bd150b;
|
||||
}
|
||||
.red .postcard__bar {
|
||||
background-color: #bd150b;
|
||||
}
|
||||
.red::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.red:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.postcard .postcard__tagbox .yellow.play:hover {
|
||||
background: #bdbb49;
|
||||
color: black;
|
||||
}
|
||||
.yellow .postcard__title:hover {
|
||||
color: #bdbb49;
|
||||
}
|
||||
.yellow .postcard__bar {
|
||||
background-color: #bdbb49;
|
||||
}
|
||||
.yellow::before {
|
||||
background-image: linear-gradient(
|
||||
-30deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.yellow:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
/* @media screen and (min-width: 769px) {
|
||||
.green::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.green:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(121, 221, 9, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.blue::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.blue:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(0, 118, 189, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.red::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.red:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(189, 21, 11, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.yellow::before {
|
||||
background-image: linear-gradient(
|
||||
-80deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
.yellow:nth-child(2n)::before {
|
||||
background-image: linear-gradient(
|
||||
80deg,
|
||||
rgba(189, 187, 73, 0.1),
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
} */
|
||||
|
||||
/* code pen finish */
|
||||
|
||||
@@ -873,3 +568,197 @@ a:hover {
|
||||
justify-content: space-between;
|
||||
}
|
||||
} */
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
.card {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
#nav__contact,
|
||||
.contact-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.side__nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* margin: 40px; */
|
||||
height: 100%;
|
||||
width: 80px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 17px;
|
||||
overflow: hidden;
|
||||
|
||||
/* border-right: 1px solid #666; */
|
||||
}
|
||||
|
||||
.side__nav a {
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.side__nav a:hover {
|
||||
transition: color 0.3s ease-in-out;
|
||||
color: #c9cacc;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
margin-left: 90px;
|
||||
}
|
||||
|
||||
#skills {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: auto 2rem auto 90px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: auto;
|
||||
padding: 0.5rem;
|
||||
flex: 4;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#top__wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.project {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* flex-wrap: nowrap; */
|
||||
/* flex-direction: column; */
|
||||
}
|
||||
|
||||
.project .project__title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.project__tagbox {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.project .project__img {
|
||||
max-width: 300px;
|
||||
max-height: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.project .project__text {
|
||||
padding: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
.project .media.project__text:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: #18151f;
|
||||
top: -20%;
|
||||
height: 130%;
|
||||
width: 55px;
|
||||
}
|
||||
.project:hover .project__img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.project:nth-child(2n + 1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.project:nth-child(2n + 0) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.project:nth-child(2n + 1) .project__text::before {
|
||||
left: -12px !important;
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
.project:nth-child(2n + 0) .project__text::before {
|
||||
right: -12px !important;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
|
||||
.project .project__tagbox {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 0 auto;
|
||||
width: 87%;
|
||||
padding: 2rem;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.top__wrap {
|
||||
max-width: 960px;
|
||||
/* text-align: center; */
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#profile {
|
||||
margin-right: 1rem;
|
||||
flex: 1;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#about p {
|
||||
/* max-width: 400px; */
|
||||
}
|
||||
|
||||
#about {
|
||||
flex: 2;
|
||||
margin-left: 1rem;
|
||||
right: 0;
|
||||
/* max-width: 500px; */
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.project {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.top__wrap {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.project {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user