hangar-tech/biofriction-wp-theme
hangar-tech
/
biofriction-wp-theme
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: hangar-tech:fix/home-gallery
Branches Tags
hangar-tech:main
hangar-tech:fix/tagcloud
hangar-tech:fix/home-gallery
..
compare: hangar-tech:main
Branches Tags
hangar-tech:main
hangar-tech:fix/tagcloud
hangar-tech:fix/home-gallery

6 Commits
fix/home-g ... main

Author SHA1 Message Date
jorge 4b8481b2b6 mod in the tags hover 2021-11-24 14:17:24 +01:00
jorge 32ffcd1ab4 run scss and js min after commit 2021-11-08 21:17:58 +01:00
jorge 18c364951f moved tags to top of content. show viewed one and let choose others 2021-11-08 21:17:05 +01:00
jorge a8921bd895 compiled build after merge 2021-11-04 14:43:02 +01:00
jorge c9490367c7 added galleries width and sizes to show proper number of pictures 2021-11-04 14:41:12 +01:00
jorge d9b42246ec first step, home page contained 2021-11-04 12:11:56 +01:00
11 changed files with 324 additions and 251 deletions
Show Stats Expand all files Collapse all files

1
archive.php
View File

@ -26,6 +26,7 @@ get_header(); ?>
<?php echo category_description(); ?> <?php echo category_description(); ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php get_template_part( 'template-parts/tag-cloud' ); ?>
<div class="bfr_category_archive"> <div class="bfr_category_archive">
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?> <?php /* Start the Loop */ ?>

2
dist/assets/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

2
functions.php
View File

@ -58,6 +58,8 @@ require_once( 'library/gutenberg.php' );
/** Catch post first image */ /** Catch post first image */
require_once( 'library/catch-first-image.php' ); require_once( 'library/catch-first-image.php' );
/** Check if a category is subcategory */
require_once( 'library/check-subcategory.php' );
/** If your site requires protocol relative url's for theme assets, uncomment the line below */ /** If your site requires protocol relative url's for theme assets, uncomment the line below */
// require_once( 'library/class-foundationpress-protocol-relative-theme-assets.php' ); // require_once( 'library/class-foundationpress-protocol-relative-theme-assets.php' );

11
header.php
View File

@ -29,14 +29,5 @@
</nav> </nav>
<nav class="site-top-nav menu small-12 medium-6 large-shrink align-center"><?php foundationpress_top_bar_r(); ?></nav> <nav class="site-top-nav menu small-12 medium-6 large-shrink align-center"><?php foundationpress_top_bar_r(); ?></nav>
</content> </content>
<?php //get_template_part( 'template-parts/tag-cloud' ); ?>
<?php if (is_category('peephole') || is_tag() ) : ?>
<aside class="bfr_category_tags">
<h6 class="button primary hollow">#tags</h6>
<div class="bfr_all_tags bfr_toogled_tags">
<?php wp_tag_cloud( 'unit=rem&smallest=1&largest=1&number=0&orderby=name' ); ?>
</div>
</aside>
<?php endif; ?>
</header> </header>

16
library/check-subcategory.php Normal file
View File

@ -0,0 +1,16 @@
<?php
/**
* Check if a category is subcategory
*
* @package Biofriction
* @since Biofriction 1.0.0
*/
if ( ! function_exists ( 'is_subcategory' ) ) :
function is_subcategory (){
$cat = get_query_var('cat');
$category = get_category($cat);
$category->parent;
return ( $category->parent == ‘0’ ) ? false : true;
}
endif;

55
src/assets/scss/components/_tags.scss
View File

@ -1,16 +1,37 @@
.bfr_category_tags { .bfr_tags{
font-family: $header-font-family; font-family: $header-font-family;
font-size: $global-font-size * 0.8;
}
.bfr_tag_active {
background-color: scale-color($secondary-color, $lightness: +70%);
&:hover {
background-color: $secondary-color;
color: $primary-color;
}
&:before{
content:'#';
}
}
.bfr_category_tags {
@include xy-grid();
// @include xy-gutters(0);
position: relative; position: relative;
top:-1rem; // top:-1rem;
text-align: center;
z-index: 100; z-index: 100;
h6 {
@include breakpoint(small) {
@include xy-cell(shrink);
margin-bottom: $global-margin;
}
}
.tag-cloud-link::before { .tag-cloud-link::before {
content: '#'; content: '#';
// display: inline-block;
} }
a{ a{
padding:0; padding:0;
margin:0 0.5rem; margin:0 0.5rem;
display:inline-block;
margin-bottom: auto;
&:hover { &:hover {
color:$primary-color; color:$primary-color;
background-color:$secondary-color; background-color:$secondary-color;
@ -19,14 +40,26 @@
.bfr_toogled_tags{ .bfr_toogled_tags{
display:none; display:none;
position:absolute; position:absolute;
padding:3rem; top: $global-padding;
border-radius: 2rem; padding:$global-padding;
margin-top:-1rem; border-radius: $button-radius/2;
background-color: rgba(255,255,255,0.95); background-color: rgba(255,255,255,0.95);
} }
.button:hover+.bfr_toogled_tags,.bfr_toogled_tags:hover { .bfr_tag_description:hover+.bfr_toogled_tags,.bfr_toogled_tags:hover {
display:block; display:block;
} }
} }
.bfr_post_tags {
ul {
list-style: none;
margin-left:0;
display: inline-block;
li {
float:left;
margin-right: $global-margin;
&:before {
content:'#';
}
}
}
}

11
src/assets/scss/modules/_header.scss
View File

@ -17,17 +17,6 @@
height: 10rem; height: 10rem;
background-image: url('../images/biofriction-logo-moving-trans-loosy-100.gif'); background-image: url('../images/biofriction-logo-moving-trans-loosy-100.gif');
} }
.bfr_category_tags {
// display:flex;
// justify-content:center;
max-width: calc(66vw - 4rem);
margin: 0 auto;
a {
display:inline-block;
margin-bottom: auto;
}
}
} }
} }
} }

454
src/assets/scss/templates/_bfrtemplates.scss
View File

@ -1,266 +1,290 @@
// Page header // new edition
.page-template-partner { // Page header
@include breakpoint(small) { .page-template-partner {
.featured-hero { @include breakpoint(small) {
@include xy-cell(12); .featured-hero {
background-size: contain; @include xy-cell(12);
background-position: top; background-size: contain;
background-position: top;
}
.main-content {
@include xy-cell(12);
header{
display:none;
}
}
} }
.main-content { @include breakpoint(medium) {
@include xy-cell(12); .featured-hero {
header{ @include xy-cell(3);
display:none; }
.main-content {
@include xy-cell(9);
} }
} }
} }
@include breakpoint(medium) { $grid-column-width:$grid-row-width/$grid-column-count;
.featured-hero { //_post formats
@include xy-cell(3); // post format video
} .single-format-video iframe {
.main-content { width: 60vw;
@include xy-cell(9); height: 33.75vw;
}
} }
}
$grid-column-width:$grid-row-width/$grid-column-count;
//_post formats
// post format video
.single-format-video iframe {
width: 60vw;
height: 33.75vw;
}
// aside sigle post format // aside sigle post format
.format-aside{ .format-aside{
@include breakpoint(small) { @include breakpoint(small) {
// .entry-content { // .entry-content {
// } // }
}
@include breakpoint(medium) {
.entry-title{
padding-right: $grid-row-width / $grid-column-count * 4 ;
} }
.entry-content { @include breakpoint(medium) {
padding-right: $grid-row-width / $grid-column-count * 4 ; .entry-title{
img.alignright{ padding-right: $grid-row-width / $grid-column-count * 4 ;
margin-right:- $grid-row-width / $grid-column-count * 4; }
max-width: $grid-row-width / $grid-column-count * 4; .entry-content {
padding-right: $grid-row-width / $grid-column-count * 4 ;
img.alignright{
margin-right:- $grid-row-width / $grid-column-count * 4;
max-width: $grid-row-width / $grid-column-count * 4;
}
} }
} }
} }
}
// presentation as home and category archive // presentation as home and category archive
.home,.archive,.page-template-homepage2021{ .home,.archive{
.main-container { .main-container {
@include xy-grid-container(100vw,$global-padding*2); @include xy-grid-container(100vw,$global-padding*2);
overflow: hidden; overflow: hidden;
.main-content { .main-content {
@include xy-cell(12,padding,0); @include xy-cell(12,padding,0);
.bfr_category_archive { .bfr_category_archive {
@include xy-grid(); @include xy-grid();
}
.bfr_post {
@include breakpoint(small) {
@include xy-cell(12);
margin-bottom: $global-margin;
} }
@include breakpoint(medium) { .bfr_post {
@include xy-cell(6);
}
@include breakpoint(large) {
@include xy-cell(4);
}
background-color: $light-gray;
padding: $global-padding * 1;
border-radius: $button-radius / 2;
}
.bfr_post_content {
.entry-title {
@include breakpoint(small) { @include breakpoint(small) {
font-size: rem-calc(18); @include xy-cell(12);
min-height: 6rem; margin-bottom: $global-margin;
} }
@include breakpoint(medium) { @include breakpoint(medium) {
font-size: rem-calc(25); @include xy-cell(6);
min-height: 8rem;
} }
padding:$global-padding 0 0 0; @include breakpoint(large) {
width: 100%; @include xy-cell(4);
}
background-color: $light-gray;
padding: $global-padding * 1;
border-radius: $button-radius / 2;
} }
.bfr_post_thumbnail { .bfr_post_content {
@include breakpoint(small) { .entry-title {
float: none; @include breakpoint(small) {
font-size: rem-calc(18);
min-height: 6rem;
}
@include breakpoint(medium) {
font-size: rem-calc(25);
min-height: 8rem;
}
padding:$global-padding 0 0 0;
width: 100%;
}
.bfr_post_thumbnail {
@include breakpoint(small) {
float: none;
max-width:unset;
border-radius:$button-radius;
}
@include breakpoint(medium) {
float: right;
max-width:35%;
}
}
footer{
@include breakpoint(small) {
float: none;
max-width: unset;
}
@include breakpoint(medium) {
float: left;
max-width: 60%;
a.button{
position: absolute;
bottom: 0;
}
}
}
.post-excerpt {
@include breakpoint(small) {
max-height: 14rem;
overflow: hidden;
margin-bottom: $global-margin * 1.2;
}
@include breakpoint(medium) {
margin-bottom: 3.5rem;
}
}
.button {
@include breakpoint(small) {
}
@include breakpoint(medium) {
}
background-color:$primary-color;
color:$secondary-color;
&:hover{
background-color:$secondary-color;
color:$primary-color;
}
}
@include breakpoint(medium){
position: relative;
min-height: 100%;
}//end medium
}
.category-photos-archive,.format-gallery,.post_format-post-format-gallery {
.bfr_post_thumbnail {
float:none;
max-width:unset; max-width:unset;
border-radius:$button-radius; overflow:hidden;
@include breakpoint(small) {
max-height: ( 100vw / 2 );
}
@include breakpoint(medium) {
max-height: ( 100vw / 3 );
}
@include breakpoint(large) {
max-height: ( 100vw / 5 );
}
img {
width: 100%;
}
} }
@include breakpoint(medium) { footer {
float: right; @include breakpoint(small) {
max-width:35%; padding-top: $global-padding;
} }
} @include breakpoint(medium) {
footer{ padding-top: $global-padding * 5;
@include breakpoint(small) { }
float: none; .post-excerpt {
max-width: unset; display:none;
}
@include breakpoint(medium) {
float: left;
max-width: 60%;
a.button{
position: absolute;
bottom: 0;
} }
} }
} }
.post-excerpt {
@include breakpoint(small) {
max-height: 14rem;
overflow: hidden;
margin-bottom: $global-margin * 1.2;
}
@include breakpoint(medium) {
margin-bottom: 3.5rem;
}
}
.button {
@include breakpoint(small) {
}
@include breakpoint(medium) {
}
background-color:$primary-color;
color:$secondary-color;
&:hover{
background-color:$secondary-color;
color:$primary-color;
}
}
@include breakpoint(medium){
position: relative;
min-height: 100%;
}//end medium
}
.category-photos-archive,.format-gallery,.post_format-post-format-gallery {
.bfr_post_thumbnail {
float:none;
max-width:unset;
overflow:hidden;
@include breakpoint(small) {
max-height: ( 100vw / 2 );
}
@include breakpoint(medium) {
max-height: ( 100vw / 3 );
}
@include breakpoint(large) {
max-height: ( 100vw / 5 );
}
img {
width: 100%;
}
}
footer {
@include breakpoint(small) {
padding-top: $global-padding;
}
@include breakpoint(medium) {
padding-top: $global-padding * 5;
}
.post-excerpt {
display:none;
}
}
} }
} }
.bfr_category_title{
display:none;
}
} }
.bfr_category_title{ // homepage 2021
display:none; .page-template-homepage2021{
} .homepage-2021 { //&.main-container
} @include xy-grid-container($global-wider-width);
// homepage 2021 .entry-content { //.main-content
.homepage-2021 { //&.main-container
.entry-content {
overflow: hidden;
position: relative; position: relative;
& > * { & > * {
float:left; float:left;
clear:both; clear:both;
margin-left: $global-margin;
} }
} }
.fp-gallery { .fp-gallery {
position:absolute; overflow: hidden;
position: absolute;
top:0; top:0;
right: 0; right: 0;
// .fp-gallery-item { justify-content: right;
// }
// .fp-gallery-icon {
// }
img { img {
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
border-radius: $button-radius; border-radius: $button-radius;
} }
} }
@include breakpoint(small) { @include breakpoint(small) {
$homepage2021-gallery-square-side: $global-margin*8; $homepage2021-gallery-square-side: $global-margin*10;
$homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin; $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
.entry-content { .entry-content {
height: $homepage2021-gallery-square-size*14; & > * {
& > * { max-width: 58%;
max-width: 55%; margin-left: 0;
}
}
.fp-gallery {
height: $homepage2021-gallery-square-size*8;
max-width: 40%;
.fp-gallery-item {
// width: $homepage2021-gallery-square-side;
width:95%;
}
// .fp-gallery-icon {
// }
img {
height: $homepage2021-gallery-square-side;
}
} }
} }
.fp-gallery { @include breakpoint(medium) {// > 640px
max-width: 40%; $homepage2021-gallery-square-side: $global-margin*12;
.fp-gallery-item { $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
width: $homepage2021-gallery-square-side; .entry-content {
& > * {
max-width: 40%;
margin-left: $global-margin;
}
} }
// .fp-gallery-icon { .fp-gallery {
// } height: $homepage2021-gallery-square-size*5;
img { max-width: 60%;
height: $homepage2021-gallery-square-side; .fp-gallery-item {
width: $homepage2021-gallery-square-side;
}
// .fp-gallery-icon {
// }
img {
height: $homepage2021-gallery-square-side;
}
} }
} }
} @include breakpoint(large) { // > 1024px
@include breakpoint(medium) { $homepage2021-gallery-square-side: $global-margin*14;
$homepage2021-gallery-square-side: $global-margin*7; $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
$homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin; .entry-content {
.entry-content { & > * {
height: $homepage2021-gallery-square-size*12; max-width: 30%;
& > * { }
max-width: 48%; }
.fp-gallery {
height: $homepage2021-gallery-square-size*4;
max-width: 70%;
.fp-gallery-item {
width: $homepage2021-gallery-square-side;
}
// .fp-gallery-icon {
// }
img {
height: $homepage2021-gallery-square-side;
}
} }
} }
.fp-gallery { @include breakpoint(xlarge) { // > 1200px
max-width: 45%; $homepage2021-gallery-square-side: $global-margin*16;
.fp-gallery-item { $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
width: $homepage2021-gallery-square-side; .entry-content {
& > * {
max-width: 30%;
}
} }
// .fp-gallery-icon { .fp-gallery {
// } height: $homepage2021-gallery-square-size*4;
img { max-width: 72%;
height: $homepage2021-gallery-square-side; .fp-gallery-item {
} width: $homepage2021-gallery-square-side;
} }
} // .fp-gallery-icon {
@include breakpoint(xlarge) { // }
$homepage2021-gallery-square-side: $global-margin*9; img {
$homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin; height: $homepage2021-gallery-square-side;
.entry-content { }
height: $homepage2021-gallery-square-size*6;
& > * {
max-width: 48%;
}
}
.fp-gallery {
max-width: 45%;
.fp-gallery-item {
width: $homepage2021-gallery-square-side;
}
// .fp-gallery-icon {
// }
img {
height: $homepage2021-gallery-square-side;
} }
} }
} }

5
style.css
View File

@ -1,9 +1,8 @@
/* /*
Theme Name: Biofriction Theme Name: Biofriction
Theme URI: https://biofriction.org Theme URI: https://git.hangar.org/hangar-tech/biofriction-wp-theme
Gitlab Theme URI: https://gitlab.com/jorge-vitrubio/biofriction-theme
Description: Biofriction is a WordPress theme created for Hangar.org, based on FoundationPress and Foundation 6 by Zurb Description: Biofriction is a WordPress theme created for Hangar.org, based on FoundationPress and Foundation 6 by Zurb
Version: 1.0.0 Version: 1.1.0
Author: Jorge - vitrubio.net Author: Jorge - vitrubio.net
Author URI: https://vitrubio.net/ Author URI: https://vitrubio.net/

1
template-parts/content.php
View File

@ -9,6 +9,7 @@
*/ */
?> ?>
<?php get_template_part( 'template-parts/tag-cloud' ); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header> <header>

17
template-parts/tag-cloud.php Normal file
View File

@ -0,0 +1,17 @@
<?php //display the tag cloud ?>
<?php //is_subcategory check the functions and library ?>
<?php if ((is_category('peephole') || is_subcategory('peephole') || is_tag()) && !is_single() ) { ?>
<aside class="bfr_tags bfr_category_tags">
<h6 class="bfr_tag_description">
You are viewing <span class="bfr_tag_active"><?php single_cat_title(); ?></span>. Choose to filter content
</h6>
<div class="bfr_all_tags bfr_toogled_tags">
<?php wp_tag_cloud( 'unit=rem&smallest=0.8&largest=0.8&number=0&orderby=name' ); ?>
</div>
</aside>
<?php } ?>
<?php if ( is_single() ) { ?>
<aside class="bfr_tags bfr_post_tags">
<?php the_tags('<ul class=""><li class="bfr_tag_active">', '</li><li class="bfr_tag_active">','</li></ul>'); ?>
</aside>
<?php } ?>