feat: add main styles

ibaCZ-Blog/components/autor-resourse/autor-footer-script.js

@@ -0,0 +1,55 @@
+const footer =
+	`
+	<div class="autor_description">
+		Coded by MIU :: <a href="https://mehal.my.canva.site" target="_blank">business card</a>
+		:: <a href="https://sites.google.com/view/zivotopis-miu/kdo-jsem" target="_blank">CV</a>
+	</div>
+
+	<div class="autor_socials">
+		<ul>
+
+			<li><a href="https://mehal.my.canva.site" target="_blank" title="Business card">
+					<img src="./src/autor-resourse/autor.png" alt="smm-ico">
+				</a></li>
+
+			<li><a href="https://www.facebook.com/mehaligor.cz" target="_blank" title="Facebook">
+					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+						class="bi bi-facebook" viewBox="0 0 16 16">
+						<path
+							d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
+					</svg>
+				</a></li>
+
+			<li><a href="https://github.com/MIU-cz" target="_blank" title="Github">
+					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+						class="bi bi-github" viewBox="0 0 16 16">
+						<path
+							d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+					</svg>
+				</a></li>
+
+			<li><a href="https://www.linkedin.com/in/miu-cz" target="_blank" title="Linked In">
+					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+						class="bi bi-linkedin" viewBox="0 0 16 16">
+						<path
+							d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
+					</svg>
+				</a></li>
+
+			<li><a href="https://discord.gg/QBChbqsK" target="_blank" title="Discord">
+					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+						class="bi bi-discord" viewBox="0 0 16 16">
+						<path
+							d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" />
+					</svg>
+				</a></li>
+		</ul>
+</div>
+    `;
+
+const addFooter = () => {
+	let footerBlock = document.getElementById('autor');
+	footerBlock.innerHTML = footer;
+}
+
+addFooter();

ibaCZ-Blog/components/autor-resourse/autor-footer-style.css

@@ -0,0 +1,45 @@
+/* ---footer--- */
+@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
+:root {
+  font-family: "Permanent Marker", cursive;
+  font-size: 12px;
+}
+
+.autor {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: rgba(1, 46, 64, 0.3);
+  text-align: center;
+  letter-spacing: 0.1em;
+  color: currentColor;
+}
+.autor_description {
+  width: 100%;
+}
+.autor_socials {
+  width: 100%;
+  margin-top: 1rem;
+}
+.autor a {
+  color: #025159;
+}
+.autor a:hover {
+  color: #f28705;
+}
+.autor li {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: solid 1px #025159;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.autor li:hover {
+  border-color: #f28705;
+}
+.autor li svg,
+.autor li img {
+  width: 100%;
+  height: 100%;
+}/*# sourceMappingURL=autor-footer-style.css.map */

ibaCZ-Blog/components/autor-resourse/autor-footer-style.scss

@@ -0,0 +1,75 @@
+/* ---footer--- */
+@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
+
+// # color pallet
+$color-light: #03a696;
+$color-link: #025159;
+$color-hover: #f28705;
+$color-bg: #012e40;
+$color-text: #fff;
+
+// # main footer style
+:root {
+	font-family: "Permanent Marker", cursive;
+	font-size: 12px;
+}
+
+// body {
+// 	padding: 0;
+// 	margin: 0;
+// }
+
+.autor {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 20px;
+	background-color: transparentize($color: $color-bg, $amount: 0.7);
+
+	text-align: center;
+	letter-spacing: 0.1em;
+	color: currentColor;
+
+	&_description {
+		width: 100%;
+	}
+
+	&_socials {
+		width: 100%;
+		margin-top: 1rem;
+	}
+
+	a {
+		color: $color-link;
+
+		&:hover {
+			color: $color-hover;
+		}
+	}
+
+	& li {
+		display: inline-block;
+		width: 20px;
+		height: 20px;
+
+		border: solid 1px $color-link;
+		border-radius: 50%;
+		overflow: hidden;
+
+		&:hover {
+			border-color: $color-hover;
+		}
+
+		svg,
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+
+// @media (min-width: 768px) {
+// 	.attribution {
+// 		position: fixed;
+// 		bottom: 0;
+// 	}
+// }

ibaCZ-Blog/components/autor-resourse/my-normaliz-style-min.css

@@ -0,0 +1,72 @@
+/* ### MIU: Normalize styles ### */
+* {
+	padding: 0;
+	margin: 0;
+	border: 0;
+
+	/* transition: all 0.3s; */
+}
+
+*,
+*:before,
+*:after {
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+:focus,
+:active {
+	outline: none;
+}
+
+a:focus,
+a:active {
+	outline: none;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+html,
+body {
+	height: 100%;
+	width: 100%;
+
+	line-height: 1.5;
+	font-size: 16px;
+	font-weight: 400;
+}
+
+input,
+button,
+textarea {
+	font-family: inherit;
+}
+
+a,
+button {
+	cursor: pointer;
+}
+
+a,
+a:hover,
+a:visited {
+	text-decoration: none;
+}
+
+ul li {
+	list-style: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-size: inherit;
+	font-weight: 400;
+}
+/*--------------------*/

ibaCZ-Blog/index.php

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>IBACZ - MIU - cube practical demo</title>
+	<link rel="shortcut icon" href="./src/img/apple-touch-icon-152x152.png" type="image/png">
+	<link rel="stylesheet" href="./src/css/style.css">
+</head>
+
+<body>
+
+</body>
+
+</html>

ibaCZ-Blog/src/css/_btns.scss

@@ -0,0 +1,40 @@
+.main_btn {
+	padding: 0.3em 0.7em;
+	border: 1px solid $c-blue-grayest;
+	border-radius: 20px;
+	background: $c-main-white;
+
+	@include fontStyle($color: $c-blue-grayest);
+
+	&:hover {
+		border-color: $c-main-red;
+		background: $main-gradient;
+		color: $c-main-white;
+	}
+}
+
+.tag_btn {
+	padding: 0.3em 0.7em;
+	border: 0;
+	border-radius: 10px;
+	background: $main-gradient;
+
+	@include fontStyle($color: $c-main-white);
+}
+
+.rounded_btn {
+	padding: 0.3em;
+	border: 0;
+	border-radius: 50%;
+	background: $main-gradient;
+
+	@include fontStyle($color: $c-main-white);
+	@include Flexyble();
+}
+
+.tag_btn,
+.rounded_btn {
+	&:hover {
+		background: $c-red-lightest;
+	}
+}

ibaCZ-Blog/src/css/_theme.scss

@@ -1,5 +1,38 @@
+@font-face {
+	font-family: "Roboto-Regular";
+	src: local("Roboto-Regular"),
+		url(../fonts/Roboto/Roboto-Regular.ttf) format("truetype");
+}
+
+// ## COLORS THEME
 $c-main-blue: hsl(216, 46%, 23%);
 $c-main-white: hsl(0, 0%, 100%);
 $c-main-red: hsl(349, 92%, 66%);
 $c-red-lightest: hsl(10, 92%, 76%);
 $c-blue-grayest: hsl(217, 16%, 68%);
+$main-gradient: linear-gradient(90deg, $c-main-red 0%, $c-red-lightest 100%);
+
+// ## Variables:
+$ff-main: "Roboto-Regular";
+
+@mixin fontStyle(
+	$ff: $ff-main,
+	$fs: inherit,
+	$fw: inherit,
+	$ls: normal,
+	$lh: normal,
+	$color: $c-main-blue
+) {
+	font-family: $ff;
+	font-size: $fs;
+	font-weight: $fw;
+	letter-spacing: $ls;
+	line-height: $lh;
+	color: $color;
+}
+
+@mixin Flexyble() {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}