split scss into separate files
This commit is contained in:
parent
0d71ff4d03
commit
222a9707b4
10 changed files with 442 additions and 437 deletions
20
assets/scss/base/layout.scss
Normal file
20
assets/scss/base/layout.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
main {flex-grow: 1}
|
||||||
|
.section {
|
||||||
|
padding: 2em 0;
|
||||||
|
@media (min-width: 600px) {padding: 3em 0}
|
||||||
|
@media (min-width: 62em) {padding: 4em 0}
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
13
assets/scss/base/list.scss
Normal file
13
assets/scss/base/list.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
.list {}
|
||||||
|
.list-item {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
padding: 1em;
|
||||||
|
background: #eee;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
transition: 0.4s opacity ease-in-out;
|
||||||
|
&:hover {opacity: 0.4;}
|
||||||
|
}
|
||||||
|
.list-item__title {font-weight: 700;}
|
||||||
|
.list-item__date {}
|
||||||
61
assets/scss/base/page.scss
Normal file
61
assets/scss/base/page.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
.page-title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
@media (min-width: 600px) {font-size: 2rem}
|
||||||
|
@media (min-width: 768px) {font-size: 3rem}
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
@media (min-width: 600px) {font-size: 2rem}
|
||||||
|
@media (min-width: 768px) {font-size: 3rem}
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
@media (min-width: 600px) {font-size: 1.75rem}
|
||||||
|
@media (min-width: 768px) {font-size: 2rem}
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.7em;
|
||||||
|
margin-top: 2em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1em;
|
||||||
|
@media (min-width: 600px) {font-size: 1.5rem}
|
||||||
|
@media (min-width: 768px) {font-size: 1.75rem}
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.7em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-underline-offset: 7px;
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
transition: 0.25s ease-in-out;
|
||||||
|
transition-property: text-decoration-thickness color;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #00a3ff;
|
||||||
|
text-decoration-thickness: 6px;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
@media (min-width: 600px) {font-size: 1.25rem}
|
||||||
|
@media (min-width: 768px) {font-size: 1.5rem}
|
||||||
|
list-style: disc;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
li {margin-bottom: 1em;}
|
||||||
|
li > ul {margin-top: 1em;}
|
||||||
|
em {font-style: italic;}
|
||||||
|
strong {font-weight: 700;}
|
||||||
|
blockquote {padding-left: 0.5em; border-left: 4px solid black}
|
||||||
|
}
|
||||||
|
|
||||||
|
#TableOfContents {
|
||||||
|
ul {
|
||||||
|
li {margin-bottom: 1em;}
|
||||||
|
}
|
||||||
|
}
|
||||||
44
assets/scss/base/reset.scss
Normal file
44
assets/scss/base/reset.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
19
assets/scss/base/sections.scss
Normal file
19
assets/scss/base/sections.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
.section-header {
|
||||||
|
font-size: 1.5em;
|
||||||
|
@media (min-width: 600px) {font-size: 2em;}
|
||||||
|
@media (min-width: 768px) {font-size: 2.5em}
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.7em;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.section {
|
||||||
|
p, a, blockquote {
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 1rem;
|
||||||
|
@media (min-width: 600px) {font-size: 1.25rem}
|
||||||
|
@media (min-width: 768px) {font-size: 1.5rem}
|
||||||
|
margin-bottom: 1.4em;
|
||||||
|
&:last-child {margin-bottom: 0;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.read-more {color: #00a3ff}
|
||||||
|
|
@ -1,439 +1,10 @@
|
||||||
/* reset.css */
|
@import "base/reset.scss";
|
||||||
|
@import "base/layout.scss";
|
||||||
|
@import "base/page.scss";
|
||||||
|
@import "base/list.scss";
|
||||||
|
@import "base/sections.scss";
|
||||||
|
|
||||||
html, body, div, span, applet, object, iframe,
|
@import "pages/index.scss";
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, big, cite, code,
|
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
||||||
small, strike, strong, sub, sup, tt, var,
|
|
||||||
b, u, i, center,
|
|
||||||
dl, dt, dd, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup,
|
|
||||||
menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
font-size: 100%;
|
|
||||||
font: inherit;
|
|
||||||
vertical-align: baseline;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
article, aside, details, figcaption, figure,
|
@import "partials/site-header.scss";
|
||||||
footer, header, hgroup, menu, nav, section {
|
@import "partials/i18n.scss";
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
ol, ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
blockquote, q {
|
|
||||||
quotes: none;
|
|
||||||
}
|
|
||||||
blockquote:before, blockquote:after,
|
|
||||||
q:before, q:after {
|
|
||||||
content: '';
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* begin custom css */
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
main {flex-grow: 1}
|
|
||||||
.section {
|
|
||||||
padding: 2em 0;
|
|
||||||
@media (min-width: 600px) {padding: 3em 0}
|
|
||||||
@media (min-width: 62em) {padding: 4em 0}
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
max-width: 960px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 1em;
|
|
||||||
@media (min-width: 62em) {padding: 0;}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* single */
|
|
||||||
.page-title {
|
|
||||||
font-size: 1.5em;
|
|
||||||
@media (min-width: 600px) {font-size: 2rem}
|
|
||||||
@media (min-width: 768px) {font-size: 3rem}
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
.page {
|
|
||||||
h1 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
@media (min-width: 600px) {font-size: 2rem}
|
|
||||||
@media (min-width: 768px) {font-size: 3rem}
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 1.25em;
|
|
||||||
@media (min-width: 600px) {font-size: 1.75rem}
|
|
||||||
@media (min-width: 768px) {font-size: 2rem}
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.7em;
|
|
||||||
margin-top: 2em;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-size: 1em;
|
|
||||||
@media (min-width: 600px) {font-size: 1.5rem}
|
|
||||||
@media (min-width: 768px) {font-size: 1.75rem}
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.7em;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-underline-offset: 7px;
|
|
||||||
text-decoration-thickness: 2px;
|
|
||||||
transition: 0.25s ease-in-out;
|
|
||||||
transition-property: text-decoration-thickness color;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #00a3ff;
|
|
||||||
text-decoration-thickness: 6px;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.4;
|
|
||||||
@media (min-width: 600px) {font-size: 1.25rem}
|
|
||||||
@media (min-width: 768px) {font-size: 1.5rem}
|
|
||||||
list-style: disc;
|
|
||||||
margin-left: 1em;
|
|
||||||
}
|
|
||||||
li {margin-bottom: 1em;}
|
|
||||||
li > ul {margin-top: 1em;}
|
|
||||||
em {font-style: italic;}
|
|
||||||
strong {font-weight: 700;}
|
|
||||||
blockquote {padding-left: 0.5em; border-left: 4px solid black}
|
|
||||||
}
|
|
||||||
|
|
||||||
#TableOfContents {
|
|
||||||
ul {
|
|
||||||
li {margin-bottom: 1em;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* list */
|
|
||||||
.list {}
|
|
||||||
.list-item {
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
padding: 1em;
|
|
||||||
background: #eee;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
transition: 0.4s opacity ease-in-out;
|
|
||||||
&:hover {opacity: 0.4;}
|
|
||||||
}
|
|
||||||
.list-item__title {font-weight: 700;}
|
|
||||||
.list-item__date {}
|
|
||||||
|
|
||||||
/* sections */
|
|
||||||
.section-header {
|
|
||||||
font-size: 1.5em;
|
|
||||||
@media (min-width: 600px) {font-size: 2em;}
|
|
||||||
@media (min-width: 768px) {font-size: 2.5em}
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.7em;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
.section {
|
|
||||||
p, a, blockquote {
|
|
||||||
line-height: 1.4;
|
|
||||||
font-size: 1rem;
|
|
||||||
@media (min-width: 600px) {font-size: 1.25rem}
|
|
||||||
@media (min-width: 768px) {font-size: 1.5rem}
|
|
||||||
margin-bottom: 1.4em;
|
|
||||||
&:last-child {margin-bottom: 0;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.read-more {color: #00a3ff}
|
|
||||||
|
|
||||||
/* header bar */
|
|
||||||
.site-header {background: #ddd; filter: drop-shadow(0px -1px 2px rgba(0,0,0,0.2))}
|
|
||||||
.site-header a {text-decoration: none; color: inherit;}
|
|
||||||
.site-title {font-weight: 700; font-size: 22px; line-height: 2em;}
|
|
||||||
.site-header .container {display: flex; flex-flow: row wrap;}
|
|
||||||
.site-nav {flex-basis: 100%; display: flex; flex-flow: column;}
|
|
||||||
.site-nav a {display: block; padding: 1em 0;}
|
|
||||||
|
|
||||||
/* css menu */
|
|
||||||
.site-nav {
|
|
||||||
display: none;
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
display: flex;
|
|
||||||
flex-basis: unset;
|
|
||||||
flex-flow: row;
|
|
||||||
ul {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
margin-left: 1em;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.site-header {
|
|
||||||
position: fixed; bottom: 0; width: 100%;
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
position: sticky;
|
|
||||||
bottom: unset;
|
|
||||||
top: 0;
|
|
||||||
z-index: 2;
|
|
||||||
a {height: 44px;}
|
|
||||||
a:hover {border-bottom: 2px solid #00a3ff;}
|
|
||||||
.container {justify-content: space-between; flex-flow: row wrap; height: 64px; align-items: center;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin-bottom: 44px;
|
|
||||||
@media (min-width: 600px) {margin-bottom: unset;}
|
|
||||||
}
|
|
||||||
.hamburger-label::before {content:"Menu"; position: absolute; left: -3em; }
|
|
||||||
#hamburger:checked ~ .site-nav {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
#hamburger {
|
|
||||||
transition: all 0.5s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.hamburger-label {
|
|
||||||
transition: all 0.5s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 99;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
top: 16px;
|
|
||||||
right: 15px;
|
|
||||||
height: 22px;
|
|
||||||
width: 22px;
|
|
||||||
}
|
|
||||||
.spinner {
|
|
||||||
transition: all 0.5s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: absolute;
|
|
||||||
height: 3px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
.horizontal {
|
|
||||||
transition: all 0.5s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
.diagonal.part-1 {
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.5s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.diagonal.part-2 {
|
|
||||||
transition: all 0.5s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
#hamburger:checked ~ .hamburger-label > .horizontal {
|
|
||||||
transition: all 0.5s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
#hamburger:checked ~ .hamburger-label > .diagonal.part-1 {
|
|
||||||
transition: all 0.5s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transform: rotate(135deg);
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
#hamburger:checked ~ .hamburger-label > .diagonal.part-2 {
|
|
||||||
transition: all 0.5s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transform: rotate(-135deg);
|
|
||||||
margin-top: -9px;
|
|
||||||
}
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
#hamburger, .hamburger-label {display: none;}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* personal summary */
|
|
||||||
.personal-summary {
|
|
||||||
background: #eee;
|
|
||||||
.container {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
max-width: 400px;
|
|
||||||
justify-self: center;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
h2 {}
|
|
||||||
p {}
|
|
||||||
em {font-weight: 700;}
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
.container {
|
|
||||||
grid-template-rows: auto 1fr;
|
|
||||||
grid-template-columns: minmax(40ch,65ch) minmax(160px,1fr);
|
|
||||||
grid-template-areas:
|
|
||||||
"title image"
|
|
||||||
"blurb image";
|
|
||||||
grid-gap: 0 1em;
|
|
||||||
}
|
|
||||||
img {grid-area: image;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
justify-content: flex-end;
|
|
||||||
width: 100%;
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: #00a3ff;
|
|
||||||
text-decoration: none;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.5em;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
transition: background 0.4s ease-in-out;
|
|
||||||
i {margin-right: 0.5em;}
|
|
||||||
}
|
|
||||||
a:first-child {
|
|
||||||
margin-right: 1em;
|
|
||||||
background: #00a3ff;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
a:not(:first-child) {
|
|
||||||
border: 2px solid #00a3ff;
|
|
||||||
}
|
|
||||||
a:hover {background: rgba(#00a3ff,0.4)}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* about logos */
|
|
||||||
|
|
||||||
.organization-logos {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
br {display: none;}
|
|
||||||
img {
|
|
||||||
flex-basis: 50%;
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 1em;
|
|
||||||
@media (min-width: 480px) {
|
|
||||||
flex-basis: 25%;
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
img:first-child, img:nth-child(3) {
|
|
||||||
flex-basis: 100%;
|
|
||||||
width: 100%;
|
|
||||||
@media (min-width: 480px) {
|
|
||||||
flex-basis: 50%;
|
|
||||||
width: 50%;
|
|
||||||
max-width: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
margin-bottom: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* contact section and footer */
|
|
||||||
#consultancy, #contact {background: #eee}
|
|
||||||
.h-card {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 600px;
|
|
||||||
background: white;
|
|
||||||
box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
|
|
||||||
border-radius: 2px;
|
|
||||||
.u-photo {flex-grow: 1; flex-basis: 160px; width: 100%; height: auto;}
|
|
||||||
.info {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: 1em;
|
|
||||||
font-size: 1em;
|
|
||||||
@media (min-width: 320px) {font-size: 1.2em;}
|
|
||||||
}
|
|
||||||
.p-name {font-size: inherit; font-weight: 700;}
|
|
||||||
}
|
|
||||||
.contact-methods {margin-bottom: 0.7em;}
|
|
||||||
.contact-method {line-height: 1.4}
|
|
||||||
.contact-method i {margin-right: 0.5em;}
|
|
||||||
.site-footer {
|
|
||||||
background: #ddd;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
align-items: center;
|
|
||||||
hr {display: none;}
|
|
||||||
.container {
|
|
||||||
padding: 1em;
|
|
||||||
.social-links {
|
|
||||||
font-size: 2em;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
margin: 1em 0;
|
|
||||||
.social-link {
|
|
||||||
color: #333;
|
|
||||||
transition: color 0.4s ease-in-out;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
width: 1em;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
text-decoration: none;
|
|
||||||
span {display: none;}
|
|
||||||
}
|
|
||||||
.social-link:first-child {margin-left: 0;}
|
|
||||||
.twitter:hover {color: #1da1f2}
|
|
||||||
.facebook:hover {color: #1778f2}
|
|
||||||
.linkedin:hover {color: #0e76a8}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.2;
|
|
||||||
a {color: inherit; font-weight: 700; transition: color 0.4s ease-in-out}
|
|
||||||
a:hover {color: #00a3ff}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/* i18n */
|
|
||||||
html[lang="ar"] {
|
|
||||||
.site-nav,
|
|
||||||
.personal-summary,
|
|
||||||
.section-header,
|
|
||||||
.page-title,
|
|
||||||
.cta a
|
|
||||||
{direction: rtl;}
|
|
||||||
.cta a {margin-right: 0; margin-left: 1em;}
|
|
||||||
}
|
|
||||||
148
assets/scss/pages/index.scss
Normal file
148
assets/scss/pages/index.scss
Normal file
|
|
@ -0,0 +1,148 @@
|
||||||
|
/* personal summary */
|
||||||
|
.personal-summary {
|
||||||
|
background: #eee;
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-width: 400px;
|
||||||
|
justify-self: center;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
h2 {}
|
||||||
|
p {}
|
||||||
|
em {font-weight: 700;}
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.container {
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
grid-template-columns: minmax(40ch,65ch) minmax(160px,1fr);
|
||||||
|
grid-template-areas:
|
||||||
|
"title image"
|
||||||
|
"blurb image";
|
||||||
|
grid-gap: 0 1em;
|
||||||
|
}
|
||||||
|
img {grid-area: image;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #00a3ff;
|
||||||
|
text-decoration: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
transition: background 0.4s ease-in-out;
|
||||||
|
i {margin-right: 0.5em;}
|
||||||
|
}
|
||||||
|
a:first-child {
|
||||||
|
margin-right: 1em;
|
||||||
|
background: #00a3ff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
a:not(:first-child) {
|
||||||
|
border: 2px solid #00a3ff;
|
||||||
|
}
|
||||||
|
a:hover {background: rgba(#00a3ff,0.4)}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* about logos */
|
||||||
|
|
||||||
|
.organization-logos {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
br {display: none;}
|
||||||
|
img {
|
||||||
|
flex-basis: 50%;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1em;
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
flex-basis: 25%;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img:first-child, img:nth-child(3) {
|
||||||
|
flex-basis: 100%;
|
||||||
|
width: 100%;
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
flex-basis: 50%;
|
||||||
|
width: 50%;
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* contact section and footer */
|
||||||
|
#consultancy, #contact {background: #eee}
|
||||||
|
.h-card {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 600px;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
.u-photo {flex-grow: 1; flex-basis: 160px; width: 100%; height: auto;}
|
||||||
|
.info {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 1em;
|
||||||
|
font-size: 1em;
|
||||||
|
@media (min-width: 320px) {font-size: 1.2em;}
|
||||||
|
}
|
||||||
|
.p-name {font-size: inherit; font-weight: 700;}
|
||||||
|
}
|
||||||
|
.contact-methods {margin-bottom: 0.7em;}
|
||||||
|
.contact-method {line-height: 1.4}
|
||||||
|
.contact-method i {margin-right: 0.5em;}
|
||||||
|
.site-footer {
|
||||||
|
background: #ddd;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
hr {display: none;}
|
||||||
|
.container {
|
||||||
|
padding: 1em;
|
||||||
|
.social-links {
|
||||||
|
font-size: 2em;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
margin: 1em 0;
|
||||||
|
.social-link {
|
||||||
|
color: #333;
|
||||||
|
transition: color 0.4s ease-in-out;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
width: 1em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-decoration: none;
|
||||||
|
span {display: none;}
|
||||||
|
}
|
||||||
|
.social-link:first-child {margin-left: 0;}
|
||||||
|
.twitter:hover {color: #1da1f2}
|
||||||
|
.facebook:hover {color: #1778f2}
|
||||||
|
.linkedin:hover {color: #0e76a8}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2;
|
||||||
|
a {color: inherit; font-weight: 700; transition: color 0.4s ease-in-out}
|
||||||
|
a:hover {color: #00a3ff}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
9
assets/scss/partials/i18n.scss
Normal file
9
assets/scss/partials/i18n.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
html[lang="ar"] {
|
||||||
|
.site-nav,
|
||||||
|
.personal-summary,
|
||||||
|
.section-header,
|
||||||
|
.page-title,
|
||||||
|
.cta a
|
||||||
|
{direction: rtl;}
|
||||||
|
.cta a {margin-right: 0; margin-left: 1em;}
|
||||||
|
}
|
||||||
110
assets/scss/partials/site-header.scss
Normal file
110
assets/scss/partials/site-header.scss
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
/* header bar */
|
||||||
|
.site-header {background: #ddd; filter: drop-shadow(0px -1px 2px rgba(0,0,0,0.2))}
|
||||||
|
.site-header a {text-decoration: none; color: inherit;}
|
||||||
|
.site-title {font-weight: 700; font-size: 22px; line-height: 2em;}
|
||||||
|
.site-header .container {display: flex; flex-flow: row wrap;}
|
||||||
|
.site-nav {flex-basis: 100%; display: flex; flex-flow: column;}
|
||||||
|
.site-nav a {display: block; padding: 1em 0;}
|
||||||
|
|
||||||
|
/* css menu */
|
||||||
|
.site-nav {
|
||||||
|
display: none;
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
display: flex;
|
||||||
|
flex-basis: unset;
|
||||||
|
flex-flow: row;
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
margin-left: 1em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.site-header {
|
||||||
|
position: fixed; bottom: 0; width: 100%;
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
position: sticky;
|
||||||
|
bottom: unset;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
a {height: 44px;}
|
||||||
|
a:hover {border-bottom: 2px solid #00a3ff;}
|
||||||
|
.container {justify-content: space-between; flex-flow: row wrap; height: 64px; align-items: center;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin-bottom: 44px;
|
||||||
|
@media (min-width: 600px) {margin-bottom: unset;}
|
||||||
|
}
|
||||||
|
.hamburger-label::before {content:"Menu"; position: absolute; left: -3em; }
|
||||||
|
#hamburger:checked ~ .site-nav {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#hamburger {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.hamburger-label {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
top: 16px;
|
||||||
|
right: 15px;
|
||||||
|
height: 22px;
|
||||||
|
width: 22px;
|
||||||
|
}
|
||||||
|
.spinner {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
height: 3px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
.horizontal {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
.diagonal.part-1 {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.diagonal.part-2 {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
#hamburger:checked ~ .hamburger-label > .horizontal {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
#hamburger:checked ~ .hamburger-label > .diagonal.part-1 {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transform: rotate(135deg);
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
#hamburger:checked ~ .hamburger-label > .diagonal.part-2 {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transform: rotate(-135deg);
|
||||||
|
margin-top: -9px;
|
||||||
|
}
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
#hamburger, .hamburger-label {display: none;}
|
||||||
|
}
|
||||||
|
|
@ -24,3 +24,13 @@ The experts serving on the Committee, which will hold its third session in two w
|
||||||
The Convention, which entered into force in May 2008, is the culmination of years of global efforts to ensure that the rights of the world’s estimated 650 million persons with disabilities are guaranteed and protected.
|
The Convention, which entered into force in May 2008, is the culmination of years of global efforts to ensure that the rights of the world’s estimated 650 million persons with disabilities are guaranteed and protected.
|
||||||
|
|
||||||
It asserts the rights to education, health, work, adequate living conditions, freedom of movement, freedom from exploitation and equal recognition before the law for persons with disabilities.
|
It asserts the rights to education, health, work, adequate living conditions, freedom of movement, freedom from exploitation and equal recognition before the law for persons with disabilities.
|
||||||
|
|
||||||
|
## Full Statement
|
||||||
|
|
||||||
|
The Committee on the Rights of Persons with Disabilities expresses its deepest sympathy and solidarity to the Government and people of Haiti affected by the devastating earthquake of 12 January 2010. The Committee also extends its condolences to the families of United Nations staff as well as all unknown and known persons with disabilities who perished in the earthquake.
|
||||||
|
|
||||||
|
The earthquake which hit one of the poorest countries in the world has caused tremendous hardship, injury and loss of life among the general population. Whilst relief workers are struggling to provide aid to the people of Haiti and whilst the situation remains difficult for everyone, persons with disabilities are particularly affected by the crisis. The Committee reminds that under the Convention on the Rights of Persons with Disabilities, states are to take all necessary measures to ensure the protection and safety of persons with disabilities in situations of risk, and natural disaster like the occurrence of this earthquake, and therefore a disability perspective should be included in all humanitarian relief efforts to meet the needs of the disabled.
|
||||||
|
|
||||||
|
Given the specific environment in which the humanitarian crisis is unfolding, the Committee urges that the disabled, elderly and other vulnerable groups such as women and children in the community be given preferential access to food distribution, and proper sanitation facilities. The Committee is indeed concerned by the prospect of epidemics caused by overcrowding and poor sanitation and also by the lack of law and order in the earthquake affected areas, and urges Haiti authorities and the international community providing sustained support to it to prevent the spread of diseases and improve security for the most vulnerable people in the affected communities. The trauma caused by this disaster cannot be underestimated. The Committee stresses that it is important to address the specific needs of persons with disabilities in health care and rehabilitation services.
|
||||||
|
|
||||||
|
The Committee extends its appreciation to the international community which stands united in its resolve to help Haiti overcome this natural disaster. As the social and economic reconstruction of Haiti is about to begin, the Committee urges Haiti to ensure that persons with disabilities fully participate in the decision-making process and that sustained efforts be centred on the long-term development needs of disabled persons in Haiti.
|
||||||
Loading…
Reference in a new issue