aboutsummaryrefslogtreecommitdiff
path: root/assets/_sass/components/_post.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/_sass/components/_post.scss')
-rw-r--r--assets/_sass/components/_post.scss445
1 files changed, 0 insertions, 445 deletions
diff --git a/assets/_sass/components/_post.scss b/assets/_sass/components/_post.scss
deleted file mode 100644
index 5abeb15..0000000
--- a/assets/_sass/components/_post.scss
+++ /dev/null
@@ -1,445 +0,0 @@
-.post-lists-title {
- font-family: 'PT Sans', sans-serif;
- font-size: 24px;
- line-height: 42px;
- font-weight: 700;
- color: var(--grey-aaa);
- margin: 0 0 40px;
- text-align: center;
-
- span {
- color: var(--grey-222);
- }
-}
-
-.post-list {
- display: grid;
- gap: 100px 0;
-}
-
-.post {
- position: relative;
-
- .post-title {
- margin: 0 0 25px;
- font-family: 'PT Sans', sans-serif;
- font-size: 32px;
- line-height: 42px;
- font-weight: 700;
- color: var(--grey-222);
-
- a {
- color: var(--grey-222);
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- .post-author {
- position: absolute;
- top: 10px;
- left: -200px;
- width: 150px;
- text-align: right;
-
- .author-avatar {
- display: inline-block;
- width: 50px;
- height: 50px;
- border-radius: 50%;
- fill: currentColor;
- color: var(--grey-ddd);
- }
- .author-info {
- .author-name {
- display: block;
- margin: 10px 0 4px;
- font-family: 'PT Sans', sans-serif;
- font-size: 16px;
- line-height: 20px;
- font-weight: 700;
- color: var(--grey-222);
- text-transform: uppercase;
- }
- .author-title {
- display: block;
- font-size: 12px;
- line-height: 16px;
- font-style: italic;
- color: var(--grey-aaa);
- }
- }
-
- .post-meta {
- position: relative;
- margin: 15px 0 0;
- padding: 15px 0 0;
- line-height: 20px;
- font-size: 14px;
- color: var(--grey-aaa);
-
- &:before {
- position: absolute;
- top: 0;
- right: 0;
- width: 30px;
- height: 1px;
- background: var(--grey-ddd);
- content: "";
- }
-
- .post-date {
- position: relative;
- margin: 0 5px 0 0;
- padding: 0 10px 0 0;
-
- &:after {
- position: absolute;
- top: 50%;
- right: 0;
- width: 3px;
- height: 3px;
- border-radius: 50%;
- background: var(--grey-ccc);
- content: "";
- }
- }
- .post-categories {
- position: relative;
- display: flex;
- justify-content: flex-end;
- gap: 5px;
- margin: 8px 0 0;
-
- a {
- color: var(--main-color);
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
- }
-}
-
-.post-content {
- abbr {
- border-bottom: 1px dotted var(--grey-555);
- text-decoration: none;
- cursor: help;
- }
- code, kbd, pre {
- margin: 0;
- font-family: monospace;
- word-wrap: break-word;
- word-break: break-word;
- white-space: pre-wrap;
- }
- address, cite, var {
- font-style: italic;
- }
- blockquote {
- margin: 40px 0;
- padding: 0 0 0 20px;
- border-left: 3px solid var(--grey-555);
- color: var(--grey-222);
- font-weight: 700;
- }
- em, strong {
- color: var(--grey-222);
- }
-
- h1, h2, h3, h4, h5, h6 {
- font-family: 'PT Sans', sans-serif;
- margin: 40px 0 25px 0;
- color: var(--grey-222);
- }
- h4, h5, h6 {
- margin: 25px 0;
- }
- h1 {
- font-size: 28px;
- }
- h2 {
- font-size: 26px;
- }
- h3 {
- font-size: 22px;
- }
- h4 {
- font-size: 20px;
- }
- h5 {
- font-size: 18px;
- }
- h6 {
- font-size: 16px;
- }
-
- a {
- color: var(--main-color);
-
- &:hover {
- text-decoration: none;
- }
- }
- img {
- display: block;
- max-width: 100%;
- height: auto;
- }
-
- ul {
- list-style-type: disc;
- list-style-position: inside;
- }
-
- ul, ol {
- margin: 15px 0;
- padding: 0 0 0 20px;
-
- ul, ol {
- padding: 0 0 0 20px;
- }
- li {
- margin: 5px 0;
-
- & > code {
- font-size: 14px;
- padding: 3px 6px;
- margin: 0 4px;
- background: var(--grey-fa);
- border: 1px solid var(--grey-ccc);
- }
- }
- }
-
- dl {
- margin: 40px 0;
-
- dt {
- margin: 10px 0 0;
- font-weight: 700;
- }
- dd {
- margin: 5px 0;
-
- & > code {
- font-size: 14px;
- padding: 3px 6px;
- margin: 0 4px;
- background: var(--grey-fa);
- border: 1px solid var(--grey-ccc);
- }
- }
- }
- p {
- margin: 15px 0;
-
- & > code {
- font-size: 14px;
- padding: 3px 6px;
- margin: 0 4px;
- background: var(--grey-fa);
- border: 1px solid var(--grey-ccc);
- }
- }
-
- .alignleft {
- float: left;
- margin: 20px 30px 10px 0;
- }
- .alignright {
- float: right;
- margin: 20px 0 10px 20px;
- }
- .aligncenter {
- clear: both;
- margin: 0 auto 20px;
- }
-
- figcaption {
- font-size: 13px;
- font-style: italic;
- padding-top: 10px;
- }
-
- .iframe-wrapper {
- position: relative;
- padding-top: 56.25%;
-
- & > iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- }
-
- .read-more-button {
- font-size: 16px;
- color: var(--grey-555);
- }
-}
-
-.post-footer {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- gap: 0 20px;
- margin: 50px 0 0;
-
- .post-tags {
- display: flex;
- flex-flow: row wrap;
- flex: 9 1 auto;
- gap: 0 20px;
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- a {
- font-size: 14px;
- font-family: 'PT Sans', sans-serif;
- color: var(--grey-ccc);
- text-decoration: none;
- transition: all .15s ease;
- &:hover {
- color: var(--grey-555);
- }
- }
- }
- }
- .post-share {
- position: relative;
- flex: 0 0 auto;
- border: 1px solid var(--grey-ddd);
- overflow: hidden;
-
- &:hover {
- & > span {
- margin-left: -100%;
- }
- & > ul {
- left: 0;
- }
- }
- span {
- display: block;
- width: 100%;
- padding: 0 15px;
- font-family: 'PT Sans', sans-serif;
- font-size: 12px;
- text-transform: uppercase;
- text-align: center;
- letter-spacing: .1em;
- color: var(--grey-aaa);
- cursor: pointer;
- transition: margin .2s ease;
- }
- ul {
- position: absolute;
- top: 0;
- left: 100%;
- width: 100%;
- height: 100%;
- display: flex;
- list-style: none;
- margin: 0;
- padding: 0;
- transition: left .2s ease;
-
- li {
- flex: 1 0 auto;
- cursor: pointer;
-
- &:last-child {
- border-left: 1px solid var(--grey-ddd);
- }
- a {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- color: var(--grey-ccc);
- &:hover {
- background: var(--grey-eee);
- }
- svg {
- fill: currentColor;
- }
- }
- }
- }
- }
- }
- .post-comments {
- position: relative;
- margin: 40px 0 0;
- padding: 20px 0 0;
- border-top: 1px solid var(--grey-ddd);
- }
-}
-
-
-@media screen and (max-width: 960px) {
- .post {
- .post-title {
- margin: 0 0 15px;
- }
- .post-author {
- display: flex;
- align-items: center;
- flex-flow: row wrap;
- gap: 15px;
- position: static;
- width: 100%;
- margin: 0 0 20px;
- text-align: left;
- .author-avatar {
- width: 36px;
- height: 36px;
- }
- .author-info {
- .author-name {
- margin: 0;
- color: var(--grey-555);
- text-transform: initial;
- }
- .author-title { display: none; }
- }
- .post-meta {
- display: flex;
- flex-flow: row wrap;
- margin: 0;
- margin-left: auto;
- padding: 0;
-
- &:before {
- content: none;
- }
- .post-categories {
- margin: 0 0 0 5px;
- padding: 0 0 0 10px;
-
- &:before {
- position: absolute;
- top: 50%;
- left: 0;
- width: 3px;
- height: 3px;
- border-radius: 50%;
- background: var(--grey-ccc);
- content: "";
- }
- }
- }
- }
- }
-}
generated by cgit v1.2.3 (git 2.26.2) at 2026-07-18 04:11:33 +0000