dark theme

css/base.css

@@ -3,12 +3,36 @@
         src:url('../fonts/exo2.ttf');
 }
 
+.textblock {
+        background-color:#224;
+        border-radius:4px;
+        border:1px solid #667;
+        display:inline-block;
+	width: 90%;
+	height: 90%;
+	color: #bbb;
+
+}
+
+.imgblock {
+        background-color:#334;
+        border-radius:4px;
+        border:1px solid #667;
+        display:inline-block;
+	width: 90%;
+	height: 90%;
+	color: #bbb;
+	padding: 1% 1% 1% 1%;
+	text-align: justify;
+}
+
+
 body {
-	font: 90%/160% exo2;
+	font: 110%/180% exo2;
-	color: #666;
 	width: 900px;
 	max-width: 96%;
 	margin: 0 auto;
+	background-color:#335;
 }
 p {
 	margin: 0 0 20px;
@@ -21,13 +45,13 @@ a:hover {
 	color: #F60;
 }
 h1, h2, h3 {
-	color: #000;
+	color: #eee;
 	line-height: 120%;
 	margin: 30px 0 10px;
 }
 h1 {
 	font-size: 1.7em;
-	color: #000;
+	color: #bbb;
 }
 h2 {
 	font-size: 1.4em;
@@ -56,15 +80,15 @@ h3 {
 .nav a {
 	padding: 3px 12px;
 	text-decoration: none;
-	color: #999;
+	color: #eee;
 	line-height: 100%;
 }
 .nav a:hover {
-	color: #000;
+	color: #333;
 }
 .nav .current a {
-	background: #999;
+	background: #eee;
-	color: #fff;
+	color: #888;
 	border-radius: 5px;
 }
 
@@ -90,7 +114,7 @@ h3 {
 		top: 0;
 		left: 0;
 		border: solid 1px #aaa;
-		background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
+		background: #000 url(images/icon-menu.png) no-repeat 10px 11px;
 		border-radius: 5px;
 		box-shadow: 0 1px 2px rgba(0,0,0,.3);
 	}
@@ -108,7 +132,7 @@ h3 {
 	}
 	.nav .current a {
 		background: none;
-		color: #666;
+		color: #333;
 	}
 
 	/* on nav hover */
@@ -137,10 +161,12 @@ h3 {
 	
 
 h1, h2, h3 {
-    color: #000;
+    color: #999;
     line-height: 120%;
     margin: 30px 0 10px;
     font-family: "exo2";
  }
 
 
+
+

index.html

@@ -21,7 +21,7 @@
 
 	</ul>
 </nav>
-	<div>
+		<div class="textblock">
 			<h2>Где я? О чём речь?</h2>
 			<p>
 			<img src="images/fedi-small.png" align="right" style="margin: 0px 0px 0px 10px;">
@@ -31,7 +31,9 @@
 			По сути, это —  <b>Сеть, как она была задумана</b><br>
 			Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют 
 			на равных и обладают равными правами.
+			</div>
 
+		<div class="textblock">
 			<h2>Зачем это мне?</h2>
 			<p>
 			<img src="images/q.png" align="right" style="margin: 0px 0px 0px 10px;">
@@ -42,7 +44,9 @@
 			с теми же друзьями, обсуждать те же темы, но уже в недосягаемости от обозлённой администрации? У нас так можно. И даже больше
 			— никто не мешает самому стать полновластным админом (при наличии минимальной технической подготовки).
 			</p>
+		</div>
 	
+		<div class="textblock">
 			<h2>Чем вы лучше?</h2>
 			<p>
 			<img src="images/globe.png" align="right" style="margin: 0px 0px 0px 10px;">
@@ -53,24 +57,33 @@
 			вы можете комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы, вещающие в удобном для них формате, 
 			оттуда вам отвечают, поддерживая полноценное общение, и никуда не надо перелогиниваться. Удобно? <b>У нас так можно.</b>
 			</p>
+			</div>
 
+		<div class="textblock" align="center">
+
+			<div class="imgblock">
 			<h2>Ну ладно. Что дальше?</h2>
 			<p>
-		<ul><h3>Просто попробуйте свободную альтернативу:</h3>
+			<h3>Просто попробуйте свободную альтернативу:</h3>
-			<li><img src="images/mastodon2.png" width=40%   style="display: block; max-width: 100%; height: auto;" /> Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер, 
+				<img src="images/mastodon2.png" width=40% style="float:left; margin:1%;"/> 
-				только с большим лимитом символов и более гибким интерфейсом.)</li><br> <hr> <br>
+				Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент 
+				— самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер, 
+				только с большим лимитом символов и более гибким интерфейсом.)
+			</div>
 			
-
+			<div class="imgblock">
-			<li><img src="images/frendica.png" width=40% style="display: block; max-width: 100%; height: auto;" /> Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a> — она умеет больше. ( Также, как и Мастодон, Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами".
+				<img src="images/frendica.png" width=40% style= "float:left; margin:1%;"/> 
-
+				Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a> — она умеет больше. ( Также, как и Мастодон, 
-Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда).</li>
+				Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами".
-		<br> <hr>
+				Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда)
-		<li><img src="images/pixelfed.png" width=40% style="display: block; max-width: 100%; height: auto;" /> А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.
+			</div>
-		</ul>
+			<div class="imgblock">
-		<br><hr>
+				<img src="images/pixelfed.png" width=40% style="float:left; margin:1%;"/> 
+				А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.
+			</div>
 				<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены.
 		</p>
-
+		</div>