website/src/static/css/portfolio.css
2014-01-28 01:50:46 -05:00

96 lines
1.7 KiB
CSS

.center-wrapper {
display: block;
text-align: center; }
.center-wrapper .center-wrapped {
display: inline-block;
vertical-align: top; }
.about-section {
display: inline-block;
margin: 0 24px 0;
width: 312px;
text-align: left;
vertical-align: top; }
#me {
width: 280px; }
.technology-list {
justify-content: space-around; }
.technology {
max-height: 48px;
margin: 2px; }
#resume {
text-align: center; }
#portfolio-items {
max-width: 1320px;
margin: 0 auto; }
.portfolio-item {
margin: 16px;
padding: 16px;
border-radius: 4px;
width: 296px;
text-align: center;
background-color: #e8e8e8;
color: #000;
box-shadow: 2px 2px 10px #0F0907;
flex: 1 0 auto; }
.portfolio-item p {
margin: 0;
font-size: .8em; }
/* iPhone */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
#header {
font-size: .8em; }
.section {
padding: 8px; }
.about-section {
margin: 0;
max-width: 288px; }
.about-section ul {
padding: 0;
list-style: none; }
.portfolio-items {
padding: 0; }
.portfolio-item {
margin: 8px 0 0;
width: 256px; }
.technology-list img {
width: 100%; }
#calendar, #calendar-label {
display: none; } }
.screenshot {
margin: 0;
width: 100%;
border: 1px #ddd solid; }
#calendar {
width: 100%;
max-width: 1320px;
height: 480px;
border: 0; }
/* Force image on its own line for two-column layout */
@media only screen and (min-width: 691px) and (max-width: 1054px) {
#me {
display: block;
margin: 0 auto; } }
/* Fix spacing for one- and two- column layout */
@media only screen and (max-width: 1054px) {
.about-section {
margin-top: 16px; } }
.cheeky-aside {
font-size: .5em; }