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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      _includes/visuals/typography.html
  2. 11
      _site/assets/styles/main.css
  3. 19
      _site/assets/styles/visuals.scss
  4. 74
      _site/visuals/index.html
  5. 19
      assets/styles/visuals.scss

72
_includes/visuals/typography.html
View File

@ -3,38 +3,48 @@
<p class="text-muted">Our main typography is Source Sans made by Adobe.</p>
</div>
<div class="row">
<div class="col-12">
<p class="text-black small text-muted">H1
<h1>Protect communications from monitoring</h1>
</p>
<p class="text-black small text-muted">H2
<h2>Protect communications from monitoring</h2>
</p>
<p class="text-black small text-muted">H3
<h3>Protect communications from monitoring</h3>
</p>
<p class="text-black small text-muted">H4
<h4>Protect communications from monitoring</h4>
</p>
<p class="text-black small text-muted">H5
<h5>Protect communications from monitoring</h5>
</p>
<p class="text-black small text-muted">H6
<h6>Protect communications from monitoring</h6>
</p>
<div class="col-12 typography__headers">
<div class="typography__headers__item">
<p class="text-black small text-muted">H1</p>
<h1>Protect communications from monitoring</h1>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H2</p>
<h2>Protect communications from monitoring</h2>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H3</p>
<h3>Protect communications from monitoring</h3>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H4</p>
<h4>Protect communications from monitoring</h4>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H5</p>
<h5>Protect communications from monitoring</h5>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H6</p>
<h6>Protect communications from monitoring</h6>
</div>
<p class="text-black small pt-5 text-muted">H1 display
<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
</p>
<p class="text-black small text-muted">H2 display
<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
</p>
<p class="text-black small text-muted">H3 display
<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
</p>
<p class="text-black small text-muted">H4 display
<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
</p>
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
</div>
</div>
<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; }
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; }
.typography__headers__item { margin-bottom: 2rem; }
.typography__headers__item p { margin-bottom: 0.5rem !important; }
.alert { border-radius: 15px; }
.alert-custom { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; }
.alert-custom hr { border-top-color: #6679ac; }

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

@ -25,28 +25,32 @@
h1.header-display {
&::before {
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 {
&::before {
height: 3rem;
transform: translate(-15px, 0.75rem);
transform: translate(-15px, 0);
margin-bottom: -0.75rem;
}
}
h3.header-display {
&::before {
height: 2.625rem;
transform: translate(-15px, 0.65625rem);
transform: translate(-15px, 0);
margin-bottom: -0.65625rem;
}
}
h4.header-display {
&::before {
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;
padding: 20px;
}
.typography__headers__item {
margin-bottom: 2rem;
p {
margin-bottom: 0.5rem !important;
}
}

74
_site/visuals/index.html
View File

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

19
assets/styles/visuals.scss
View File

@ -25,28 +25,32 @@
h1.header-display {
&::before {
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 {
&::before {
height: 3rem;
transform: translate(-15px, 0.75rem);
transform: translate(-15px, 0);
margin-bottom: -0.75rem;
}
}
h3.header-display {
&::before {
height: 2.625rem;
transform: translate(-15px, 0.65625rem);
transform: translate(-15px, 0);
margin-bottom: -0.65625rem;
}
}
h4.header-display {
&::before {
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;
padding: 20px;
}
.typography__headers__item {
margin-bottom: 2rem;
p {
margin-bottom: 0.5rem !important;
}
}

Write Preview
Loading…
Cancel
Save