uracreative
/
i2p-styleguide
mirror of https://github.com/uracreative/i2p-styleguide
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fixed distance between headers and their labels

writing-page-updates
eupiteco 6 years ago
parent
f8f072f388
commit
2148f28b10
5 changed files with 119 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      _includes/visuals/typography.html
  2. 11
      _site/assets/styles/main.css
  3. 19
      _site/assets/styles/visuals.scss
  4. 52
      _site/visuals/index.html
  5. 19
      assets/styles/visuals.scss

52
_includes/visuals/typography.html
View File

@ -3,38 +3,48 @@
<p class="text-muted">Our main typography is Source Sans made by Adobe.</p> <p class="text-muted">Our main typography is Source Sans made by Adobe.</p>
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12 typography__headers">
<p class="text-black small text-muted">H1 <div class="typography__headers__item">
<p class="text-black small text-muted">H1</p>
<h1>Protect communications from monitoring</h1> <h1>Protect communications from monitoring</h1>
</p> </div>
<p class="text-black small text-muted">H2 <div class="typography__headers__item">
<p class="text-black small text-muted">H2</p>
<h2>Protect communications from monitoring</h2> <h2>Protect communications from monitoring</h2>
</p> </div>
<p class="text-black small text-muted">H3 <div class="typography__headers__item">
<p class="text-black small text-muted">H3</p>
<h3>Protect communications from monitoring</h3> <h3>Protect communications from monitoring</h3>
</p> </div>
<p class="text-black small text-muted">H4 <div class="typography__headers__item">
<p class="text-black small text-muted">H4</p>
<h4>Protect communications from monitoring</h4> <h4>Protect communications from monitoring</h4>
</p> </div>
<p class="text-black small text-muted">H5 <div class="typography__headers__item">
<p class="text-black small text-muted">H5</p>
<h5>Protect communications from monitoring</h5> <h5>Protect communications from monitoring</h5>
</p> </div>
<p class="text-black small text-muted">H6 <div class="typography__headers__item">
<p class="text-black small text-muted">H6</p>
<h6>Protect communications from monitoring</h6> <h6>Protect communications from monitoring</h6>
</p> </div>
<p class="text-black small pt-5 text-muted">H1 display <div class="typography__headers__item">
<p class="text-black small pt-5 text-muted">H1 display</p>
<h1 class="header-display color-secondary">I2P Anonymous Network</h1> <h1 class="header-display color-secondary">I2P Anonymous Network</h1>
</p> </div>
<p class="text-black small text-muted">H2 display <div class="typography__headers__item">
<p class="text-black small text-muted">H2 display</p>
<h2 class="header-display color-secondary">I2P Anonymous Network</h2> <h2 class="header-display color-secondary">I2P Anonymous Network</h2>
</p> </div>
<p class="text-black small text-muted">H3 display <div class="typography__headers__item">
<p class="text-black small text-muted">H3 display</p>
<h3 class="header-display color-secondary">I2P Anonymous Network</h3> <h3 class="header-display color-secondary">I2P Anonymous Network</h3>
</p> </div>
<p class="text-black small text-muted">H4 display <div class="typography__headers__item">
<p class="text-black small text-muted">H4 display</p>
<h4 class="header-display color-secondary">I2P Anonymous Network</h4> <h4 class="header-display color-secondary">I2P Anonymous Network</h4>
</p> </div>
</div> </div>
</div> </div>
<div class="row pt-5"> <div class="row pt-5">

11
_site/assets/styles/main.css
View File

@ -67,16 +67,19 @@
.header-display::before { background: #60AB60; content: " "; display: inline-block; width: 7px; } .header-display::before { background: #60AB60; content: " "; display: inline-block; width: 7px; }
h1.header-display::before { height: 3.75rem; transform: translate(-15px, 0.9375rem); } h1.header-display::before { height: 3.75rem; transform: translate(-15px, 0); margin-bottom: -0.937rem; }
h2.header-display::before { height: 3rem; transform: translate(-15px, 0.75rem); } h2.header-display::before { height: 3rem; transform: translate(-15px, 0); margin-bottom: -0.75rem; }
h3.header-display::before { height: 2.625rem; transform: translate(-15px, 0.65625rem); } h3.header-display::before { height: 2.625rem; transform: translate(-15px, 0); margin-bottom: -0.65625rem; }
h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625rem); } h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0); margin-bottom: -0.5625rem; }
.icon { font-size: 20px; background-color: #212529; padding: 20px; } .icon { font-size: 20px; background-color: #212529; padding: 20px; }
.typography__headers__item { margin-bottom: 2rem; }
.typography__headers__item p { margin-bottom: 0.5rem !important; }
.alert { border-radius: 15px; } .alert { border-radius: 15px; }
.alert-custom { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; } .alert-custom { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; }
.alert-custom hr { border-top-color: #6679ac; } .alert-custom hr { border-top-color: #6679ac; }

19
_site/assets/styles/visuals.scss
View File

@ -25,28 +25,32 @@
h1.header-display { h1.header-display {
&::before { &::before {
height: 3.75rem; // 150% of text-size height: 3.75rem; // 150% of text-size
transform: translate(-15px, 0.9375rem); // 25% of height transform: translate(-15px, 0);
margin-bottom: -0.937rem; // 25% of height
} }
} }
h2.header-display { h2.header-display {
&::before { &::before {
height: 3rem; height: 3rem;
transform: translate(-15px, 0.75rem); transform: translate(-15px, 0);
margin-bottom: -0.75rem;
} }
} }
h3.header-display { h3.header-display {
&::before { &::before {
height: 2.625rem; height: 2.625rem;
transform: translate(-15px, 0.65625rem); transform: translate(-15px, 0);
margin-bottom: -0.65625rem;
} }
} }
h4.header-display { h4.header-display {
&::before { &::before {
height: 2.25rem; height: 2.25rem;
transform: translate(-15px, 0.5625rem); transform: translate(-15px, 0);
margin-bottom: -0.5625rem;
} }
} }
@ -55,3 +59,10 @@ h4.header-display {
background-color: $oc-gray-9; background-color: $oc-gray-9;
padding: 20px; padding: 20px;
} }
.typography__headers__item {
margin-bottom: 2rem;
p {
margin-bottom: 0.5rem !important;
}
}

52
_site/visuals/index.html
View File

@ -317,38 +317,48 @@
<p class="text-muted">Our main typography is Source Sans made by Adobe.</p> <p class="text-muted">Our main typography is Source Sans made by Adobe.</p>
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12 typography__headers">
<p class="text-black small text-muted">H1 <div class="typography__headers__item">
<p class="text-black small text-muted">H1</p>
<h1>Protect communications from monitoring</h1> <h1>Protect communications from monitoring</h1>
</p> </div>
<p class="text-black small text-muted">H2 <div class="typography__headers__item">
<p class="text-black small text-muted">H2</p>
<h2>Protect communications from monitoring</h2> <h2>Protect communications from monitoring</h2>
</p> </div>
<p class="text-black small text-muted">H3 <div class="typography__headers__item">
<p class="text-black small text-muted">H3</p>
<h3>Protect communications from monitoring</h3> <h3>Protect communications from monitoring</h3>
</p> </div>
<p class="text-black small text-muted">H4 <div class="typography__headers__item">
<p class="text-black small text-muted">H4</p>
<h4>Protect communications from monitoring</h4> <h4>Protect communications from monitoring</h4>
</p> </div>
<p class="text-black small text-muted">H5 <div class="typography__headers__item">
<p class="text-black small text-muted">H5</p>
<h5>Protect communications from monitoring</h5> <h5>Protect communications from monitoring</h5>
</p> </div>
<p class="text-black small text-muted">H6 <div class="typography__headers__item">
<p class="text-black small text-muted">H6</p>
<h6>Protect communications from monitoring</h6> <h6>Protect communications from monitoring</h6>
</p> </div>
<p class="text-black small pt-5 text-muted">H1 display <div class="typography__headers__item">
<p class="text-black small pt-5 text-muted">H1 display</p>
<h1 class="header-display color-secondary">I2P Anonymous Network</h1> <h1 class="header-display color-secondary">I2P Anonymous Network</h1>
</p> </div>
<p class="text-black small text-muted">H2 display <div class="typography__headers__item">
<p class="text-black small text-muted">H2 display</p>
<h2 class="header-display color-secondary">I2P Anonymous Network</h2> <h2 class="header-display color-secondary">I2P Anonymous Network</h2>
</p> </div>
<p class="text-black small text-muted">H3 display <div class="typography__headers__item">
<p class="text-black small text-muted">H3 display</p>
<h3 class="header-display color-secondary">I2P Anonymous Network</h3> <h3 class="header-display color-secondary">I2P Anonymous Network</h3>
</p> </div>
<p class="text-black small text-muted">H4 display <div class="typography__headers__item">
<p class="text-black small text-muted">H4 display</p>
<h4 class="header-display color-secondary">I2P Anonymous Network</h4> <h4 class="header-display color-secondary">I2P Anonymous Network</h4>
</p> </div>
</div> </div>
</div> </div>
<div class="row pt-5"> <div class="row pt-5">

19
assets/styles/visuals.scss
View File

@ -25,28 +25,32 @@
h1.header-display { h1.header-display {
&::before { &::before {
height: 3.75rem; // 150% of text-size height: 3.75rem; // 150% of text-size
transform: translate(-15px, 0.9375rem); // 25% of height transform: translate(-15px, 0);
margin-bottom: -0.937rem; // 25% of height
} }
} }
h2.header-display { h2.header-display {
&::before { &::before {
height: 3rem; height: 3rem;
transform: translate(-15px, 0.75rem); transform: translate(-15px, 0);
margin-bottom: -0.75rem;
} }
} }
h3.header-display { h3.header-display {
&::before { &::before {
height: 2.625rem; height: 2.625rem;
transform: translate(-15px, 0.65625rem); transform: translate(-15px, 0);
margin-bottom: -0.65625rem;
} }
} }
h4.header-display { h4.header-display {
&::before { &::before {
height: 2.25rem; height: 2.25rem;
transform: translate(-15px, 0.5625rem); transform: translate(-15px, 0);
margin-bottom: -0.5625rem;
} }
} }
@ -55,3 +59,10 @@ h4.header-display {
background-color: $oc-gray-9; background-color: $oc-gray-9;
padding: 20px; padding: 20px;
} }
.typography__headers__item {
margin-bottom: 2rem;
p {
margin-bottom: 0.5rem !important;
}
}

Write Preview
Loading…
Cancel
Save