diff --git a/public/gdb/causes.md b/public/gdb/causes.md index ede7f68..a9ff34c 100644 --- a/public/gdb/causes.md +++ b/public/gdb/causes.md @@ -36,7 +36,16 @@ If you've seen Jurassic Park then you may remember this scene: }} }!} -{!{
{{import '~/img' images.fetalgenitals className="card" caption="Source" alt="Fetal development of internal sexual anatomy"}}
}!} +{!{ +
+ {{import '~/img' images.fetalgenitals + className="card" + caption="Source" + alt="Fetal development of internal sexual anatomy" + }} +
+}!} + The gonads in human fetuses initially develop in a bi-potential state, meaning they can become either ovaries or testes. The SRY gene on the Y chromosome releases a protein called [Testis Determining Factor](https://en.wikipedia.org/wiki/Testis-determining_factor) (TDF). This protein then starts a chain reaction with SOX9 production (another protein), which causes the gonadal cells to form into the Sertoli and Leydig cells that make up the testes. If TDF is never produced or is interfered with then the gonad cells form into the Theca cells and Follicles which comprise the ovaries. @@ -48,16 +57,19 @@ This is known as Swyer Syndrome, and an unknown number of women may have this co The fact is, the vast majority of the population has never been tested for genetic karyotype, so we don’t know how common these cases actually are. Where does this come into affect for gender identity? Well, the exact same process that causes the external genitals to differentiate also occurs for the brain. -{!{
+{!{ +
And it gets even weirder! -{{import '~/tweet' ids=[ - '1224039568971710464' - '1224040716365524993' - '1224041800513380352' - '1224042620164296705' - '1224043995413639168' - '1224044949160611840' -] tweets=meta.tweets className="oneblock hide-reply" }}
}!} + {{import '~/tweet' ids=[ + '1224039568971710464' + '1224040716365524993' + '1224041800513380352' + '1224042620164296705' + '1224043995413639168' + '1224044949160611840' + ] tweets=meta.tweets className="oneblock hide-reply" }} +
+}!} #### Brain Split diff --git a/public/gdb/euphoria.md b/public/gdb/euphoria.md index d854733..ee09781 100644 --- a/public/gdb/euphoria.md +++ b/public/gdb/euphoria.md @@ -47,6 +47,8 @@ This is the most fundamental reason why we as a community say "you do not need d Anything that can be a source of dysphoria has an equal and opposite euphoria. +{!{
}!} + {!{
{{import '~/tweet' ids=[ '1228141518386585607' '1228165207316287489' diff --git a/public/gdb/history.md b/public/gdb/history.md index 0c14ca0..a0cde98 100644 --- a/public/gdb/history.md +++ b/public/gdb/history.md @@ -18,7 +18,14 @@ In 1948, noted sexologist Dr. Alfred Kinsey (yes, [*that* Kinsey](https://en.wik Benjamin then went on to refine his protocol and treated thousands of patients with similar feelings over the course of his career. He refused to take payment for his work, instead taking satisfaction from the relief he granted these patients, and using their treatment to further his understanding of the condition. He coined a term for this feeling of incongruence in 1973: Gender Dysphoria. Unfortunately, this term would not be used in the United States until 2013, with the American Psychiatric Association opting for the term Gender Identity Disorder instead. -{!{
{{import '~/img' images.hbscale className="card sideline" caption="Harry Benjamin Diagnostic Scale"}}
}!} +{!{ +
+ {{import '~/img' images.hbscale + className="card print-span34 print-center" + caption="Harry Benjamin Diagnostic Scale" + }} +
+}!} If you are a trans person reading this, you may have heard the name Harry Benjamin before, but probably not in a favorable context. In 1979 his name was used (with permission) in the forming of the Harry Benjamin International Gender Dysphoria Association (HBIGDA), which released a Standards of Care (SoC) for transgender people. This SoC came to be known as the Harry Benjamin Rules, and were infamously limiting in regards to how Gender Dysphoria could be diagnosed. Patients were placed within a six tier scale based upon their level of misery and sexual dysfunction. If you did not land at Tier 5 or higher, classified as a "True Transsexual", you were usually rejected for treatment. @@ -38,7 +45,9 @@ Transgender people are coming out of the woodwork; we are everywhere. Dys·pho·ri·a - Noun
A state of unease or generalized dissatisfaction with life. The opposite of euphoria. - {{import '~/img' images.glue className="card sideline"}} +
+
+ {{import '~/img' images.glue className="card print-span4"}}
}!} @@ -46,7 +55,9 @@ There is a common misconception among both cisgender and transgender people that In principle, Gender Dysphoria is a feeling of wrongness intrinsic to the self. There is no logical backing to this wrongness, there is nothing which explains it, you can not describe why you feel this way, it is just there. Things in your existence are incorrect, and even knowing which things *are* incorrect can be hard to properly identify. -Evey Winters described it extremely aptly [in her Dysphoria post](https://eveywinters.com/2019/10/14/on-dysphoria-before-enduring-and-after/). +The way I used to describe it is like wearing an adult's glove when you are a child. You can put your hand into the glove, and your fingers feed into the digits of the glove, but your dexterity with the glove is severely hindered. You might be able to pick something up, but you can not manipulate it like an adult could. Things just aren't quite right. + +Evey Winters described it this way [in her Dysphoria post](https://eveywinters.com/2019/10/14/on-dysphoria-before-enduring-and-after/). > Have you ever been sitting somewhere in a public or a formal place and all of a sudden the bottom of your foot itches? It’s not like you can remove your shoes right there and scratch it, so you endure the feeling of dying inside while this itch grows and grows until you are ready to murder the next person that speaks to you. > @@ -56,8 +67,6 @@ Evey Winters described it extremely aptly [in her Dysphoria post](https://eveywi > > It is knowing that something is wrong and not being able to do a damn thing about it. -The way I used to describe it is like wearing an adult's glove when you are a child. You can put your hand into the glove, and your fingers feed into the digits of the glove, but your dexterity with the glove is severely hindered. You might be able to pick something up, but you can not manipulate it like an adult could. Things just aren't quite right. - Gender Dysphoria is, at its core, simply emotional reactions to the brain knowing that something does not fit. This incongruence is so deep inside the brain's subsystems that there is no obvious message of what the problem is. The only way we have to identify it is via the emotions that it triggers. Our consciousness receives either positive (euphoria) or negative (dysphoria) feedback according to how well our current environment aligns with our internal sense of self. Part of transition is learning to recognize those signals. Cisgender people receive them as well, but since the signals usually align with their environment, they take them for granted. There have been a few notable occasions, however, when a cisgender person has been [put into a situation](https://www.teenvogue.com/story/maisie-williams-arya-stark-game-of-thrones-affected-her-body-image) where they experience gender dysphoria. Attempts to raise cisgender children [as the opposite sex](https://www.nytimes.com/2004/05/12/us/david-reimer-38-subject-of-the-john-joan-case.html) (Content warning: suicide) have always met with failure when the child inevitably declares themselves differently. diff --git a/public/gdb/hormones.md b/public/gdb/hormones.md index 92ce89f..7c91a8d 100644 --- a/public/gdb/hormones.md +++ b/public/gdb/hormones.md @@ -40,10 +40,11 @@ There are four main kinds of hormones: - [Eicosanoids](https://en.wikipedia.org/wiki/Eicosanoid) that are formed from lipids and fatty acids and predominantly affect the immune system - [Steroids](https://en.wikipedia.org/wiki/Steroid) are signaling molecules produced by various internal organs in order to pass messages to other organs within the body. -{!{
{{import '~/img' images.steroidogenesis - className="card sideline" +{!{
{{import '~/img' images.steroidogenesis + className="card" link="https://en.wikipedia.org/wiki/File:Steroidogenesis.svg" external=1 + alt="Chart of steroid metabolism flow" caption="All steroids are formed from cholesterols (top left) and are derived from other steroids. Progestins form into Androgens which form into Estrogens. This is a one-way exchange, and does not reverse, so don't believe it when someone tells you that too much estrogen will turn it into testosterone." }}
}!} diff --git a/public/gdb/index.md b/public/gdb/index.md index 3b6595c..cd757fd 100644 --- a/public/gdb/index.md +++ b/public/gdb/index.md @@ -70,7 +70,7 @@ siblings: {!{
}!} ---- +
## Introduction @@ -96,7 +96,7 @@ This experience of discontinuity between the internal and external self is what The purpose of this site is to document the many ways that Gender Dysphoria can manifest, as well as other aspects of gender transition, in order to provide a guide for those who are questioning, those who are starting their transgender journey, those already on their path, and those who simply wish to be better allies. {!{ -
+
Title artwork based on works by Jumpei JP Ueoka
{{import '~/img' images.jpjumpei_1 className="" link="https://www.instagram.com/p/Bq2uRCtFttU/"}} diff --git a/public/gdb/physical-dysphoria.md b/public/gdb/physical-dysphoria.md index 2e8f285..71d9e72 100644 --- a/public/gdb/physical-dysphoria.md +++ b/public/gdb/physical-dysphoria.md @@ -107,8 +107,6 @@ Primary characteristics can only be altered through surgical intervention. Some Some secondary traits can be surgically enhanced (Breast Augmentation, body contouring, facial masculinization / feminization), and some cannot be changed at all. ---- - Physical dysphoria manifests in several different ways. Sometimes this is felt in a sort of phantom limb phenomenon, where the person can feel sensations from a penis or vagina that is not there, an ache in a uterus that does not exist, or a sense of absence on the chest from breasts that have not grown in. It can be felt as a sort of *reverse* phantom effect, where the person is persistently aware of something that should *not* be there. The brain is receiving sensory input that it does not expect, such as the weight of breasts, or the presence of testicles or a uterus, and this input takes priority because it isn't expected. diff --git a/public/gdb/what-is-gender.md b/public/gdb/what-is-gender.md index a07d3e4..ae09b66 100644 --- a/public/gdb/what-is-gender.md +++ b/public/gdb/what-is-gender.md @@ -28,8 +28,6 @@ Many people attribute the term to psychologist John Money, who proposed using "g > > Margaret Mead moves from the specific delineation to the more general comparison of male and female in several communities, finally coming to an analysis of sex-patterns in our own midst and for our own time. ---- - Human Sex (the adjective, not the verb) is broken down into three categories: - **Genotype**: The genetically defined chromosomal kareotype of an organism (XX, XY, [and all variants there of](https://twitter.com/sciencevet2/status/1035250518870900737?lang=en)) @@ -38,14 +36,14 @@ Human Sex (the adjective, not the verb) is broken down into three categories: Any of these three aspects can fall into a position on a range of values. Your elementary school health class probably taught you that Genotype is binary, either Female (XX) or Male (XY), when the reality is that there are a dozen other permutations that can occur within human beings. -{!{ {{import '~/img' images.bimodal className="card borderless center span34"}} }!} +{!{ {{import '~/img' images.bimodal className="card borderless center span34 print-right print-span3"}} }!} Likewise, many people believe that Phenotype is also binary, but biology has recognized for hundreds of years that when you plot out all sexual characteristics across a population, you actually end up with a bimodal distribution where the majority of the population falls within a percentile of two groups. This means that some people will, simply by nature of how life works, fall outside of the typical two piles. Many people fall in the middle, with characteristics of both sexes. Gender, however, is a lot more... esoteric. There are a lot of different ways that people have attempted to illustrate the gender spectrum, but none have quite thoroughly captured it, because the spectrum is itself a very abstract concept. {!{ -
+
{{import '~/img' images.spectrum className="" link="https://bahamutzero.tumblr.com/post/56838411871/gender-a-visual-guide-when-most-people-think-of" style="margin-bottom: 5px"}} {{import '~/img' images.graph className="" style="margin-bottom: 5px"}} {{import '~/img' images.gender_unicorn className="" link="http://www.transstudent.org/gender" style="margin-bottom: 5px"}} diff --git a/scss/_card.scss b/scss/_card.scss index d6831d4..e220200 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -8,12 +8,7 @@ } .card-img, .card-img-top { - width: unset; - } - - .card-img-top { - page-break-before: avoid; - page-break-after: avoid; + // width: unset; } .card-img-top + .card-img-top { @@ -148,8 +143,6 @@ .card.right { float: right; margin-left: 10px; - page-break-inside: always; - } .card.center { diff --git a/scss/_gutter.scss b/scss/_gutter.scss new file mode 100644 index 0000000..77c1bfc --- /dev/null +++ b/scss/_gutter.scss @@ -0,0 +1,67 @@ + +.gutter { + + @media screen and (min-width: 800px) { + position: relative; + height: 0; + left: calc(100% + 1em); + width: 400px; + padding: 0 1em; + + @media (max-width: 1000px) { + width: 300px; + } + } + + @media screen and (min-width: 500px) and (max-width: 800px) { + float: right; + width: 300px; + margin-left: 1em; + zoom: 0.9; + } + + @media print { + + page-break-inside: avoid; + clear: both; + + &:not(.print-inline) { + float: right; + width: 40vw; + margin-left: 1em; + } + } + + // outline: 1px solid red; + + &.flex, .flex { + .tweet { + flex: none; + } + } + + > a > img:not(.card-img-top), > img { + max-width: 100%; + margin-bottom: 5px; + } +} + +.flex, .gutter.flex { + display: flex; + flex-direction: column; + align-items: center; + + @media print { + &.print-row { + flex-direction: row; + } + } + + &.flex-end { + justify-content: flex-end; + } + + &.flex-center { + justify-content: center; + } +} diff --git a/scss/_header.scss b/scss/_header.scss index 6dba47d..ef64f92 100644 --- a/scss/_header.scss +++ b/scss/_header.scss @@ -149,6 +149,11 @@ header { display: none; } } + + .dropdown-menu { + max-height: 90vh; + overflow: auto; + } } @media (max-width: 500px) { @@ -167,7 +172,7 @@ header { } // @media (min-width: 500px) { - body:not(.front-page):not(.longform) header + * { + body:not(.front-page) header + * { margin-top: $header-full-height; } // } diff --git a/scss/_index.scss b/scss/_index.scss index d31b19a..f65293a 100644 --- a/scss/_index.scss +++ b/scss/_index.scss @@ -1,11 +1,5 @@ .front-page { - header { - @media (max-width: 500px) { - position: absolute; - } - } - .top-fold { min-height: 100vh; background-color: $header-bg-mid; diff --git a/scss/_longform.scss b/scss/_longform.scss index 3c4a8bb..ed7dd94 100644 --- a/scss/_longform.scss +++ b/scss/_longform.scss @@ -2,54 +2,40 @@ body.longform { - #body { - background: unset; - - @media screen { - padding: 0 1em; - } - } - +@media print { header { display: none; } - - h1, h2 { - clear: both; - page-break-before: always; - } - - .header-link { display: none; } - - article hr { - page-break-after: always; - opacity: 0; - } - - - .gutter { - float: right; - width: 40vw; - margin-left: 1em; - zoom: 0.9; - - page-break-inside: avoid; - - &.print-center { - float: none; - margin: 1em auto; - } - } - - &.flex, .flex { - display: flex; - flex-direction: column; - align-items: center; - } - - > a > img:not(.card-img-top), > img { - max-width: 100%; - margin-bottom: 5px; - } +} + +// #body { +// // background: unset; + +// @media screen { +// padding: 0 1em; +// } +// } + +// header { +// display: none; +// } + +// h1, h2 { +// clear: both; +// page-break-before: always; +// } + +// .header-link { display: none; } + +// article hr { +// page-break-after: always; +// opacity: 0; +// } + +// > a > img:not(.card-img-top), > img { +// max-width: 100%; +// margin-bottom: 5px; +// } + } diff --git a/scss/_markup.scss b/scss/_markup.scss index 4c8488b..fea9e9f 100644 --- a/scss/_markup.scss +++ b/scss/_markup.scss @@ -121,6 +121,12 @@ } ul { padding-left: 2em; } + + .center { + margin-left: auto; + margin-right: auto; + margin-bottom: 1em; + } } .cw { @@ -152,9 +158,30 @@ } .two-column-list { + + @media (min-width: 500px) { + h1, h2, h3, h4 { + justify-content: center; + } + } + ol, ul { + + @media (max-width: 400px) { + padding-left: 1.5em; + } + + @media (max-width: 500px) { + padding-left: 2em; + } + @media (min-width: 500px) { columns: 2; + padding-left: 3em; + } + + @media (min-width: 1100px) { + padding-left: 5em; } li { margin-bottom: 0.5em; } diff --git a/scss/_page.scss b/scss/_page.scss index f78ddf8..b8731af 100644 --- a/scss/_page.scss +++ b/scss/_page.scss @@ -26,7 +26,7 @@ body.post { } } -body.gdb, body.hrt { +body.gdb { #body { background-color: $gutter-bg; @@ -73,53 +73,6 @@ body.gdb, body.hrt { overflow: hidden; } } - .gutter { - - @media screen and (min-width: 800px) { - position: relative; - height: 0; - left: calc(100% + 1em); - width: 400px; - padding: 0 1em; - - @media (max-width: 1000px) { - width: 300px; - } - } - - @media print, screen and (min-width: 500px) and (max-width: 800px) { - float: right; - width: 300px; - margin-left: 1em; - zoom: 0.9; - } - - // outline: 1px solid red; - - &.flex, .flex { - display: flex; - flex-direction: column; - align-items: center; - - .tweet { - flex: none; - } - - &.flex-end { - justify-content: flex-end; - } - - &.flex-center { - justify-content: center; - } - } - - > a > img:not(.card-img-top), > img { - max-width: 100%; - margin-bottom: 5px; - } - } - .full-wide { width: calc(100vw - 4em); background-color: darken($content-bg, 1%); diff --git a/scss/_tweet.scss b/scss/_tweet.scss index ec9b3ad..0eac39f 100644 --- a/scss/_tweet.scss +++ b/scss/_tweet.scss @@ -8,7 +8,6 @@ $borderRadius: .35em; $avatarSize: 36px; - // zoom: 0.8; font-size: 12px; border: 1px solid $borderColor; border-radius: .35em; @@ -18,6 +17,8 @@ overflow-x: hidden; overflow-y: auto; + page-break-inside: avoid; + @include media-breakpoint-up(md) { &.capped { max-height: 700px; } } diff --git a/scss/print.scss b/scss/print.scss index a7126a5..1ac86ef 100644 --- a/scss/print.scss +++ b/scss/print.scss @@ -101,6 +101,7 @@ $header-full-height: 100px; // @import "./index"; @import "./page"; @import "./card"; +@import "./gutter"; @import "./grid-row"; @import "./markup"; // @import "./pager"; @@ -141,13 +142,57 @@ body.page, body.post { article { border: 0; + + blockquote { + page-break-inside: avoid; + } + + h1 { + // clear: both; + page-break-before: always; + } } - .card { - &.span34 { - width: 50vw; + .print-break-before { + page-break-before: always; + } + + .print-break-after { + page-break-after: always; + } + + .print-hidden { + opacity: 0; + } + + .card, .gutter { + &.print-span1 { width: 100vw !important; } + &.print-span34 { width: 75vw !important; } + &.print-span2 { width: 50vw !important; } + &.print-span3 { width: 33vw !important; } + &.print-span4 { width: 25vw !important; } + &.print-span5 { width: 20vw !important; } + &.print-span6 { width: 15vw !important; } + + &.print-span1, + &.print-span34, + &.print-span2 { + &.print-inline, &.print-center { + margin: 1em auto; + } + } + + &.print-center { margin: 1em auto; } + + &.print-right { + float: right; + } + } + + .card img.card-img-top { + page-break-inside: avoid; } } @@ -183,4 +228,3 @@ body.page, body.post { footer .patreon-support { display: none; } footer .foot-nav { display: none; } -article hr { page-break-after: always; } diff --git a/scss/style.scss b/scss/style.scss index eb5c8e1..d12a7e8 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -101,6 +101,7 @@ $header-full-height: 100px; @import "./index"; @import "./page"; @import "./card"; +@import "./gutter"; @import "./grid-row"; @import "./markup"; @import "./pager"; diff --git a/templates/img.hbs b/templates/img.hbs index 4c65ea9..46ae496 100644 --- a/templates/img.hbs +++ b/templates/img.hbs @@ -1,14 +1,21 @@ {{#if sizes}} -
- + + {{alt}} - + > + {{#if caption}}{{{caption}}}{{/if}}
{{/if}}