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>
<?php endif; ?>
<section class="statistics">
<section class="statistics spacing-top">
<div class="statistics__inline-stat">
<strong><?php _e( 'Stories', 'fictioneer' ); ?></strong>
<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 ---> ?>
<ol vocab="https://schema.org/" typeof="BreadcrumbList" class="breadcrumbs">
<?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 ( $value[1] ): ?>
<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'] ) ) {
ob_start();
// 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>
</label>
<?php // <--- End HTML
@ -782,7 +782,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start();
// 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>
</a>
<?php // <--- End HTML
@ -791,7 +791,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start();
// 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' ); ?>
</label>
<?php // <--- End HTML
@ -799,7 +799,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start();
// 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' ); ?>
</button>
<?php // <--- End HTML
@ -807,7 +807,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start();
// 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' ); ?>
</button>
<?php // <--- End HTML
@ -815,7 +815,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start();
// 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>
</button>
<?php // <--- End HTML
@ -824,7 +824,7 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
if ( $args['prev_index'] !== false ) {
ob_start();
// 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>
</a>
<?php // <--- End HTML
@ -833,14 +833,14 @@ if ( ! function_exists( 'fictioneer_get_chapter_micro_menu' ) ) {
ob_start();
// 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
$micro_menu['top'] = ob_get_clean();
if ( $args['next_index'] ) {
ob_start();
// 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>
</a>
<?php // <--- End HTML

4
partials/_cookie-buttons.php
View File

@ -10,9 +10,7 @@
*/
?>
<section class="cookies">
<div class="cookies__actions">
<div class="cookies">
<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>
</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' ) ?>"
><?php fictioneer_icon( 'fa-bell' ); ?>
<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>
<div class="follow-notifications sub-menu">

9
src/scss/_author.scss
View File

@ -1,11 +1,2 @@
.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;
}
li {
&__item {
display: inline-block;
&:not(:last-child) {

5
src/scss/_cookies.scss
View File

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

9
src/scss/_follows.scss
View File

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

2
src/scss/_login.scss
View File

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

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

@ -18,7 +18,7 @@
bottom: 12px;
z-index: 10;
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);
transition: opacity var(--transition-duration);
@ -37,11 +37,10 @@
box-shadow: var(--micro-menu-box-shadow);
}
> :is(button, label, a) {
&__item {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
display: grid;
place-content: center;
background: none;
color: var(--micro-menu-text);
font-size: 16px;
@ -55,13 +54,9 @@
background: inherit;
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;
}
}

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

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

5
src/scss/_tts.scss
View File

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

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

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