malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Improve CSS

Browse Source 
Some reductions, more BEM.
This commit is contained in:
Tetrakern 2023-07-31 00:05:38 +02:00
parent bf38337635
commit 9b39cc54e8
16 changed files with 35 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
author.php
View File

@ -146,7 +146,7 @@ $tabs[ $current_tab ]['classes'][] = '_current';
</section> </section>
<?php endif; ?> <?php endif; ?>
<section class="statistics"> <section class="statistics spacing-top">
<div class="statistics__inline-stat"> <div class="statistics__inline-stat">
<strong><?php _e( 'Stories', 'fictioneer' ); ?></strong> <strong><?php _e( 'Stories', 'fictioneer' ); ?></strong>
<span><?php echo number_format_i18n( $author_statistics['story_count'] ); ?></span> <span><?php echo number_format_i18n( $author_statistics['story_count'] ); ?></span>

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/chapter.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

20
includes/functions/_content_helpers.php
View File

@ -401,7 +401,7 @@ if ( ! function_exists( 'fictioneer_get_breadcrumbs' ) ) {
// Start HTML ---> ?> // Start HTML ---> ?>
<ol vocab="https://schema.org/" typeof="BreadcrumbList" class="breadcrumbs"> <ol vocab="https://schema.org/" typeof="BreadcrumbList" class="breadcrumbs">
<?php foreach ( $args['breadcrumbs'] as $key => $value ) : ?> <?php foreach ( $args['breadcrumbs'] as $key => $value ) : ?>
<li property="itemListElement" typeof="ListItem"> <li class="breadcrumbs__item" property="itemListElement" typeof="ListItem">
<?php if ( $count > $key + 1 ): ?> <?php if ( $count > $key + 1 ): ?>
<?php if ( $value[1] ): ?> <?php if ( $value[1] ): ?>
<a property="item" typeof="WebPage" href="<?php echo $value[1]; ?>"><span property="name"><?php echo $value[0]; ?></span></a> <a property="item" typeof="WebPage" href="<?php echo $value[1]; ?>"><span property="name"><?php echo $value[0]; ?></span></a>
@ -774,7 +774,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
if ( ! empty( $args['story_post'] ) ) { if ( ! empty( $args['story_post'] ) ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<label id="micro-menu-label-open-chapter-list" for="mobile-menu-toggle" class="micro-menu__chapter-list show-below-desktop" tabindex="-1"> <label id="micro-menu-label-open-chapter-list" for="mobile-menu-toggle" class="micro-menu__item micro-menu__chapter-list show-below-desktop" tabindex="-1">
<i class="fa-solid fa-list"></i> <i class="fa-solid fa-list"></i>
</label> </label>
<?php // <--- End HTML <?php // <--- End HTML
@ -782,7 +782,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<a href="<?php echo get_the_permalink( $args['story_post']->ID ) . '#' . $args['story_post']->ID; ?>" title="<?php echo get_the_title( $args['story_post']->ID ); ?>" tabindex="-1"> <a href="<?php echo get_the_permalink( $args['story_post']->ID ) . '#' . $args['story_post']->ID; ?>" title="<?php echo get_the_title( $args['story_post']->ID ); ?>" class="micro-menu__item" tabindex="-1">
<i class="fa-solid fa-book"></i> <i class="fa-solid fa-book"></i>
</a> </a>
<?php // <--- End HTML <?php // <--- End HTML
@ -791,7 +791,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<label for="modal-formatting-toggle" class="micro-menu__modal-formatting" tabindex="-1"> <label for="modal-formatting-toggle" class="micro-menu__item micro-menu__modal-formatting" tabindex="-1">
<?php fictioneer_icon( 'font-settings' ); ?> <?php fictioneer_icon( 'font-settings' ); ?>
</label> </label>
<?php // <--- End HTML <?php // <--- End HTML
@ -799,7 +799,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<button type="button" title="<?php esc_attr_e( 'Enter fullscreen', 'fictioneer' ); ?>" class="micro-menu__enter-fullscreen open-fullscreen hide-on-iOS hide-on-fullscreen" tabindex="-1"> <button type="button" title="<?php esc_attr_e( 'Enter fullscreen', 'fictioneer' ); ?>" class="micro-menu__item micro-menu__enter-fullscreen open-fullscreen hide-on-iOS hide-on-fullscreen" tabindex="-1">
<?php fictioneer_icon( 'expand' ); ?> <?php fictioneer_icon( 'expand' ); ?>
</button> </button>
<?php // <--- End HTML <?php // <--- End HTML
@ -807,7 +807,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<button type="button" title="<?php esc_attr_e( 'Exit fullscreen', 'fictioneer' ); ?>" class="micro-menu__close-fullscreen close-fullscreen hide-on-iOS show-on-fullscreen hidden" tabindex="-1"> <button type="button" title="<?php esc_attr_e( 'Exit fullscreen', 'fictioneer' ); ?>" class="micro-menu__item micro-menu__close-fullscreen close-fullscreen hide-on-iOS show-on-fullscreen hidden" tabindex="-1">
<?php fictioneer_icon( 'collapse' ); ?> <?php fictioneer_icon( 'collapse' ); ?>
</button> </button>
<?php // <--- End HTML <?php // <--- End HTML
@ -815,7 +815,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<button type="button" title="<?php echo fcntr( 'jump_to_bookmark', true ); ?>" class="micro-menu__bookmark button--bookmark hidden" tabindex="-1"> <button type="button" title="<?php echo fcntr( 'jump_to_bookmark', true ); ?>" class="micro-menu__item micro-menu__bookmark button--bookmark hidden" tabindex="-1">
<i class="fa-solid fa-bookmark"></i> <i class="fa-solid fa-bookmark"></i>
</button> </button>
<?php // <--- End HTML <?php // <--- End HTML
@ -824,7 +824,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
if ( $args['prev_index'] !== false ) { if ( $args['prev_index'] !== false ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<a href="<?php echo get_permalink( $args['chapter_ids'][ $args['prev_index'] ] ); ?>" title="<?php echo get_the_title( $args['chapter_ids'][ $args['prev_index'] ] ); ?>" class="micro-menu__previous previous" tabindex="-1"> <a href="<?php echo get_permalink( $args['chapter_ids'][ $args['prev_index'] ] ); ?>" title="<?php echo get_the_title( $args['chapter_ids'][ $args['prev_index'] ] ); ?>" class="micro-menu__item micro-menu__previous previous" tabindex="-1">
<i class="fa-solid fa-caret-left"></i> <i class="fa-solid fa-caret-left"></i>
</a> </a>
<?php // <--- End HTML <?php // <--- End HTML
@ -833,14 +833,14 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<a href="#top" data-block="center" aria-label="<?php _e( 'Scroll to top of the chapter', 'fictioneer' ); ?>" class="micro-menu__up up" tabindex="-1"><i class="fa-solid fa-caret-up"></i></a> <a href="#top" data-block="center" aria-label="<?php _e( 'Scroll to top of the chapter', 'fictioneer' ); ?>" class="micro-menu__item micro-menu__up up" tabindex="-1"><i class="fa-solid fa-caret-up"></i></a>
<?php // <--- End HTML <?php // <--- End HTML
$micro_menu['top'] = ob_get_clean(); $micro_menu['top'] = ob_get_clean();
if ( $args['next_index'] ) { if ( $args['next_index'] ) {
ob_start(); ob_start();
// Start HTML ---> ?> // Start HTML ---> ?>
<a href="<?php echo get_permalink( $args['chapter_ids'][ $args['next_index'] ] ); ?>" title="<?php echo get_the_title( $args['chapter_ids'][ $args['next_index'] ] ); ?>" class="micro-menu__next next" tabindex="-1"> <a href="<?php echo get_permalink( $args['chapter_ids'][ $args['next_index'] ] ); ?>" title="<?php echo get_the_title( $args['chapter_ids'][ $args['next_index'] ] ); ?>" class="micro-menu__item micro-menu__next next" tabindex="-1">
<i class="fa-solid fa-caret-right"></i> <i class="fa-solid fa-caret-right"></i>
</a> </a>
<?php // <--- End HTML <?php // <--- End HTML

10
partials/_cookie-buttons.php
View File

@ -10,9 +10,7 @@
*/ */
?> ?>
<section class="cookies"> <div class="cookies">
<div class="cookies__actions"> <button type="button" data-click="reset-consent" class="button"><?php _e( 'Reset Consent', 'fictioneer' ); ?></button>
<button type="button" data-click="reset-consent" class="button"><?php _e( 'Reset Consent', 'fictioneer' ); ?></button> <button type="button" data-click="clear-cookies" data-message="<?php _e( 'Cookies and local storage have been cleared. To keep it that way, you should leave the site.', 'fictioneer' ); ?>" class="button"><?php _e( 'Clear Cookies', 'fictioneer' ); ?></button>
<button type="button" data-click="clear-cookies" data-message="<?php _e( 'Cookies and local storage have been cleared. To keep it that way, you should leave the site.', 'fictioneer' ); ?>" class="button"><?php _e( 'Clear Cookies', 'fictioneer' ); ?></button> </div>
</div>
</section>

2
partials/_icon-menu.php
View File

@ -80,7 +80,7 @@ if ( $profile_page && $profile_page > 0 ) {
aria-label="<?php esc_attr_e( 'Mark follows as read', 'fictioneer' ) ?>" aria-label="<?php esc_attr_e( 'Mark follows as read', 'fictioneer' ) ?>"
><?php fictioneer_icon( 'fa-bell' ); ?> ><?php fictioneer_icon( 'fa-bell' ); ?>
<i class="fa-solid fa-spinner fa-spin" style="--fa-animation-duration: .8s;"></i> <i class="fa-solid fa-spinner fa-spin" style="--fa-animation-duration: .8s;"></i>
<span><?php _ex( 'Read', 'Mark as read button.', 'fictioneer' ) ?></span> <span class="follow-menu-item__read"><?php _ex( 'Read', 'Mark as read button.', 'fictioneer' ) ?></span>
</button> </button>
<div class="follow-notifications sub-menu"> <div class="follow-notifications sub-menu">

9
src/scss/_author.scss
View File

@ -1,11 +1,2 @@
.author-page { .author-page {
&__tabs {
margin-bottom: 1.5rem;
}
.statistics {
&:not(:first-child) {
margin-top: 2rem;
}
}
} }

2
src/scss/_breadcrumbs.scss
View File

@ -8,7 +8,7 @@
text-align: left; text-align: left;
} }
li { &__item {
display: inline-block; display: inline-block;
&:not(:last-child) { &:not(:last-child) {

7
src/scss/_cookies.scss
View File

@ -1,8 +1,5 @@
.cookies { .cookies {
display: flex;
gap: 8px;
margin-top: 2.5rem; margin-top: 2.5rem;
&__actions {
display: flex;
gap: 8px;
}
} }

9
src/scss/_follows.scss
View File

@ -28,15 +28,14 @@
} }
.follow-menu-item { .follow-menu-item {
&:not(._new), &:not(._new, ._loaded),
&:not(:hover), &:not(:hover) {
&:not(._loaded) { .follow-menu-item__read {
> span {
opacity: 0; opacity: 0;
} }
} }
> span { &__read {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
bottom: 3px; bottom: 3px;

2
src/scss/_login.scss
View File

@ -4,7 +4,7 @@
flex-direction: column; flex-direction: column;
gap: .75rem; gap: .75rem;
> a { .button {
display: flex; display: flex;
align-items: center; align-items: center;
gap: .5rem; gap: .5rem;

15
src/scss/_micro-menu.scss
View File

@ -18,7 +18,7 @@
bottom: 12px; bottom: 12px;
z-index: 10; z-index: 10;
display: flex; display: flex;
align-items: center; gap: get_clamp(0, 3, 375, 768);
transform: translate3d(calc(-1 * min(var(--site-width), 100vw) / 2 + 12px), 0, 0); transform: translate3d(calc(-1 * min(var(--site-width), 100vw) / 2 + 12px), 0, 0);
transition: opacity var(--transition-duration); transition: opacity var(--transition-duration);
@ -37,11 +37,10 @@
box-shadow: var(--micro-menu-box-shadow); box-shadow: var(--micro-menu-box-shadow);
} }
> :is(button, label, a) { &__item {
cursor: pointer; cursor: pointer;
display: flex; display: grid;
align-items: center; place-content: center;
justify-content: center;
background: none; background: none;
color: var(--micro-menu-text); color: var(--micro-menu-text);
font-size: 16px; font-size: 16px;
@ -55,13 +54,9 @@
background: inherit; background: inherit;
color: var(--micro-menu-text-hover); color: var(--micro-menu-text-hover);
} }
&:not(:last-child) {
margin-right: get_clamp(0, 3, 375, 768);
}
} }
> :is(.previous, .next, .up) { &__item:is(.previous, .next, .up) {
font-size: 24px; font-size: 24px;
} }
} }

4
src/scss/_reader-settings.scss
View File

@ -6,10 +6,6 @@
align-items: center; align-items: center;
gap: 3px; gap: 3px;
font-size: 14px; font-size: 14px;
input {
border-radius: 0;
}
} }
.select-wrapper { .select-wrapper {

5
src/scss/_tts.scss
View File

@ -10,7 +10,6 @@
&__controls { &__controls {
display: flex; display: flex;
justify-content: center;
gap: 3px; gap: 3px;
.button { .button {
@ -26,8 +25,8 @@
} }
} }
&:not(.ended).paused button.pause, &:not(.ended).paused .button.pause,
&:not(.ended).playing button.play { &:not(.ended).playing .button.play {
background: var(--tts-button-active-background); background: var(--tts-button-active-background);
color: var(--tts-button-active-text); color: var(--tts-button-active-text);
} }

2
src/scss/common/_modals.scss
View File

@ -14,7 +14,7 @@
width: 100%; width: 100%;
} }
:where([type=text], [type=number]) { input:where([type=text], [type=number]):not(:first-child):last-child {
flex-shrink: 0; flex-shrink: 0;
text-align: center; text-align: center;
border-radius: 0 var(--layout-border-radius-small) var(--layout-border-radius-small) 0; border-radius: 0 var(--layout-border-radius-small) var(--layout-border-radius-small) 0;