| | |
| | | margin: 0.5em 0; |
| | | } |
| | | |
| | | article a { |
| | | font-family: Source Sans Pro; |
| | | font-weight: 600; |
| | | .pagination { |
| | | list-style: none; |
| | | padding-left: 0; |
| | | display: flex; |
| | | margin-top: 2em; |
| | | gap: 1.5em; |
| | | justify-content: center; |
| | | |
| | | // internal link |
| | | &[href^="./"], &[href^="/"] { |
| | | text-decoration: none; |
| | | background-color: transparentize(#8f9fa9, 0.85); |
| | | padding: 0 0.1em; |
| | | margin: auto -0.1em; |
| | | border-radius: 3px; |
| | | & > li { |
| | | text-align: center; |
| | | display: inline-block; |
| | | |
| | | & a { |
| | | background-color: transparent !important; |
| | | } |
| | | |
| | | & a[href$="#"] { |
| | | opacity: 0.2; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .section { |
| | | & h3 > a { |
| | | font-weight: 700; |
| | | font-family: Inter; |
| | | margin: 0; |
| | | } |
| | | & p { |
| | | margin-top: 0; |
| | | } |
| | | } |
| | | |
| | | article { |
| | | & > .meta { |
| | | margin: -1.5em 0 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; |
| | | |
| | | &.internal-link { |
| | | text-decoration: none; |
| | | background-color: transparentize(#8f9fa9, 0.85); |
| | | padding: 0 0.1em; |
| | | margin: auto -0.1em; |
| | | border-radius: 3px; |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .page-end { |
| | | display: flex; |
| | | flex-direction: row; |
| | | gap: 2em; |
| | | |
| | | @media all and (max-width: 780px) { |
| | | flex-direction: column; |
| | |
| | | & > ul { |
| | | list-style: none; |
| | | padding-left: 0; |
| | | margin-right: 2em; |
| | | |
| | | & > li { |
| | | margin: 0.5em 0; |
| | |
| | | opacity: 0.6; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .popover { |
| | | z-index: 999; |
| | | position: absolute; |
| | | width: 15em; |
| | | display: inline; |
| | | background-color: var(--light); |
| | | padding: 1em; |
| | | border: 1px solid var(--outlinegray); |
| | | border-radius: 5px; |
| | | transform: translate(-50%, 40%); |
| | | opacity: 0; |
| | | pointer-events: none; |
| | | transition: opacity 0.2s ease, transform 0.2s ease; |
| | | transition-delay: 0.3s; |
| | | user-select: none; |
| | | |
| | | &.visible { |
| | | opacity: 1; |
| | | transform: translate(-50%, 20%); |
| | | } |
| | | |
| | | & > h3 { |
| | | margin: 0.5em 0; |
| | | } |
| | | |
| | | & > p { |
| | | margin: 0; |
| | | font-weight: 400; |
| | | } |
| | | } |