docs-gem01 0.1.0.dev

data/_sass/_fonts.scss

@@ -0,0 +1,63 @@
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('fonts/Ubuntu-Regular.woff2') format('woff2'),
+        url('fonts/Ubuntu-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('fonts/IBMPlexMono-Light.woff2') format('woff2'),
+        url('fonts/IBMPlexMono-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Zilla Slab';
+    src: url('fonts/ZillaSlab-Regular.woff2') format('woff2'),
+        url('fonts/ZillaSlab-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Jost';
+    src: url('fonts/Jost-SemiBold.woff2') format('woff2'),
+        url('fonts/Jost-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Jost';
+    src: url('fonts/Jost-Italic.woff2') format('woff2'),
+        url('fonts/Jost-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Jost';
+    src: url('fonts/Jost-Regular.woff2') format('woff2'),
+        url('fonts/Jost-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Jost';
+    src: url('fonts/Jost-Bold.woff2') format('woff2'),
+        url('fonts/Jost-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+

data/_sass/_footer.scss

@@ -0,0 +1,38 @@
+/* ------------------------------------------------------------ *\
+	Footer
+\* ------------------------------------------------------------ */
+
+.footer {
+	position: relative;
+	z-index: 2;
+	color: $white;
+
+	.footer__content {
+		padding: 50px 0 34px;
+		border-bottom: 1px solid #acacac;
+	}
+
+	.footer__bar {
+		padding: 20px 50px;
+		font-size: 16px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.footer__bar ul {
+		list-style-type: none;
+		display: flex;
+		align-items: center;
+		padding: 0;
+		margin: 0;
+	}
+
+	.footer__bar ul li + li {
+		margin-left: 18px;
+	}
+
+	.footer__bar ul a:hover {
+		 color: $danger;
+	}
+}

data/_sass/_helpers.scss

@@ -0,0 +1,2 @@
+.bg-danger { background: $danger; }
+.bg-dark { background: #222222; }

data/_sass/_icons.scss

@@ -0,0 +1,27 @@
+/* ------------------------------------------------------------ *\
+	Icons
+\* ------------------------------------------------------------ */
+
+[class*='ico-'] {
+	display: inline-block;
+
+	img {
+		vertical-align: top;
+	}
+}
+
+
+.ico-home {
+	width: 20px;
+	height: 18px;
+}
+
+.ico-pen {
+	width: 17px;
+	height: 17px;
+}
+
+.ico-tag {
+	width: 16px;
+	height: 16px;
+}

data/_sass/_link-main.scss

@@ -0,0 +1,22 @@
+/* ------------------------------------------------------------ *\
+	Link main
+\* ------------------------------------------------------------ */
+
+.link-main {
+	display: flex;
+	align-items: center;
+
+	&:hover {
+		color: $danger;
+	}
+
+	i {
+		display: inline-block;
+		margin-bottom: 1px;
+	}
+
+	span {
+		display: inline-block;
+		margin-left: 5px;
+	}
+}

data/_sass/_list-links.scss

@@ -0,0 +1,33 @@
+/* ------------------------------------------------------------ *\
+	List links
+\* ------------------------------------------------------------ */
+
+.list-links {
+	list-style-type: none;
+	padding: 0;
+
+	a {
+		display: inline-block;
+		padding: 2px 6px;
+		border-left: 4px solid transparent;
+
+		&:hover {
+			color: $danger;
+		}
+	}
+
+	ul {
+		list-style-type: none;
+		line-height: .9;
+		padding: 7px 0 6px 41px;
+	}
+
+	ul a {
+		padding: 2px 6px;
+	}
+
+	.is-active > a {
+		border-left: 4px solid $danger;
+		font-weight: 600;
+	}
+}

data/_sass/_list-tags.scss

@@ -0,0 +1,9 @@
+/* ------------------------------------------------------------ *\
+	List tags
+\* ------------------------------------------------------------ */
+
+.list-tags {
+	list-style: none;
+	padding: 0;
+	line-height: 1.2;
+}

data/_sass/_navbar.scss

@@ -0,0 +1,81 @@
+/* ------------------------------------------------------------ *\
+	Navbar nav
+\* ------------------------------------------------------------ */
+
+.navbar {
+	padding: 0 172px 0 92px;
+
+	.navbar-login {
+		margin-left: 85px;
+		display: flex;
+		align-items: center;
+		font-weight: 600;
+		color: $white;
+
+		&:hover {
+			color: #ca83a0;
+		}
+	}
+
+	.navbar-login i {
+		margin-left: 10px;
+	}
+
+	.navbar-brand {
+		margin-right: 46px;
+	}
+}
+
+/* ------------------------------------------------------------ *\
+	Navbar nav
+\* ------------------------------------------------------------ */
+
+.navbar-nav {
+	.nav-item + .nav-item {
+		margin-left: 15px;
+	}
+
+	.nav-link {
+		position: relative;
+		font-weight: 600;
+		color: $white;
+		padding: 19px 18px !important;
+
+		&:before {
+			content: '';
+			display: inline-block;
+			width: 0;
+			height: 3px;
+			position: absolute;
+			bottom: 0;
+			left: 50%;
+			transform: translateX(-50%);
+			background: $white;
+			transition: width .3s;
+		}
+	}
+
+	.nav-link:hover {
+		color: #ca83a0;
+	}
+	.nav-link.active:before {
+		width: 100%;
+	}
+
+	.nav-link.active,
+	.nav-link.show {
+		color: $white;
+	}
+}
+
+/* ------------------------------------------------------------ *\
+	Navbar nav alt
+\* ------------------------------------------------------------ */
+
+.navbar-nav--alt {
+	.dropdown-menu {
+		position: static !important;
+		max-width: 100%;
+		transform: translate(0px, 0px) !important;
+	}
+}

data/_sass/_search.scss

@@ -0,0 +1,51 @@
+/* ------------------------------------------------------------ *\
+	Search
+\* ------------------------------------------------------------ */
+
+.search {
+	position: relative;
+	width: 100%;
+	max-width: 588px;
+
+	.form-control {
+		width: 100%;
+		height: 37px;
+		background: rgba(147, 2, 61, .49);
+		color: $white;
+		border: 1px solid transparent;
+		outline: 0;
+		padding: 0 10px 0 41px;
+		transition: border-color .3s;
+		font-size: 17px; 
+
+		&::placeholder {
+			color: $white;
+		}
+
+		&:focus {
+			box-shadow: none;
+			border-color: $white;
+		}
+	}
+
+	button {
+		width: 37px;
+		height: 37px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		border: 0;
+		outline: 0;
+		color: $white;
+		padding: 0;
+
+		svg {
+			width: 18px;
+			height: 18px;
+		}
+	}
+}

data/_sass/_section-main.scss

@@ -0,0 +1,54 @@
+/* ------------------------------------------------------------ *\
+	Section main
+\* ------------------------------------------------------------ */
+
+.section-main {
+	.section__head {
+		padding: 17px 26px 13px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-bottom: 1px solid #919191;
+	}
+
+	.section__head-inner {
+		width: 331px;
+		flex: 0 0 331px;
+		text-align: left;
+	}
+
+	.section__body {
+		padding: 0 373px 0 0;
+		position: relative;
+	}
+
+	.section__aside {
+		border-right: 1px solid #919191;
+		padding: 28px 38px;
+	}
+
+	.section__aside p {
+		margin-bottom: 20px;
+	}
+
+	.section__content-inner {
+		padding: 21px 6px 106px;
+	}
+
+	.section__content-aside {
+		padding: 27px 25px 290px;
+		background: $white;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 1;
+		width: 358px;
+		border-left: 1px solid #919191;
+		min-height: 100vh;
+
+		&.fixed {
+			position: fixed;
+		}
+	}
+}

data/_sass/_socials.scss

@@ -0,0 +1,26 @@
+/* ------------------------------------------------------------ *\
+	Socials
+\* ------------------------------------------------------------ */
+
+.socials {
+	ul {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	li + li {
+		margin-left: 43px;
+	}
+
+	a {
+		text-decoration: none;
+
+		&:hover {
+			opacity: .8;
+		}
+	}
+}

data/_sass/_switch.scss

@@ -0,0 +1,56 @@
+/* ------------------------------------------------------------ *\
+	Switch
+\* ------------------------------------------------------------ */
+
+.switch {
+	display: flex;
+	align-items: center;
+	color: #b11c89;
+
+	.form-switch {
+		margin: 0 10px;
+		padding: 0;
+	}
+
+	.form-switch .form-check-input {
+		position: relative;
+		width: 56px;
+		height: 24px;
+		margin: 0;
+		box-shadow: none;
+		background-color: #b11c89;
+		border: 0;
+		background-image: none;
+		transition: background .2s;
+
+		&:focus {
+			--bs-form-switch-bg: none;
+		}
+
+		&:before {
+			content: '';
+			display: inline-block;
+			width: 20px;
+			height: 20px;
+			background: $white;
+			border-radius: 50%;
+			position: absolute;
+			left: 2px;
+			top: 2px;
+			transition: background .2s, left .3s;
+		}
+
+		&:checked {
+			background-color: $white;
+
+			&:before {
+				background: #b11c89;
+				left: 34px;
+			}
+		}
+	}
+
+	.form-check-label {
+		display: none;
+	}
+}

data/_sass/_table.scss

@@ -0,0 +1,100 @@
+/* ------------------------------------------------------------ *\
+	Table
+\* ------------------------------------------------------------ */
+
+.table {
+	width: auto;
+	max-width: 100%;
+	background: #fdf3f6;
+	border-radius: 20px;
+
+	@media(max-width: 1399px) {
+		font-size: 16px; 
+	}
+
+	th {
+		padding: 23px 51px;
+		font-size: 18px;
+		font-weight: 600;
+		vertical-align: middle;
+
+		&:nth-child(1) {
+			width: 44.3%;
+		}
+
+		&:nth-child(2) {
+			width: 55.7%;
+		}
+
+		@media(max-width: 1399px) {
+			padding: 23px 20px;
+			font-size: inherit; 
+		}
+	}
+
+	th + th,
+	td + td {
+		border-left: 1px solid $white;
+	}
+
+	td {
+		padding: 11px 51px 10px;
+		vertical-align: middle;
+		border-bottom: 0;
+
+		@media(max-width: 1399px) {
+			padding: 11px 20px 10px;
+		}
+	}
+
+	tr {
+		border-bottom: 1px solid $white;
+
+	}
+
+	tbody tr:last-child {
+		border-bottom: 0;
+	}
+}
+
+/* Table alt */
+
+.table--alt {
+	@media(max-width: 1399px) {
+		font-size: 16px; 
+	}
+
+	th {
+		padding: 15px;
+
+		@media(max-width: 1399px) {
+			font-size: 14px; 
+		}
+
+		&:nth-child(1) {
+			width: auto;
+			padding: 20px 50px;
+			width: 17%;
+
+			@media(max-width: 1399px) {
+				padding: 15px;
+			}
+		}
+
+		&:nth-child(2) {
+			width: auto;
+		}
+	}
+
+	td {
+		padding: 11px 20px 10px;
+
+		&:nth-child(1) {
+			padding: 5px 20px 5px 50px;
+
+			@media(max-width: 1399px) {
+				padding: 5px 15px;
+			}
+		}
+	}
+}

data/_sass/_theme.scss

@@ -0,0 +1,63 @@
+[data-bs-theme=dark] {
+	background: #222222;
+
+	body {
+		color: $white;
+	}
+
+	table {
+		background: #333333;
+		color: $white;
+	}
+
+	.table tr,
+	.table th + th, 
+	.table td + td {
+		border-color: #222222;
+	}
+
+	.navbar {
+		background-color: #222222 !important;
+	}
+
+	.article h2 {
+		color: $danger;
+	}
+
+	.article .article__entry p span {
+		color: #000;
+	}
+
+	.accordion .accordion-button {
+		color: $white;
+	}
+
+	.accordion .accordion-item {
+		color: $white;
+	}
+
+	.accordion .accordion-button:after {
+		border-left-color: $white;
+	}
+
+	.tile--danger,
+	.tile--danger--alt {
+		background: #333333;
+	}
+
+	.section-main .section__content-aside {
+		background: #222222;
+	}
+
+	.switch {
+		color: $white;
+	}
+
+	.search .form-control {
+		background: #333333;
+
+		&:focus {
+			border-color: $danger;
+		}
+	}
+}

data/_sass/_tile.scss

@@ -0,0 +1,34 @@
+/* ------------------------------------------------------------ *\
+	Tile
+\* ------------------------------------------------------------ */
+
+.tile {
+	padding: 20px 17px;
+	border-radius: 7px;
+
+	h6 {
+		text-transform: uppercase;
+		font-weight: 600;
+		margin-bottom: 5px;
+		color: $danger;
+		font-family: $font-family-jost;
+	}
+
+	p:last-child {
+		margin-bottom: 0;
+	}
+}
+
+/* Tile danger */
+
+.tile--danger {
+	background: #fdf3f6;
+	border-left: 5px solid $danger;
+}
+
+/* Tile danger alt */
+
+.tile--danger-alt {
+	background: #fbf3f9;
+	border-left: 5px solid #b11c89;
+}

data/_sass/_tiles.scss

@@ -0,0 +1,9 @@
+/* ------------------------------------------------------------ *\
+	Tiles
+\* ------------------------------------------------------------ */
+
+.tiles {
+	.tiles__tile + .tiles__tile {
+		margin-top: 31px;
+	}
+}

data/_sass/_variables.scss

@@ -0,0 +1,11 @@
+$font-family-sans-serif: "Open Sans", sans-serif, !default;
+$font-family-monospace: "Source Code Pro", monospace !default;
+$font-family-jost: "Jost", sans-serif;
+$font-family-zilla-slab: "Zilla Slab", serif;
+$font-size-base: 0.9rem !default;
+
+$breadcrumb-divider: quote("/");
+
+
+$white: #fff;
+$danger: #d30b55;

data/_sass/_widget.scss

@@ -0,0 +1,15 @@
+/* ------------------------------------------------------------ *\
+	Widget
+\* ------------------------------------------------------------ */
+
+.widget {
+	h6 {
+		font-family: $font-family-jost;
+		font-weight: bold;
+		margin-bottom: 16px;
+	}
+
+	.widget__list-links {
+		margin-left: -10px;
+	}
+}