Add 404.html, change color theme, add README.md, add robots.txt

2018-12-31 14:18:14 +05:00 · 2018-12-31 14:18:14 +05:00 · d9eecdf73e
commit d9eecdf73e
parent 0a436bff33
12 changed files with 595 additions and 98 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,38 @@
+# IMOTCL
+Project "Interactie map of the city Lesnoy" uses sass technology.
+## Default html page
+```
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+    <title>Город Лесной</title>
+</head>
+<body>
+    <div id="wrapper">
+        <div id="header">
+                <a href="index.html" class="logo">Город Лесной</a>
+                <a href="map.html" class="logo">Вернуться на карту</a>
+        </div>
+        <div id="main">
+            
+        </div>
+        <div class="br"></div>
+        <div id="footer">
+            <a href="author.html">Автор сайта - Зинченко Иван</a><br>
+        </div>
+    </div>
+</body>
+</html>
+```
+## Page name
+- index.html
+- author.html
+- map.html
+- history.html
+- 
--- a/app/404.html
+++ b/app/404.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+    <title>Город Лесной</title>
+</head>
+<body>
+    <div id="wrapper">
+        <div id="header">
+                <a href="index.html" class="logo">Город Лесной</a>
+                <a href="map.html" class="logo">Вернуться на карту</a>
+        </div>
+        <div id="main">
+            <div class="error404">
+                <span class="error404">404</span><br>
+                <span>Ошибка, страница не найдена!</span>
+            </div>
+        </div>
+        <div class="br"></div>
+        <div id="footer">
+            <a href="author.html">Автор сайта - Зинченко Иван</a><br>
+        </div>
+    </div>
+</body>
+</html>
--- a/app/author.html
+++ b/app/author.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <title>Город Лесной</title>
@ -12,8 +12,8 @@
 <body>
    <div id="wrapper">
        <div id="header">
-            <a href="./index.html" class="logo">Город Лесной</a>
-            <a href="#" class="logo">Вернуться на карту</a>
+            <a href="index.html" class="logo">Город Лесной</a>
+            <a href="map.html" class="logo">Вернуться на карту</a>
        </div>
        <div id="main" class="author">
           <div id="contacts">
--- a/app/css/main.css
+++ b/app/css/main.css
@ -1,87 +1,348 @@
-@font-face {
-  font-family: "Source Sans Pro";
-  src: url(../fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format("truetype");
-  font-weight: normal;
-  font-style: normal;
+/* $black: #393E46;
+$blue: #00ADB5;
+$white: #FFF4E0;
+$red: #FC3C3C; */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.15;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
 }

-@font-face {
-  font-family: "Source Sans Pro";
-  src: url(../fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf) format("truetype");
-  font-weight: bold;
-  font-style: normal;
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
 }

-@font-face {
-  font-family: "Source Sans Pro";
-  src: url(../fonts/Source_Sans_Pro/SourceSansPro-Italic.ttf) format("truetype");
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "RussoOne";
-  src: url(../fonts/Russo_One/RussoOne-Regular.ttf) format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-#main a#a-index-map {
-  display: block;
-  text-align: center;
-  margin: .62em 0;
-}
-
-#main a#a-index-map #index-map {
-  width: 30%;
-  max-width: 20em;
-}
-
-#main #shapka {
-  width: 90%;
-  max-width: 56em;
-  margin: 0 auto;
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
  display: block;
 }

-.logo-index {
-  font-size: 1.6em;
-  text-align: center;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
-
-.logo-index:nth-child(2) {
-  font-size: 3.1em;
-  -webkit-box-flex: 2;
-  -webkit-flex: 2;
-      -ms-flex: 2;
-          flex: 2;
-}
-
-#main.author {
-  height: 83%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-#main.author #contacts {
-  border: 0.38em solid #00ADB5;
-  -webkit-border-radius: .4em;
-          border-radius: .4em;
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
  font-size: 2em;
-  line-height: 1.2em;
-  padding: .5em;
-  margin: auto;
-  display: inline-table;
+  margin: 0.67em 0;
 }

-#main.author #contacts a {
-  text-decoration: none;
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type="checkbox"],
+[type="radio"] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
 }

 .fa,
@ -5686,22 +5947,135 @@ readers do not read off random characters that represent icons */
  font-family: 'Font Awesome 5 Brands';
 }

+@font-face {
+  font-family: "Source Sans Pro";
+  src: url(../fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url(../fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf) format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url(../fonts/Source_Sans_Pro/SourceSansPro-Italic.ttf) format("truetype");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "RussoOne";
+  src: url(../fonts/Russo_One/RussoOne-Regular.ttf) format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+#main a#a-index-map {
+  display: block;
+  text-align: center;
+  margin: .62em 0;
+}
+
+#main a#a-index-map #index-map {
+  width: 30%;
+  max-width: 20em;
+}
+
+#main #shapka {
+  width: 90%;
+  max-width: 56em;
+  margin: 0 auto;
+  display: block;
+}
+
+.logo-index {
+  font-size: 1.6em;
+  text-align: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.logo-index:nth-child(2) {
+  font-size: 3.1em;
+  -webkit-box-flex: 2;
+  -webkit-flex: 2;
+      -ms-flex: 2;
+          flex: 2;
+}
+
+#main.author {
+  height: 83%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+#main.author #contacts {
+  border: 0.38em solid #3498DB;
+  -webkit-border-radius: .4em;
+          border-radius: .4em;
+  font-size: 3em;
+  line-height: 1.2em;
+  padding: .5em;
+  margin: auto;
+  display: inline-table;
+}
+
+#main.author #contacts a {
+  text-decoration: none;
+}
+
+@media (max-width: 70em) {
+  #main.author #contacts {
+    font-size: 2.5em;
+  }
+}
+
+@media (max-width: 50em) {
+  #main.author #contacts {
+    font-size: 2em;
+  }
+}
+
+div.error404 {
+  font-size: 2em;
+  text-align: center;
+  border: 0.31em solid #E74C3C;
+  -webkit-border-radius: .4em;
+          border-radius: .4em;
+  max-width: 14em;
+  margin: 0 auto;
+  padding: .5em;
+}
+
+div.error404 span.error404 {
+  font-size: 2em;
+}
+
 html, body {
-  background-color: #FFF4E0;
+  background-color: #ECF0F1;
  font-family: "Source Sans Pro";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
-  color: #393E46;
+  color: #2C3E50;
  overflow-x: hidden;
 }

 a {
-  color: #393E46;
+  color: #2C3E50;
 }

 a.logo, a.logo-index, a.logo-one {
-  color: #FFF4E0;
+  color: #ECF0F1;
  text-decoration: none;
 }

@ -5712,8 +6086,8 @@ a.logo:hover, a.logo-index:hover, a.logo-one:hover {
 img {
  -webkit-border-radius: .62em;
          border-radius: .62em;
-  -webkit-box-shadow: 0.31em 0.31em 19px 0px rgba(0, 0, 0, 0.3);
-          box-shadow: 0.31em 0.31em 19px 0px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0.31em 0.31em 0.8em 0px rgba(0, 0, 0, 0.2);
+          box-shadow: 0.31em 0.31em 0.8em 0px rgba(0, 0, 0, 0.2);
 }

 .bold {
@ -5733,8 +6107,8 @@ img {
 }

 #header {
-  background-color: #393E46;
-  color: #FFF4E0;
+  background-color: #2C3E50;
+  color: #ECF0F1;
  font-family: "RussoOne";
  display: -webkit-box;
  display: -webkit-flex;
@ -5756,6 +6130,7 @@ img {
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
+  padding: .2em;
 }

@media (max-width: 53em) {
@ -5821,7 +6196,7 @@ img {
 .br::before {
  content: " ";
  display: block;
-  background-color: #393E46;
+  background-color: #2C3E50;
  height: .12em;
  width: 100%;
 }
--- a/app/index.html
+++ b/app/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <title>Город Лесной</title>
@ -13,7 +13,7 @@
    <div id="wrapper">
        <div id="header">
            <a href="https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%BA%D1%80%D1%8B%D1%82%D0%BE%D0%B5_%D0%B0%D0%B4%D0%BC%D0%B8%D0%BD%D0%B8%D1%81%D1%82%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%BE-%D1%82%D0%B5%D1%80%D1%80%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D1%80%D0%B0%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5" target="_blank" class="logo-index">ЗАТО Росатом</a>
-            <a href="./index.html" class="logo-index">Город Лесной</a>
+            <a href="index.html" class="logo-index">Город Лесной</a>
            <a href="http://gorodlesnoy.ru/" target="_blank" class="logo-index">Сайт Лесного</a>
        </div>
        <div id="main">
@ -30,9 +30,9 @@
                    <li><a href="#">90-е годы и начало XXI века</a></li>
                </ol>
            </p>
-            <span class="center">Для того, что бы перемещаться по карте нажимай на объекты. <a href="#">Перейти на карту</a></span>
-            <a href="#" id="a-index-map"><img id="index-map" src="./img/index_map.png" alt="Перейти на карту"></a>
-            <img id="shapka" src="./img/shapka.jpg" alt="Город Лесной">
+            <span class="center">Для того, что бы перемещаться по карте нажимай на объекты. <a href="map.html">Перейти на карту</a></span>
+            <a href="map.html" id="a-index-map"><img id="index-map" src="img/index_map.png" alt="Перейти на карту"></a>
+            <img id="shapka" src="img/shapka.jpg" alt="Город Лесной">
        </div>
        <div class="br"></div>
        <div id="footer">
--- a/app/map.html
+++ b/app/map.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+    <title>Город Лесной</title>
+</head>
+<body>
+    <div id="wrapper">
+        <div id="header">
+            <a href="index.html" class="logo logo-one">Город Лесной</a>
+        </div>
+        <div id="main">
+            
+        </div>
+        <div class="br"></div>
+        <div id="footer">
+            <a href="author.html">Автор сайта - Зинченко Иван</a><br>
+        </div>
+    </div>
+</body>
+</html>
--- a/app/robots.txt
+++ b/app/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /404.html
--- a/app/sass/_404.scss
+++ b/app/sass/_404.scss
@ -0,0 +1,12 @@
+div.error404 {
+    font-size: 2em;
+    text-align: center;
+    border: .31em solid $red;
+    border-radius: .4em;
+    max-width: 14em;
+    margin: 0 auto;
+    padding: .5em;
+    span.error404 {
+        font-size: 2em;
+    }
+}
--- a/app/sass/_author.scss
+++ b/app/sass/_author.scss
@ -4,7 +4,7 @@
    #contacts {
        border: .38em solid $blue;
        border-radius: .4em;
-        font-size: 2em;
+        font-size: 3em;
        line-height: 1.2em;
        padding: .5em;
        margin: auto;
@ -12,5 +12,11 @@
        a {
            text-decoration: none;
        }
+        @media (max-width: 70em) {
+            font-size: 2.5em;
+        }
+        @media (max-width: 50em) {
+            font-size: 2em;
+        }
    }
 }
--- a/app/sass/_map.scss
+++ b/app/sass/_map.scss
--- a/app/sass/_normalize.scss
+++ b/app/sass/_normalize.scss
--- a/app/sass/main.scss
+++ b/app/sass/main.scss
@ -1,15 +1,22 @@
 // Переменные
-$black: #393E46;
+/* $black: #393E46;
 $blue: #00ADB5;
 $white: #FFF4E0;
-$red: #FC3C3C;
+$red: #FC3C3C; */
+$black: #2C3E50;
+$red: #E74C3C;
+$white: #ECF0F1;
+$blue: #3498DB;

-@import "fonts";
-@import "index";
-@import "author";
+@import "normalize";
@import "font-awesome/fontawesome.scss";
@import "font-awesome/solid.scss";
@import "font-awesome/brands.scss";
+@import "fonts";
+@import "index";
+@import "author";
+@import "map";
+@import "404";

 html, body {
    background-color: $white;
@ -34,7 +41,7 @@ a {
 }
 img {
    border-radius: .62em;
-    box-shadow: .31em .31em 19px 0px rgba(0,0,0,0.3);
+    box-shadow: .31em .31em .8em 0px rgba(0,0,0,0.2);
 }
 .bold {
    font-weight: bold;
@ -67,6 +74,7 @@ img {
        text-align: center;
        flex: 1;
    }
+    padding: .2em;
 }
 #main {
    width: 90%;