peruna/static/css/object.css

460 lines
7.3 KiB
CSS
Raw Normal View History

2018-04-03 09:51:11 +00:00
/* COMPONENTS */
.c-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 8px 0 0;
padding: 0;
& a {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border: 1px solid;
border-color: var(--color-text);
border-radius: 50%;
color: var(--color-text);
transition: .2s;
&:hover {
background: var(--color-text);
color: #fff
}
}
&__item {
margin: 8px 8px 0;
list-style: none
}
&__icon {
width: 16px;
height: 16px;
fill: currentColor
}
}
.c-article {
&__title {
font-size: 2.4rem;
& a {
color: var(--color-text);
&:hover {
color: var(--link-hover)
}
}
}
&__meta {
font-size: 1.6rem;
line-height: 1
}
&__summary {
font-size: 1.4rem;
color: #999;
line-height: 1.57;
& p {
margin: 0
}
}
&__btn {
display: inline-block;
padding-bottom: 4px;
font-size: 1.6rem;
&::after {
content: "";
display: inline-block;
margin-left: 3px;
width: 5px;
height: 5px;
border: solid currentColor;
border-width: 1px 1px 0 0;
transform: rotate(45deg)
}
}
}
.c-time {
display: block;
font-size: 1.6rem
}
.c-avatar {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
& img {
max-width: 100%;
height: auto
}
}
.c-pagination {
font-size: 1.6rem;
& a {
display: inline-block;
padding: 8px 16px;
transition: .2s;
&:hover {
background: #fafafa
}
}
&__ctrl {
display: flex;
justify-content: space-between
}
&__newer,
&__older {
flex: 1
}
&__newer {
& a {
&::before {
content: "";
display: inline-block;
position: relative;
top: -1px;
width: 4px;
height: 4px;
margin-right: 4px;
border: solid currentColor;
border-width: 2px 0 0 2px;
transform: rotate(-45deg)
}
}
}
&__older {
text-align: right;
& a {
&::after {
content: "";
display: inline-block;
position: relative;
top: -1px;
width: 4px;
height: 4px;
margin-left: 4px;
border: solid currentColor;
border-width: 2px 2px 0 0;
transform: rotate(45deg)
}
}
}
&__count {
display: block;
text-align: center
}
}
.c-tag {
display: inline-block;
margin: 8px 6px 0 0;
padding: 4px;
font-size: 1.6rem;
color: #555;
&::before {
content: "#";
display: inline-block;
margin-right: 2px;
color: currentColor
}
&:hover {
background: #fafafa
}
}
.c-title {
font-weight: 300;
font-family: var(--OpenSans)
}
/* PROJECT */
.p-article {
&__thumbnail {
margin-top: 24px
}
&__body {
margin: 40px 0 30px;
word-wrap: break-word;
@media(--sm) {
margin: 40px 0 60px
}
& img[data-action^="zoom"] {
&:hover {
cursor: zoom-in
}
}
& .zoom-img-wrap {
& img {
&:hover {
cursor: zoom-out
}
}
}
}
}
.p-author {
display: block;
position: relative;
width: 100%;
margin: 20px auto 0;
@media(--sm) {
display: flex;
margin: 80px auto 0
}
&::before {
content: "* * *";
position: absolute;
top: -30px;
left: 0;
right: 0;
margin: auto;
text-align: center;
font-size: 1.4rem;
color: #999;
@media(--sm) {
top: -50px
}
}
&__name {
font-size: 2.8rem
}
&__body {
flex: 1;
@media(--sm) {
padding-left: 16px
}
& p {
margin: 0
}
}
}
.p-copyright {
margin: 24px 0 0;
text-align: center;
font-size: 1.2rem
}
.p-menu {
margin-top: 40px;
&__lists {
display: block;
flex-wrap: wrap;
margin: 0;
padding: 0;
@media(--sm) {
display: flex
}
}
&__listitem {
margin: 12px 0 0;
list-style: none;
@media(--sm) {
margin: 24px 24px 0 0
}
& a {
padding-bottom: 4px;
&:hover {
border-bottom: 1px solid currentColor
}
}
& ul {
padding-left: 12px;
& li {
margin: 4px 0 0;
&::before {
content: "-";
margin-right: 4px
}
}
}
}
&__parent {
& span {
color: var(--link-color)
}
}
}
.p-list-article {
margin-top: 40px;
&:first-child {
margin-top: 0
}
&__btn {
margin-top: 16px
}
}
.p-notfound {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
& h1 {
font-size: 10rem;
font-weight: bold
}
}
.p-pagination {
margin: 30px 0;
@media(--sm) {
margin: 60px 0
}
&__count {
margin-top: 24px
}
}
.p-related {
margin-bottom: 100px;
&__list {
padding: 0;
font-size: 0
}
&__item {
display: inline-block;
width: 230px;
height: 150px;
margin-right: 15px;
list-style: none;
&:nth-child(3n) {
margin-right: 0
}
&:nth-child(n+4) {
margin-top: 15px
}
& a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 8px;
background-size: cover;
background-color: #92c6f2;
color: #fafafa;
font-weight: normal;
font-family: 'Open Sans', sans-serif;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
transition: .1s
}
&:hover {
&::before {
background: rgba(0, 0, 0, .6)
}
}
}
& span {
position: relative
}
}
}
.p-screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute!important;
height: 1px;
width: 1px;
overflow: hidden;
&:hover,
&:active,
&:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto!important;
color: var(--link-color);
display: block;
font-size: 14px;
font-size: .875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000
}
}
.p-subtitle {
margin: 12px 0 0;
color: var(--color-text);
font-size: 1.4rem;
font-weight: 300;
font-family: var(--OpenSans)
}
.p-tag-title {
display: inline-block;
margin: 0;
padding-bottom: 8px;
border-bottom: 1px solid currentColor;
color: var(--color-text);
font-size: 2.4rem;
&::before {
content: "#";
display: inline-block;
margin-right: 4px
}
}
.p-title {
margin: 0;
font-size: 4.4rem;
&__link {
color: var(--color-text)
}
}
/* UTILITY */
.u-align-left {
display: block!important;
margin-left: 0!important;
margin-right: auto!important
}
.u-align-center {
display: block!important;
margin-right: auto!important;
margin-left: auto!important
}
.u-align-right {
display: block!important;
margin-left: auto!important;
margin-right: 0!important
}
.u-dn {
display: none!important
}
.u-db {
display: block!important
}
.u-di {
display: inline!important
}
.u-dib {
display: inline-block!important
}