Skip to content

Commit

Permalink
nav scaling, fixes #3, and maybe #22
Browse files Browse the repository at this point in the history
  • Loading branch information
@caseyg
caseyg committed Feb 14, 2016
1 parent 7fcc2e2 commit a802546
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 40 deletions.
69 changes: 39 additions & 30 deletions css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,18 @@ body {
font-family: "ff-tisa-web-pro", serif;
}

body, .container {
position: relative;
}

p {
a:link, a:visited {
color: #000;
text-decoration: underline;
}
}

.container-fluid {
padding: 0;
& > .row {
padding: 0;
}
}

h1, h2, h3, h4, h5, nav {
font-family: "proxima-nova", sans-serif;
}

#sidebar {
max-height: 100vh;
overflow-y: scroll;
}

h1 {
color: $blue;
font-size: 3rem;
Expand Down Expand Up @@ -65,14 +50,6 @@ h2 {
}
}

.nav-pills .nav-link.active {
background: transparent !important;
border-radius: 0;
border-left:5px solid $blue;
color: $blue !important;
padding-left: 11px;
}

a#hamburger {
display: block!important;
position: fixed; top: 15px; right: 15px;
Expand All @@ -88,17 +65,45 @@ a#hamburger {
img {
width: 100%;
}
.nav-pills .nav-link {
padding-top: 0;
}

figcaption {
font-style: italic;
}

nav {
padding-top: 45px;
font-size: 16px!important;

font-size: 16px;

h4 {
font-weight: bold;
font-size: 16px;
color: $blue;
}

@include media-breakpoint-up(sm) {
font-size: 18px;
h4 {font-size: 18px;}
}

@include media-breakpoint-up(lg) {
font-size: 22px;
h4 {font-size: 22px;}
}

&.nav-pills .nav-link {
padding-top: 0;
}

svg {
width: 50px;
width: 75px;
height: 75px;
@include media-breakpoint-up(lg) {
width: 125px;
height: 125px;
}
}

.header a {
Expand All @@ -107,10 +112,6 @@ nav {
font-weight: 900!important;
}

h4 {
font-size: 16px;
font-weight: bold;
}

a:link, a:visited {
color: #000;
Expand Down Expand Up @@ -203,6 +204,14 @@ section {
.row {
margin-bottom: 60px;
align-items: center;
&.align-top {
align-items: flex-start;
}
}
}
@include media-breakpoint-up(lg) {
p {
font-size: 1.25rem;
}
}
}
Expand Down
20 changes: 10 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,20 +37,20 @@
<div class="container">
<section id="read">
<div class="row">
<header class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<header class="col-xs-12">
<h1 class="text-xs-center">The<br> <strong>Accessible Icon</strong><br> Project</h1>
<p class="lead">The Accessible Icon Project is an ongoing work of <a href="#notes-on-design-activism">design activism</a>. It starts with a graphic icon, <a href="#use">free for use</a> in the public domain, and continues its work as a collaboration among people with disabilities and their allies <a href="#an-icon-is-a-verb">toward a more accessible world</a>.</p>
</header>
</div>
<nav id="navigation" class="text-xs-center" role="navigation">
<a href="#home" class="col-md-12"><svg version="1.1"viewBox="872.9 365.7 50 64" aria-labelledby="title" aria-describedby="description" role="img"> <style type="text/css"> .st0{fill:#0076FF;} </style> <title id="title">Accessible Icon Project logo</title><desc id="description">The final icon, in blue and white, closely similar to the original version but with the body foregrounded, and wheel cutouts to suggest motion.</desc> <g> <path class="st0" d="M921.8,394.7c-0.8-0.8-1.8-1.2-2.9-1.1l-13.3,0.7l7.3-8.3c1-1.2,1.3-2.8,0.9-4.2c-0.2-1-0.8-1.8-1.7-2.4 c0,0-17.4-10.1-17.4-10.1c-1.4-0.8-3.2-0.6-4.4,0.5l-8.5,7.6c-1.6,1.4-1.7,3.8-0.3,5.4c1.4,1.6,3.8,1.7,5.4,0.3l6.4-5.8l5.3,3.1 l-9.4,10.7c-3.9,0.6-7.4,2.4-10.2,5l4.9,4.9c2.2-2,5.2-3.3,8.4-3.3c6.9,0,12.5,5.6,12.5,12.5c0,3.2-1.2,6.2-3.3,8.4l4.9,4.9 c3.3-3.5,5.3-8.2,5.3-13.3c0-3.1-0.7-6-2-8.6l5.1-0.3l-1.2,15.3c-0.2,2.1,1.4,3.9,3.5,4.1c0.1,0,0.2,0,0.3,0c2,0,3.6-1.5,3.8-3.5 l1.6-19.7C922.9,396.6,922.6,395.5,921.8,394.7z"/> <path class="st0" d="M914.7,378.4c3.5,0,6.4-2.9,6.4-6.4c0-3.5-2.8-6.4-6.4-6.4c-3.5,0-6.4,2.9-6.4,6.4 C908.4,375.6,911.2,378.4,914.7,378.4z"/> <path class="st0" d="M892.3,422.8c-6.9,0-12.5-5.6-12.5-12.5c0-2.6,0.8-5,2.2-7l-5-5c-2.6,3.3-4.1,7.5-4.1,12 c0,10.7,8.7,19.5,19.5,19.5c4.5,0,8.7-1.5,12-4.1l-5-5C897.3,422,894.9,422.8,892.3,422.8z"/> </g> </svg></a>
<a href="#home" class="col-xs-12"><svg version="1.1"viewBox="872.9 365.7 50 64" aria-labelledby="title" aria-describedby="description" role="img"> <style type="text/css"> .st0{fill:#0076FF;} </style> <title id="title">Accessible Icon Project logo</title><desc id="description">The final icon, in blue and white, closely similar to the original version but with the body foregrounded, and wheel cutouts to suggest motion.</desc> <g> <path class="st0" d="M921.8,394.7c-0.8-0.8-1.8-1.2-2.9-1.1l-13.3,0.7l7.3-8.3c1-1.2,1.3-2.8,0.9-4.2c-0.2-1-0.8-1.8-1.7-2.4 c0,0-17.4-10.1-17.4-10.1c-1.4-0.8-3.2-0.6-4.4,0.5l-8.5,7.6c-1.6,1.4-1.7,3.8-0.3,5.4c1.4,1.6,3.8,1.7,5.4,0.3l6.4-5.8l5.3,3.1 l-9.4,10.7c-3.9,0.6-7.4,2.4-10.2,5l4.9,4.9c2.2-2,5.2-3.3,8.4-3.3c6.9,0,12.5,5.6,12.5,12.5c0,3.2-1.2,6.2-3.3,8.4l4.9,4.9 c3.3-3.5,5.3-8.2,5.3-13.3c0-3.1-0.7-6-2-8.6l5.1-0.3l-1.2,15.3c-0.2,2.1,1.4,3.9,3.5,4.1c0.1,0,0.2,0,0.3,0c2,0,3.6-1.5,3.8-3.5 l1.6-19.7C922.9,396.6,922.6,395.5,921.8,394.7z"/> <path class="st0" d="M914.7,378.4c3.5,0,6.4-2.9,6.4-6.4c0-3.5-2.8-6.4-6.4-6.4c-3.5,0-6.4,2.9-6.4,6.4 C908.4,375.6,911.2,378.4,914.7,378.4z"/> <path class="st0" d="M892.3,422.8c-6.9,0-12.5-5.6-12.5-12.5c0-2.6,0.8-5,2.2-7l-5-5c-2.6,3.3-4.1,7.5-4.1,12 c0,10.7,8.7,19.5,19.5,19.5c4.5,0,8.7-1.5,12-4.1l-5-5C897.3,422,894.9,422.8,892.3,422.8z"/> </g> </svg></a>
<div class="row">
<ul class="nav nav-pills nav-stacked text-md-left col-xs-12 col-md-4 col-md-offset-1">
<ul class="nav nav-pills nav-stacked text-md-left col-xs-12 col-md-5">
<li class="nav-item header"><a class="nav-link" href="#read"><h4>Read</h4></a></li>
<li class="nav-item"><a class="nav-link" href="#an-icon-is-a-verb">An Icon is a Verb: <em>About the Project</em> <small>5 minute read — 910 words, 15 images</small></a></li>
<li class="nav-item"><a class="nav-link" href="#an-icon-is-a-verb">An Icon is a Verb: <em>About&nbsp;the&nbsp;Project</em> <small>5 minute read — 910 words, 15 images</small></a></li>
<li class="nav-item"><a class="nav-link" href="#notes-on-design-activism">Notes on Design Activism <small>6 minute read — 1515 words</small></a></li>
</ul>
<ul class="nav nav-pills nav-stacked text-md-left col-xs-12 col-md-4">
<ul class="nav nav-pills nav-stacked text-md-left col-xs-12 col-md-5">
<li class="nav-item header"><a class="nav-link" href="#contribute"><h4>Contribute</h4></a></li>
<li class="nav-item"><a class="nav-link" href="#use">Use the icon</a></li>
<li class="nav-item"><a class="nav-link" href="#buy">Buy stickers and stencils</a></li>
Expand Down Expand Up @@ -82,7 +82,7 @@ <h3>by Sara Hendren, <em>Feb. 2016</em></h3>
<p>On my web site, <a href="http://ablersite.org/">Abler</a>, I’d started collecting icons with more design integrity <a href="http://ablersite.org/2010/03/29/ongoing-public-signs/">back in 2010</a>. They were rare, but they were present—in high design places like museums, and at ordinary businesses, like my local Marshalls in Cambridge, Massachusetts.</p>
</div>
</div>
<div class="row">
<div class="row align-top">
<figure class="figure col-md-6">
<img src="/img/icon-original.png" class="figure-img" alt="The original International Symbol of Access, designed in the 1960s by Susanne Koefoed. Its provisions are historic and profound. But its rectilinear geometry doesn’t show the organic body moving through space, like the rest of the standard isotype icons you see in public space.">
<figcaption class="figure-caption">The original International Symbol of Access, designed in the 1960s by Susanne Koefoed. Its provisions are historic and profound. But its rectilinear geometry doesn’t show the organic body moving through space, like the rest of the standard isotype icons you see in public space.</figcaption>
Expand Down Expand Up @@ -126,11 +126,11 @@ <h3>by Sara Hendren, <em>Feb. 2016</em></h3>
</figure>
</div>
<div class="row">
<figure class="figure col-xs-5">
<figure class="figure col-md-5">
<img src="/img/accessible-icon.jpg" class="figure-img" alt="Our final icon in white on blue, to keep to the standard color scheme of the original. Now there’s just one wheel, but with two cutouts to emphasize its motion and make it easy to stencil.">
<figcaption class="figure-caption">Our final icon in white on blue, to keep to the standard color scheme of the original. Now there’s just one wheel, but with two cutouts to emphasize its motion and make it easy to stencil.</figcaption>
</figure>
<figure class="figure col-xs-7">
<figure class="figure col-md-7">
<img src="/img/icon-iso-design-standardization.jpg" class="figure-img" alt="You can see here the ISO DOT 50 standard icons you’d find all over the built environment: for elevators, restrooms, and more. Figures and limbs have rounded, organic ends, mimicking the look of human bodies. We think the new icon adheres to the logic of these standard icons in a complementary, legible way—an “edit” of the important original.">
<figcaption class="figure-caption">You can see here the ISO DOT 50 standard icons you’d find all over the built environment: for elevators, restrooms, and more. Figures and limbs have rounded, organic ends, mimicking the look of human bodies. We think the new icon adheres to the logic of these standard icons in a complementary, legible way—an “edit” of the important original.</figcaption>
</figure>
Expand Down Expand Up @@ -167,7 +167,7 @@ <h3>by Sara Hendren, <em>Feb. 2016</em></h3>
<p>The icon is genuinely global now: in hundreds of cities and towns, at private and public organizations, used by governments and by individual citizens. We never, not in a million years, would have anticipated its growth when we first started. </p>
</div>
</div>
<div class="row">
<div class="row align-top">
<figure class="figure col-md-6">
<img src="/img/icon-multiplicity-sign.jpg" class="figure-img" alt="A sign at a hospital in Delhi, India, was sent to us early in the project by a doctor and self-advocate named Satendra Singh. Disability advocacy means very different things in different locales; we’re glad the icon is one way that like-minded activists can find one another.">
<figcaption class="figure-caption">A sign at a hospital in Delhi, India, was sent to us early in the project by a doctor and self-advocate named Satendra Singh. Disability advocacy means very different things in different locales; we’re glad the icon is one way that like-minded activists can find one another.</figcaption>
Expand All @@ -177,7 +177,7 @@ <h3>by Sara Hendren, <em>Feb. 2016</em></h3>
<figcaption class="figure-caption">Nearly every week, someone submits a photo from somewhere in the world that the icon appears: like at this registration/information booth at a conference, painted with giant accessible icons. Photo by Christofu Yang.</figcaption>
</figure>
</div>
<div class="row">
<div class="row align-top">
<figure class="figure col-md-6">
<img src="/img/icon-multiplicity-bikes.jpg" class="figure-img" alt="Others send us photos like these, showing a tiny stenciled icon on a curb. It echoes the original street art spirit but with the new icon image.">
<figcaption class="figure-caption">Others send us photos like these, showing a tiny stenciled icon on a curb. It echoes the original street art spirit but with the new icon image.</figcaption>
Expand Down

0 comments on commit a802546

Please sign in to comment.