change theme to buck
This commit is contained in:
thislight
parent
014b4f6dc7
commit
88da620079
99 changed files with 2197 additions and 38 deletions
106
themes/buck/src/styles/codehighlight/xcode.css
Normal file
106
themes/buck/src/styles/codehighlight/xcode.css
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
/*
|
||||
|
||||
XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>
|
||||
|
||||
Ported to Hexo highlight.js system by Rubicon <l1589002388@gmail.com>
|
||||
|
||||
*/
|
||||
|
||||
.highlight {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #fff;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Gray DOCTYPE selectors like WebKit */
|
||||
.code .xml .meta {
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
.code .comment,
|
||||
.code .quote {
|
||||
color: #007400;
|
||||
}
|
||||
|
||||
.code .tag,
|
||||
.code .attribute,
|
||||
.code .keyword,
|
||||
.code .selector-tag,
|
||||
.code .literal,
|
||||
.code .name {
|
||||
color: #aa0d91;
|
||||
}
|
||||
|
||||
.code .variable,
|
||||
.code .template-variable {
|
||||
color: #3F6E74;
|
||||
}
|
||||
|
||||
.code .code,
|
||||
.code .string,
|
||||
.code .meta-string {
|
||||
color: #c41a16;
|
||||
}
|
||||
|
||||
.code .regexp,
|
||||
.code .link {
|
||||
color: #0E0EFF;
|
||||
}
|
||||
|
||||
.code .title,
|
||||
.code .symbol,
|
||||
.code .bullet,
|
||||
.code .number {
|
||||
color: #1c00cf;
|
||||
}
|
||||
|
||||
.code .section,
|
||||
.code .meta {
|
||||
color: #643820;
|
||||
}
|
||||
|
||||
|
||||
.code .class .title,
|
||||
.code .type,
|
||||
.code .built_in,
|
||||
.code .builtin-name,
|
||||
.code .params {
|
||||
color: #5c2699;
|
||||
}
|
||||
|
||||
.code .attr {
|
||||
color: #836C28;
|
||||
}
|
||||
|
||||
.code .subst {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.code .formula {
|
||||
background-color: #eee;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.code .addition {
|
||||
background-color: #baeeba;
|
||||
}
|
||||
|
||||
.code .deletion {
|
||||
background-color: #ffc8bd;
|
||||
}
|
||||
|
||||
.code .selector-id,
|
||||
.code .selector-class {
|
||||
color: #9b703f;
|
||||
}
|
||||
|
||||
.code .doctag,
|
||||
.code .strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.code .emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
227
themes/buck/src/styles/content.css
Normal file
227
themes/buck/src/styles/content.css
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
@import "./codehighlight/xcode.css";
|
||||
|
||||
.content {
|
||||
line-height: 1.5;
|
||||
|
||||
>p {
|
||||
padding: 16px;
|
||||
|
||||
>img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
object-position: 50% 50%;
|
||||
min-height: 44px;
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
>a>img {
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
> :where(h1, h2, h3, h4, h5, h6) {
|
||||
margin-inline: 16px;
|
||||
hyphens: auto;
|
||||
text-wrap: wrap;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
>#more {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--palette-grey-200);
|
||||
}
|
||||
|
||||
> :where(ul, ol) {
|
||||
background-color: var(--palette-white);
|
||||
line-height: 1.5;
|
||||
|
||||
>li {
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color 220ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
border-top-color: var(--palette-grey-200);
|
||||
border-bottom-color: var(--palette-grey-400);
|
||||
|
||||
&+li {
|
||||
border-bottom-color: var(--palette-grey-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--palette-grey-300);
|
||||
margin-inline: 16px;
|
||||
}
|
||||
|
||||
> :where(h2, h3, h4, h5, h6) {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
max-width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.content > :where(table, .table-responsive > table) {
|
||||
background-color: var(--table-background-color);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
border: 1px solid var(--palette-grey-300);
|
||||
border-collapse: collapse;
|
||||
|
||||
> :where(thead, tbody) > tr {
|
||||
& > :first-child {
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
padding-inline-end: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
>thead {
|
||||
color: var(--table-header-color);
|
||||
|
||||
>tr {
|
||||
border-bottom: 1px solid var(--palette-grey-300);
|
||||
>th {
|
||||
padding-block: 15px;
|
||||
text-align: start;
|
||||
|
||||
&:hover, &.table-column-hover {
|
||||
color: var(--table-content-color);
|
||||
}
|
||||
|
||||
&[align="center"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&[align="right"] {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>tbody {
|
||||
color: var(--table-content-color);
|
||||
|
||||
>tr {
|
||||
>td {
|
||||
padding-block: 15px;
|
||||
text-align: start;
|
||||
|
||||
&[align="center"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&[align="right"] {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
&+& {
|
||||
border-top: 1px solid var(--palette-grey-300);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--palette-grey-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content figure {
|
||||
border-radius: 2px;
|
||||
|
||||
&.highlight {
|
||||
padding: 0 8px;
|
||||
outline: 1px solid var(--palette-grey-300);
|
||||
transition: box-shadow 220ms ease-in-out;
|
||||
line-height: 1.25;
|
||||
min-height: 44px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--box-shadow-4);
|
||||
}
|
||||
|
||||
.gutter {
|
||||
border-inline-end: 1px solid var(--palette-grey-200);
|
||||
margin-inline-end: 8px;
|
||||
|
||||
>pre {
|
||||
>.line {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
>br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
.line {
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid var(--palette-grey-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content kbd {
|
||||
padding: 6px;
|
||||
margin-inline: 2px;
|
||||
background-color: var(--palette-black);
|
||||
color: var(--palette-white);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.content dl {
|
||||
>dt {
|
||||
font: var(--typ-body2);
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
>dd {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.content blockquote {
|
||||
background-color: white;
|
||||
padding-left: 12px;
|
||||
margin-block: 16px;
|
||||
border: 1px solid var(--palette-grey-200);
|
||||
border-left: 4px solid var(--p-secondary);
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: 1px solid var(--palette-grey-400);
|
||||
}
|
||||
}
|
||||
|
||||
.content .video-container {
|
||||
width: 100%;
|
||||
border: 1px solid var(--palette-grey-200);
|
||||
|
||||
> iframe {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
256
themes/buck/src/styles/material.css
Normal file
256
themes/buck/src/styles/material.css
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
@import "./palette.css";
|
||||
@import "@fontsource/roboto/400.css";
|
||||
@import "@fontsource/roboto/100.css";
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-family-sans);
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-family-sans: Roboto, "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--p-primary: var(--palette-blue-500);
|
||||
--p-primary-fg: var(--palette-blue-500-fg);
|
||||
--p-secondary: var(--palette-pink-500);
|
||||
--p-secondary-fg: var(--palette-pink-500-fg);
|
||||
|
||||
--typ-r-display4: lighter 7rem / 7rem var(--font-family-sans);
|
||||
--typ-r-display3: normal 3.5rem / 3.5rem var(--font-family-sans);
|
||||
--typ-r-display2: normal 2.8125rem / 2.8125rem var(--font-family-sans);
|
||||
--typ-r-display1: normal 2.125rem / 2.125rem var(--font-family-sans);
|
||||
--typ-r-headline: bold 1.5rem / 1.5rem var(--font-family-sans);
|
||||
--typ-r-title: bold 1.25rem / 1.25rem var(--font-family-sans);
|
||||
--typ-r-subheading: normal 1rem / 1rem var(--font-family-sans);
|
||||
--typ-r-body2: bold 0.875rem / 0.875rem var(--font-family-sans);
|
||||
--typ-r-body1: normal 0.875rem / 0.875rem var(--font-family-sans);
|
||||
--typ-r-caption: normal 0.75rem / 0.75rem var(--font-family-sans);
|
||||
--typ-r-button: bold 0.875rem / 0.875rem var(--font-family-sans);
|
||||
|
||||
--typ-d-display4: var(--typ-r-display4);
|
||||
--typ-d-display3: var(--typ-r-display3);
|
||||
--typ-d-display2: var(--typ-r-display2);
|
||||
--typ-d-display1: var(--typ-r-display1);
|
||||
--typ-d-headline: var(--typ-r-headline);
|
||||
--typ-d-title: bold 1.3125rem / 1.3125rem var(--font-family-sans);
|
||||
--typ-d-subheading: normal 1.0625rem / 1.0625rem var(--font-family-sans);
|
||||
--typ-d-body2: bold 0.9375rem / 0.9375rem var(--font-family-sans);
|
||||
--typ-d-body1: normal 0.9375rem / 0.9375rem var(--font-family-sans);
|
||||
--typ-d-caption: normal 0.8125rem / 0.8125rem var(--font-family-sans);
|
||||
--typ-d-button: bold 0.9375rem / 0.9375rem var(--font-family-sans);
|
||||
|
||||
& {
|
||||
--typ-display4: var(--typ-r-display4);
|
||||
--typ-display3: var(--typ-r-display3);
|
||||
--typ-display2: var(--typ-r-display2);
|
||||
--typ-display1: var(--typ-r-display1);
|
||||
--typ-headline: var(--typ-r-display1);
|
||||
--typ-title: var(--typ-r-title);
|
||||
--typ-subheading: var(--typ-r-subheading);
|
||||
--typ-body2: var(--typ-r-body2);
|
||||
--typ-body1: var(--typ-r-body1);
|
||||
--typ-caption: var(--typ-r-caption);
|
||||
--typ-button: var(--typ-r-button);
|
||||
}
|
||||
|
||||
&[lang~="zh"],
|
||||
&[lang~="ja"],
|
||||
&[lang~="kr"] {
|
||||
--typ-title: var(--typ-d-headline);
|
||||
--typ-subheading: var(--typ-d-subheading);
|
||||
--typ-body2: var(--typ-d-body2);
|
||||
--typ-body1: var(--typ-d-body1);
|
||||
--typ-caption: var(--typ-d-caption);
|
||||
--typ-button: var(--typ-d-button);
|
||||
}
|
||||
|
||||
--elevation-0: 0px;
|
||||
--elevation-1: 1px;
|
||||
--elevation-2: 2px;
|
||||
--elevation-3: 3px;
|
||||
--elevation-4: 4px;
|
||||
--elevation-5: 6px;
|
||||
--elevation-6: 8px;
|
||||
--elevation-7: 9px;
|
||||
--elevation-8: 12px;
|
||||
--elevation-9: 16px;
|
||||
--elevation-10: 24px;
|
||||
|
||||
--box-shadow-2: 0 var(--elevation-2) var(--elevation-2) rgba(0, 0, 0, 0.15);
|
||||
--box-shadow-4: 0 var(--elevation-4) var(--elevation-4) rgba(0, 0, 0, 0.15);
|
||||
--box-shadow-6: 0 var(--elevation-6) var(--elevation-6) rgba(0, 0, 0, 0.15);
|
||||
--box-shadow-9: 0 var(--elevation-9) var(--elevation-9) rgba(0, 0, 0, 0.15);
|
||||
|
||||
--link-bg: var(--palette-blue-50);
|
||||
--link-color: var(--palette-blue-50-fg);
|
||||
--link-bg-hover: var(--palette-blue-100);
|
||||
--link-color-hover: var(--palette-blue-100-fg);
|
||||
}
|
||||
|
||||
table {
|
||||
--table-header-color: rgba(0, 0, 0, 0.54);
|
||||
--table-content-color: rgba(0, 0, 0, 0.87);
|
||||
--table-background-color: white;
|
||||
}
|
||||
|
||||
:root {
|
||||
font: var(--typ-body1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font: var(--typ-display4);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: var(--typ-display3);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: var(--typ-display2);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font: var(--typ-display1);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font: var(--typ-headline);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font: var(--typ-title);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
background-color: var(--p-primary);
|
||||
box-shadow: var(--box-shadow-4);
|
||||
}
|
||||
|
||||
nav.site {
|
||||
--nav-site-height: 4rem;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
|
||||
min-height: var(--nav-site-height);
|
||||
color: var(--palette-white);
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding-inline: 8px;
|
||||
|
||||
>* {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
nav.site {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
nav.site {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
nav.site a {
|
||||
font: var(--typ-button);
|
||||
display: inline-block;
|
||||
line-height: var(--nav-site-height);
|
||||
padding: 0 16px;
|
||||
transition: background-color .2s ease-in-out;
|
||||
background-color: transparent;
|
||||
color: var(--palette-white);
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
:where(a):not([href^="#"]) {
|
||||
display: inline-block;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
background-color: var(--link-bg);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
transition: background-color .2s ease-in-out, color .2s ease-in-out;
|
||||
min-width: 44px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--link-bg-hover);
|
||||
color: var(--link-color-hover);
|
||||
}
|
||||
|
||||
&[target="_blank"]::after {
|
||||
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>open-in-new</title><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>');
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
nav.site .textinput-lg {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
vertical-align: middle;
|
||||
flex-grow: 1;
|
||||
transition: background-color .2s ease-in-out, width .2s ease-in-out, box-shadow .2s ease-in-out;
|
||||
padding-inline: 1rem;
|
||||
|
||||
&::placeholder {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: white;
|
||||
box-shadow: var(--box-shadow-9);
|
||||
|
||||
&::placeholder {
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
nav.site .textinput-lg {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
nav.site > *:first-child > *:first-child {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
nav.site :where(h1, h2, h3, h4, h5, h6) {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: var(--nav-site-height);
|
||||
}
|
||||
|
||||
.circle {
|
||||
border-radius: 50% 50%;
|
||||
}
|
||||
3
themes/buck/src/styles/materialdesignicons.min.css
vendored
Normal file
3
themes/buck/src/styles/materialdesignicons.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
30
themes/buck/src/styles/pager.css
Normal file
30
themes/buck/src/styles/pager.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
|
||||
.pager {
|
||||
display: grid;
|
||||
width: fit-content;
|
||||
grid-auto-columns: minmax(44px, 1fr);
|
||||
grid-auto-flow: column;
|
||||
gap: 16px;
|
||||
row-gap: 8px;
|
||||
font-size: 1.125rem;
|
||||
|
||||
> :is(.extend, .page-number) {
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> .extend > .mdi {
|
||||
font-size: 1.375em;
|
||||
}
|
||||
|
||||
> .extend {
|
||||
background-color: var(--p-secondary);
|
||||
color: var(--p-secondary-fg);
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
filter: saturate(0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
51
themes/buck/src/styles/palette.css
Normal file
51
themes/buck/src/styles/palette.css
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
:root {
|
||||
--palette-black: #000000;
|
||||
--palette-white: #ffffff;
|
||||
|
||||
--palette-blue-50: #e3f2fd;
|
||||
--palette-blue-50-fg: var(--palette-black);
|
||||
--palette-blue-100: #bbdefb;
|
||||
--palette-blue-100-fg: var(--palette-black);
|
||||
--palette-blue-200: #90caf9;
|
||||
--palette-blue-200-fg: var(--palette-black);
|
||||
--palette-blue-400: #42a5f5;
|
||||
--palette-blue-400-fg: var(--palette-black);
|
||||
--palette-blue-500: #2196f3;
|
||||
--palette-blue-500-fg: var(--palette-black);
|
||||
--palette-blue-600: #1e88e5;
|
||||
--palette-blue-600-fg: var(--palette-white);
|
||||
--palette-blue-700: #1976d2;
|
||||
--palette-blue-700-fg: var(--palette-white);
|
||||
--palette-blue-800: #1565c0;
|
||||
--palette-blue-800-fg: var(--palette-white);
|
||||
--palette-blue-900: #0d47a1;
|
||||
--palette-blue-900-fg: var(--palette-white);
|
||||
--palette-blue-a100: #82b1ff;
|
||||
--palette-blue-a100-fg: var(--palette-black);
|
||||
--palette-blue-a200: #448aff;
|
||||
--palette-blue-a200-fg: var(--palette-white);
|
||||
--palette-blue-a400: #2979ff;
|
||||
--palette-blue-a400-fg: var(--palette-white);
|
||||
--palette-blue-a700: #2962ff;
|
||||
--palette-blue-a700-fg: var(--palette-white);
|
||||
|
||||
--palette-grey-50: #fafafa;
|
||||
--palette-grey-50-fg: var(--palette-black);
|
||||
--palette-grey-100: #f5f5f5;
|
||||
--palette-grey-100-fg: var(--palette-black);
|
||||
--palette-grey-200: #eeeeee;
|
||||
--palette-grey-200-fg: var(--palette-black);
|
||||
--palette-grey-300: #e0e0e0;
|
||||
--palette-grey-300-fg: var(--palette-black);
|
||||
--palette-grey-400: #bdbdbd;
|
||||
--palette-grey-400-fg: var(--palette-black);
|
||||
--palette-grey-500: #9e9e9e;
|
||||
--palette-grey-500-fg: var(--palette-black);
|
||||
--palette-grey-600: #757575;
|
||||
--palette-grey-600-fg: white;
|
||||
--palette-grey-700: #616161;
|
||||
--palette-grey-700-fg: white;
|
||||
|
||||
--palette-pink-500: #e91e63;
|
||||
--palette-pink-500-fg: var(--palette-white);
|
||||
}
|
||||
81
themes/buck/src/styles/posts.css
Normal file
81
themes/buck/src/styles/posts.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
@import "./material.css";
|
||||
|
||||
:is(ul, ol).post-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-item {
|
||||
display: block;
|
||||
padding: 12px 0;
|
||||
> *:not(:where(figure)) {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
border: 1px solid transparent;
|
||||
border-top-color: var(--palette-grey-300);
|
||||
transition: border-color 220ms ease-in-out;
|
||||
|
||||
&:hover, &:focus-within {
|
||||
border-top-color: var(--palette-grey-400);
|
||||
border-left-color: var(--palette-grey-400);
|
||||
border-right-color: var(--palette-grey-400);
|
||||
|
||||
+ .post-item {
|
||||
border-top-color: var(--palette-grey-400);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-color: var(--palette-grey-400);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-color: var(--palette-grey-400);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
& p {
|
||||
line-height: 1.375;
|
||||
|
||||
& > a {
|
||||
line-height: 1.175;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.post-item-title {
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
gap: 8px;
|
||||
grid-template-columns: auto auto;
|
||||
|
||||
@media (width <= 400px) {
|
||||
& {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& > time {
|
||||
color: var(--palette-grey-700);
|
||||
}
|
||||
}
|
||||
0
themes/buck/src/styles/shared.css
Normal file
0
themes/buck/src/styles/shared.css
Normal file
Loading…
Add table
Add a link
Reference in a new issue