uechi.io/_sass/post.scss
2020-02-07 12:57:54 +09:00

224 lines
3.6 KiB
SCSS

.article-list__item {
margin: 0 0 60px;
}
.article-list__item__title {
margin: 0 0 2px;
font-size: 40px;
}
.article-list__item__pubdate {
text-transform: uppercase;
}
.article-list__item__excerpt {
margin-top: 5px;
font-size: 20px;
color: var(--tone);
line-height: 1.6em;
word-break: break-all;
}
a.article-list__item__button {
border: 1px solid var(--tone);
border-radius: 3px;
color: var(--tone);
font-family: "Open Sans", sans-serif;
font-size: 14px;
display: inline-block;
margin: 10px 0;
padding: 10px 17px;
text-transform: uppercase;
&:hover {
background-color: var(--tone);
color: var(--background);
}
@media screen and (max-width: $break-small) {
display: block;
text-align: center;
font-size: 17px;
padding: 15px;
&:hover {
background-color: var(--background);
color: var(--tone);
}
}
}
.article {
margin-bottom: 60px;
}
.article__social {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.article__social > * {
margin-right: 4px;
}
.article__metadata {
margin: 40px 0 40px;
@media screen and (max-width: $break-small) {
margin: 25px 0 25px;
text-align: left;
}
}
.article__title {
font-size: 70px;
letter-spacing: -0.5px;
@media screen and (max-width: $break-small) {
font-size: 40px;
text-align: left;
}
}
.article__pubdate {
color: var(--tone);
font-size: 14px;
font-weight: normal;
font-family: sans-serif;
margin-bottom: 10px;
border: 1px solid var(--tone);
display: inline-block;
padding: 5px 20px;
@media screen and (max-width: $break-small) {
margin-bottom: 15px;
font-size: 10pt;
}
}
.article__content {
p {
font-size: 20px;
font-weight: normal;
line-height: 1.666em;
margin: 25px 0;
@media screen and (max-width: $break-small) {
font-size: 20px;
}
}
ul {
padding-left: 20px;
}
li {
font-size: 20px;
line-height: 1.6em;
}
a {
border-bottom: 1px dotted;
}
h1 {
margin: 70px 0 0px;
font-size: 2.5em;
@media screen and (max-width: $break-small) {
margin: 30px 0 15px;
font-size: 1.7em;
}
}
h2 {
margin: 35px 0 15px;
font-family: sans-serif;
font-weight: bold;
font-size: 1.7em;
@media screen and (max-width: $break-small) {
margin: 20px 0 15px;
font-family: sans-serif;
font-weight: bold;
font-size: 1.5em;
}
}
h3 {
margin: 25px 0 15px;
font-family: sans-serif;
font-weight: bold;
font-size: 1.3em;
@media screen and (max-width: $break-small) {
margin: 15px 0 15px;
font-family: sans-serif;
font-weight: bold;
font-size: 1.4em;
}
}
h4 {
margin: 25px 0 15px;
font-family: sans-serif;
font-weight: bold;
@media screen and (max-width: $break-small) {
margin: 15px 0 15px;
font-family: sans-serif;
font-weight: bold;
}
}
img {
width: 100%;
height: auto;
}
blockquote {
border-left: 5px solid var(--accent);
padding-left: 20px;
margin: 0;
}
}
// Pay
#pay {
font-family: sans-serif;
.monospace {
font-family: monospace;
font-weight: bold;
padding: 0 5px;
font-size: 12pt;
user-select: all;
-webkit-user-select: all;
-moz-user-select: all;
}
p {
padding: 10px 0;
}
a.button {
margin: 10px 0;
padding: 20px;
display: block;
background: var(--text);
color: var(--background);
text-align: center;
border-radius: 2px;
}
img {
margin: 10px 0;
}
section {
margin: 50px 0;
}
}