PaperModX/assets/css/extended/newsletter.scss

302 lines
6.5 KiB
SCSS
Raw Normal View History

/*
color candidates:
#CB3A56 茜色
#F05654 銀紅
#F20C00 石榴紅
#FF2D51 火紅
*/
2022-09-07 16:31:53 +01:00
$medium: 960px;
$small: 500px;
body.type-newsletter {
--signature: #CB3A56;
--signature-bg: rgba(203, 58, 87, 0.239);
--signature-bg-dim: rgba(203, 58, 87, 0.147);
--main-border: 5px solid var(--signature);
--icon-length: 50px;
2022-09-07 16:31:53 +01:00
--icon-font-size: 32px;
2022-09-07 15:51:34 +01:00
// override theme-vars
--link-hover-color: var(--signature);
--link-hover-underline-color: var(--signature);
--link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
--link-background-color: var(--signature-bg-dim);
2022-09-07 15:51:34 +01:00
2022-09-07 16:31:53 +01:00
@media screen and (max-width: $small) {
--icon-length: 40px;
--icon-font-size: 24px;
}
2022-09-07 15:51:34 +01:00
2022-09-07 19:35:11 +01:00
/* a links in section/archives page content and regular page post-content */
&.kind-section .main .content a,
2022-09-07 19:35:11 +01:00
&.layout-archives .main .content a,
&.kind-page .post-content a {
font-weight: 500;
color: var(--primary);
box-shadow: var(--link-underline-shadow);
// transition: var(--link-transition);
&:hover {
color: var(--link-hover-color);
box-shadow: var(--link-hover-underline-shadow);
2022-09-07 15:51:34 +01:00
}
}
2022-09-07 09:49:18 +01:00
/* shared */
.sub-form {
display: flex;
flex-direction: column;
margin: calc(var(--content-gap) * 1.5) 0;
form {
display: flex;
line-height: 1.2em;
2022-09-07 16:31:53 +01:00
flex-wrap: wrap;
2022-09-07 09:49:18 +01:00
}
input {
border: 3px solid var(--signature-bg-dim);
color: var(--secondary);
border-radius: 0px;
appearance: none;
outline: none;
background-color: var(--theme);
2022-09-07 16:31:53 +01:00
flex-grow: 1;
2022-09-07 09:49:18 +01:00
padding: 9px 15px;
transition: var(--link-transition);
2022-09-07 09:49:18 +01:00
&:focus {
color: var(--primary);
border-color: var(--signature);
}
}
2023-01-17 16:36:09 +00:00
button, input[type=submit] {
2022-09-07 09:49:18 +01:00
display: block;
background-color: var(--signature);
color: var(--theme);
padding: 12px 15px;
margin-left: var(--content-gap);
2022-09-07 09:49:18 +01:00
white-space: nowrap;
}
}
2022-09-07 16:31:53 +01:00
@media screen and (max-width: $small) {
.sub-form {
button {
margin-left: 0;
margin-top: calc(var(--content-gap)/2);
flex-grow: 1;
}
}
}
}
2022-09-07 19:35:11 +01:00
body.type-newsletter.kind-section,
body.type-newsletter.layout-archives {
/* section/archives page */
.main {
border: var(--main-border);
background-color: var(--theme);
margin-top: var(--content-gap);
2022-09-08 14:29:29 +01:00
padding-top: 0;
2022-09-07 15:29:52 +01:00
padding-bottom: var(--icon-length);
min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--content-gap));
2022-09-07 16:31:53 +01:00
max-width: var(--nav-width);
@media screen and (max-width: $medium) {
margin-left: var(--gap);
margin-right: var(--gap);
}
}
.main-icon {
position: absolute;
left: 0; top: 0;
width: var(--icon-length);
height: var(--icon-length);
2022-09-07 16:31:53 +01:00
line-height: calc(var(--icon-length) - 3px);
border-right: var(--main-border);
border-bottom: var(--main-border);
background-color: var(--signature);
color: var(--theme);
2022-09-07 16:31:53 +01:00
font-size: var(--icon-font-size);
text-align: center;
}
2022-09-07 08:37:31 +01:00
.main {
.content {
max-width: calc(var(--post-width));
2022-09-08 14:29:29 +01:00
margin: var(--icon-length) auto 0;
}
2022-09-07 15:29:52 +01:00
.first-entry {
margin-bottom: 0;
2022-09-07 19:35:11 +01:00
}
2022-09-07 16:31:53 +01:00
2022-09-07 19:35:11 +01:00
h1 {
text-align: center;
2022-09-08 14:29:29 +01:00
margin-bottom: 10px;
2022-09-07 19:35:11 +01:00
}
.subtitle {
text-align: center;
color: var(--secondary);
2022-09-08 14:29:29 +01:00
line-height: 1.2em;
margin-bottom: var(--content-gap);
2022-09-07 15:29:52 +01:00
}
2022-09-07 15:51:34 +01:00
h2 {
margin: 40px 0 20px;
}
2022-09-07 15:29:52 +01:00
.list {
display: flex;
flex-direction: column;
margin-bottom: var(--content-gap);
.item {
display: flex;
border-bottom: 1px solid var(--tertiary-bg);
padding: 8px 0;
.date, .issueno {
font-size: .9em;
color: var(--secondary);
}
.date {
width: 150px;
}
.title {
flex-grow: 1;
font-weight: 500;
a {
display: block;
width: 100%;
2022-09-07 15:51:34 +01:00
box-shadow: none;
2022-09-07 15:29:52 +01:00
}
2022-09-07 15:51:34 +01:00
a:hover {
2022-09-07 15:29:52 +01:00
color: var(--signature);
}
em {
color: var(--secondary);
font-style: normal;
font-size: .8em;
margin-inline-start: 1em;
vertical-align: top;
}
}
.issueno {
width: 50px;
text-align: right;
}
}
2022-09-07 08:37:31 +01:00
}
2022-09-07 16:31:53 +01:00
@media screen and (max-width: $small) {
.list {
.item {
flex-wrap: wrap;
.date {
flex-grow: 1;
order: 1;
}
.issueno {
order: 2;
}
.title {
order: 3;
flex-grow: 1;
}
}
}
}
2022-09-07 08:37:31 +01:00
}
}
2022-09-07 19:35:11 +01:00
/* regular page */
body.type-newsletter.kind-page {
.newsletter-brand {
--icon-length: 50px;
--padding: 15px;
display: flex;
background-color: var(--signature-bg-dim);
transition: var(--link-transition);
font-size: 32px;
2022-09-08 14:29:29 +01:00
margin-bottom: var(--content-gap);
line-height: var(--icon-length);
box-shadow: none; // reset
.icon, .name {
height: var(--icon-length);
}
.icon {
width: var(--icon-length);
color: var(--theme);
text-align: center;
background-color: var(--signature);
}
.name {
padding: 0 var(--padding);
font-weight: bolder;
color: var(--signature);
}
2022-09-07 08:37:31 +01:00
.remark {
color: var(--signature);
font-weight: 300;
transition: var(--link-transition);
}
.arrow {
margin-left: auto;
color: transparent;
display: flex;
align-items: center;
padding-right: var(--padding);
transition: var(--link-transition);
}
&:hover, &:active {
box-shadow: none; // reset
background-color: var(--signature-bg);
.arrow {
color: var(--signature);
}
2022-09-07 08:37:31 +01:00
.remark {
color: transparent;
}
}
}
@media screen and (max-width: $small) {
.newsletter-brand {
font-size: 24px;
.remark {
margin-left: auto;
padding-right: var(--padding);
}
.arrow {
display: none;
}
}
}
.post-title {
font-size: 36px;
}
.post-footer {
border-bottom-color: var(--signature);
}
2022-09-07 18:41:33 +01:00
.newsletter-sub {
2022-09-08 14:08:03 +01:00
margin-top: calc(var(--content-gap) * 1.5);
2022-09-07 18:41:33 +01:00
background-color: var(--signature-bg-dim);
2023-01-17 16:36:09 +00:00
padding: 1.5em 1.2em 1.2em;
2022-09-07 18:41:33 +01:00
.notice {
2023-01-17 16:36:09 +00:00
font-size: .9em;
2022-09-07 18:41:33 +01:00
color: var(--signature);
line-height: 1.6;
}
.sub-form {
margin: 1em 0;
input {
border-color: var(--signature-bg);
}
}
}
}