Polymer: make iron-pages flex and fill vertical area - polymer

How can I make <iron-pages> flex and fill the viewport vertically of <--Main Content -->?
The white bar at the bottom should be yellow:
<dom-module id="my-app">
<template>
<style include="iron-flex iron-flex-alignment">
:host {
--app-primary-color: var(--paper-indigo-500);
--app-secondary-color: black;
--iron-selector-background-color: #fff;
--iron-selected: #c5cae9;
--menu-link-color: #111111;
--drawer-toolbar-border-color: 1px solid rgba(0, 0, 0, 0.22);
--drawer-menu-color: #ffffff;
--secondary-text-color: #737373;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.app-name {
margin-left: 20px;
font-size: 24px;
font-weight: 300;
}
[hidden] {
display: none;
}
.center {
#apply(--layout-vertical);
#apply(--layout-center-center);
}
.drawer-list a {
#apply(--layout-horizontal);
#apply(--layout-center);
line-height: 40px;
text-decoration: none;
color: var(--menu-link-color);
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 14px;
font-weight: 400;
line-height: 24px;
min-height: 48px;
padding: 0 16px;
}
.drawer-list a.iron-selected {
color: var(--app-primary-color);
background: var(--iron-selected);
}
.left-bar-container {
height: 100%;
overflow: auto;
margin-top: 64px;
color: var(--secondary-text-color);
background-color: var(--drawer-menu-color);
}
.toolbar-drawer {
border-bottom: var(--drawer-toolbar-border-color);
#apply(--paper-font-title);
}
.spacer-line {
border-bottom: 1px solid rgba(0, 0, 0, 0.22);
padding: 10px 0 10px 0;
}
iron-icon {
margin-right: 33px;
opacity: 0.54;
}
</style>
<app-header-layout fullbleed has-scrolling-region>
<!-- Drawer content -->
<app-header fixed shadow>
<app-toolbar>
<paper-icon-button icon="menu" on-tap="_drawerToggle"></paper-icon-button>
<div main-title class="app-name">Dolphin</div>
</app-toolbar>
</app-header>
<app-drawer-layout fullbleed>
<!-- Drawer Sections -->
<app-drawer id="drawer" no-focus-trap="false">
<div style="background: red" class='left-bar-container'>
<app-toolbar class="toolbar-drawer">Menu</app-toolbar>
<iron-selector selected="[[route]]" attr-for-selected="data-route"
class="drawer-list">
<template is="dom-if" if="[[!loggedIn]]">
<a data-route="user-login" href="/user-login">
<iron-icon icon="input"></iron-icon><span>Login</span>
</a>
</template>
<template is="dom-if" if="[[loggedIn]]">
<a data-route="user-login"
href=""
on-click="logout">
<iron-icon icon="input"></iron-icon><span>Logout</span>
</a>
</template>
<a data-route="my-view1" href="/my-view1">
<iron-icon icon="view-module"></iron-icon><span>my-view1</span>
</a>
</iron-selector>
<zipcode-search-drawer other-loading="{{isLoading}}"
other-pic="{{listings}}" hidden="[[!showMenu.myView1]]"
other-zip-code="{{browserZipCode}}"></zipcode-search-drawer>
</div>
</app-drawer>
<!-- Main content -->
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<user-login data-route="user-login"></user-login>
<my-view1 data-route="my-view1" form-loading="{{isLoading}}"
listings="[[listings]]" zip-code="{{browserZipCode}}" tabindex="-1"></my-view1>
<my-view3 data-route="my-view3"></my-view3>
</iron-pages>
</app-drawer-layout>
</app-header-layout>
<paper-toast id="drawerToast" duration="0"></paper-toast>
</template>

Set height: 100% (flexbox is not needed for that).
iron-pages {
height: 100%;
}
The page views of <iron-pages> should also have their containers set to height: 100%.

Related

Text centered with the logo but icon on the left of it

I'm working on a project that provided me some pictures of the website look :
As you can see, the logo and the text under are both aligned in the center but the little icon is a bit on the left of the location, how can I do to make it look that way? And also, I want this little icon to not move between my desktop, tablet and smartphone look.
I have tried to use position: absolute, but it's always moving around between desktop and smartphone, it doesn't stay right next to my text. Basically I want this icon to be at the same distance on PC, tablet and phone.
Thanks in advance for all the help you can provide me!
#import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
/* Header */
header {
box-sizing: border-box;
height: 4rem;
padding-bottom: 1rem;
background-color: white;
}
header h1 {
font-family: 'Shrikhand', sans-serif;
text-align: center;
margin-top: 0rem;
padding-top: 0.5rem;
}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
align-items: center;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
font-size: 15px;
font-weight: 600;
color: #4D4D4D;
}
.localisation i {
position: absolute;
left: 20rem;
}
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p>Paris, Belleville</p>
</div>
remove the styling on the icon, let flex handle the position of the elements. If you want to create extra space between the icon and text, use css gap (see example).
Also I added flex-wrap: nowrap; so the text wouldn't wrap under the icon when it gets too small
#import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
/* Header */
header {
box-sizing: border-box;
height: 4rem;
padding-bottom: 1rem;
background-color: white;
}
header h1 {
font-family: 'Shrikhand', sans-serif;
text-align: center;
margin-top: 0rem;
padding-top: 0.5rem;
}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 5px;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
font-size: 15px;
font-weight: 600;
color: #4D4D4D;
}
.localisation i {
}
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p>Paris, Belleville</p>
</div>
header{text-align: center;}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
align-items: center;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
font-size: 15px;
font-weight: 600;
color: #4D4D4D;
padding-left: 10px;
}
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js"
crossorigin="anonymous"></script>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p>Paris, Belleville</p>
</div>
</main>
Just remove position: absolute; from your .localisation i style.
Just remove the .localization i style because you have given the left alignment.
#import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
/* Header */
header {
box-sizing: border-box;
height: 4rem;
padding-bottom: 1rem;
background-color: white;
}
header h1 {
font-family: 'Shrikhand', sans-serif;
text-align: center;
margin-top: 0rem;
padding-top: 0.5rem;
}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
align-items: center;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
font-size: 15px;
font-weight: 600;
color: #4D4D4D;
}
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p> Paris, Belleville</p>
</div>

Vue- How to change style of a same element in different components

I am trying to change the style of a specific div from one component to another. Each component is appended to the template in the App component and replaces the <router-view></router-view> tags. The div #app needs to have a padding of 172px in the Hello.vue component, and 0px on the rest of the components.Is this possible, and how can I accomplish this?
App.vue
<template>
<div id="app">
<div>
<img src="./assets/logo.png" align="center">
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
background-color: hsla(275, 97%, 50%, 0.57);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 0px;
height: inherit;
}
body{
height: inherit;
}
html{
height: 100%;
}
</style>
Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li><h2><router-link to="/app/login">Login</router-link></h2></li>
<li><h2><router-link to="/app/about">About Us</router-link></h2></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Vue'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#app{
padding-top: 172px; /*This does not work*/
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #000000;
}
</style>
There is a quick way to do this (not sure if it's best practice) by checking the route path; assume Hello.vue is rendered via the path /hello:
<div id="app" :style="{ padding: $route.path === '/hello' ? '172px' : '0px' }">
...
</div>

divs/footer ignoring other divs existence

I can't wrap my head around this one. I've been working on it for a bit but everything I try and everything I read fails to truly fix the problem.
Problem 1:
My div ".page" is ignoring all of its children divs. Setting it to 100% height and the background color to red for testing results in it only acknowledging certain divs (the .image__header div and the footer). I have set the html and body to width and height 100%; however, this does not resolve the problem.
Problem 2:
This leads to my second problem which would probably be solved by the prior problems solution. Adding the footer and setting a height and background color places the footer directly below the .image__header div. This emphasizes my belief that the other sections (main and nav) are being completely ignored as if they aren't even taking up space (nav is a fixed element glued to the top of my page and main doesn't work even if I change it to a div and "display:block" as it should be innately anyway).
My footer should simply fall below the main section but it fails to acknowledge main's existence.
A couple snippets of code although I have linked the brief CodePen at the bottom.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
img {
display: block;
margin: 0 auto;
}
.page {
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
* ---
* Adding a clearfix to .main__inner resolved this.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen link with full code
To reiterate: I don't need a sticky footer solution or a fixed footer solution. I just need the footer to acknowledge other divs and sit below the main section. Why is the main section being ignored?
Any help is greatly appreciated. Thanks for your time.
Seems like you simply should add a clearfix to your .main__inner block, something like this:
.main__inner:after {
content: '';
display: table;
clear: both;
}
Check out:
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen
Just put float:left; to both containers. I recommend using a div with class instead of footer though... or any semantic elements to be honest.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body,
html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1,
h2,
h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3,
h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
float: left;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
float: left;
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div>
<!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul>
<!-- end nav links -->
</div>
<!-- end .nav__inner -->
</nav>
<!-- end nav -->
<main class="main">
<div class="image__header">
</div>
<!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's
<snip>Raycast</snip> and
<snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a
<snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a
<snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div>
<!-- end .main__inner -->
</main>
<!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div>
<!-- end .footer__inner -->
</footer>
<!-- end footer -->
</div>
<!-- end .page__inner -->
</div>
<!-- end .page -->
</body>
</html>
remove float: left from the section with class .content
http://codepen.io/anon/pen/XMrVVv?editors=1100

CSS grid on iOS using variable width is breaking. Why?

That's how it should look.
That's how it does look.
The same works fine on Android phones but breaks on iOS and only on the first load. If I refresh the page, it settles into the correct thing.
This is the code in handlebars:
<!DOCTYPE html>
<html>
<head>
<title>{{link_data.workplace.name}} - A Super Workplace!</title>
<link rel="shortcut icon" href="http://admin.getsuperapp.com/public/superfavicon.ico">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<style>
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(https://fonts.googleapis.com/css?family=Asap:400,400italic);
body {
margin: 0;
padding: 0;
}
.content {
padding-bottom: 62px;
}
.content .cover {
}
.cover img {
width: 100%;
}
.content .name-logo {
padding-left: 6.79%;
box-sizing: border-box;
position: relative;
top: -7px;
}
.content .name-logo .logo {
width: 58px;
height: 58px;
border-color: #d8d8d8;
border-radius: 4px;
border-width: 1px;
border-style: solid;
overflow: hidden;
display: inline-block;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
position: relative;
background: #fff;
}
.content .name-logo .logo img {
width: 100%;
height: 100%;
}
.content .name-logo .join-us {
width: 70%;
display: inline-block;
vertical-align: top;
position: relative;
top: 10px;
left: 4px;
font-family: 'Asap', sans-serif;
font-style: italic;
color: rgba(55, 71, 79, 0.54);
}
.content .name-logo .join-us .text {
font-size: 8pt;
}
.content .name-logo .join-us .company-name {
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 700;
color: #37474f;
font-size: 16pt;
}
.content .company-headline {
font-family: 'Asap', sans-serif;
font-size: 12pt;
line-height: 16pt;
color: rgba(0, 0, 0, 0.54);
padding-top: 0px;
padding-left: 6.79%;
padding-right: 6.79%;
padding-bottom: 16px;
}
.content .people-carousel {
width: 100%;
background-color: #87A0AD ;
overflow: hidden;
}
.content .people-carousel.collapsed {
height: 136px;
}
.content .people-carousel .person {
width: 33.53vw;
height: 33.33vw;
display: inline-block;
margin: 0 -2px -4px;
overflow: hidden;
}
.content .people-carousel .person img {
width: 100%;
}
.content .next-person {
padding-top: 40px;
padding-bottom: 40.3px;
background-color: #03A9F4;
}
.content .next-person .text {
text-align: center;
font-family: 'Asap', sans-serif;
font-style: italic;
font-size: 14pt;
line-height: 18pt;
color: #fff;
}
.content .next-person .you {
font-family: 'Montserrat', sans-serif;
font-size: 24pt;
line-height: 24pt;
color: #ffeb3b;
text-align: center;
font-weight: 700;
}
.content .get-app {
background-color: #37474f;
position: fixed;
bottom: -1px;
width: 100%;
}
.content .get-app .badge {
display: inline-block;
padding-top: 14px;
padding-bottom: 10px;
padding-left: 12px;
padding-right: 32px;
}
.content .get-app .badge img {
width: auto;
height: 36px;
}
.content .get-app .button-wrapper {
display: inline-block;
width: 46vw;
vertical-align: top;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
box-sizing: border-box;
float: right;
right: 26px;
position: relative;
}
.content .get-app .button-wrapper a {
text-decoration: none;
}
.content .get-app .button {
width: 120px;
height: 40px;
background-color: #FFEB3B;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12);
border-radius: 4.4px;
margin-left: auto;
margin-right: -25px;
}
.content .get-app .button .button-text {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: rgba(0, 0, 0, 0.54);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.3px;
text-align: center;
margin: auto;
position: relative;
top: 11px;
}
.page-not-found {
width: 300;
height: 300;
border-radius: 5px;
border: 1px solid #BCBCCA;
margin: auto;
margin-top: 100px;
}
.page-not-found .text {
font-family: sans-serif;
text-align: center;
padding: 100;
}
</style>
</head>
<body>
{{#if link_data.enabled}}
<div class="wrapper">
<div class="content">
<div class="cover">
<img src="http://res.cloudinary.com/superapp/image/upload/q_30,w_1242,e_blur:90/{{link_data.workplace.coverImage.cloudinaryId}}"
alt="Banner"/>
</div>
<div class="name-logo">
<div class="logo">
<img src="http://res.cloudinary.com/superapp/image/upload/w_230/{{link_data.workplace.logo.cloudinaryId}}"
alt="logo"/>
</div>
<div class="join-us">
<span class="text">Come join us at</span> <br/>
<span class="company-name">{{link_data.workplace.name}}</span>
</div>
</div>
<div class="company-headline">
{{link_data.workplace.headline}}...
</div>
<div class="people-carousel {{#unless link_data.workplace.peopleCarousel.4.image}}collapsed{{/unless}}">
<div class="person">
{{#if link_data.workplace.peopleCarousel.0.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.0.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.1.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.1.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.2.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.2.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.3.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.3.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.4.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.4.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.5.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.5.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
</div>
<div class="next-person">
<div class="text">
Will the next person <br/>
to join {{link_data.workplace.name}} be
</div>
<div class="you">
you?
</div>
</div>
<div class="get-app">
<div class="badge">
<img src="http://res.cloudinary.com/superapp/image/upload/v1453184144/super-badge-ios_3x_x1zdix.png"
alt="badge"/>
</div>
<div class="button-wrapper">
<a href="{{action}}">
<div class="button">
<div class="button-text">
Get the App
</div>
</div>
</a>
</div>
</div>
</div>
</div>
{{else}}
<div class="page-not-found">
<div class="text">
Page Not Found!
</div>
</div>
{{/if}}
</body>
</html>
Usually, when things are fixed when you reload the page, the problem is that an img isn't loaded at the time the styles are applied, so the rendered doesn't know the width/height of an element and gets the layout wrong, you have to force the layout to your needs.
Try setting a fixed width and height for the img tags.
Try setting vertical-align:bottom to all the img and .person
Try setting overflow:hidden on .person
I'm not sure if all of these would work, but I hope at least one will.

Reference element in shadow root

Say I had this code: (or visit this codepen link)
<script src="https://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/core-scaffold/core-scaffold.html">
<style>
body {
font-family: sans-serif;
}
core-scaffold {
}
core-header-panel {
float: left;
height: 400px;
}
.core-header {
height: 64px;
line-height: 60px;
font-size: 18px;
padding: 0 10px;
background-color: #FF66CC;
color: #FFF;
transition: height 0.2s;
}
.core-header-content {
padding: 20px;
}
.main-menu {
background: transparent;
}
.search {
position: static;
border: 0;
padding: 0;
display: inline-block;
}
.search core-icon {
display: inline-block;
}
.search input {
box-sizing: border-box;
-moz-box-sizing: border-box;
position: static;
display: inline-block;
}
</style>
<core-scaffold responsiveWidth="9999px">
<core-header-panel mode="seamed" navigation flex>
<core-toolbar>
<span flex>Title</span>
<core-icon-button icon="refresh"></core-icon-button>
<core-icon-button icon="add"></core-icon-button>
</core-toolbar>
<core-menu>
<core-item label="One"></core-item>
<core-item label="Two"></core-item>
</core-menu>
</core-header-panel>
<core-toolbar class="main-menu" tool flex>
<span flex>Title</span>
<core-icon-button icon="settings" on-tap="{{settingsAction}}"></core-icon-button>
</core-toolbar>
<div class="core-header-content">
</div>
</core-scaffold>
How would I go about referencing the #menuButton core-icon-button (which is automatically generated by the core-scaffold) to change the attribute value of 'icon' from 'menu' to 'apps'?
It's probably something simple I've overlooked and thanks in advance.
Found the answer:
document.addEventListener('polymer-ready', function(e) {
$('core-scaffold::shadow #drawerPanel #headerPanel core-toolbar #menuButton').attr('icon','apps');
});