Дневник — @дневники: асоциальная сеть

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

Комментарии (2)

16:09

> Сыр — Беларусь.
> Сливки — Беларусь.
> Сметана — Беларусь.

Импортозамещение, однако.

@темы: россия, еда, жизнь

URL

Комментировать

13:16

Заходит партия 20 левела на остров, а там трёхчереповой монстр. Так и живём.

@темы: игры, pillars of eternity

URL

Комментировать

11:20

Зря идею с меню в 2 строки для нового дизайна дневников таки не взяли. Как по мне, так было бы всяко лучше :evil:

@темы: diary.ru

URL

Комментировать

19:57

У игр на Unity есть интересная особенность: если во время их запуска активна русская раскладка, то хоткеи часто не работают :alles:

@темы: linux, баги, unity, игры

URL

Комментировать

18:52 Плазма не падает

Упала кдешная «плазменная» переключалка раскладок ¯\_(ツ

_/¯ Никаких ошибок, просто не переключается и не показывается в трее.

@темы: linux, kde

URL

Комментировать

14:47 New Guilty Gear teaser trailer at EVO2019

Хм…

@темы: видео, guilty gear, игры

URL

Комментарии (7)

23:22 Альбомные аватарки

Так, вроде бы все аватарки перекочевали в альбом. Хотя смотреть там не так уж удобно.

@темы: meta, аватарки

URL

Комментарии (4)

19:09 To aru kagaku no Accelerator — EP4

читать дальше

https://tenno-seremel.tumblr.com/post/187353357183/to-aru-kagaku-no-accelerator-ep4

@темы: аниме, дамп мозга, to aru kagaku no accelerator, спойлер, to aru majutsu no index

URL

Комментировать

00:13 To aru kagaku no Accelerator — EP3

читать дальше

https://tenno-seremel.tumblr.com/post/187335811668/to-aru-kagaku-no-accelerator-ep3

@темы: аниме, дамп мозга, to aru kagaku no accelerator, спойлер, to aru majutsu no index

URL

Комментировать

12:33 Нумерация комментариев

Была мысль пронумеровать комментарии (всё равно их заголовки пустуют), но поскольку сквозную нумерацию сделать тут не получится, то пока, видимо, придётся забросить эту идею.

@темы: meta

URL

Комментировать

00:42 Golden sun

Посмотреть в полном размере на DeviantArt

@темы: цветы, фото, featured

URL

Комментировать

19:04 Плавная прокрутка

Плавная прокрутка на странице.

Ожидание дизайнера: красивенько.
Мобильная реальность: тормозаааа.

@темы: вэб, супердизайн

URL

Комментарии (3)

12:51 Мечтать не вредно

Может надо было собрать команду из десятка фронтэнд веб-разработчиков и самим запилить новый дизайн дневников… :hmm:

Глядишь, уже бы запилили :lol:

Хотя дизайнер тоже бы потребовался, конечно :evil:

Хотя бы для самих дневников, без служебных страниц.

@темы: хочется странного, diary.ru

URL

Комментарии (5)

17:42 Лучшая пушка это партия

В это время в PoE2…

— На горизонте корабль!
— На абордаж!
— На горизонте корабль!
— На абордаж!
…

@темы: игры, pillars of eternity

URL

Комментировать

01:00 Cipher: the Score for Banking on Bitcoin

А ничего так, интересно звучит.

@темы: ссылки, музыка

URL

Комментировать

01:40

Открытие дня: французы тоже пишут фанфикшн. ~~Правда я их не понимаю.~~

@темы: фанфики, бред

URL

Комментарии (5)

13:19 Goldcraft

Ну и крафт, который требует и ингредиенты, и деньги, как-то не особо способствует его использованию. В общем, не делайте свои игры со стратегией «нам нужны способы слива денег» в уме, пожалста.

@темы: игры, pillars of eternity

URL

Комментарии (2)

12:59 Летайте нашими драконами

Самая неинтересная часть PoE2 — эти путешествия на кораблях. Нудятина и пожиралка времени.

@темы: игры, pillars of eternity

URL

Комментарии (8)

02:02

А ещё у вторых пилларсов какая-то проблема с обнаружением ловушек. Пока под носом не встанешь, ничего не видит персонаж. Неудобно…

@темы: игры, pillars of eternity

URL

Комментарии (3)