a.nostyle { text-decoration: none; color:inherit; cursor: pointer; } .project-card { position: relative; box-sizing: border-box; border-radius: .15em; border: 0 solid #048; border-left-width: .3em; box-shadow: 0 .1em .3em -.1em rgba(0,0,0,0.5); overflow: hidden; top: 0; min-height: 6em; margin: 0; height: 100%; } .project-card:hover { box-shadow: 0.1em 0.2em 0.5em 0em rgba(0,0,0,0.5); } .project-title { padding-bottom: .1em; margin: 0; text-overflow: ellipsis; } .card-content { display: block; margin: .6em; margin-bottom: 0; } .card-content p { line-height: 1.25em; } .card-content * { margin-top: 0; } .project-organizer { position: absolute; bottom: 0; right: 0; margin: 0; font-size: .8em; text-align: right; font-style: italic; opacity: 0.5; padding: 0.1em 0.4em; } .projects-container { margin-top: 2em; margin-bottom: 3em; display: grid; grid-template-columns: 1fr; grid-column-gap: 0.5em; grid-row-gap: 1.3em; } @media screen and (min-width: 60em) { .projects-container { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 50rem) { .contentsplit { display: grid; grid-template-columns: 17em 2.7fr; grid-template-areas: "left right"; grid-column-gap: 0.9em; } } @media screen and (max-width: 50rem) { .contentsplit { display: grid; grid-template-rows: auto auto; grid-template-areas: "right" "left"; } } @media screen and (min-width: 33rem) and (max-width: 50rem) { .projectmember-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "organizers members" "join join"; } } .gridl { grid-area: left; } .projectmember-container { padding: 0.1em 1em; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2); } .projectmember-container h2 { text-align: center; } .projectmember-container >form { text-align: center; grid-area: join; } .gridr { border-left: 0; grid-area: right; padding:0; margin:0; } .projectmember { margin-bottom: 1em; padding: 0 .5em 0 .5em; overflow: hidden; border-left: 4px solid #35a; } .projectmember p { margin: 0; } .projectmember p { font-size: .8em; } .projectmember p:first-child { font-size: 1em; margin-bottom: .2em; } .memberuname, .memberemail { display: inline-block; color: #888; } .memberuname { float: left; } .memberemail { float: right; } @media screen and (max-width: 50rem) { .projects { display: inline-block; } } /* edit */ form .wide { min-width: 66%; } form .tall { min-height: calc(100vh - 28em); } @media screen and (max-width: 50rem) { form .wide { width: calc(100% - 2em); margin: 0 1em; } }