Merge branch 'master' of github.com:accesibilidad-inclusion/pictogramas

accesibilidad-inclusion · Apr 8, 2024 · e1975e0 · e1975e0
2 parents 0939b17 + 3ca042c
commit e1975e0
Show file tree

Hide file tree

Showing 61 changed files with 120,593 additions and 192 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,9 @@
 /vendor/
 /node_modules/
 .DS_Store
+<<<<<<< HEAD
+logos/.DS_Store
+public/.DS_Store
+src/.DS_Store
+=======
+>>>>>>> qa
diff --git a/LICENSE b/LICENSE
@@ -1,5 +1,7 @@
 Atribución/Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional
 
+Pontificia Universidad Católica de Valparaíso
+
 =======================================================================
 
 Creative Commons Corporation ("Creative Commons") no es una firma de

diff --git a/css/style.css b/css/style.css
@@ -6,36 +6,186 @@ Pictogramas para PICTOS
 
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;800&display=swap');
 
-body {
-	max-width: 800px;
-	margin: 1em auto;
-	background-color: white;
+/* Desplazamiento suave */
+
+
+:root {
+  --azul-pictos: #091546;  /* Cambia el valor a tu color azul específico */
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body{
+	margin: 0;
+	box-sizing: content-box;
 	font-family: 'Open Sans';
-	display: grid;
-	grid-template-columns: 15fr 28fr;
-	grid-gap: 2rem;
 }
 
-aside {
-	/*max-width: 450px;*/
-	margin-bottom: 4rem;
+.container {
+	max-width: 555px;
+	margin: 0 auto;
+}
+
+menu{
+	display: flex;
+	position: relative;
+	justify-content: space-between;
+	margin: 0;
+	padding: .5em 0;
+
+}
+
+menu span{
+	display: flex;
+	align-items: center;
+}
+
+menu img.logo-pictos-sq{
+	width: 32px;
+	height: 32px;
+	margin: 0;
+}
+
+menu img.logo-pictos-ext{
+	height: 32px;
+	width: auto;
+	margin: 0;
+}
+
+menu h1{
+	text-transform: uppercase;
+	display: inline;
+	letter-spacing: .23ex;
+	margin: 0 .5em;
+	font-weight: 400;
+	color: var(--azul-pictos);
+}
+
+/*
+menu .menu-icon{
+	justify-self: flex-start;
+	font-size: 2.5rem;
+	margin-top: -.8em;
+}
+
+*/
+
+.menu-icon {
+    cursor: pointer;
+    font-size: 30px;
+}
+
+/* Ocultar el input */
+#menuToggle {
+    display: none;
+}
+
+/* Estilizar el icono del menú */
+.menu-icon {
+    cursor: pointer;
+    font-size: 30px;
+}
+
+/* Ocultar el menú por defecto y agregar transiciones */
+.menu {
+    height: 0;
+	width: 0;
+    position: relative;
+	top: 0;
+	margin: 0;
+	background-color: rgba(255, 255, 255, 0.1);
+    overflow: hidden;
+    list-style-type: none;
+    transition: all 0.5s ease-in-out;
+
+    /* Agregar flexbox */
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: space-evenly;
+
+	direction: rtl;
+}
+
+.menu a{
+	text-decoration:none;
+}
+
+/* Mostrar el menú cuando se hace clic en el icono del menú */
+#menuToggle:checked + label .menu {
+
+    height: 274px;
+	top: 0.79em;
+	overflow: visible;
+	background-color: rgba(255, 255, 255, 0.9);
+}
+
+
+menu ul.menu{
+	padding: 0;
+	transition: height 0.5s ease-in-out;
+}
+
+#menuToggle:checked + label menu ul.menu{
+	padding: 8px 36px;
+}
+menu ul.menu li a{
+	direction: ltr;
+	font-size: 12px;
+	white-space: pre;
+	word-wrap: break-word;
+	background-color: var(--azul-pictos);
+	color: white;
+	padding: .6ex 1ex .5ex 1ex;
+	border-radius: .9ex;
+	letter-spacing: .23ex;
+	font-weight: 500;
+}
+
+menu ul.menu li a.btn-pictos{
+	padding: 0;
 }
 
 #pictos {
 	position: relative;
 	background-color: rgb(243, 243, 243) !important;
 	border-radius: 8px;
 	margin-bottom: 1ex;
+	width: 100%;
+	padding-top: 76.92%;
 }
 
 #pictos img {
 	position: absolute;
 	top: 0;
 	left: 0;
 	max-width: 100%;
+	height: 100%;
+}
+
+.ilust{
+	width: 100%;
 	height: auto;
 }
 
+input[type="button"].reg{
+	background-color: orangered;
+	font-size: 1em;
+	text-transform: uppercase;
+	color: white !important;
+	letter-spacing: .45ex;
+	font-weight: bolder;
+	word-spacing: 2em;
+	border: 2ps solid black !important;
+}
+
+input[type="button"].sm{
+	font-size: initial;
+	font-weight: 600;
+	border: 2px solid black;
+}
+
 img[src=""] {
 	visibility: hidden;
 }
@@ -56,7 +206,7 @@ img[src=""] {
 }
 
 #icon img {
-	margin: 2em;
+	margin: 0 2em;
 }
 
 #typing {
@@ -146,19 +296,6 @@ textarea#type {
 }
 
 
-.header h1 {
-	font-weight: 700;
-	font-size: 3em;
-	display: inline;
-}
-
-.tagline {
-	display: inline;
-	font-weight: 300;
-	font-size: 2rem;
-	color: orangered;
-}
-
 label {
 	font-weight: 800;
 	margin: 0 0 -1ex 0;
@@ -184,21 +321,46 @@ a {
 	margin-bottom: -1px;
 }
 
+/*
 a:hover {
 	border-bottom: 1px solid orangered;
 }
+*/
 
 .logo img {
 	width: 72px;
 	height: auto;
 }
 
 footer {
+	max-width: 800px;
+	margin: 0 auto;
+	display: grid;
+	grid-template-columns: 1fr 6fr;
 	font-size: 12px;
-	text-align: center;
+	text-align: left;
 	font-weight: 300;
 	line-height: 129%;
-	margin-top: 3em;
+	margin: 3em auto 1em auto;
+}
+
+section{
+	padding: 2em 0;
+}
+section p, section ul{
+	font-size: 1.7em;
+	font-weight: 300;
+}
+
+section h2{
+	font-size: 2em;
+	text-transform: uppercase;
+	font-weight: 600;
+	color: orangered;
+}
+
+section h3{
+	font-size: 1.8em;
 }
 
 input[type="button"],
@@ -235,7 +397,11 @@ option:checked {
 		marks: none;
 	}
 
-	body {
+	menu{
+		display: none;
+	}
+
+	.container {
 		padding-top: 2rem;
 		display: block;
 		max-width: 20cm;
@@ -244,30 +410,43 @@ option:checked {
 	#pictos {
 		border: 1px solid black;
 		border-radius: 0px;
-		max-width: 100%;
-		height: unset !important;
-		aspect-ratio: 1.3;
 	}
 
-	aside,
+	section,
 	#controls,
 	#control-icon {
 		display: none;
 	}
 
 	#icon img {
-		margin: 3em;
+		position: relative;
+		top: 2em;
+		left: 2em;
 	}
 
-	#save {
+	textarea {
+		resize: none;
+	}
+	#save,
+	#que-son,
+	#como-funcionan,
+	#colabora
+	#creditos{
+		height: 0vh;
 		display: none;
 	}
 
-	textarea {
-		resize: none;
+	footer{
+		position: absolute;
+		margin: 0 0 0 66%;
+		bottom: 0;
 	}
 
-	footer {
-		display: none;
+	footer .logo{
+		padding: 0 2ex;
 	}
-}
+
+	#icon img {
+		margin: 2em;
+	}
+}