12345678910111213141516171819202122232425 |
- .timeline { position: relative; max-width: 960px; margin: 0 auto; }
- .timeline::after { content: ''; position: absolute; width: 2px; background: var(--gray); top: 0; bottom: 0; left: 50%; margin-left: -1px; }
- .trabajo { padding: 1rem; position: relative; background: var(--white); width: 50%; }
- .trabajo > div { padding-bottom: 0.5rem; }
- .trabajo > div > div { padding: 0 1rem; margin-bottom: 0.25rem; }
- .trabajo > div > div.fecha { width: 60%; padding: 0.25rem 1rem; height: 30px; max-height: 30px; margin-top: -15px; outline: 5px solid white; margin-bottom: 0.5rem!important; }
- .trabajo:nth-child(odd) { left: 0;}
- .trabajo:nth-child(odd) > div { border-radius: 5px; border: 2px solid var(--azul1); }
- .trabajo:nth-child(odd) > div > div.fecha { background: var(--azul1); border-radius: 15px 0 0 15px; align-self: end; text-align: right; margin-right: -1rem; }
- .trabajo:nth-child(even) { left: 50%;}
- .trabajo:nth-child(even) > div { border-radius: 5px; border: 2px solid var(--azul2); }
- .trabajo:nth-child(even) > div > div.fecha { background: var(--azul2); border-radius: 0 15px 15px 0; margin-left: -1rem; }
- .alert { display: none; }
- @media (max-width: 576px) {
- .timeline::after { display: none; }
- .trabajo { width: 100%; }
- .trabajo > div > div.fecha { margin-left: -2px !important; }
- .trabajo:nth-child(odd) > div > div.fecha { border-radius: 0 15px 15px 0; align-self: start; text-align: left; }
- .trabajo:nth-child(even) { left: 0; }
- }
- @media (max-width: 410px) {
- .trabajo > div > div.fecha { width: 75%; }
- }
|