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

вторник, 17 сентября 2019

11:33

все записи пользователя в сообществе Tenno Seremel

Frozen flame

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

Скриншоты в разных разрешениях: 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;
	}
}

@музыка: Awe of she

@темы: главная, предложения и пожелания, дизайн

URL

Бываю ли начальники-ангелы? Current music: Paganini ... Рыба, которая не хочет быть такой, как все рыбы, выбрасыв... http://video.f1gp.ru/wtc.php3

Помню, прочитала это в Сочи "Suicide is not crime, y... Совпадение. У О'Генри (или М. Твена?) есть рассказ о вреде добрых пос...

Комментарии

17.09.2019 в 18:45

Найотри

Самым главным доказательством существования разумной жизни во Вселенной является то, что ещё никто не пытался с нами связаться. (с) Bill Watterson

Первое, что бросается в глаза - цветовая гамма более тёплая и ближе к нынешней, что приятно. На бете мрачнее.
И с надписями вместо иконок гораздо привычнее, но боюсь, что для мобильной версии такую бы не взяли.

URL

17.09.2019 в 18:57

Tenno Seremel

Frozen flame

Найотри, почему? :hmm:

URL

17.09.2019 в 19:16

Найотри

Tenno Seremel, ИМХО, обязательно найдутся люди, которым не понравится меню в несколько строчек. Хотя оно в разы компактней, чем длинные списки ПЧИзбранного на бете.

URL

17.09.2019 в 19:57

Tenno Seremel

Frozen flame

Найотри, ну так в мобильной версии вообще одно меню в кнопку уходит же (есть на последней картинке), остаётся только вторая строка. Её можно в маленьких разрешениях сделать в одну строку с иконками без текста, если это важно. Работы минут на 10, вместе с выбором иконок

Если речь не об этом?

Или вообще все меню убрать за кнопку, если очень хочется. Хотя мне кажется, что так делать не стоит.

А то, что сверху, убирать не особо хорошо — эта инфа нужна. Можно как-то её иначе разместить. Но надо придумать как

URL

17.09.2019 в 20:08

Tenno Seremel

Frozen flame

Ну или не придумывать, всё равно это ничего не изменит… :lol:

URL

17.09.2019 в 20:13

Найотри

Tenno Seremel, ну, лично меня текстовое меню не смущает, так даже больше шансов, что я попаду в нужное место пальцем. =) Просто не уверена, что я в большинстве.

URL


Запомнить

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

Заметки

Код

Адаптивный дизайн Diary