Дизайн "Верность"

Верность

Дизайн в японском стиле с множественным бэкграундом: две картинки + фоновый цвет.

Левая часть фиксированная, правая убегает вниз при добавлении записей.

Иероглифы в оформлении записи, если верить интернетам, складываются в слово "верность".

Галки при оформлении дневника советую не ставить, они имеют приоритет и ломают css.

Дизайн адаптирован под разную ширину экрана до 320px, насколько хватило моих пока скромных познаний.

Имя автора сделано картинкой с наведением, использован шрифт HanZi. При необходимости могу помочь с оформлением. Если нет желания возиться с картинкой, соответствующую часть кода надо заменить следующим:

<code>/*ПЕРЕНЕСТИ ИМЯ АВТОРА*/
#all p.blog-author.corvette.fluid.hideable a {
display: block;
margin: 0 auto;
height: 35px;
max-width: 300px;
font-size: 26px;
}</code>копировать

А это убрать вовсе:

<code>#all p.blog-author.corvette.fluid.hideable a:hover {
background: url(<a href="http://s03.radikal.ru/i176/1712/5e/62f98ec81d0f.png)" target="_blank">http://s03.radikal.ru/i176/1712/5e/62f98ec81d0f.png)</a> no-repeat;
background-position: center center;
}</code>копировать

Код под катом.

<code>/*ФОН СТРАНИЦЫ*/
html {
background-color: #f0f0f0;
background-image: url(<a href="http://s014.radikal.ru/i327/1712/7f/80112c75ca4a.jpg)" target="_blank">http://s014.radikal.ru/i327/1712/7f/80112c75ca4a.jpg)</a>, url(<a href="http://s41.radikal.ru/i091/1712/59/eb5cbff43d3b.png)" target="_blank">http://s41.radikal.ru/i091/1712/59/eb5cbff43d3b.png)</a>;
background-repeat: no-repeat, no-repeat;
background-position: left center,  right bottom; 
background-attachment: fixed, scroll;
}
body {
background-color: transparent;
}

/*ЗАМЕНИТЬ И ПЕРЕМЕСТИТЬ ДОМИК*/
#header {
position: static;
}
.in-state #header a.d {
display: block;
background: url(<a href="http://s018.radikal.ru/i523/1712/1f/3c0e8b6ebf92.png)" target="_blank">http://s018.radikal.ru/i523/1712/1f/3c0e8b6ebf92.png)</a> no-repeat;
background-size: 82%;
background-position: center center;
margin: 0 auto;
position: static;
border-radius: 50%;
}
.in-state #header a.d:hover {
background-color: #cc0000;
}

/*УБРАТЬ НАЗВАНИЕ САЙТА*/
.in-state #header a#caption-link { 
display: none;
}

/*МЕНЮ-ВИЗИТКА*/
#author-badge {
top: 0px;
right: -135px;
background: transparent; 
max-height: 400px; 
max-width: 100px;
box-shadow: 0 0 0 0;
border: 2px solid #cc0000;
border-radius: 20px;
text-align: center;
}
#author-badge a {
display: flex;
flex-direction: row;
white-space: pre-wrap;
}
#author-badge a:hover {
opacity: 0.5;
}
#author-badge i, #author-badge a {
margin: 10px auto; 
color: #cc0000 !important;
font-size: 18px !important; 
}
#author-badge a.after-info {
margin-left: 5px;
}

/*СОЛНЫШКО ПЕРЕД ИМЕНЕМ АВТОРА*/
.positive, .fa-certificate {
display: none;
}

/*ЛЕНТА*/
#canvas, #messages-area {
position: relative; 
max-width: 785px; 
background: transparent; 
box-shadow: none; 
border: none;
padding-top: 25px; 
}
#all {
padding-left: 0px;
}

/*НАЗВАНИЕ ДНЕВНИКА ETC.*/
h1.corvette, .hideable {
padding: 7px;
text-align: center; 
max-width: 708px;
}
.hideable a, h1.corvette a {
font-size: 16px; 
font-weight: normal;
}
h1.corvette {
margin-bottom: 3px;
}
/*на странице комментариев*/
.corvette.heading, .corvette.heading a {
color: #000000; 
font-weight: normal !important;
}

/*ЭПИГРАФ*/
.corvette.desсriрtion-area.handwriter {
margin: 0 auto;
float: none;
padding: 0px;
}
.corvette {
margin: 0 auto;
padding: 10px;
}
.caravella {
padding-left: 0px;
}
.corvette.desсriрtion-area.handwriter p {
text-align: center;
}

/*ПЕРЕНЕСТИ ИМЯ АВТОРА*/
#all p.blog-author.corvette.fluid.hideable a {
display: block;
margin: 0 auto;
height: 35px;
max-width: 300px;
background: url(<a href="http://s019.radikal.ru/i610/1712/0b/214a4489649c.png)" target="_blank">http://s019.radikal.ru/i610/1712/0b/214a4489649c.png)</a> no-repeat;
background-position: center center;
font-size: 0px;
}
#all p.blog-author.corvette.fluid.hideable a:hover {
background: url(<a href="http://s03.radikal.ru/i176/1712/5e/62f98ec81d0f.png)" target="_blank">http://s03.radikal.ru/i176/1712/5e/62f98ec81d0f.png)</a> no-repeat;
background-position: center center;
}
p.blog-author {
font-size: 0px;
}
.corvette.fluid {
margin-bottom: 0px;
}

/*ЗАГОЛОВОК ЗАПИСИ*/
.bh-post-in h2, .bh-post-in h1  {
color: #000000 !important; 
font-size: 24px; 
font-weight: normal;
font-style: italic;
text-align: center;
}

/*ЗАГОЛОВКИ НА ДРУГИХ СТРАНИЦАХ*/
.in-state h1, .in-state h2, .in-state h1 a, .in-state h2 a { 
color: #000000; 
}
.in-state h1 a:hover, .in-state h2 a:hover { 
color: #cc0000; 
}
.distant {
text-align: left;
color: #000000 !important; 
font-size: 18px; 
font-weight: normal;
margin-top: 45px;
}
p.message {
color: #000000 !important; 
font-size: 12px; 
font-weight: normal;
}
.loadable.edit-area h1 {
text-align: left;
color: #000000 !important; 
font-size: 18px; 
font-weight: normal;
font-style: normal;
}
.h {
color: #000000;
border-bottom: none;
}

/*ТЕЛА ЗАПИСЕЙ*/
.bh-post-in-blog, .bh-post-in-micro {
position: relative;
padding: 10px; 
width: 708px; 
max-width: 708px; 
border-radius: 0;
border: 25px solid #000000;
border-image: url(<a href="http://s001.radikal.ru/i193/1712/52/1631e69956dc.png)" target="_blank">http://s001.radikal.ru/i193/1712/52/1631e69956dc.png)</a> 25 stretch stretch;
}
.bh-post-in-blog::before, .bh-post-in-micro::before {
content: '';
position: absolute;
width: 45px;
height: 45px;
border-radius: 50%;
background: url(<a href="http://s019.radikal.ru/i633/1712/79/0484e8e91795.png)" target="_blank">http://s019.radikal.ru/i633/1712/79/0484e8e91795.png)</a> no-repeat center center;
background-color: rgba(240, 240, 240, 0.9);
left: -36px;
top: -36px;
}
.bh-post-in-blog::after, .bh-post-in-micro::after {
content: '';
position: absolute;
width: 45px;
height: 45px;
border-radius: 50%;
background: url(<a href="http://s014.radikal.ru/i328/1712/ec/208a2bec7d15.png)" target="_blank">http://s014.radikal.ru/i328/1712/ec/208a2bec7d15.png)</a> no-repeat center center;
background-color: rgba(240, 240, 240, 0.9);
right: -36px;
top: -36px;
}
.bh-text p {
text-align: justify;
}
.distant.my-reading {
margin-top: 25px !important;
}

/*ГРАНИЦА МЕЖДУ ПОСТАМИ*/
.bh-post-in, .ms-down { 
border-bottom: none; 
}
.bh-post.bh-post-in-blog.corvette.fluid, .bh-post.bh-post-in-micro.corvette.fluid {
margin-bottom: 15px !important;
}

/*КОММЕНТАРИИ*/
.comments-area {
padding: 15px; 
width: 708px; 
max-width: 708px; 
}
.ms {
border: 25px solid #000000;
border-image: url(<a href="http://s001.radikal.ru/i193/1712/52/1631e69956dc.png)" target="_blank">http://s001.radikal.ru/i193/1712/52/1631e69956dc.png)</a> 25 stretch stretch;
width: 100%;
}
.ms-attr {
text-align: right;
}
.ms-attr a:hover {
color: #cc0000 !important;
}

/*ТЕГИ, ДАТЫ ПОСТОВ*/
.blog-author, .bh-date a, .date, .bh-date, .fa-star, .bh-tags li, .bh-social-elements a {
color: #000000 !important;
}
.bh-date, .bh-social-elements {
text-align: right;
padding-top: 10px;
}
.bh-tags {
text-align: center;
}
.bh-like {
float: left;
}
.likes {
color: #cc0000 !important;
}

/*ВСЕ ССЫЛКИ*/
a, a:link { 
color: #000000 !important; 
border-bottom: none;
}
a:active { 
color: #000000 !important; 
}
a:visited { 
color: #000000 !important;  
}
a.in-header {
color: #000000 !important;
}
.ms-attr a, .complex {
color: #000000 !important;
}
.neutral { 
color: #000000 !important; 
}
.info {
color: #000000 !important;
}
.in-state h1 a:hover, .in-state h2 a:hover {
color: #cc0000;
}
a:hover, .fa-star:hover, .bh-date a:hover, .bh-social-elements a:hover {
color: #cc0000 !important;
border-bottom: none;
}
a.in-header:hover {
color: #cc0000 !important;
}
p.inverted-text {
color: #000000 !important;
}
p.inverted-text:visited {
color: #808080 !important;
}
p.inverted-text:hover {
color: #cc0000 !important;
} 

/*ВСЕ СКРЫТЫЕ ПОЛЯ*/
.loadable {
border: 1px solid #000000;
border-radius: 20px;
}

/*ПОЛЕ СМЕНЫ АВТОРА*/
#select-author-area {
background-color: rgba(240, 240, 240, 0.9);
border: 2px solid #cc0000;
border-radius: 20px;
}

/*ОБВОДКА ТЕКСТОВЫХ ПОЛЕЙ*/
textarea:hover, textarea:focus, input.text:hover, input.text:focus {
border-color: #000000;
}

/*ВЫДЕЛЕНИЕ НИКОВ НА СТРАНИЦЕ ДИСКУССИЙ*/
p.nested a.neutral {
font-weight: bold;
}

/*МЕДИА-ЗАПРОСЫ ДЛЯ АДАПТИВА*/
@media all and (max-width: 1200px) {
html {
background-image: url(<a href="https://blog-house.pro/arfs/9/3/d/b/93db-ec89-102b3b/e/402809e753641cf7.jpg)" target="_blank">https://blog-house.pro/arfs/9/3/d/b/93db-ec89-102b3b/e/402809e753641cf7.jpg)</a>, url(<a href="http://s41.radikal.ru/i091/1712/59/eb5cbff43d3b.png)" target="_blank">http://s41.radikal.ru/i091/1712/59/eb5cbff43d3b.png)</a>;
background-size: 20%, 15%;
}
}
@media all and (max-width: 1080px) {
#author-badge {
right: -80px;
}
}
@media all and (max-width: 1024px) {
.caravella {
margin: 0 20px;
padding-right: 0%;
}
.corvette {
width: 40%;
}
html {
background-size: 17%, 15%;
}
}
@media all and (max-width: 795px) {
.bh-post-in-blog::before, .bh-post-in-micro::before {
content: '';
position: absolute;
width: 35px;
height: 35px;
background-size: 70%;
top: -30px;
right: -30px;
}
.bh-post-in-blog::after, .bh-post-in-micro::after {
content: '';
position: absolute;
width: 35px;
height: 35px;
background-size: 70%;
top: -30px;
right: -30px;
}
html {
background-size: 18%, 15%;
background-position: left bottom,  right bottom; 
background-attachment: scroll, scroll;
}
#author-badge {
right: -70px;
}
}
@media all and (max-width:  768px) { 
html {
background-position: left top, 100% 10px; 
background-size: 13%, 12%;
}
#author-badge {
position: relative;
right: auto;
margin: 7px auto;
max-width: 50%; 
}
#author-badge a {
margin: 10px 13px;
display: inline;
}
.corvette {
width: 80%;
float: none;
}
}
@media all and (max-width:  478px) {
html {
background-position: left 20%, right 80%;
background-attachment: scroll;
background-size: 50%;
}
body, html {
background-color: rgba(240, 240, 240, 0.9);
}
#author-badge i, #author-badge a {
font-size: 14px !important; 
margin-left: 3px; 
margin-right: 3px; 
}
#author-badge {
width: auto;
max-width: 240px;
}
.in-state #header a.d {
left: -60px;
}
#all p.blog-author.corvette.fluid.hideable {
right: 6px;
}
}
@media all and (max-width:  370px) {
#author-badge {
font-size: 10px;
}
.bh-text p {
text-align: left;
}
}</code>копировать