diff --git a/.DS_Store b/.DS_Store index 15b07514..0c3a5999 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/_site/.DS_Store b/_site/.DS_Store new file mode 100644 index 00000000..3c57b0ef Binary files /dev/null and b/_site/.DS_Store differ diff --git a/_site/README/index.html b/_site/README/index.html new file mode 100644 index 00000000..99fd3377 --- /dev/null +++ b/_site/README/index.html @@ -0,0 +1,29 @@ +

📕 Self-Defined Dictionary

+

A modern dictionary about us. We define our words, but they don't define us.

+

Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the modern world. +For now, this stands as a list only, from which you can self-educate. Pull requests can be made to include words that are not yet represented.

+

Context

+ +

Components (Build order)

+
    +
  1. Dictionary site: Webapp where words can be connected, linking to alternates for bad terms or alternates for definitions with nuance. Create ability to use parameters so someone can connect multiple words they use together, to help clear up how they define themselves. For example, ?disabled+pan+Indigenous. Creating such a strand easily would allow people to link in email signatures, Twitter bios, etc.
    2. +
  2. Twitter bot: Allows someone to tag @SelfDefinedBot in order to get automated reply. For example '@SelfDefinedBot define racism'.
    3. +
  3. Slack bot: Problematic words could be flagged and alternates could be provided. Could also define words.
    4. +
  4. Custom API: Allows dictionary to be adapted and included into other large-scale projects.
    5. +
+

Design

+

Work in progress on CodePen. Hoping to connect core words with adjacent words.

+

Philosophies

+ +

How to Help

+

🐛 Check Issues, which include code and also definition writing. +💰 Support this OSS project by sponsoring me. +🐦 Follow Self-Defined on Twitter.

diff --git a/_site/css/base.css b/_site/css/base.css new file mode 100644 index 00000000..97ad26c6 --- /dev/null +++ b/_site/css/base.css @@ -0,0 +1,193 @@ +@charset "UTF-8"; +@import url("https://use.typekit.net/qlo3dpu.css"); +body { + font-family: monotype-grotesque, "Lucida Sans", sans-serif; + font-size: 20px; +} + +h1 { + font-family: monotype-grotesque-extended, Arial Black, sans-serif; + font-weight: 700; +} + +h2, h3 { + font-family: monotype-grotesque-extended, Arial Black, sans-serif; + font-weight: 400; + letter-spacing: 0.1; +} + +ul { + padding: 0 0 0 1em; + margin: 0; +} + +li { + list-style: none; + padding-bottom: 0.5em; + text-transform: capitalize; +} +li.subterm { + padding-left: 10px; +} +li:last-child { + padding: 0; +} +li.subterm:before { + content: "↳"; + padding-right: 5px; +} + +.auto-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); + grid-gap: 1rem; +} + +@media screen and (min-width: 200px) { + #title, #description, #summary { + grid-column: span 4; + } + + body { + padding: 1em; + } + + .list, .item { + grid-column: span 4; + } + + .list { + padding: 0 auto; + margin: 0; + } + + h1 { + font-size: 3em; + } + + h2 { + font-size: 1.25em; + } +} +@media screen and (min-width: 600px) { + body { + padding: 2em; + } + + .grid { + grid-row-gap: 1em; + } + + #title { + grid-column: 1/span 2; + grid-row: 1; + } + + #summary { + grid-column: 3/span 2; + grid-row: 1; + } + + #description { + grid-column: span 4; + grid-row: 2; + } + + .item { + grid-column: span 2; + } + + h1 { + font-size: 3.5em; + } + + h2 { + font-size: 1.3em; + } +} +.small { + font-size: 0.75em; +} + +@media screen and (min-width: 1024px) { + #title { + grid-column: 1/span 1; + grid-row: 1; + } + + #description { + grid-column: 2/span 1; + grid-row: 1; + } + + #summary { + grid-column: 1/span 1; + grid-row: 2; + } + + .list { + grid-row: span 3; + grid-column: span 1; + } +} +.block__dictionary { + max-width: 50rem; + margin-left: auto; + margin-right: auto; + padding: 0 1rem; +} + +.block__word { + display: flex; + flex-direction: column; + margin: 1rem; +} + +p { + margin: 0.75rem 0; + font-size: 1.25rem; +} + +.style__italics { + font-style: italic; +} + +.word__title { + font-family: orpheuspro, Palatino, Times, serif; + font-weight: 900; + font-size: 2.5rem; + line-height: 1.25; +} +.word__definition { + font-family: monotype-grotesque, "Lucida Sans", sans-serif; + font-size: 1.5rem; +} +.word__speech { + font-size: 0.5em; + font-family: monotype-grotesque, "Lucida Sans", sans-serif; +} +.word__signal { + border-top: 1px solid currentcolor; + display: inline-block; + font-family: monotype-grotesque-extended, Arial Black, sans-serif; + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.15rem; + padding: 0.5rem 0.75rem; +} +.word__signal__avoid { + color: red; +} +.word__signal__avoid:before { + content: "🚨"; + margin-left: -2.15rem; +} +.word__signal__better { + color: green; +} +.word__signal__better:before { + content: "👍"; + margin-left: -2.15rem; +} + +/*# sourceMappingURL=base.css.map */ diff --git a/_site/css/base.css.map b/_site/css/base.css.map new file mode 100644 index 00000000..54c631d5 --- /dev/null +++ b/_site/css/base.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":";AACU;AA2BV;EACE,aAZa;EAab;;;AAGF;EACE,aAfW;EAgBX,aATO;;;AAYT;EACE,aApBW;EAqBX,aAhBU;EAiBV;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACA;;AAGA;EACA;;AAGA;EACA;EACA;;;AAMF;EACE;EACA;EACA;;;AAKF;EAEE;IACA;;;EAGA;IACA;;;EAGA;IACA;;;EAGA;IACE;IACA;;;EAGF;IACE;;;EAGF;IACE;;;AAIJ;EACE;IACA;;;EAGA;IACE;;;EAGF;IACE;IACA;;;EAGF;IACA;IACA;;;EAGA;IACE;IACA;;;EAGF;IACA;;;EAGA;IACE;;;EAGF;IACE;;;AAIJ;EACE;;;AAGF;EAEE;IACE;IACA;;;EAGD;IACC;IACA;;;EAGD;IACC;IACA;;;EAGF;IACA;IACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAKF;EACA;EACA;EACA;;;AAGA;EACA;EACA;;;AAGA;EACA;;;AAIE;EACA,aAjLQ;EAkLR;EACA;EACA;;AAGA;EACA,aAzLa;EA0Lb;;AAGA;EACA;EACA,aA/La;;AAkMb;EACA;EAEA;EACA,aApMW;EAqMX;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIJ;EACA;;AAEE;EACE;EACA","file":"base.css"} \ No newline at end of file diff --git a/_site/index.html b/_site/index.html new file mode 100644 index 00000000..d0790fa2 --- /dev/null +++ b/_site/index.html @@ -0,0 +1,237 @@ + + + + + + + Self-Defined · A modern dictionary about us. We define our words, but they don't define us. + + + + +
+
+

Self-Defined

+

A modern dictionary about us. We define our words, but they don't define us.

+

For now, this stands as a list only, from which you can self-educate. +Future phases will include definitions and resources.

+

Participate

+

Send unlisted words to or chat about volunteering to help: @tatianatmac on Twitter.

+
+ +
+ List of Term + +
+
+ +
+
+ + \ No newline at end of file diff --git a/scss/.DS_Store b/_site/scss/.DS_Store similarity index 100% rename from scss/.DS_Store rename to _site/scss/.DS_Store diff --git a/scss/base.scss b/_site/scss/base.scss similarity index 57% rename from scss/base.scss rename to _site/scss/base.scss index 859f5a5a..5bd17edd 100644 --- a/scss/base.scss +++ b/_site/scss/base.scss @@ -1,5 +1,4 @@ @charset 'utf-8'; - @import url('https://fonts.googleapis.com/css?family=Inconsolata|Noto+Serif+KR'); @import url("https://use.typekit.net/qlo3dpu.css"); // COLORS // @@ -15,11 +14,11 @@ $mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y $light-grey: #eeeeee; // for backgrounds only - -// TYPOGRAPHY // - $sans-serif: Inconsolata, Helvetica, sans-serif; - $serif: 'Noto Serif KR', Georgia, serif; - $mono: Courier, mono; + // TYPOGRAPHY // + $sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif; + $serif: orpheuspro, Palatino, Times, serif; + $ext-sans: monotype-grotesque-extended, Arial Black, sans-serif; + $con-sans: monotype-grotesque-condensed, Arial Narrow, sans-serif; $thin: 200; $light: 300; @@ -30,19 +29,19 @@ body { font-family: $sans-serif; font-size: 20px; - background: #e5ffe5; } h1 { - font-family: $serif; - font-weight: $thin; - border-bottom: .25em $white solid; + font-family: $ext-sans; + font-weight: $bold; } h2, h3 { - font-family: $serif; - font-weight: $bold; + font-family: $ext-sans; + font-weight: $regular; + letter-spacing: .1; } + ul { padding: 0 0 0 1em; margin: 0; @@ -68,17 +67,11 @@ li { // GRID // -.grid { +.auto-grid { display: grid; - grid-template-columns: repeat(4, [col] 1fr [col]); - grid-template-rows: fit-content, fit-content, auto; - grid-row-gap: 2em; - grid-column-gap: 1em; -} - -.item { -} - + grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); + grid-gap: 1rem; + } // MEDIA // @@ -172,4 +165,76 @@ li { grid-row: span 3; grid-column: span 1; } +} + +.block__dictionary { + max-width: 50rem; + margin-left: auto; + margin-right: auto; + padding: 0 1rem; +} + + + +.block__word { +display: flex; +flex-direction: column; +margin: 1rem; +} + +p { +margin: .75rem 0; +font-size: 1.25rem; +} + +.style__italics { +font-style: italic; +} + +.word { + &__title { + font-family: $serif; + font-weight: 900; + font-size: 2.5rem; + line-height: 1.25; + } + + &__definition { + font-family: $sans-serif; + font-size: 1.5rem; + } + + &__speech { + font-size: .5em; + font-family: $sans-serif; + } + + &__signal { + border-top: 1px solid currentcolor; + // border-radius: 100px; + display: inline-block; + font-family: $ext-sans; + text-transform: uppercase; + font-size: .75rem; + letter-spacing: .15rem; + padding: .5rem .75rem; + + &__avoid { + color: red; + + &:before { + content: "🚨"; + margin-left: -2.15rem; + } + } + + &__better { + color: green; + + &:before { + content: "👍"; + margin-left: -2.15rem; + } + } +} } \ No newline at end of file diff --git a/css/base.css b/css/base.css deleted file mode 100644 index 641fd108..00000000 --- a/css/base.css +++ /dev/null @@ -1,91 +0,0 @@ -@import url("https://fonts.googleapis.com/css?family=Inconsolata|Noto+Serif+KR"); -@import url("https://use.typekit.net/qlo3dpu.css"); -body { - font-family: Inconsolata, Helvetica, sans-serif; - font-size: 20px; - background: #e5ffe5; } - -h1 { - font-family: "Noto Serif KR", Georgia, serif; - font-weight: 200; - border-bottom: 0.25em #ffffff solid; } - -h2, h3 { - font-family: "Noto Serif KR", Georgia, serif; - font-weight: 700; } - -ul { - padding: 0 0 0 1em; - margin: 0; } - -li { - list-style: none; - padding-bottom: .5em; - text-transform: capitalize; } - li.subterm { - padding-left: 10px; } - li:last-child { - padding: 0; } - li.subterm:before { - content: "\21B3 "; - padding-right: 5px; } - -.grid { - display: grid; - grid-template-columns: repeat(4, [col] 1fr [col]); - grid-template-rows: fit-content, fit-content, auto; - grid-row-gap: 2em; - grid-column-gap: 1em; } - -@media screen and (min-width: 200px) { - #title, #description, #summary { - grid-column: span 4; } - body { - padding: 1em; } - .list, .item { - grid-column: span 4; } - .list { - padding: 0 auto; - margin: 0; } - h1 { - font-size: 3em; } - h2 { - font-size: 1.25em; } } - -@media screen and (min-width: 600px) { - body { - padding: 2em; } - .grid { - grid-row-gap: 1em; } - #title { - grid-column: 1 / span 2; - grid-row: 1; } - #summary { - grid-column: 3 / span 2; - grid-row: 1; } - #description { - grid-column: span 4; - grid-row: 2; } - .item { - grid-column: span 2; } - h1 { - font-size: 3.5em; } - h2 { - font-size: 1.3em; } } - -.small { - font-size: .75em; } - -@media screen and (min-width: 1024px) { - #title { - grid-column: 1 / span 1; - grid-row: 1; } - #description { - grid-column: 2 / span 1; - grid-row: 1; } - #summary { - grid-column: 1 / span 1; - grid-row: 2; } - .list { - grid-row: span 3; - grid-column: span 1; } } diff --git a/index.html b/index.html index 7fb604ac..a13bf248 100644 --- a/index.html +++ b/index.html @@ -35,10 +35,10 @@ Future phases will include definitions and resources.

  • Anti-blackness
  • Anxiety disorders
  • aromantic
    • -
  • Asian
    • -
  • East
    • -
  • South
    • -
  • Southeast
    • +
  • Asian
    • +
  • East
    • +
  • South
    • +
  • Southeast
  • asexual
  • Auto Immune Disorder (AIDS)
  • assigned at birth
    • @@ -151,6 +151,7 @@ Future phases will include definitions and resources.

  • Patriarchy
  • Performative allyship
  • People of Color (PoC)
    • +
  • People with disabilities
  • -phile
  • andro
  • gyne
    • @@ -229,6 +230,7 @@ Future phases will include definitions and resources.

  • woman tears
  • people (WP)
  • women (WW)
    • +
  • White supremacist capitalist patriarchy
  • womanism