Merge pull request #110 from spacenomads/project/cookies

Add new project
spacenomads · Jan 13, 2024 · cbc2084 · cbc2084
2 parents 2c5a54f + 196e6f0
commit cbc2084
Show file tree

Hide file tree

Showing 23 changed files with 979 additions and 13 deletions.
diff --git a/_src/assets/css/main.css b/_src/assets/css/main.css
diff --git a/_src/assets/css/main.css.map b/_src/assets/css/main.css.map
diff --git a/_src/assets/statics/cookies/account/index.html b/_src/assets/statics/cookies/account/index.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="es">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Tu cuenta | Ñam!</title>
+	<link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
+	<link rel="stylesheet" href="../assets/css/app.css">
+	<script src="../assets/js/app.js" type="module"></script>
+</head>
+<body class="🍪 js__🍪">
+<header class="🍪__header">
+	<div class="🍪__wrapper">
+		<div class="🍪__brand">
+			<a href="../">🍪</a>
+		</div>
+		<aside class="🍪__login">
+			<div class="🍪__login-form js__🍪-login-form">
+				<button class="🍪__login-form-trigger js__🍪-login-form-trigger">Login</button>
+				<form class="form js__form">
+					<div class="form__row">
+						<label for="user" class="form__label">Usuario</label>
+						<input id="user" type="text" class="form__field js__form-user">
+					</div>
+					<div class="form__row">
+						<label for="pass" class="form__label">Clave</label>
+						<input id="pass" type="password" class="form__field js__form-pass">
+					</div>
+					<div class="form__row form__row--actions">
+						<button class="form__submit js__form-submit">Dale!</button>
+					</div>
+				</form>
+			</div>
+			<div class="🍪__logged js__🍪-logged">
+				<ul class="🍪__logged-items">
+					<li class="🍪__logged-item">
+						<span class="🍪__link 🍪__link--active">Tu cuenta</span>
+					</li>
+					<li class="🍪__logged-item">
+						<button class="🍪__logout-btn js__🍪-logout-btn">Salir</button>
+					</li>
+				</ul>
+			</div>
+		</aside>
+	</div>
+</header>
+<main class="🍪__main">
+	<div class="🍪__wrapper">
+		<h1 class="🍪__title">Bienvenido<span class="js__🍪-user"></span>!
+		</h1>
+		<p class="🍪__intro">Aquí puedes personalizar tu rollo.</p>
+
+		<h2 class="🍪__subtitle">Temas</h2>
+
+		<form action="" class="form-theme js__form-theme">
+			<ul class="form-theme__list">
+				<li class="form-theme__list-item">
+					<div class="form-theme__row">
+						<input class="form-theme__radio js__form-theme-radio" data-theme="default" type="radio" name="theme" id="theme_default" checked>
+						<label class="form-theme__label" for="theme_default">Tema por defecto</label>
+					</div>
+				</li>
+				<li class="form-theme__list-item">
+					<div class="form-theme__row">
+						<input class="form-theme__radio js__form-theme-radio" data-theme="dark" type="radio" name="theme" id="theme_dark">
+						<label class="form-theme__label" for="theme_dark">Tema oscuro</label>
+					</div>
+				</li>
+				<li class="form-theme__list-item">
+					<div class="form-theme__row">
+						<input class="form-theme__radio js__form-theme-radio" data-theme="unicorn" type="radio" name="theme" id="theme_unicorn">
+						<label class="form-theme__label" for="theme_unicorn">Tema unicornio</label>
+					</div>
+				</li>
+				<li class="form-theme__list-item">
+					<div class="form-theme__row">
+						<input class="form-theme__radio js__form-theme-radio" data-theme="poop" type="radio" name="theme" id="theme_poop">
+						<label class="form-theme__label" for="theme_poop">Tema caca</label>
+					</div>
+				</li>
+			</ul>
+		</form>
+	</div>
+</main>
+</body>
+</html>
diff --git a/_src/assets/statics/cookies/apple-touch-icon.png b/_src/assets/statics/cookies/apple-touch-icon.png
diff --git a/_src/assets/statics/cookies/assets/css/account.css b/_src/assets/statics/cookies/assets/css/account.css
@@ -0,0 +1,56 @@
+.form-theme__row {
+	position: relative;
+}
+
+.form-theme__radio {
+	position: absolute;
+	left: 0;
+	inset-block-start: 50%;
+	inset-inline-start: calc(7 / var(--font-size) * 1rem);
+	transform: translateY(-50%);
+	margin: 0;
+	z-index: 1;
+	block-size: 1rem;
+	inline-size: 1rem;
+}
+
+.form-theme__label {
+	padding-inline-start: calc(70 / var(--font-size) * 1rem);
+	z-index: 2;
+}
+
+.form-theme__label::before {
+	content: '';
+	position: absolute;
+	inset-block-start: 50%;
+	inset-inline-start: 0;
+	transform: translateY(-50%);
+	background-color: var(--theme-radio-bg);
+	inline-size: calc(60 / var(--font-size) * 1rem);
+	block-size: calc(30 / var(--font-size) * 1rem);
+	border-radius: calc(15 / var(--font-size) * 1rem);
+	transition: background-color ease .2s;
+	z-index: 2;
+}
+
+.form-theme__label::after {
+	content: '';
+	position: absolute;
+	inset-block-start: 50%;
+	inset-inline-start: calc(3 / var(--font-size) * 1rem);
+	transform: translateY(-50%);
+	block-size: calc(24 / var(--font-size) * 1rem);
+	inline-size: calc(24 / var(--font-size) * 1rem);
+	background-color: var(--theme-radio-bg-handle);
+	border-radius: 50%;
+	transition: inset-inline-start ease .5s;
+	z-index: 3;
+}
+
+.form-theme__radio:checked + .form-theme__label::before {
+	background-color: var(--theme-radio-bg-active);
+}
+
+.form-theme__radio:checked + .form-theme__label::after {
+	inset-inline-start: calc(32 / var(--font-size) * 1rem);
+}
diff --git a/_src/assets/statics/cookies/assets/css/app.css b/_src/assets/statics/cookies/assets/css/app.css
@@ -0,0 +1,76 @@
+@import 'core.css';
+@import 'header.css';
+@import 'themes.css';
+@import 'account.css';
+
+
+
+
+/*APP*/
+.🍪 {
+	color: var(--theme-text);
+	background-color: var(--theme-bg);
+	font-family: var(--font-family);
+	font-size: 100%;
+	font-weight: 300;
+	line-height: 1.75;
+	letter-spacing: .01em;
+}
+
+
+.🍪__wrapper {
+	margin-inline: calc(var(--margin-h) / var(--font-size) * 1rem);
+	max-inline-size: calc(var(--width-main-col) / var(--font-size) * 1rem);
+}
+
+@media screen and (min-width: 660px) {
+	.🍪__wrapper {
+		margin-inline: auto;
+	}
+}
+
+
+.🍪__title,
+.🍪__subtitle {
+	font-weight: 400;
+}
+
+
+.🍪__note {
+	display: flex;
+	gap: 1em;
+	padding: 1em;
+	border: 1px solid var(--theme-border);
+}
+
+.🍪__note::before {
+	content: '🤓'
+}
+
+.🍪__link {
+	color: var(--theme-link);
+}
+
+.🍪__link--active {}
+
+.🍪__items {
+	list-style: none;
+	padding: 0;
+	display: flex;
+	gap: 1em;
+	flex-wrap: wrap;
+}
+
+.🍪__button {
+	padding: .25em 1em;
+	background-color: var(--theme-button-bg);
+	border: 0;
+	border-radius: var(--radius);
+	transition: background-color ease .5s;
+	color: var(--theme-button-text);
+}
+
+.🍪__button:hover {
+	background-color: var(--theme-button-bg-hover);
+	color: var(--theme-button-text-hover);
+}
diff --git a/_src/assets/statics/cookies/assets/css/core.css b/_src/assets/statics/cookies/assets/css/core.css
@@ -0,0 +1,99 @@
+/* roboto-slab-300 - latin */
+@font-face {
+	font-display: swap;
+	font-family: 'roboto slab';
+	font-style: normal;
+	font-weight: 300;
+	src: url('../fonts/roboto/roboto-slab-v34-latin-300.woff2') format('woff2');
+}
+
+/* roboto-slab-regular - latin */
+@font-face {
+	font-display: swap;
+	font-family: 'roboto slab';
+	font-style: normal;
+	font-weight: 400;
+	src: url('../fonts/roboto/roboto-slab-v34-latin-regular.woff2') format('woff2');
+}
+
+/* roboto-slab-600 - latin */
+@font-face {
+	font-display: swap;
+	font-family: 'roboto slab';
+	font-style: normal;
+	font-weight: 600;
+	src: url('../fonts/roboto/roboto-slab-v34-latin-600.woff2') format('woff2');
+}
+
+
+:root {
+	--color-white: #fff;
+	--color-designer-white: #f4f6f7;
+	--color-designer-black: #323232;
+	--color-designer-ultra-black: #121212;
+	--color-correct-blue: #007aff;
+	--color-correct-yellow: #ffcc00;
+	--color-safety-orange: #ff9900;
+	--color-border: #c4c4c4;
+	--color-border-dark: #666;
+	--color-cookie: #c0803a;
+	--color-chocolat: #1e0f07;
+	--font-size: 16;
+	--font-family: roboto slab, arial, sans-serif;
+	--margin-h: 30;
+	--width-main-col: 600;
+	--width-field: 200;
+	--radius: 10px;
+
+	--theme-bg: var(--color-designer-white);
+	--theme-bg-header: var(--color-white);
+	--theme-text: var(--color-designer-black);
+	--theme-link: var(--color-correct-blue);
+	--theme-border: var(--color-border);
+	--theme-button-text: var(--color-white);
+	--theme-button-text-hover: var(--color-white);
+	--theme-button-bg: var(--color-cookie);
+	--theme-button-bg-hover: var(--color-chocolat);
+	--theme-modal-shadow: 0 4px 200px rgba(0,0,0, .2), 0 4px 10px rgba(0,0,0, .2);
+	--theme-field-text: var(--color-designer-black);
+	--theme-field-bg: var(--color-white);
+	--theme-radio-bg: #a4a4a4;
+	--theme-radio-bg-active: var(--color-correct-blue);
+	--theme-radio-bg-handle: var(--color-white);
+}
+
+
+
+
+
+/*RESET*/
+html {
+	font-size: calc(var(--font-size) * 1px);
+}
+
+@media (min-width: 500px) {
+	:root {
+		--font-size: 20;
+	}
+}
+
+body {
+	margin: 0;
+}
+
+input,
+button {
+	font: inherit;
+}
+
+p {
+	margin: 0;
+}
+
+p + p {
+	margin-block-start: 1em;
+}
+
+a {
+	color: var(--color-correct-blue);
+}