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/header.vue

@@ -1,63 +1,91 @@
 <template>
-  <div class="row divMaster header cl-12 azulUnam">
+  <div class="row  azulUnam">
-   <div class="wrapper">
+    <div class= "pad">
-         <div class="wrapperleft"> 
+    <div
-          <a href="https://www.acatlan.unam.mx/" target="_blank">
+      class="logo_unam  col-3 d-inline-flex my-3 align-items-left"
-            <img src="../assets/logo_acatlan.png" class= "img-fluid" alt="logo acatlan" />
+    >
-          </a> 
+   
-          </div>
+      <a href="https://www.unam.mx/" target="_blank">
-          <div class="wrapperright2">
+        <img class="sizeImg" src="../assets/logo_unam.png" alt="logo unam" />
-          <a href="https://www.unam.mx/" target="_blank">
+      </a>
-            <img src="../assets/logo_unam.png" class= "img-fluid" alt="logo unam" />
+      </div>
-          </a> 
+    
-          </div>
+</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;
+#imagenbanner{
-    float: left;
+	position: absolute;
-    height: 10px;
+	top: 8px;
-    width: 48%;
+	left: 160px;
-    background-size: 280px, 84px;
+	width: 100px;
-    background-repeat: no-repeat;
+	line-height: 17px;
-    padding: 13px
 }
 
-.wrapperleft {
+.pad{
-    min-width: 20px;
+     
-    float: right;
+     padding: 0px;
-    height: 10px;
-    width: 50%;
-    background-size: 100px, 69px;
-    background-repeat: no-repeat;
-    background-position-x: 50%;
-    padding: 4px
 }
 
-.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;
+  transition: 0.4s;
-  font-size: 20px;
+  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,
+  .menuText
-  .buscador {
+   {
     display: block !important;
   }
 
   .dropdown-menu {
     width: 80vw !important;
   }
+  .nav-link {
+    font-size: 10px;
+    margin-top: 1rem;
+  }
 }
 </style>

src/views/announcement.vue

@@ -3,10 +3,7 @@
   <Header></Header>
   <Nav></Nav>
 <div  class ="box"> 
-
+    
-<nav  class="breadcrumb">
- 
-</nav>        
     
 <div class= "container"> 
 

src/views/criteria.vue

@@ -2,12 +2,9 @@
 <div>
   <Header></Header>
   <Nav></Nav>
-<div  class ="box"> 
 
-<nav  class="breadcrumb">
  
-</nav>        
+<div  class ="box"> 
-    
 
 <div class= "container"> 
 
@@ -56,7 +53,7 @@
       <li>3. </li>
 <div class="space">
       <ul class="circle">
-           <li>  </li>
+           <li></li>
             <li> </li>
             <li> </li>
         </ul>
@@ -394,9 +391,8 @@
                         </tbody></table>
 
 </div>
-
-
 </div>
+
  <Footer></Footer>
   
 </div>
@@ -458,11 +454,11 @@ table, th, td {
 }
 
 .space {
-    margin-left: 40px;width: 20px;
+    margin-left: 0px;width: 0px;
     
 }
 .list {
-    margin-left: 50px;width: 700px;
+    margin-left: 0px;width: 0px;
     
 }
 
@@ -512,6 +508,7 @@ h1, h2, h3, h4, h5, h6 {
     padding: 1.25rem;
     text-align: justify;
     
+    
    
 }
 
@@ -530,4 +527,6 @@ text-align: justify;
     
 }
 
+
+
 </style>

src/views/formats.vue

@@ -1,75 +1,82 @@
 <template>
-<div>
+  <div>
-  <Header></Header>
+    <Header></Header>
-  <Nav></Nav>
+    <Nav></Nav>
-<div  class ="box"> 
+    <div class="box">
-<nav  class="breadcrumb"></nav>        
+     
-    
-<div class= "container"> 
-     <h6><b> </b></h6>
-<a href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a>
 
-<p><a href="recursos/2021/F1_inscripcion_proyecto.docx" target="_blank">F1. Inscripción de Proyecto</a></p>
+      <div class="container">
-<p><a href="" target="_blank"></a></p>
+        <h6><b> </b></h6>
-<p><a href="" target="_blank"></a></p>
+        
-<p><a href="" target="_blank"></a></p>
+<p><a href="/files/F1_inscripcion_proyecto.docx" download>F1. Inscripcion de Proyecto</a></p>
-<p><a href="" target="_blank"></a></p>
+<p><a href="/files/F2_inscripcion_participantes.docx" download>F2. Inscripcion de Particiones</a></p>
-<p><a href="" target="_blank"></a></p>
+<p><a href="/files/F3_carta_cesion.docx" download>F3. Carta de Cesión de Derechos</a></p>
-<p><a href="" target="_blank"></a></p>
+<p><a href="/files/F4_declaracion_ingresos.docx" download>F4. Inscripcion de Particiones</a></p>
-</div>
+<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>
+        
 
-</div>
+        <p>
-
+          <a href="recursos/2021/F1_inscripcion_proyecto.docx" target="_blank"
- <Footer></Footer>
+            >F1. Inscripción de Proyecto</a
-  
+          >
-
+        </p>
-</div>
+        <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";
 
 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",
-  font-family: Arial,A030,"Nimbus Sans L",FreeSans,"Liberation Sans",sans-serif;
+    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;
 }
 
@@ -79,39 +86,34 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .box {
-    background: #f1f1f1;
+  background: #f1f1f1;
-    padding: 1.25rem;
+  padding: 1.25rem;
-    text-align: justify;
+  text-align: justify;
-    
-    
-   
 }
 
 .container {
-    width: 950px;
+  width: 950px;
-    max-width: 100%;
+  max-width: 100%;
-    background: rgb(255, 255, 255);
+  background: rgb(255, 255, 255);
-    padding: 1.2em;
+  padding: 1.2em;
 }
 
 p {
-width: 95%;
+  width: 95%;
-text-align: justify;
+  text-align: justify;
-    
 }
- a {
+a {
-    color: #37b2d1;
+  color: #37b2d1;
 }
 
 .panes .plain-text a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 @media (max-width: 700px) {
   .container {
     width: 100%;
-        margin:  auto;
+    margin: auto;
-        
+  }
-  }}
+}
-
 </style>

src/views/glossary.vue

@@ -6,9 +6,7 @@
   <meta name="viewport" content="initial-scale=1">
 <div  class ="box"> 
 
-<nav  class="breadcrumb">
+   
- 
-</nav>        
           
     
 <div class= "container"> 

src/views/home.vue

@@ -53,7 +53,7 @@ export default {
 }
 
 .box {
-    background: #f1f1f1;
+    background: #ffffff;
     padding: 1.25rem;
     text-align: justify;