готов список новостей на главной странице

public/static/css/cadpoint.css

@@ -1,12 +1,16 @@
 @charset "utf-8";
 
 @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css');
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Ubuntu+Condensed&display=swap');
 
 body { font-family: 'Ubuntu', sans-serif; }
 
-h1, h2, h3, h4, h5, h6 {color: indigo}
+h1, h2, h3, h4, h5, h6 {color: #006799; font-family: 'Ubuntu Condensed', sans-serif;}
+a { color: #006799; text-decoration: none; border-bottom: 1px dotted #006799; }
+a:hover { color: #008DD2; border-bottom: 1px solid #008DD2; transition:0.6s; }
+a:not(hover) { transition:1.2s; }
 
+header > .navbar {background-color: white}
 header > .navbar > .container > a.navbar-brand > img,
 header.rastopiir > .container > a.navbar-brand > img  { height: 42px; margin: 1ex 0; }
 header > .navbar > .container > .navbar-nav > .nav-item > a {
@@ -33,4 +37,220 @@ header > .navbar > .container > .navbar-nav > .nav-item > form > .input-group  >
   border: solid 1px #008DD2; border-left: none; background: none;
   height: 31px; border-radius: 0 6px 6px 0;
 }
-header.rastopiir { height: 112px; z-index: 1;}
+header.rastopiir { height: 82px; z-index: 1;}
+
+/****************************
+** ОФОРМЛЕНИЕ ЛЕНТЫ *********
+****************************/
+div.lenta > div.row > div[class^="col"] div.row > div[class^="col"] > a > img,
+div.lenta > div.row > div[class^="col"] > div.row > div[class^="col"] > p > img,
+div.lenta > div.row > div[class^="col"] > div.row > div[class^="col"] > p > iframe {
+  width: 100%;
+  border: solid #006799 1px;
+  border-radius: 4px;
+}
+div.lenta > div.row > div[class^="col"] div.row > div[class^="col"] > a:hover > img {
+  border: solid #008DD2 1px;
+  transition:0.6s;
+  animation-name: scaleUpDown;
+  animation-duration: 0.6s;
+  animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;
+  visibility: visible !important;
+}
+div.lenta > div.row > div[class^="col"] div.row > div[class^="col"] > time {
+  font-family: 'Ubuntu Condensed', sans-serif;
+  color: #888888;
+}
+div.lenta > div.row > div[class^="col"] div.row > div[class^="col"] > h3 > a {
+  color: #006799;
+  text-decoration: none;
+  border-bottom: 1px dotted #006799;
+  font-weight: 500;
+  font-size: 130%;
+}
+div.lenta > div.row > div[class^="col"] div.row > div[class^="col"] > nav.sm-tags { margin-bottom: 2ex; }
+div.lenta > div.row > div[class^="col"] div.row > div[class^="col"] > nav.sm-tags > a {
+  font-family: 'Ubuntu Condensed', sans-serif;
+  font-size: smaller;
+  display: inline-block;
+  color: #006799;
+  text-decoration: none;
+  border-bottom: 1px dotted #006799;
+}
+div.lenta > div.row > div[class^="col"] div.row > div[class^="col"] > h3 > a:hover,
+div.lenta > div.row > div[class^="col"] div.row > div[class^="col"] > nav.sm-tags > a:hover {
+  color: #008DD2;
+  border-bottom: 1px solid #008DD2;
+  transition:0.6s;
+}
+div.lenta > div.row > div[class^="col"] div.row > div[class^="col"] > nav.sm-tags > a:hover {
+  animation-name: scaleUpDown2;
+  animation-duration: 0.6s;
+  animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;
+  visibility: visible !important;
+}
+div.lenta > div.row > div[class^="col"] > div.row > div[class^="col"] > p {
+  font-family: 'Ubuntu', sans-serif;
+  color: black;
+}
+div.lenta > div.row > div[class^="col"] > div.row > div[class^="col"] > p > img,
+div.lenta > div.row > div[class^="col"] > div.row > div[class^="col"] > p > iframe {
+  border-bottom: solid white 12px;
+  border-image: url('/static/svgs/logo_cadpoint-2021-border.svg') 0 0 600 0 round;
+}
+div.lenta > div.row > div[class^="col"] > div.row > div[class^="col"] > p.next > a {
+  letter-spacing: 0.2ex;
+}
+div.lenta > div.row > div[class^="col"] > div.row {
+  border-bottom: 1px gray dashed;
+  margin-bottom: 1em;
+  padding-bottom: 1em;
+}
+
+@keyframes scaleUpDown {
+    0% { transform: scale(1); }
+    25% { transform: scale(0.98); }
+    75% { transform:scale(1.02); }
+    80% { transform: rotate(1deg); }
+    85% { transform: rotate(-1deg); }
+    90% { transform: rotate(1deg); }
+    95% { transform: rotate(-2deg); }
+    100%{ transform: translateX(1); }
+}
+@keyframes scaleUpDown2 {
+    0% { transform: scale(1); }
+    25% { transform: scale(0.96); }
+    75% { transform:scale(1.04); }
+    80% { transform: rotate(2deg); }
+    85% { transform: rotate(-2deg); }
+    90% { transform: rotate(2deg); }
+    95% { transform: rotate(-4deg); }
+    100%{ transform: translateX(1); }
+}
+/****************************
+** ОФОРМЛЕНИЕ ТЕГОВ *********
+****************************/
+.tags {font-family: 'Ubuntu Condensed', sans-serif; }
+.tags > a {
+  display: inline-block;
+  margin: 0.5ex 1ex 0.5ex 0.9ex;
+  padding: 0.5ex 0 0.5ex 1.5ex;
+  white-space: nowrap;
+  position: relative;
+  font-family: 'Ubuntu Condensed', sans-serif;
+  text-decoration: none;
+  text-transform: uppercase;
+  border-radius: 0 0.8ex 0.8ex 0;
+}
+/* активные теги (с ненулевой представленностью на странице) цветные */
+.tags > a.tag-active {
+  color: #eee;
+  background: -moz-linear-gradient(top, #85CCF1 0%, #008DD2 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85CCF1), color-stop(100%,#008DD2));
+  background: -webkit-linear-gradient(top, #85CCF1 0%,#008DD2 100%);
+  background: -o-linear-gradient(top, #85CCF1 0%,#008DD2 100%);
+  background: linear-gradient(to bottom, #85CCF1 0%,#008DD2 100%);
+  background-color: #008DD2;
+}
+/* активные теги (с ненулевой представленностью на странице) цветные */
+.tags > a.tag-active-current {
+  color: #fff;
+  background: -moz-linear-gradient(top, #e86ad9 0%, #e86a79 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e86ad9), color-stop(100%,#e86a79));
+  background: -webkit-linear-gradient(top, #e86ad9 0%,#e86a79 100%);
+  background: -o-linear-gradient(top, #e86ad9 0%,#e86a79 100%);
+  background: linear-gradient(to bottom, #e86ad9 0%,#e86a79 100%);
+  background-color: #e86aa9;
+}
+/* неактивные теги (с нулевой представленностью на странице) серые */
+.tags > a.tag-not-active {
+  color: #000;
+  font-size: small;
+  background: -moz-linear-gradient(top, #ccc 0%, #888 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#888));
+  background: -webkit-linear-gradient(top, #ccc 0%,#888 100%);
+  background: -o-linear-gradient(top, #ccc 0%,#888 100%);
+  background: linear-gradient(to bottom, #ccc 0%,#888 100%);
+  background-color: #aaa;
+}
+/* левые треугольный хвостик тега */
+.tags > a:before {
+  content: '';
+  position: absolute;
+  top: 1ex;
+  left: -0.9ex;
+  width: 1.8ex;
+  height: 1.8ex;
+  border-radius: 0 1ex 0 1ex;
+  -webkit-transform: scale(1, 1.5) rotate(45deg);
+  -moz-transform: scale(1, 1.5) rotate(45deg);
+  -ms-transform: scale(1, 1.5) rotate(45deg);
+  transform: scale(1, 1.5) rotate(45deg);
+}
+/* левые треугольные хвостики активного тега (с ненулевой представленностью на странице) цветные */
+.tags > a.tag-active:before {
+  background: -moz-linear-gradient(45deg, #85CCF1 0%, #008DD2 100%);
+  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#85CCF1), color-stop(100%,#008DD2));
+  background: -webkit-linear-gradient(-45deg, #85CCF1 0%,#008DD2 100%);
+  background: -o-linear-gradient(45deg, #85CCF1 0%,#008DD2 100%);
+  background: linear-gradient(135deg, #85CCF1 0%,#008DD2 100%);
+  background-color: #008DD2;
+}
+/* левые треугольные хвостики активного тега (с ненулевой представленностью на странице) цветные */
+.tags > a.tag-active-current:before {
+  background: -moz-linear-gradient(45deg, #e86ad9 0%, #e86a79 100%);
+  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#e86ad9), color-stop(100%,#e86a79));
+  background: -webkit-linear-gradient(-45deg, #e86ad9 0%,#e86a79 100%);
+  background: -o-linear-gradient(45deg, #e86ad9 0%,#e86a79 100%);
+  background: linear-gradient(135deg, #e86ad9 0%,#e86a79 100%);
+  background-color: #e86aa9;
+}
+/* левые треугольные хвостики не активного тега (с ненулевой представленностью на странице) серые */
+.tags > a.tag-not-active:before {
+  background: -moz-linear-gradient(45deg, #ccc 0%, #888 100%);7
+  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#ccc), color-stop(100%,#888));
+  background: -webkit-linear-gradient(-45deg, #ccc 0%,#888 100%);
+  background: -o-linear-gradient(45deg, #ccc 0%,#888 100%);
+  background: linear-gradient(135deg, #ccc 0%,#888 100%);
+  background-color: #aaa;
+}
+/* правые цыфровые поля тега */
+.tags > a .tag-note {
+  padding:  1ex;
+  background-color: rgba(255,255,255,0.3);
+  border-radius: 0 0.8ex 0.8ex 0;
+  border-left: 1px dotted white;
+}
+.tags > a.tag-active .tag-note { color: #ccc; }
+.tags > a.tag-active-current .tag-note { color: #fee; }
+.tags > a.tag-not-active .tag-note { color: #333; }
+/* дырочка в левом хвостике */
+.tags > a:after {
+  content: '';
+  position: absolute;
+  top: 1.6ex;
+  left: 0;
+  width: 0.6ex;
+  height: 0.6ex;
+  background: #FFF;
+  border-radius: 0.4ex;
+}
+/* поведение при наведении на ссылку */
+.tags > a:hover { transition:0.5s; }
+.tags > a.tag-active:hover { color: #fff; }
+.tags > a.tag-not-active:hover { color: #000; }
+.tags > a:hover .tag-note { background-color: rgba(255,255,255,0.7); transition:0.5s;
+}
+.tags > a.tag-active:hover .tag-note { color: #008DD2; }
+.tags > a.tag-not-active:hover .tag-note { color: #008DD2; }
+.tags > a:not(:hover), .tags > a:not(:hover) .tag-note { transition:1s; }
+
+/****************************
+** ОФОРМЛЕНИЕ ТЕГОВ *********
+****************************/
+.label > a {color: white}
+.on-light {background-color:#bc9ec5;transition:all 0.5s ease-out 0.5s; }
+
+.test {
+  position: absolute;top:200px;
+}

public/static/svgs/logo_cadpoint-2021-border.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1117" height="250" viewBox="0 0 286779 64226" shape-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" xmlns:v="https://vecta.io/nano"><defs><linearGradient id="A" gradientUnits="userSpaceOnUse" x1="181696" y1="50202" x2="181696" y2="14029"><stop offset=".3" stop-color="#000"/><stop offset=".9" stop-color="#555"/></linearGradient></defs><g fill-rule="nonzero"><path d="M101107 38004c-173 4016-1303 7051-3382 9105-2078 2062-5006 3093-8791 3093-3984 0-7027-1312-9146-3926-2120-2623-3176-6359-3176-11208v-5930c0-4833 1097-8561 3283-11183 2194-2615 5237-3926 9138-3926 3827 0 6746 1072 8734 3208 1987 2144 3117 5221 3389 9229h-7125c-66-2483-446-4190-1147-5138-701-940-1987-1410-3851-1410-1905 0-3250 668-4041 1995-784 1336-1204 3522-1254 6573v6656c0 3497 388 5905 1171 7208 784 1311 2120 1963 4025 1963 1864 0 3159-454 3868-1369 709-907 1105-2556 1204-4940h7101zm21171 4528h-9683l-1888 7175h-7513l10993-35183h6499l11068 35183h-7588l-1888-7175zm-8140-5938h6573l-3283-12553-3290 12553zm20907 13113V14524h9303c4107 0 7381 1303 9822 3917 2441 2606 3687 6186 3728 10730v5699c0 4627-1221 8256-3654 10886-2441 2631-5806 3951-10094 3951h-9105zm7101-29245v23356h2127c2367 0 4033-627 5007-1872 964-1245 1468-3398 1517-6457v-6112c0-3291-462-5575-1377-6878-916-1295-2483-1971-4685-2037h-2589zm27966 16874v12371h-7109V14524h11984c3480 0 6259 1080 8329 3241 2070 2153 3101 4957 3101 8404s-1022 6169-3068 8173c-2045 1996-4882 2994-8503 2994h-4734zm0-5938h4875c1360 0 2399-445 3142-1328 742-883 1113-2169 1113-3851 0-1749-379-3143-1138-4182-751-1031-1765-1559-3043-1575h-4949v10936zm45814 3884c0 4726-1113 8388-3348 11002-2227 2615-5328 3918-9287 3918-3950 0-7051-1295-9303-3885-2251-2581-3398-6210-3431-10861v-6021c0-4841 1122-8618 3357-11332 2243-2713 5352-4074 9328-4074 3917 0 7002 1336 9253 4000 2260 2672 3398 6416 3431 11233v6020zm-7126-5913c0-3175-453-5534-1352-7084-899-1543-2301-2318-4206-2318-1881 0-3275 742-4182 2235-899 1493-1369 3761-1402 6804v6260c0 3084 462 5352 1378 6812 923 1460 2342 2186 4255 2186 1856 0 3233-710 4132-2136 899-1427 1361-3646 1377-6639v-6120zm19629 20338h-7101V14524h7101v35183zm30557 0h-7101l-10392-23076v23076h-7101V14524h7101l10416 23100V14524h7077v35183zm27793-29245h-8693v29245h-7125V20462h-8561v-5938h24379v5938z" fill="url(#A)"/></g></svg>

public/static/svgs/tag.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" color="#006799" viewBox="0 0 16 16">
+  <path d="M6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0z"/>
+  <path d="M2 1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 1 6.586V2a1 1 0 0 1 1-1zm0 5.586 7 7L13.586 9l-7-7H2v4.586z"/>
+</svg>