_projects.scss (1873B)
1 #projects { 2 display: flex; 3 flex-direction: column; 4 justify-content: space-between; 5 width: 90%; 6 max-width: 960px; 7 margin: 0 auto; 8 @media only screen and (min-width: $cut) { 9 width: 80%; 10 } 11 } 12 13 .user-projects { 14 width: 100%; 15 margin: 20px auto; 16 img { 17 max-width: 100%; 18 height: auto; 19 border-radius: 5px; 20 } 21 h5 { 22 margin: 0; 23 } 24 li { 25 color: $main; 26 font-size: 1.1rem; 27 } 28 p { 29 margin-right: 5px; 30 } 31 } 32 33 .contents { 34 @media only screen and (min-width: $cut) { 35 margin-left: 0; 36 width: 48%; 37 } 38 } 39 40 .contents-right { 41 @media only screen and (min-width: $cut) { 42 float: right; 43 margin-top: -5%; 44 width: 48%; 45 } 46 } 47 .images-right { 48 @media only screen and (min-width: $cut) { 49 float: right; 50 width: 48%; 51 } 52 img { 53 @media only screen and (min-width: $cut) { 54 float: right; 55 } 56 } 57 } 58 59 .images-left { 60 @media only screen and (min-width: $cut) { 61 float: left; 62 width: 48%; 63 } 64 img { 65 @media only screen and (min-width: $cut) { 66 float: left; 67 } 68 } 69 } 70 71 .project-link { 72 display: block; 73 width: 100px; 74 margin: 10px 0px; 75 padding: 5px; 76 color: $main; 77 background-color: transparent; 78 border: 1px solid $main; 79 border-radius: 10px; 80 text-align: center; 81 outline: none; 82 text-decoration: none; 83 cursor: pointer; 84 transition: color 0.3s ease-out, 85 background-color 0.3s ease-out, 86 border-color 0.3s ease-out; 87 &:hover { 88 background-color: $purple; 89 border-color: $purple; 90 color: #fff; 91 transition: color 0.3s ease-in, 92 background-color 0.3s ease-in, 93 border-color 0.3s ease-in; 94 } 95 &:active { 96 background-color: $purple; 97 border-color: $purple; 98 color: #fff; 99 transition: color 0.3s ease-in, 100 background-color 0.3s ease-in, 101 border-color 0.3s ease-in; 102 } 103 }