responsive adjustments on homepage

Author: hugosolar

assets/css/styles.css

@@ -1,3 +1,17 @@
+.main-content {
+	.container {
+		@include mobile() {
+			padding-left: $space-normal;
+			padding-right: $space-normal;
+		}	
+		&.mobile-no-padding {
+			@include mobile() {
+				padding-left: 0;
+				padding-right: 0;
+			}
+		}
+	}
+}
 .page, .single {
 	.main-content {
 		padding-top: 0;
@@ -110,4 +124,5 @@
 	h1, h2, h3, h4, h5, h6 {
 		margin-bottom: $space-normal;
 	}
-}
+	
+}

composer.lock

@@ -54,6 +54,9 @@
 	&.has-image {
 		.entry-image {
 			padding: 0;
+			img {
+				width: 100%;
+			}
 		}
 		.entry-content{
 			padding-left: $space-bigger !important;
@@ -77,6 +80,13 @@
 			text-transform: uppercase;
 		}
 	}
+	@include mobile() {
+		&.has-image {
+			.entry-content {
+				padding-left: 0 !important;
+			}
+		}
+	}
 }
 .navigation {
 	&.pagination {

front/src/styles/base.scss

@@ -9,6 +9,7 @@
 @import "@creativecommons/vocabulary/scss/table.scss";
 
 @import "@creativecommons/vocabulary/scss/header.scss";
+@import "@creativecommons/vocabulary/scss/global_header.scss";
 @import "@creativecommons/vocabulary/scss/footer.scss";
 
 @import "@creativecommons/vocabulary/scss/layout.scss";

front/src/styles/modules.scss

@@ -1,4 +1,12 @@
 .widget {
+	&.title {
+		@include mobile() {
+			padding: 0;
+			h1 {
+				font-size: 2.25rem;
+			}
+		}
+	}
 	&.donate {
 		text-align: center;
 		h3 {
@@ -15,6 +23,20 @@
 				}
 			}
 		}
+		@include mobile() {
+			padding: $space-normal;
+			.donate-buttons {
+				justify-content: space-between;
+				.donate-amount {
+					margin-bottom: $space-normal;
+					margin-right: $space-normal;
+					margin-left: $space-normal;
+				}
+				.donate {
+					display: flex;
+				}
+			}
+		}
 	}
 	&.twitter {
 		&.has-border {
@@ -77,5 +99,10 @@
 .no-gap {
 	.widget {
 		padding: $space-large;
+		&.title {
+			@include mobile() {
+				padding: 0;
+			}
+		}
 	}
 }

front/src/styles/styles.scss

@@ -1,6 +1,6 @@
 <hr>
 <div class="columns leveled">
-	<div class="column is-one-third">
+	<div class="column is-8">
 		<div class="entry-meta">
 			<div class="terms-list the-categories margin-vertical-normal">
 				<h6>Categories</h6>
@@ -12,7 +12,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="column is-one-fifth">
+	<div class="column is-2">
 		<div class="share-entry margin-vertical-normal">
 			<h6>Share</h6>
 			<a href="<?php echo CC_Site::social_share( 'facebook', get_the_ID() ); ?>" class="share facebook"><i class="icon facebook colored"></i></a>

front/src/styles/widgets.scss

@@ -1,6 +1,6 @@
 <?php if ( is_active_sidebar( 'homepage-sidebar' ) ) : ?>
 	<section class="homepage-sidebars">
-		<div class="container">
+		<div class="container mobile-no-padding">
 			<?php dynamic_sidebar( 'homepage-sidebar' ); ?>
 		</div>
 	</section>

inc/partials/entry/entry-footer.php

@@ -15,7 +15,9 @@ function widget( $args, $instance ) {
 		$title_size           = ( ! empty( $instance['title_size'] ) ) ? 'h' . $instance['title_size'] : 'h1';
 		$class_centered       = ( $instance['is_centered'] ) ? 'has-text-centered' : '';
 		$class_vertical_space = ( ! empty( $instance['vertical_space'] ) ) ? ' padding-vertical-' . $instance['vertical_space'] : ' padding-vertical-normal';
-		echo '<' . $title_size . '  class="' . $class_centered . $class_vertical_space . '">' . $instance['title'] . '</' . $title_size . '>';
+		echo '<div class="widget title">';
+			echo '<' . $title_size . '  class="' . $class_centered . $class_vertical_space . '">' . $instance['title'] . '</' . $title_size . '>';
+		echo '</div>';
 	}
 
 	function update( $new_instance, $old_instance ) {