131 lines
1.9 KiB
SCSS
131 lines
1.9 KiB
SCSS
.center-wrapper {
|
|
display: block;
|
|
text-align: center;
|
|
|
|
.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;
|
|
|
|
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;
|
|
} |