responsive images

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "start": "vue-cli-service serve --port 3156",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build"
   },

src/components/footer.vue

@@ -34,6 +34,15 @@ export default {};
   margin-bottom: 1rem;
 }
 
+#footer {
+	width: 100%;
+	height: 200px;
+	background: #333;
+	border-top: 2px solid #000;
+	position: absolute;
+	bottom: 0;
+}
+
 .Azul-puma {
   background-color: #1e3c70;
 }

src/components/header.vue

@@ -1,63 +1,91 @@
 <template>
-  <div class="row divMaster header cl-12 azulUnam">
-   <div class="wrapper">
-         <div class="wrapperleft"> 
-          <a href="https://www.acatlan.unam.mx/" target="_blank">
-            <img src="../assets/logo_acatlan.png" class= "img-fluid" alt="logo acatlan" />
-          </a> 
-          </div>
-          <div class="wrapperright2">
-          <a href="https://www.unam.mx/" target="_blank">
-            <img src="../assets/logo_unam.png" class= "img-fluid" alt="logo unam" />
-          </a> 
-          </div>
-    </div> 
+  <div class="row  azulUnam">
+    <div class= "pad">
+    <div
+      class="logo_unam  col-3 d-inline-flex my-3 align-items-left"
+    >
+   
+      <a href="https://www.unam.mx/" target="_blank">
+        <img class="sizeImg" src="../assets/logo_unam.png" alt="logo unam" />
+      </a>
+      </div>
+    
+</div>
+
+
+
+    <div class="logo_acatlan  col-1   offset-3   my-4  ">
+      <a href="https://www.acatlan.unam.mx/" target="_blank">
+        <div id="imagenbanner">
+        <img
+          class="sizeImga"
+          src="../assets/logo_fesa.png"
+          alt="logo unam"
+        />
+        </div>
+      </a>
+    </div>
+
+
+    <div
+      class="logo_acatlan_resp col-4  offset-2 d-flex justify-content-center my-2 align-items-center"
+    >
+      <a href="https://www.acatlan.unam.mx/" target="_blank">
+        <img
+          class="sizeImg"
+          src="../assets/logo_acatlan.png"
+          alt="logo unam"
+        />
+      </a>
+    </div>
   </div>
-  
 </template>
-<script scoped>
-export default {};
-</script>
+
 <style>
-.wrapperright2 {
-    min-width: 50px;
-    float: left;
-    height: 10px;
-    width: 48%;
-    background-size: 280px, 84px;
-    background-repeat: no-repeat;
-    padding: 13px
+
+#imagenbanner{
+	position: absolute;
+	top: 8px;
+	left: 160px;
+	width: 100px;
+	line-height: 17px;
 }
 
-.wrapperleft {
-    min-width: 20px;
-    float: right;
-    height: 10px;
-    width: 50%;
-    background-size: 100px, 69px;
-    background-repeat: no-repeat;
-    background-position-x: 50%;
-    padding: 4px
+.pad{
+     
+     padding: 0px;
 }
 
-.wrapper {
-    min-width: 50px;
-    width: 100%;
-    margin: 0px auto;
-    position: relative;
-}
-
-
-
-
 .divMaster {
-  height: 7em;
+  height: 6em;
   margin: 0 auto;
 }
 
 .azulUnam {
   background-color: #1e3c70;
 }
+.sizeImg {
+  height: 4.5rem;
+}
 
+.sizeImga {
+  height: 3.3rem;
+ 
+}
+.logo_acatlan_resp {
+  display: none !important;
+}
 
+@media (max-width: 450px) {
+  .logo_acatlan,
+  .logo_unam {
+    display: none !important;
+  }
+  .logo_acatlan_resp {
+    display: block !important;
+  }
+  .logo_acatlan_resp a img {
+    height: 5rem;
+  }
+}
 </style>

src/components/nav.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="divMaster doradoUnam row d-flex justify-content-center">
+ <div class="divMaster doradoUnam row d-flex justify-content-center">
     <div class="col-10 offset-1">
       <nav class="navbar navbar-expand-sm navbar-dark  ">
+       
+        
         <button
           @click="method()"
           class="navbar-toggler col-5"
@@ -14,8 +16,12 @@
         >
           <span class="navbar-toggler-icon blanco d-flex"></span>
           <!-- <span class="mx-2">Menu</span> -->
+        
+        
         </button>
 
+      
+
         <div class="collapse navbar-collapse " id="navbarTogglerDemo02">
           <ul class="navbar-nav mr-auto w-100 d-flex align-items-center justify-content-between mt-0 mt-lg-0">
             <li class="nav-item">
@@ -42,8 +48,8 @@
      
       </nav>
     </div>
-  </div>
-
+ 
+ </div>
 
 </template>
 
@@ -90,18 +96,20 @@
 </script>
 
 <style scoped>
+
+
 * {
   margin: 0;
   padding: 0;
 }
 
 .divMaster {
-  /* max-width: 1280px; */
+
   height: auto;
   margin: 0 auto;
 }
 nav {
-  padding: 0.5rem 0;
+  padding: 1.2rem 0;
 }
 
 .azulUnam {
@@ -129,12 +137,12 @@ nav {
 .nav-link:hover {
   background-color: #1e3c70;
   color: white;
-  border-radius: 0.2rem;
+  border-radius: 3rem;
 }
 
 .nav-link {
-  transition: 0.3s;
-  font-size: 20px;
+  transition: 0.4s;
+  font-size: 22px;
 }
 
 .dropdown-item {
@@ -176,9 +184,7 @@ nav {
   left: -10rem;
   display: block;
 }
-.rescont {
-  z-index: ;
-}
+
 
 .list-group-item {
   padding: 2px 2px;
@@ -192,13 +198,17 @@ nav {
 }
 
 @media (max-width: 450px) {
-  .menuText,
-  .buscador {
+  .menuText
+   {
     display: block !important;
   }
 
   .dropdown-menu {
     width: 80vw !important;
   }
+  .nav-link {
+    font-size: 10px;
+    margin-top: 1rem;
+  }
 }
 </style>

src/views/announcement.vue

@@ -3,14 +3,11 @@
   <Header></Header>
   <Nav></Nav>
 <div  class ="box"> 
-
-<nav  class="breadcrumb">
- 
-</nav>        
+    
     
 <div class= "container"> 
 
-<div class= "content is-normal ">
+
 
  
 <h6><b>I. </b></h6>
@@ -188,7 +185,6 @@
 </div>
 
 
-</div>
 </div>
  <Footer></Footer>
   
@@ -252,7 +248,7 @@ table, th, td {
 }
 
 .space {
-    margin-left: 40px;width: 700px;
+    margin-left: 40px;width: 20px;
     
 }
 

src/views/criteria.vue

@@ -2,16 +2,12 @@
 <div>
   <Header></Header>
   <Nav></Nav>
-<div  class ="box"> 
 
-<nav  class="breadcrumb">
  
-</nav>        
-    
+<div  class ="box"> 
 
 <div class= "container"> 
 
-<div class= "content is-normal ">
 
  
 <h6><b>I. </b></h6>
@@ -57,7 +53,7 @@
       <li>3. </li>
 <div class="space">
       <ul class="circle">
-           <li>  </li>
+           <li></li>
             <li> </li>
             <li> </li>
         </ul>
@@ -394,10 +390,9 @@
                             </tr>
                         </tbody></table>
 
+</div>
 </div>
 
-</div>
-</div>
  <Footer></Footer>
   
 </div>
@@ -459,11 +454,11 @@ table, th, td {
 }
 
 .space {
-    margin-left: 40px;width: 700px;
+    margin-left: 0px;width: 0px;
     
 }
 .list {
-    margin-left: 50px;width: 700px;
+    margin-left: 0px;width: 0px;
     
 }
 
@@ -513,6 +508,7 @@ h1, h2, h3, h4, h5, h6 {
     padding: 1.25rem;
     text-align: justify;
     
+    
    
 }
 
@@ -531,4 +527,6 @@ text-align: justify;
     
 }
 
+
+
 </style>

src/views/formats.vue

@@ -1,84 +1,82 @@
 <template>
-<div>
-  <Header></Header>
-  <Nav></Nav>
-<div  class ="box"> 
-<nav  class="breadcrumb"></nav>        
-    
-<div class= "container"> 
+  <div>
+    <Header></Header>
+    <Nav></Nav>
+    <div class="box">
+     
 
-<div class= "content is-normal ">
+      <div class="container">
+        <h6><b> </b></h6>
+        
+<p><a href="/files/F1_inscripcion_proyecto.docx" download>F1. Inscripcion de Proyecto</a></p>
+<p><a href="/files/F2_inscripcion_participantes.docx" download>F2. Inscripcion de Particiones</a></p>
+<p><a href="/files/F3_carta_cesion.docx" download>F3. Carta de Cesión de Derechos</a></p>
+<p><a href="/files/F4_declaracion_ingresos.docx" download>F4. Inscripcion de Particiones</a></p>
+<p><a href="/files/F5_solicitud_beca.docx" download>F5. Inscripcion de Particiones</a></p>
+<p><a href="/files/F6_carta_justificacion_transferencia.docx" download>F6. Carta justificación de transferencia</a></p>
+<p><a href="/files/F7_Formato_Solicitud_transferencia.docx" download>F7. Formato Solicitud de transferencia PAIDI</a></p>
+<p><a href="/files/F8_Entrega_Proyecto_Concluido.docx" download>F9. Formato de entrega de trabajo concluido</a></p>
+        
 
- 
-     <h6><b> </b></h6>
-
-<a
-  :href="item.url"
-  v-text="item.label"
-  @click.prevent="downloadItem(item)"/> 
-
-
-<p><a href="recursos/2021/F1_inscripcion_proyecto.docx" target="_blank">F1. Inscripción de Proyecto</a></p>
-<p><a href="" target="_blank"></a></p>
-<p><a href="" target="_blank"></a></p>
-<p><a href="" target="_blank"></a></p>
-<p><a href="" target="_blank"></a></p>
-<p><a href="" target="_blank"></a></p>
-<p><a href="" target="_blank"></a></p>
-</div>
-
-</div>
-</div>
- <Footer></Footer>
-  
-
-</div>
+        <p>
+          <a href="recursos/2021/F1_inscripcion_proyecto.docx" target="_blank"
+            >F1. Inscripción de Proyecto</a
+          >
+        </p>
+        <p><a href="" target="_blank"></a></p>
+        <p><a href="" target="_blank"></a></p>
+        <p><a href="" target="_blank"></a></p>
+        <p><a href="" target="_blank"></a></p>
+        <p><a href="" target="_blank"></a></p>
+        <p><a href="" target="_blank"></a></p>
+      </div>
+    </div>
 
+    <Footer></Footer>
+  </div>
 </template>
 
 <script>
-
-
-import Header from "../components/header.vue";
-import Nav from "../components/nav.vue";
-import Footer from "../components/footer.vue";
+import Header from "./../components/header.vue";
+import Nav from "./../components/nav.vue";
+import Footer from "./../components/footer.vue";
 
 export default {
-  
   components: {
     Header,
     Nav,
-    Footer
+    Footer,
   },
-  
 };
 </script>
 
 <style scoped>
-
 .cent {
-    text-align: center;
+  text-align: center;
 }
 
-
 h6 {
-
-  font-family: Arial,A030,"Nimbus Sans L",FreeSans,"Liberation Sans",sans-serif;
+  font-family: Arial, A030, "Nimbus Sans L", FreeSans, "Liberation Sans",
+    sans-serif;
   width: 95%;
   font-size: 130%;
   line-height: 115%;
-  background-color: #E5EBFD;
+  background-color: #e5ebfd;
   background-position: -136px -33px;
-  border-color: #A0B1DE;
+  border-color: #a0b1de;
   border-radius: 3px 3px 3px 3px;
   border-style: solid;
   border-width: 1px;
   padding: 8px 0px 8px 34px;
-
 }
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   line-height: 1.4em;
-  font-family: 'Ubuntu', arial, serif;
+  font-family: "Ubuntu", arial, serif;
   font-weight: lighter;
 }
 
@@ -88,33 +86,34 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .box {
-    background: #f1f1f1;
-    padding: 1.25rem;
-    text-align: justify;
-    
-   
+  background: #f1f1f1;
+  padding: 1.25rem;
+  text-align: justify;
 }
 
 .container {
-    width: 950px;
-    max-width: 100%;
-    background: rgb(255, 255, 255);
-    padding: 1.2em;
-    
+  width: 950px;
+  max-width: 100%;
+  background: rgb(255, 255, 255);
+  padding: 1.2em;
 }
 
 p {
-width: 95%;
-text-align: justify;
-    
+  width: 95%;
+  text-align: justify;
 }
- a {
-    color: #37b2d1;
+a {
+  color: #37b2d1;
 }
 
 .panes .plain-text a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
-
+@media (max-width: 700px) {
+  .container {
+    width: 100%;
+    margin: auto;
+  }
+}
 </style>

src/views/glossary.vue

@@ -2,15 +2,15 @@
 <div>
   <Header></Header>
   <Nav></Nav>
+
+  <meta name="viewport" content="initial-scale=1">
 <div  class ="box"> 
 
-<nav  class="breadcrumb">
- 
-</nav>        
+   
           
     
 <div class= "container"> 
-<div class= "content is-normal ">
+
 
  <p> </p>
 <!--  -->
@@ -59,21 +59,25 @@
 <p><strong> </strong></p>
 <p><strong> </strong></p>
 <p><strong> </strong></p>
-<p><strong> </strong></p>
+
    </div>
 
   </div>
- </div>
+
+
 <Footer></Footer>
+
 </div>
+
+
 </template>
 
 <script>
 
 
-import Header from "../components/header.vue";
-import Nav from "../components/nav.vue";
-import Footer from "../components/footer.vue";
+import Header from "./../components/header.vue";
+import Nav from "./../components/nav.vue";
+import Footer from "./../components/footer.vue";
 
 export default {
   
@@ -90,7 +94,9 @@ export default {
 
 .circle{
     list-style:disc;
-     margin-left: 50px;width: 700px;
+     margin-left: 50px;width: 20px;
+     
+     
 }
 
 ul.space {

src/views/home.vue

@@ -6,7 +6,7 @@
     
          
      <div class= "container">  
-       <div class= "content is-normal ">
+       
         <br><br><br>
            <div class="paidi">
             <img src="../assets/paidi.png" class= "img-fluid">
@@ -15,12 +15,6 @@
             <div class="clear"></div>
             </div>
    </div>
-</div>
-
-
-
-
-
 <Footer></Footer>
   </div>
 
@@ -59,7 +53,7 @@ export default {
 }
 
 .box {
-    background: #f1f1f1;
+    background: #ffffff;
     padding: 1.25rem;
     text-align: justify;