healing garden css experiment

healing garden css experiment

ExoOMgg
-------


A [Pen](https://codepen.io/theorigins/pen/ExoOMgg) by [TheOrigins](https://codepen.io/theorigins) on [CodePen](https://codepen.io).

[License](https://codepen.io/license/pen/ExoOMgg).

index.html

<p style="padding: 3rem 3.75rem; background: #fcd7d6; margin-bottom: 2rem; border-radius: .3rem; box-sizing: border-box; max-width: 66.666667%; text-align: center; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; margin-left: 16.666667%;">
  <b>Explore</b>
  {% comment %}map, flatten and sort{% endcomment %}
{% assign tags =  site.notes | map: 'tags' | join: ','  | split: ',' | sort %}
{% assign previousTag = "" %}
{% assign counter = 0 %}

{% for currentTag in tags %}

  {% comment %}first loop : initializing previousTag{% endcomment %}
  {% if previousTag == "" %}
    {% assign previousTag = currentTag %}
  {% endif %}

  {% if currentTag == previousTag %}
    {% assign counter = counter | plus: 1 %}
  {% else %}
	{% if previousTag == "cloudflare" %}
		<a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- previousTag -}}"><i class='fab fa-cloudflare'></i>&nbsp;{{- previousTag -}}&nbsp;({{ counter }})</a>
	{% elsif previousTag == "digitalgarden" %}
		<a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- previousTag -}}"><i class='fa fa-seedling'></i>&nbsp;{{- previousTag -}}&nbsp;({{ counter }})</a>
	{% else %}
		<a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- previousTag -}}">{{- previousTag -}}&nbsp;({{ counter }})</a>
	{% endif %}
	{% assign counter = 1 %}
  {% endif %}

  {% comment %}last loop : flushing what's left to print{% endcomment %}
  {% if forloop.last %}
    {% if previousTag == "cloudflare" %}
		<a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- currentTag -}}"><i class='fab fa-cloudflare'></i>&nbsp;{{- currentTag -}}&nbsp;({{ counter }})</a>
	{% elsif previousTag == "digitalgarden" %}
		<a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- currentTag -}}"><i class='fa fa-seedling'></i>&nbsp;{{- currentTag -}}&nbsp;({{ counter }})</a>
	{% else %}
		<a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- currentTag -}}">{{- currentTag -}}&nbsp;({{ counter }})</a>
	{% endif %}
  {% endif %}

  {% assign previousTag = currentTag %}

{% endfor %}

</p>

<p style ="text-align:right;"> <a href = "/resources"> Resources</a> </p>
  

<h1 style ="text-align:center;"> Welcome! 🌱 </h1>

<p style="padding: 3em 1em; background: #fcd7d6; border-radius: 4px;max-width: 70%;padding-right: 15px; padding-left: 15px; margin-left: 16.666667%;"> 
Hi! I believe that while healing can be done alone, peer support is super helpful and in some cases, necessary. I genuinely believe the community aspect of healing is oft overlooked.  <br> <br>
  I believe in <span style="font-weight: bold">[[survivor led]]</span> and survivor-centric healing over ones run by medical professionals. <br> <br>
 I also believe resources should be free, that healthcare should be accessible to everyone. <br> 
This is a <span style="font-weight: bold"> community-first </span> space; by the community for the community. We share resources, stories, experiences. <br>
Because your voice matters. Because we can heal as a community. Share everything you've found helpful in your journey and take a look at everything that has helped others.
<br>	And remember, your journey is yours, it's <span style="font-weight: bold">personal</span>; take what works for you and discard the rest. 
<br> <br><strong> [[Start here]] if you're confused!</strong>  <br> <br>
You are valid. Your emotions are valid. 🌻♥
	
	
</p>
<br>
	

  

<style>
  .wrapper {
    max-width: 46em;
  }
</style>


   <script data-goatcounter="https://healing.goatcounter.com/count"
        async src="//gc.zgo.at/count.js"></script>
   
 
   

script.js

/// background-color: #ffc7c7;
// fcd7d6
// 
// <p style="padding: 3em 1em; background: #fcd7d6; border-radius: 4px;max-width: 70%;padding-right: 15px; padding-left: 15px; margin-left: 16.666667%;"> 

//border;
//  color: #592147;
//  background: rgba(255, 255, 215,0.35);

// &:after {
//    position: relative;
//    top: -0.5em;
//    font-size: 0.7em;
//    content: "↗";
//    color: #d388bb;
//     }

style.scss

$color-primary: hsl(0, 0%, 10%);
$color-text: hsl(0, 0%, 20%);
$color-subtext: hsl(0, 0%, 30%);
$color-border: #b0458e;
$color-box-background: mix($color-primary, white, 4%);
$border-radius: 4px;
$font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
  sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

body {
  box-sizing: content-box;
  font-family: $font-family;
  margin: 0 auto;
  line-height: 1.7;
  padding: 4vh 6vw;
  overflow-x: hidden;
  color: $color-text;
  font-size: 1rem;
  max-width: 63em;
background-color: #ffc7c7;
  @media (min-width: 820px) {
    font-size: 1.2rem;
  }
}

time {
  display: block;
  color: $color-subtext;
  margin: 0.5em 0 1em;
}

footer {
  margin: 2em 0;
  font-size: 0.8em;
  color: mix($color-text, white, 80%);
  padding-top: 1em;
}

img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  max-height: 75vh;
  border-radius: $border-radius;
}

blockquote {
  padding: 1.5em;
  margin: 0;
  font-size: 0.88em;
  background: $color-box-background;
  border-radius: $border-radius;

  p {
    margin: 0;
  }
}

hr {
  width: 100%;
  border: 0;
  height: 1px;
  margin: 1.5em 0;
  background: $color-border;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  margin-bottom: 0;
  padding-bottom: 0;
}

a {
  transition: background 300ms;
  padding: 0 0.1em;
  text-decoration: none;
  border-bottom: 1px solid $color-border;
  color: #592147;
  background: rgba(255, 255, 215,0.35);
  &:hover {
    color: black !important;
    background: #ed9cd3;
  }
  &:after {
    position: relative;
    top: -0.5em;
    font-size: 0.7em;
    content: "↗";
    color: #d388bb;
  }
  &.internal-link:after,
  &.footnote:after,
  &.reversefootnote:after {
    content: "";
  }
}

*:focus {
  background: #ed9cd3 !important;
  color: black !important;
}

nav {
  margin: 1em 0 3em;
}

#notes-entry-container {
  display: grid;
  grid-gap: 2em;
  grid-template-areas:
    "content"
    "side";

  @media (min-width: 700px) {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "content side";
  }
}

.backlink-box {
  background: $color-box-background;
  padding: 1em;
  border-radius: $border-radius;
}

code {
  background: #f5f5f5;
  padding: 0.1em 0.2em;
  border-radius: 4px;
}

.invalid-link {
  color: #444444;
  cursor: help;
  background: #fafafa;
  padding: 0 0.1em;
}

.invalid-link-brackets {
  color: #ccc;
  cursor: help;
}

/// background-color: #ffc7c7;
// fcd7d6
// 
// <p style="padding: 3em 1em; background: #fcd7d6; border-radius: 4px;max-width: 70%;padding-right: 15px; padding-left: 15px; margin-left: 16.666667%;"> 

//border;
//  color: #592147;
//  background: rgba(255, 255, 215,0.35);

// &:after {
//    position: relative;
//    top: -0.5em;
//    font-size: 0.7em;
//    content: "↗";
//    color: #d388bb;
//     }