templates: introduce .column instead #left & #right (#48515)

static/includes/_cells.scss

@@ -36,20 +36,20 @@ $cell-image-padding: 0.5rem !default;
 
 // Columns gutters
 @media screen and ($min-desktop-viewport) {
-	div#left div.a2-block, div#right div.a2-block,
+	.column div.a2-block,
 	.gru-content div.cell,
 	.block {
 		margin-left: #{$columns-gutter / 2};
 		margin-right: #{$columns-gutter / 2};
 	}
 	.gru-content #columns > .cell,
-	div#left .block,
-	div#left div.a2-block,
-	.gru-content #left .cell { margin-left: 0; }
+	.column:first-child .block,
+	.column:first-child div.a2-block,
+	.gru-content .column:first-child .cell { margin-left: 0; }
 	.gru-content #columns > .cell,
-	div#right .block,
-	div#right div.a2-block,
-	.gru-content #right .cell { margin-right: 0; }
+	.column:last-child .block,
+	.column:last-child div.a2-block,
+	.gru-content .column:last-child .cell { margin-right: 0; }
 }
 
 
@@ -85,7 +85,7 @@ div.a2-block,
 	border-radius: $cell-border-radius;
 }
 
-div#left div.a2-block, div#right div.a2-block,
+.column div.a2-block,
 .gru-content div.cell,
 .block {
 	margin-top: 0;

static/includes/_layout.scss

@@ -77,11 +77,7 @@ div#main-content {
 	min-height: 300px;
 }
 
-#right {
-	float: right;
-	width: 50%;
-}
-#left {
+.column {
 	float: left;
 	width: 50%;
 }
@@ -119,7 +115,7 @@ div#main-content {
 		padding: 0 0.7em;
 		max-width: 100%;
 	}
-	#right, #left {
+	.column {
 		float: none;
 		width: auto;
 	}

templates/authentic2/accounts.html

@@ -5,7 +5,7 @@
 {% block extra-body-class %}{{ block.super }} account-page{% endblock %}
 
 {% block content %}
-<div id="left" class="profile">
+<div class="column profile">
   {% block profile-pre %}{% endblock %}
   <div class="block" id="a2-profile">
     {% block profile-top %}{% endblock %}
@@ -43,7 +43,7 @@
   </div>
   {% block profile-post %}{% endblock %}
 </div>
-<div id="right" class="account-management">
+<div class="column account-management">
   {% block account-management-pre %}{% endblock %}
   <div class="block" id="account-management">
     {% block account-management-top %}{% endblock %}

templates/combo/page_template_2cols.html

@@ -2,11 +2,11 @@
 {% load combo i18n %}
 
 {% block columns %}
-<div id="left">
+<div class="column">
 {% trans "Left column" as name %}
 {% placeholder "content" name=name %}
 </div>
-<div id="right">
+<div class="column">
 {% trans "Right column" as name %}
 {% placeholder "right" name=name %}
 </div>

templates/combo/page_template_2cols_sidebar.html

@@ -2,11 +2,11 @@
 {% load combo i18n %}
 
 {% block columns %}
-<div id="left">
+<div class="column">
 {% trans "Left column" as name %}
 {% placeholder "content" name=name %}
 </div>
-<div id="right">
+<div class="column">
 {% trans "Right column" as name %}
 {% placeholder "right" name=name %}
 </div>