diff --git a/css/style.scss b/css/style.scss index ef7e3bc..a588e0c 100644 --- a/css/style.scss +++ b/css/style.scss @@ -9,10 +9,6 @@ body { font-family: "ff-tisa-web-pro", serif; } -body, .container { - position: relative; -} - p { a:link, a:visited { color: #000; @@ -20,22 +16,11 @@ p { } } -.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; @@ -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; @@ -88,6 +65,9 @@ a#hamburger { img { width: 100%; } +.nav-pills .nav-link { + padding-top: 0; +} figcaption { font-style: italic; @@ -95,10 +75,35 @@ figcaption { 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 { @@ -107,10 +112,6 @@ nav { font-weight: 900!important; } - h4 { - font-size: 16px; - font-weight: bold; - } a:link, a:visited { color: #000; @@ -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; } } } diff --git a/index.html b/index.html index 0bcdb2f..c15c3ce 100644 --- a/index.html +++ b/index.html @@ -37,20 +37,20 @@
-
+

The
Accessible Icon
Project

The Accessible Icon Project is an ongoing work of design activism. It starts with a graphic icon, free for use in the public domain, and continues its work as a collaboration among people with disabilities and their allies toward a more accessible world.

-
+
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.
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.
@@ -126,11 +126,11 @@

by Sara Hendren, Feb. 2016

-
+
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.
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.
-
+
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.
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.
@@ -167,7 +167,7 @@

by Sara Hendren, Feb. 2016

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.

-
+
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.
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.
@@ -177,7 +177,7 @@

by Sara Hendren, Feb. 2016

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.
-
+
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.
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.