|
|
| Line 1: |
Line 1: |
| #home-nav {
| |
| margin-top: 1rem;
| |
| }
| |
| /* debug navpills */
| |
| .main-page-navigation > div.template-navpills {
| |
| position: relative;
| |
| }
| |
| .template-navpills {
| |
| display: grid;
| |
| gap: var(--space-xs);
| |
| grid-template-columns: repeat(8, minmax(128px, 1fr));
| |
| grid-auto-rows: 2rem;
| |
| font-size: var(--font-size-small);
| |
| }
| |
|
| |
|
| .navpill-placeholder {
| |
| /* empty cell */
| |
| }
| |
| .navpill-big {
| |
| grid-row: span 2;
| |
| justify-items: center;
| |
| }
| |
| .navpill-big > a {
| |
| text-align: center;
| |
| white-space: break-spaces;
| |
| }
| |
| .navpill-wide {
| |
| grid-column: span 2;
| |
| }
| |
| .navpill-wide > a {
| |
| text-align: center;
| |
| }
| |
|
| |
| .template-navpill {
| |
| position: relative;
| |
| /* No border radius, hard edged border */
| |
| border: 1px solid var(--color-base);
| |
| /* Original 'navpill' Rounded borders
| |
| border: 1px solid var(--border-color-base);
| |
| border-radius: var(--border-radius-medium);*/
| |
| font-weight: var(--font-weight-medium);
| |
| line-height: var(--line-height-xx-small);
| |
| overflow: hidden;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .template-navpill-background {
| |
| position: absolute;
| |
| inset: 0;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .template-navpill-background:after {
| |
| content: "";
| |
| position: absolute;
| |
| inset: 0;
| |
| background: linear-gradient(to right, #000, transparent);
| |
| transition: transform 250ms ease;
| |
| }
| |
|
| |
| .template-navpill-background img {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| transition: var(--transition-hover);
| |
| transition-property: transform;
| |
| }
| |
|
| |
| .template-navpill:hover .template-navpill-background::after {
| |
| transform: translateX(-100%);
| |
| }
| |
|
| |
| .template-navpill:hover .template-navpill-background img {
| |
| transform: scale(1.1);
| |
| }
| |
|
| |
| .template-navpill > a {
| |
| position: relative;
| |
| padding: 0 var(--space-md);
| |
| display: flex;
| |
| align-items: center;
| |
| color: var(--color-emphasized);
| |
| text-decoration: none;
| |
| height: 100%;
| |
| }
| |
|
| |
| .template-navpill > .template-navpill-background + a {
| |
| color: #fff;
| |
| text-shadow: -1px 0 0.2em #000, 0 1px 0.2em #000, 1px 0 0.2em #000,
| |
| 0 -1px 0.2em #000;
| |
| }
| |
|
| |
| .template-navpill:hover {
| |
| background: var(--background-color-button-quiet--hover);
| |
| }
| |
|
| |
| .template-navpill:active {
| |
| background: var(--background-color-button-quiet--active);
| |
| }
| |
| .main-page-navigation {
| |
| width: 100%;
| |
| display: flex;
| |
| flex-direction: row;
| |
| justify-content: center;
| |
| gap: 0.25rem;
| |
| max-width: 64rem;
| |
| align-self: center;
| |
| }
| |
|
| |
| /*
| |
| .main-page-navigation > div.template-navpills::before {
| |
| content: attr(data-attr);
| |
| background-color: none;
| |
| position: absolute;
| |
| top: -25px;
| |
| left: 50%;
| |
| transform: translateX(-50%);
| |
| font-size: 1rem;
| |
| font-weight: bold;
| |
| padding: 0rem 0.5rem;
| |
| white-space: nowrap;
| |
| }*/
| |
|
| |
| @media screen and (max-width: 900px) {
| |
| .main-page-navigation {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .main-page-navigation > .template-navpills {
| |
| }
| |
| }
| |
|
| |
| @media screen and (min-width: 901px) and (max-width: 1080px) {
| |
| .main-page-navigation {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .skill-info-table {
| |
| max-width: 100%;
| |
| }
| |
|
| |
| .main-page-navigation > .template-navpills {
| |
| }
| |
| .template-navpills {
| |
| grid-template-columns: repeat(4, minmax(120px, 1fr));
| |
| grid-auto-rows: 2.5rem;
| |
| }
| |
| .navpill-placeholder {
| |
| display: none;
| |
| }
| |
| }
| |
