| | |
| | | opacity: 0.3; |
| | | transition: opacity 0.3s ease; |
| | | color: var(--secondary); |
| | | |
| | | } |
| | | |
| | | p, ul, text { |
| | |
| | | } |
| | | |
| | | img { |
| | | width: 100%; |
| | | max-width: 100%; |
| | | border-radius: 3px; |
| | | margin: 1em 0; |
| | | } |
| | |
| | | opacity: 0.7; |
| | | } |
| | | |
| | | & > .tags { |
| | | list-style: none; |
| | | padding-left: 0; |
| | | |
| | | & .meta { |
| | | & > h1 { |
| | | margin: 0; |
| | | } |
| | | & > p { |
| | | margin: 0; |
| | | } |
| | | } |
| | | |
| | | & > li { |
| | | display: inline-block; |
| | | } |
| | | & > li > a { |
| | | border-radius: 8px; |
| | | border: var(--outlinegray) 1px solid; |
| | | padding: 0.2em 0.5em; |
| | | &::before { |
| | | content: "#"; |
| | | margin-right: 0.3em; |
| | | color: var(--outlinegray); |
| | | } |
| | | } |
| | | } |
| | | |
| | | & a { |
| | | font-family: Source Sans Pro; |
| | | font-weight: 600; |
| | |
| | | } |
| | | } |
| | | |
| | | .tags { |
| | | list-style: none; |
| | | padding-left: 0; |
| | | |
| | | & .meta { |
| | | & > h1 { |
| | | margin: 0; |
| | | } |
| | | & > p { |
| | | margin: 0; |
| | | } |
| | | } |
| | | |
| | | & > li { |
| | | display: inline-block; |
| | | margin: 0.4em 0; |
| | | } |
| | | |
| | | & > li > a { |
| | | border-radius: 8px; |
| | | border: var(--outlinegray) 1px solid; |
| | | padding: 0.2em 0.5em; |
| | | &::before { |
| | | content: "#"; |
| | | margin-right: 0.3em; |
| | | color: var(--outlinegray); |
| | | } |
| | | } |
| | | } |
| | | |
| | | .backlinks a { |
| | | font-weight: 600; |
| | | font-size: 0.9rem; |
| | |
| | | flex: 1 1 auto; |
| | | } |
| | | |
| | | & > svg { |
| | | #search-icon { |
| | | background-color: var(--lightgray); |
| | | border-radius: 4px; |
| | | height: 2em; |
| | | display: flex; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | & > p { |
| | | display: inline; |
| | | padding: 0 0.5em 0 1em; |
| | | } |
| | | } |
| | | |
| | | & svg { |
| | | cursor: pointer; |
| | | width: 18px; |
| | | min-width: 18px; |
| | | margin: 0 1em; |
| | | margin: 0 0.5em; |
| | | |
| | | &:hover .search-path { |
| | | stroke: var(--tertiary); |
| | |
| | | } |
| | | |
| | | & > #results-container { |
| | | & > .result-card { |
| | | & .result-card { |
| | | padding: 1em; |
| | | cursor: pointer; |
| | | transition: background 0.2s ease; |
| | |
| | | & > h3, & > p { |
| | | margin: 0; |
| | | } |
| | | |
| | | & .search-highlight { |
| | | background-color: #afbfc966; |
| | | padding: 0.05em 0.2em; |
| | | border-radius: 3px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .search-highlight { |
| | | background-color: #afbfc966; |
| | | padding: 0.05em 0.2em; |
| | | border-radius: 3px; |
| | | } |
| | | |
| | | .section-ul { |
| | | list-style: none; |
| | | padding-left: 0; |
| | |
| | | 1% { |
| | | display: inline-block; |
| | | opacity: 0; |
| | | transform: translate(-50%, 40%); |
| | | } |
| | | 100% { |
| | | opacity: 1; |
| | | visibility: visible; |
| | | transform: translate(-50%, 20%); |
| | | } |
| | | } |
| | | |
| | |
| | | display: none; |
| | | background-color: var(--light); |
| | | padding: 1em; |
| | | margin: 1em; |
| | | border: 1px solid var(--outlinegray); |
| | | border-radius: 5px; |
| | | transform: translate(-50%, 40%); |
| | | pointer-events: none; |
| | | transition: opacity 0.2s ease, transform 0.2s ease; |
| | | user-select: none; |
| | |
| | | &.visible { |
| | | opacity: 1; |
| | | visibility: visible; |
| | | transform: translate(-50%, 20%); |
| | | display: inline-block; |
| | | animation: dropin 0.2s ease; |
| | | } |
| | |
| | | font-size: 0.8rem; |
| | | } |
| | | |
| | | & > p { |
| | | & > p, & > a { |
| | | margin: 0; |
| | | font-weight: 400; |
| | | user-select: none; |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | #contact_buttons ul { |
| | | list-style-type: none; |
| | | |
| | |
| | | padding: 0 1em; |
| | | } |
| | | } |
| | | |