Skip to content

Commit

Permalink
chore:improve responsive support
Browse files Browse the repository at this point in the history
  • Loading branch information
bigfa committed Jan 1, 2025
1 parent 66b9c4a commit 0743091
Show file tree
Hide file tree
Showing 39 changed files with 786 additions and 757 deletions.
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ latest version : `0.0.14`
### 0.0.14

- add image cdn support
- fixed adjcent post cover alt error
- improve responsive support
- add search icon

### 0.0.13

Expand Down
3 changes: 3 additions & 0 deletions README_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
### 0.0.14

- 图片 CDN 支持
- 修复上下文图片描述错误的问题
- 提升响应式支持
- 增加搜索图标

### 0.0.13

Expand Down
2 changes: 1 addition & 1 deletion author.php
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div class="post--list">
<?php if (have_posts()) : the_post(); ?>
<?php if (get_the_author_meta('description')) : ?>
<header class="archive-header">
<header class="term--header">
<div class="author--avatar">
<?php echo get_avatar(get_the_author_meta('user_email')); ?>
</div>
Expand Down
2 changes: 1 addition & 1 deletion build/css/misc.css

Large diffs are not rendered by default.

24 changes: 12 additions & 12 deletions build/js/ts.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,6 @@ var __extends = (this && this.__extends) || (function () {
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
if (document.querySelector('.nav--clicker')) {
var footerLogo = document.querySelector('.nav--clicker');
if (footerLogo) {
footerLogo.addEventListener('click', function () {
var body = document.querySelector('body');
if (body) {
body.classList.toggle('is-readingMode');
}
});
}
}
var heraBase = /** @class */ (function () {
function heraBase() {
this.is_single = false;
Expand All @@ -50,6 +39,17 @@ var heraBase = /** @class */ (function () {
//@ts-ignore
this.VERSION = obvInit.version;
console.log('version', this.VERSION);
if (document.querySelector('.nav--clicker')) {
var footerLogo = document.querySelector('.nav--clicker');
if (footerLogo) {
footerLogo.addEventListener('click', function () {
var body = document.querySelector('body');
if (body) {
body.classList.toggle('is-readingMode');
}
});
}
}
}
heraBase.prototype.getCookie = function (t) {
if (0 < document.cookie.length) {
Expand Down Expand Up @@ -261,7 +261,7 @@ var heraComment = /** @class */ (function (_super) {
}
var a = document.getElementById('cancel-comment-reply-link'), i = document.getElementById('respond'), n = document.getElementById('wp-temp-form-div');
var comment = data.data;
var html = "<li class=\"comment\" id=\"comment-".concat(comment.comment_ID, "\">\n <div class=\"comment-body comment-body__fresh\">\n <footer class=\"comment-meta\">\n <div class=\"comment--avatar\">\n <img alt=\"\" src=\"").concat(comment.author_avatar_urls, "\" class=\"avatar\" height=\"42\" width=\"42\" />\n </div>\n <div class=\"comment--meta\">\n <div class=\"comment--author\">").concat(comment.comment_author, "<span class=\"dot\"></span>\n <time>\u521A\u521A</time>\n </div>\n </div>\n </footer>\n <div class=\"comment-content\">\n ").concat(comment.comment_content, "\n </div>\n </div>\n </li>"); // @ts-ignore
var html = "<li class=\"comment\" id=\"comment-".concat(comment.comment_ID, "\">\n <div class=\"comment-body comment-body__fresh\">\n <footer class=\"comment-meta\">\n <div class=\"comment--avatar\">\n <img alt=\"\" src=\"").concat(comment.author_avatar_urls, "\" class=\"avatar\" height=\"42\" width=\"42\" />\n </div>\n <div class=\"comment--meta\">\n <div class=\"comment--author\">").concat(comment.comment_author, "\n <time class=\"comment--time\">\u521A\u521A</time>\n </div>\n </div>\n </footer>\n <div class=\"comment-content\">\n ").concat(comment.comment_content, "\n </div>\n </div>\n </li>"); // @ts-ignore
var parent_id = (_a = document.querySelector('#comment_parent')) === null || _a === void 0 ? void 0 : _a.value;
// @ts-ignore
(a.style.display = 'none'), // @ts-ignore
Expand Down
10 changes: 5 additions & 5 deletions category-travel.php
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@
<?php get_template_part('template-parts/search-bar'); ?>

<div class="articleContainer">
<header class="archive-header">
<header class="term--header">
<?php if (get_term_meta(get_queried_object_id(), '_thumb', true)) : ?>
<img src="<?php echo get_term_meta(get_queried_object_id(), '_thumb', true); ?>" alt="<?php single_term_title('', true); ?>" class="archive-header-image">
<img src="<?php echo get_term_meta(get_queried_object_id(), '_thumb', true); ?>" alt="<?php single_term_title('', true); ?>" class="term--image">
<?php endif; ?>
<div class="archive-header-content">
<h1 class="archive-title"><?php single_term_title('', true); ?></h1>
<?php the_archive_description('<div class="taxonomy-description">', '</div>'); ?>
<div class="term--header__content">
<h1 class="term--title"><?php single_term_title('', true); ?></h1>
<?php the_archive_description('<div class="term--description">', '</div>'); ?>
</div>
</header>
<?php if (have_posts()) : ?>
Expand Down
10 changes: 5 additions & 5 deletions category.php
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@
get_header(); ?>
<?php get_template_part('template-parts/search-bar'); ?>
<div class="post--list">
<header class="archive-header">
<header class="term--header">
<?php if (get_term_meta(get_queried_object_id(), '_thumb', true)) : ?>
<img src="<?php echo get_term_meta(get_queried_object_id(), '_thumb', true); ?>" alt="<?php single_term_title('', true); ?>" class="archive-header-image">
<img src="<?php echo get_term_meta(get_queried_object_id(), '_thumb', true); ?>" alt="<?php single_term_title('', true); ?>" class="term--image">
<?php endif; ?>
<div class="archive-header-content">
<h1 class="archive-title"><?php single_term_title('', true); ?></h1>
<?php the_archive_description('<div class="taxonomy-description">', '</div>'); ?>
<div class="term--header__content">
<h1 class="term--title"><?php single_term_title('', true); ?></h1>
<?php the_archive_description('<div class="term--description">', '</div>'); ?>
</div>
</header>
<?php if (have_posts()) : ?>
Expand Down
6 changes: 3 additions & 3 deletions page.php
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
<div class="articleContainer">
<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post" itemscope="itemscope" itemtype="http://schema.org/Article">
<header class="post--header">
<h2 class="post--headline" itemprop="headline"><?php the_title(); ?></h2>
<article class="article" itemscope="itemscope" itemtype="http://schema.org/Article">
<header class="article--header">
<h2 class="article--headline" itemprop="headline"><?php the_title(); ?></h2>
</header>
<div class="grap" itemprop="articleBody">
<?php the_content(); ?>
Expand Down
7 changes: 7 additions & 0 deletions scss/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,15 @@
@use 'components/zoom';
@use 'components/comment';
@use 'components/footer';
@use 'components/block';
@use 'components/card';
@use 'components/navigation';
@use 'components/author';
@use 'components/audio';

@use 'templates/map';
@use 'templates/term';
@use 'templates/links';
@use 'templates/article';
@use 'templates/page';
@use 'templates/archive';
8 changes: 8 additions & 0 deletions scss/base/_basic.scss
Original file line number Diff line number Diff line change
Expand Up @@ -141,3 +141,11 @@ textarea {
.w-full {
width: 100%;
}

.sep {
&::before {
content: '·';
margin-left: 5px;
margin-right: 5px;
}
}
2 changes: 1 addition & 1 deletion scss/base/_grap.scss
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@
}

@media (max-width: 820px) {
.graph {
.grap {
blockquote {
margin-left: 0;
margin-right: 0;
Expand Down
14 changes: 13 additions & 1 deletion scss/base/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,13 @@
}

.content {
padding: 30px 0 0 0;
padding: 30px 0 5px 0;
flex: 1 1 auto;
min-height: 100vh;
background-color: #fff;
margin: 15px;
border-radius: 10px;
box-shadow: -1px 0 1px -2px rgba(0, 0, 0, 0.9);
}

.post--list {
Expand All @@ -29,6 +32,8 @@

.content {
padding-top: 0;
margin: 0;
border-radius: 0;
}
}

Expand All @@ -41,6 +46,13 @@
max-width: var(--hera-article-width);
margin: 0 auto;
width: 92%;
padding-top: 15px;
}

@media (max-width: 1280px) {
.articleContainer {
padding-top: 0;
}
}

.doubanContainer {
Expand Down
4 changes: 2 additions & 2 deletions scss/base/_var.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
linear-gradient(0deg, #a69a90 0%, #a69a90 100%),
linear-gradient(0deg, #efe9e1 0%, #efe9e1 100%), #f5f5f5;

--hera-column-width: 720px;
--hera-article-width: 820px;
--hera-column-width: 742px;
--hera-article-width: 828px;
--hera-header-width: 25%;

--hera-basic-font-size: 16px;
Expand Down
Empty file added scss/components/_audio.scss
Empty file.
48 changes: 48 additions & 0 deletions scss/components/_author.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
.author--card {
display: flex;
align-items: center;
padding: 30px 0;
border-top: 1px solid #f2f2f2;
margin-top: 20px;
.avatar {
border-radius: 100%;
margin-right: 20px;
}
.author--name {
font-weight: bold;
font-size: 18px;
}

.author--description {
font-size: 14px;
color: var(--hera-text-gray);
}

.author--sns {
margin-top: 12px;
display: flex;
align-items: center;
a {
margin: 0 10px 0 0;
&:last-child {
margin-right: 0;
}
}
svg {
fill: var(--hera-text-color);
&:hover {
fill: var(--hera-hover-color);
}
width: 24px;
height: 24px;
&.sns {
fill: none;
stroke: var(--hera-text-color);
&:hover {
stroke: var(--hera-hover-color);
fill: none;
}
}
}
}
}
117 changes: 117 additions & 0 deletions scss/components/_block.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
.block {
&--list {
padding-top: 25px;
}

&--item {
padding: 25px 0;
position: relative;

&__status {
background-color: #f8f8f8;
border-radius: 10px;
padding: 25px;
margin-top: 15px;
margin-bottom: 15px;
}
}

&--snippet {
font-size: 15px;
line-height: 1.6;
color: var(--hera-text-gray);
max-height: 4.8em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

&--title {
margin: 0 0 10px;
line-height: 1.2;
font-size: 22px;
font-weight: 900;
&:hover {
color: var(--hera-hover-color);
}
}

&--cover {
flex: 0 0 auto;
margin-left: 15px;
width: var(--hera-thumbnail-width);
img {
width: var(--hera-thumbnail-width);
height: var(--hera-thumbnail-height);
border-radius: 4px;
object-fit: cover;
}
}

&--addon {
display: flex;
align-items: flex-start;

.meta {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
// align-items: center;
}

&--meta {
margin: 0;
margin-top: 5px;
display: flex;
font-size: var(--hera-font-size-smallest);
color: var(--hera-text-gray-lightest);
a {
&:hover {
text-decoration: underline;
color: var(--hera-text-color);
}
}
.status--link {
margin-left: auto;
&:hover {
svg {
fill: var(--hera-hover-color);
}
}
}
}
}

@media screen and (max-width: 768px) {
.block {
&--item {
padding: 12px 0;

&__status {
padding: 12px;
}
}

&--title {
font-size: 18px;
}

&--snippet {
font-size: 13px;
}

&--addon {
}

&--cover {
margin-left: 10px;
--hera-thumbnail-width: 72px;
img {
--hera-thumbnail-height: 72px;
}
}
}
}
Loading

0 comments on commit 0743091

Please sign in to comment.