Искусство некромантии, том 3 — @дневники: асоциальная сеть

понедельник, 02 сентября 2019

Tenno Seremel

Frozen flame

20:57 Искусство некромантии, том 3

Вряд ли кто-то будет использовать теперь, но вдруг, что уж. Дублирую и у себя, а не только в мёртвом сообществе :alles:

Скриншоты в разных разрешениях: https://imgur.com/a/buRdgoD

Файлы: https://mega.nz/#!QZRlSIbT!hoHOgQl_F3d24RjYxd4TS70cV_GSclCYGpyGDwJYGM4

Live: https://jsfiddle.net/gue91x8t/

Заметки

Мобильное меню по кнопке не выскакивает, потому что не реализовано (на весь экран надо, наверное). Выпадающие меню в правом меню тоже не выпадают по этой же причине. Пусть программист делает :lol:

Если заголовки слишком яркие, то их цвета можно и поменять. И фон. Но, опять же, это и без меня управятся.

Код

ПоказатьHTML:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8"/>
	<title>Главная страница — @дневники: асоциальная сеть</title>
	<meta name="viewport" content="width=device-width"/>
	<link rel="stylesheet" href="base.css"/>
</head>
<body>
<header class="top">
	<nav class="top-content-1">
		<div class="top-logo"><h1 class="top-heading"><a href="#" title="Главная"><img src="logo.png" alt="@дневники"/></a></h1></div>
		<div class="top-avatar"><a href="#" class="top-avatar-link"><img src="avatar.png" alt=""/></a></div>
		<ul class="main-menu">
			<li><a href="#">Мой дневник</a> - <a href="#" class="main-menu-count">99</a></li>
			<li><a href="#">Новая запись</a></li>
			<li><a href="#">Избранное</a></li>
			<li><a href="#">Дискуссии</a> - <a href="#" class="main-menu-count">999</a></li>
			<li><a href="#">Упоминания</a> - <a href="#" class="main-menu-count">99</a></li>
		</ul>
		<div class="everything-wrap">
			<button type="button" class="mobile-menu-button show-mobile-menu">☰ Меню</button>
			<ul class="everything-menu">
				<li>Дневники <span class="menu-down-icon">▾</span></li>
				<li>Сообщества <span class="menu-down-icon">▾</span></li>
				<li>Помощь <span class="menu-down-icon">▾</span></li>
				<li>Полезное <span class="menu-down-icon">▾</span></li>
				<li><a href="#">18+</a></li>
			</ul>
		</div>
	</nav>
	<nav class="top-content-2">
		<ul class="secondary-menu">
			<li><a href="#" class="secondary-menu-user-link">Имя пользователя</a></li>
			<li><a href="#">U-mail — 99</a></li>
			<li><a href="#">Настройки</a></li>
			<li><a href="#">Перезайти</a></li>
			<li><a href="#">Выйти</a></li>
			<li>[место для поиска]</li>
		</ul>
	</nav>
	<div class="top-content-3">Дневники есть @социальная сеть, данная нам в ощущениях.</div>
</header>
<main class="main-content">
	<aside class="front-ad">
		<div class="front-ad-title">Реклама<a href="#" class="front-ad-title-how">Как отключить</a></div>
		<div class="front-ad-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sed viverra ipsum nunc aliquet bibendum enim. In massa tempor nec feugiat. Nunc aliquet bibendum enim facilisis gravida. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Amet luctus venenatis lectus magna fringilla. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sagittis orci a scelerisque purus semper eget duis. Nulla pharetra diam sit amet nisl suscipit. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Fusce ut placerat orci nulla. Pharetra vel turpis nunc eget lorem dolor. Tristique senectus et netus et malesuada.</div>
	</aside>
	<section class="front-info">
		<h2 class="front-info-title">Вход</h2>
		<div class="front-info-content">
			
				<div><label>Логин<input class="front-login-input" type="text" name="user_login"/></label></div>
				<div><label>Пароль<input class="front-login-input" type="password" name="user_pass"/></label></div>
				<div><label><input class="front-login-checkbox" type="checkbox" name="save">Запомнить</label></div>
				<div><button class="front-login-submit">Войти</button></div>
			
		</div>
	</section>
	<section class="front-info">
		<h2 class="front-info-title"><a href="//diary-spirit.diary.ru/" class="front-info-title-link">Новости @дневников</a></h2>
		<div class="front-info-content">
			<ul class="front-news">
				<li><span class="front-news-date">17.08.2019</span> <a href="#">Финансовый отчёт за месяц</a></li>
				<li><span class="front-news-date">16.07.2019</span> <a href="#">Банковские платежи</a></li>
				<li><span class="front-news-date">07.05.2019</span> <a href="#">Дизайн дневников 2019, продолжение</a></li>
				<li><span class="front-news-date">12.01.2019</span> <a href="#">Дизайн дневников 2019</a></li>
				<li><span class="front-news-date">11.05.2018</span> <a href="#">Логотип и Собака</a></li>
			</ul>
		</div>
	</section>
	<section class="front-info">
		<h2 class="front-info-title">Статистика</h2>
		<div class="front-info-content">Всего посетителей – 4794. В том числе: участников — 1969, гостей — 2825.</div>
	</section>
	<section class="front-info">
		<h2 class="front-info-title">Прочая информация</h2>
		<div class="front-info-content">Etiam tempor orci eu lobortis elementum nibh tellus molestie. Neque egestas congue quisque egestas. Egestas integer eget aliquet nibh praesent tristique. Vulputate mi sit amet mauris. Sodales neque sodales ut etiam sit. Dignissim suspendisse in est ante in. Volutpat commodo sed egestas egestas. Felis donec et odio pellentesque diam. Pharetra vel turpis nunc eget lorem dolor sed viverra. Porta nibh venenatis cras sed felis eget. Aliquam ultrices sagittis orci a. Dignissim diam quis enim lobortis. Aliquet porttitor lacus luctus accumsan. Dignissim convallis aenean et tortor at risus viverra adipiscing at. </div>
	</section>
</main>
<footer class="bottom">
	<ul class="bottom-links">
		<li><a href="mailto:pr@diary.ru">Реклама</a></li>
		<li><a href="//info.diary.ru/index.php?title=API">API</a></li>
		<li><a href="mailto:info@diary.ru">info@diary.ru</a></li>
		<li><a href="//info.diary.ru/index.php?title=Правила_дневников">18+</a></li>
	</ul>
	<div class="bottom-copyright">© 2002 — 2019 ООО «Дайри.ру»</div>
</footer>
</body>
</html>

CSS:

@charset "UTF-8";
html
{
	background: #f7f7f7;
	color: #000;
	font: 14pt "PT Sans", "Liberation Sans", "Arimo", "Arial", sans-serif;
	padding: 0;
	margin: 0;
	min-width: 320px;
}
body
{
	padding: 0;
	max-width: 1920px;
	margin: 0 auto;
}
a
{
	color: #640e06;
}
.top img
{
	vertical-align: middle;
}
.top-content-1
{
	position: relative;
	padding: 8px 16px;
	background: #902d31;
	background: linear-gradient(to right, #902d31, #902d31, #323232);
	color: #fff;
}
.top-heading
{
	font-size: inherit;
	color: inherit;
	padding: 0;
	margin: 0;
	line-height: 1;
}
.top-logo
{
	display: inline-block;
	vertical-align: middle;
}
.top-avatar
{
	display: inline-block;
	vertical-align: middle;
	width: 150px;
	margin-left: 16px;
}
.top-avatar-link
{
	position: absolute;
	left: 69px;
	top: 0;
	background: #fff;
	color: #000;
	border: 1px solid #902d31;
	width: 150px;
	text-align: center;
	overflow: hidden;
}
.main-menu
{
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 16px;
	padding: 0;
}
.main-menu > li
{
	list-style: none;
	display: inline-block;
	position: relative;
}
.main-menu > li:not(:first-child)
{
	margin-left: 16px;
	padding-left: 16px;
}
.main-menu > li:not(:first-child):before
{
	content: "";
	position: absolute;
	left: -2px;
	top: 50%;
	top: calc(50% - 2px);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #bbb;
	pointer-events: none;
	speak: none;
}
.main-menu a
{
	text-decoration: none;
	color: inherit;
}
.main-menu a.main-menu-count
{
	color: #ddd;
	font-weight: bold;
}
.main-menu a:hover,
.main-menu a:focus
{
	text-decoration: underline;
}
.top-content-2
{
	background: #fff;
	color: #000;
	padding: 12px 16px 11px 236px;
}
.secondary-menu
{
	margin: 0;
	padding: 0;
}
.secondary-menu > li
{
	list-style: none;
	display: inline-block;
}
.secondary-menu > li:not(:first-child)
{
	margin-left: 20px;
}
.secondary-menu a
{
	text-decoration: none;
	color: inherit;
}
.secondary-menu a:hover,
.secondary-menu a:focus
{
	text-decoration: underline;
}
.secondary-menu a.secondary-menu-user-link
{
	color: #902d31;
	font-weight: bold;
}
.everything-wrap
{
	float: right;
	position: relative;
	padding: 6px 0 0 0;
}
.mobile-menu-button
{
	display: none;
	background: transparent;
	color: inherit;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 14pt;
}
.everything-menu
{
	float: right;
	position: relative;
	margin: 0;
	padding: 0;
}
.everything-menu > li
{
	list-style: none;
	display: inline-block;
}
.everything-menu > li:not(:first-child)
{
	margin-left: 16px;
}
.everything-menu a
{
	text-decoration: none;
	color: inherit;
}
.everything-menu a:hover,
.everything-menu a:focus
{
	text-decoration: underline;
}
.everything-menu > li:last-child
{
	font-weight: bold;
}
.menu-down-icon
{
	font-size: .8em;
	vertical-align: .1em;
}
.top-content-3
{
	padding: 12px 16px 11px 236px;
}
.main-content
{
	padding: 16px;
	max-width: 1448px;
	margin: 0 auto;
}
.front-ad
{
	float: right;
	width: 310px;
	background: #fff;
	color: #000;
	/*border: 1px solid #902d31;*/
}
.front-ad-title
{
	padding: 3px 8px;
	background: #902d31;
	background: linear-gradient(to right, #902d31, #902d31, #323232);
	color: #fff;
	font-size: inherit;
	font-weight: normal;
	font-style: normal;
}
.front-ad-title-how
{
	float: right;
	font-size: 11pt;
	color: inherit;
	text-decoration: none;
	padding-top: 5px;
}
.front-ad-title-how:hover,
.front-ad-title-how:focus
{
	text-decoration: underline;
}
.front-ad-content
{
	padding: 8px;
	font-size: 13pt;
	border: 1px solid #888;
	border-top: none;
	/* text-align: center; */
}
.front-ad img
{
	max-width: 100%;
	vertical-align: top;
}
.front-info
{
	background: #fff;
	color: #000;
}
.front-ad ~ .front-info
{
	margin-right: 328px;
}
.front-info + .front-info
{
	margin-top: 19px;
}
.front-info-title
{
	padding: 3px 8px;
	background: #902d31;
	background: linear-gradient(to right, #902d31, #902d31, #323232);
	font-size: inherit;
	font-weight: normal;
	font-style: normal;
	color: #fff;
	margin: 0;
}
.front-info-title-link
{
	color: inherit;
	text-decoration: none;
}
.front-info-title-link:hover,
.front-info-title-link:focus
{
	text-decoration: underline;
}
.front-info-content
{
	padding: 8px;
	border: 1px solid #902d31;
	border-top: none;
}
.front-news
{
	list-style: none;
	margin: 0;
	padding: 0;
}
.front-news > li:not(:first-child)
{
	margin-top: .3em;
}
.front-news-date
{
	color: #333;
}
.front-news a
{
	color: inherit;
	text-decoration-color: #888;
}
.front-login > div
{
	margin-top: .3em;
}
.front-login label
{
	font-size: .9em;
}
.front-login-input
{
	box-sizing: border-box;
	width: 100%;
	background: #fff;
	color: #000;
	padding: 4px 8px;
	border: 1px solid #ddd;
}
.front-login-submit
{
	border: 1px solid #c0c2c4;
	padding: 6px 16px;
	background: #f1f2f3;
	background: linear-gradient(to bottom, #f1f2f3, #e9e9ea);
	color: #000;
}
.front-login-submit:hover,
.front-login-submit:focus
{
	background: #902d31;
	color: #fff;
	border-color: #6d2226;
}
.bottom
{
	clear: both;
	font-size: .9em;
	padding: 3px 16px 16px 16px;
	max-width: 1448px;
	margin: 0 auto;
}
.bottom-links
{
	margin: 0;
	padding: 0;
	float: right;
}
.bottom-links > li
{
	display: inline;
}
.bottom-links > li:not(:first-child)
{
	margin-left: 16px;
}

@media (max-width: 470px)
{
	.top-logo,
	.everything-wrap
	{
		display: block;
		text-align: center;
	}
	.main-menu
	{
		display: block;
		text-align: left;
	}
	.main-menu > li
	{
		display: block;
	}
	.main-menu > li:not(:first-child)
	{
		margin-left: 0;
		padding-left: 0;
	}
	.main-menu > li:not(:first-child):before
	{
		content: none;
	}
}
@media (max-width: 836px)
{
	.bottom-links
	{
		float: none;
		margin-bottom: 16px;
	}
	.top-content-1
	{
		background: #902d31;
	}
	.top-content-1,
	.top-content-2
	{
		text-align: center;
		line-height: 1.5;
	}
	.top-content-1 > *
	{
		margin-top: 16px;
	}
	.everything-wrap
	{
		float: none;
		display: inline-block;
		padding-top: 0;
		vertical-align: middle;
		font-size: 12pt;
		margin-left: 16px;
	}
}
@media (max-width: 1085px)
{
	html
	{
		font-size: 12pt;
	}
	.top-avatar
	{
		display: none;
	}
	.top-content-2,
	.top-content-3
	{
		padding-left: 16px;
	}
	.everything-wrap
	{
		padding-top: 8px;
	}
	.front-ad
	{
		float: none;
		width: auto;
		margin-bottom: 19px;
	}
	.front-ad-title-how
	{
		padding-top: 2px;
	}
	.front-ad ~ .front-info
	{
		margin-right: 0;
	}
}
@media (max-width: 1500px)
{
	.mobile-menu-button
	{
		display: inline-block;
	}
	.everything-menu
	{
		display: none;
	}
}

// Аватарка рандом…

@темы: featured, diary.ru

URL

Великодушие всем пренебрегает, чтобы всем завладеть.

на моем мониторе мелькают тени листьев, вроде бы меня э...

А теперь добавим к нашему типажу безумное желание манипул...

Час Х приближается. Нервов уже не осталось. Кофеину бы.

*** У: Пора бы вспомнить о том, что это всё-таки мой дн...

На 226 огромных екранах по всей стране игру смотрели око...

NeoSculd

02.09.2019 в 21:16

Вообще, если говорить о практической составляющей дизайна, я хоть убей не понимаю, почему на главной сторонняя реклама (которая легко режется), а не продвигаемые блоги (сейчас уже это не особо актуально, бвахаха, просто давняя загадка Сфинкса). В чём смысл платить за то, чтобы тебя подняли в списке, который никто не видит?

URL

U-mail Дневник Профиль

Tenno Seremel

02.09.2019 в 21:24

NeoSculd, мне кажется, что эту фичу с продвижением пора закопать уже давно. Всё равно никто не видит даже сейчас :lol:

Ну а о сторонней рекламе ничего не могу сказать — сейчас так, потому и тут так. В любом случае, если этот блок убрать (навсегда или в зависимости от оплаты) дизайн в посте автоматически адаптируется и занимает появившееся свободное пространство :evil:

URL

U-mail Дневник Профиль