1
0
Fork 0
ryanmoon.com/assets/style/pages/_projects.scss

145 lines
2.0 KiB
SCSS

.project {
padding: 0 5rem;
line-height: 1.5;
img {
display: block;
max-width: 100%;
height: auto;
margin: 6em auto 0 auto;
}
.hero {
width: calc(100% + 8em);
max-width: none;
padding: 2.5rem 0 2rem 0;
margin: 0 0 0 -4em;
}
h1 {
color: $f-color;
font-size: 1.2rem;
font-weight: 500;
margin: 0 0 .25rem;
opacity: .8;
}
h2 {
display: block;
font-size: 1.75rem;
font-weight: 600;
line-height: 2rem;
padding-right: 12%;
margin: 0 0 2rem;
}
hr {
height: 1px;
margin: 1.5rem auto;
border: none;
color: $fd-color;
background-color: $fd-color;
}
label {
position: relative;
display: block;
font-size: 1rem;
color: $f-color;
margin: 1rem 0 0 2rem;
opacity: .6;
span {
position: absolute;
top: 3px;
left: -24px;
font-size: .95rem;
}
.icon-link {
top: 5px;
transform: rotate(135deg);
}
}
a,
p {
color: $f-color;
font-size: 1.15rem;
font-weight: 600;
margin: 0 0 0 2rem;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.content {
padding: 0 5rem 4rem;
img {
width: 100%;
max-width: none;
margin: 2rem 0 0 0;
}
em {
display: block;
font-size: 14px;
text-align: center;
margin: 0 0 2rem 0;
opacity: .6;
}
h2 {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -.3px;
line-height: 26px;
margin: 40px 0 0;
scroll-margin-top: 4.6em;
a {
color: $f-color;
text-decoration: none;
}
}
p {
color: $f-color;
font-size: 1.05rem;
line-height: 26px;
margin-top: 16px;
}
}
#yourgames h2 {
padding-right: 24%
}
@media only screen and (max-width: 600px) {
.project {
padding: 0 2rem;
.hero {
width: calc(100% + 2em);
margin: 0 0 0 -1em;
}
h2 {
font-size: 1.50rem;
line-height: 1.85rem;
padding-right: 2rem;
}
}
.content {
padding: 0 2rem 4rem;
}
}