bij1
/
style-guide
19
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Table styling, font size adjustements, minor changes

This commit is contained in:
nadiavanleur 2023-07-12 14:55:16 +02:00
parent a111e50cdf
commit bfcf38a00e
2 changed files with 160 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
index.html
View File

@ -14,9 +14,9 @@
<h1>Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, nunc eget aliquam ultricies, nunc nunc ultricies tortor,
quis aliquam nunc nunc sit amet nisl. Nullam consectetur, nunc eget
aliquam ultricies, nunc nunc ultricies
consectetur, <del>nunc eget aliquam</del> ultricies, nunc nunc ultricies
tortor, quis aliquam nunc nunc sit amet nisl. Nullam
consec<sup>tetur</sup>, nunc eget aliquam ultricies, nunc nunc ultricies
<a href="https://www.bij1.org">tortor</a>, quis aliquam nunc nunc sit
amet nisl.
</p>
@ -24,23 +24,33 @@
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, nunc eget aliquam <code>ultricies</code>, nunc nunc
ultricies tortor, quis aliquam nunc nunc sit amet nisl. Nullam
consectetur, nunc eget aliquam ultricies, nunc nunc ultricies tortor,
quis aliquam nunc nunc sit amet nisl.
ultricies tortor, qu<sub>is</sub> aliquam nunc nunc sit amet nisl.
Nullam consectetur, nunc eget aliquam ultricies, nunc nunc ultricies
tortor, quis aliquam nunc nunc sit amet nisl.
</p>
<h3>Heading 3</h3>
<p><img src="https://placehold.co/400x200" alt="alt text" /></p>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>
Lorem ipsum dolor sit amet,
<strong>consectetur adipiscing</strong> elit. Nullam consectetur,
<em>nunc eget aliquam</em> ultricies, nunc nunc ultricies tortor, quis
aliquam nunc nunc sit amet nisl. Nullam consectetur, nunc eget aliquam
ultricies, nunc nunc ultricies tortor, quis aliquam nunc nunc sit amet
nisl.
ultricies, nunc nunc ultricies <code>tortor</code>, quis aliquam nunc
nunc sit amet nisl.
</p>
<h5>Heading 5</h5>
<ul>
<li>
<input checked="" disabled="" type="checkbox" /> Lorem ipsum dolor sit
</li>
<li><input disabled="" type="checkbox" /> Lorem ipsum dolor sit</li>
<li><input disabled="" type="checkbox" /> Lorem ipsum dolor sit</li>
</ul>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
@ -51,6 +61,7 @@
</p>
</blockquote>
<h6>Heading 6</h6>
<ol>
<li>Ordered list</li>
<li>Second item</li>
@ -65,16 +76,6 @@
<li>Third item</li>
</ul>
<p>
<code>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
consectetur, nunc eget aliquam ultricies, nunc nunc ultricies tortor,
quis aliquam nunc nunc sit amet nisl. Nullam consectetur, nunc eget
aliquam ultricies, nunc nunc ultricies tortor, quis aliquam nunc nunc
sit amet nisl.
</code>
</p>
<hr />
<table>
@ -96,37 +97,15 @@
</tbody>
</table>
<pre><code>{
<span class="hljs-attr">"firstName"</span>: <span class="hljs-string">"John"</span>,
<span class="hljs-attr">"lastName"</span>: <span class="hljs-string">"Smith"</span>,
<span class="hljs-attr">"age"</span>: <span class="hljs-number">25</span>
}
</code></pre>
<p>Here&#39;s a sentence with a footnote. [^1]</p>
<p>[^1]: This is the footnote.</p>
<h3 id="my-great-heading-custom-id-">My Great Heading {#custom-id}</h3>
<p>term : definition : definition</p>
<p><del>The world is flat.</del></p>
<ul>
<li>
<input checked="" disabled="" type="checkbox" /> Write the press
release
</li>
<li><input disabled="" type="checkbox" /> Update the website</li>
<li><input disabled="" type="checkbox" /> Contact the media</li>
</ul>
<p>That is so funny! :joy:</p>
<p>I need to highlight these <mark>very important words</mark>.</p>
<p>H<sub>2</sub>O</p>
<p>X<sup>2</sup></p>
<pre>
<code>
{
<span class="hljs-attr">"firstName"</span>: <span class="hljs-string">"John"</span>,
<span class="hljs-attr">"lastName"</span>: <span class="hljs-string">"Smith"</span>,
<span class="hljs-attr">"age"</span>: <span class="hljs-number">25</span>
}
</code>
</pre>
</main>
<footer></footer>
</body>

157
style.css
View File

@ -1,3 +1,5 @@
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');
@font-face {
font-family: 'Bij1';
src: url('./assets/fonts/BIJ1-Regular.woff2');
@ -7,7 +9,7 @@
@font-face {
font-family: 'Bij1';
src: url('./assets/fonts/BIJ1-SemiBold.woff2');
font-weight: 600;
font-weight: 700;
}
@font-face {
@ -16,10 +18,17 @@
font-weight: 900;
}
/* VARIABLES */
:root {
/* Color */
--color-black: #000000;
--color-gray-900: #161616;
--color-gray-600: #8a8a8a;
--color-gray-500: #cacaca;
--color-gray: #EDEDED;
--color-gray-200: #f9f9f9;
--color-white: #FFFFFF;
--color-yellow: #FFFF00;
--color-orange: #FF9600;
@ -30,20 +39,22 @@
--color-blue: #00CCFF;
--color-accent: var(--color-yellow);
--color-text: var(--color-gray-900);
/* Fonts */
--font-family-base: 'Bij1', sans-serif;
--font-family-code: Consolas, "Liberation Mono", Courier, monospace;
/* Font sizes */
--font-size-xxs: 0.75rem;
--font-size-xs: 1rem;
--font-size-sm: 1.125rem;
--font-size-xxs: 0.7rem;
--font-size-xs: 0.75rem;
--font-size-sm: 1.1rem;
--font-size-md: 1.5rem;
--font-size-lg: 1.9rem;
--font-size-xl: 2.6rem;
/* Line height */
--line-height: 1.5;
--line-height: 1.25;
/* Spacing */
--spacing-xxs: 2px;
@ -56,23 +67,31 @@
--spacing-xxxl: 256px;
/* Borders */
--border-accent-color-1: var(--color-orange);
--border-accent-color-2: var(--color-pink);
--border-accent-color-3: var(--color-green);
--border-accent-color-4: var(--color-purple);
--border-accent-color-5: var(--color-red);
--border-accent-color-6: var(--color-blue);
--border-accent-size: 10px;
--border-accent: var(--border-accent-size) solid;
--border-accent-image-source: linear-gradient(to right,
var(--color-orange) calc(100%/6*1),
var(--color-pink) calc(100%/6*1),
var(--color-pink) calc(100%/6*2),
var(--color-green) calc(100%/6*2),
var(--color-green) calc(100%/6*3),
var(--color-purple) calc(100%/6*3),
var(--color-purple) calc(100%/6*4),
var(--color-red) calc(100%/6*4),
var(--color-red) calc(100%/6*5),
var(--color-blue) calc(100%/6*5)
var(--border-accent-color-1) calc(100%/6*1),
var(--border-accent-color-2) calc(100%/6*1),
var(--border-accent-color-2) calc(100%/6*2),
var(--border-accent-color-3) calc(100%/6*2),
var(--border-accent-color-3) calc(100%/6*3),
var(--border-accent-color-4) calc(100%/6*3),
var(--border-accent-color-4) calc(100%/6*4),
var(--border-accent-color-5) calc(100%/6*4),
var(--border-accent-color-5) calc(100%/6*5),
var(--border-accent-color-6) calc(100%/6*5)
);
--border-accent-image-slice: 1;
--border-radius-md: 5px;
}
/* BASE */
* {
box-sizing: border-box;
margin: 0;
@ -84,27 +103,36 @@ html {
text-rendering: optimizeLegibility;
line-height: var(--line-height);
font-size: var(--font-size-md);
color: var(--color-black);
color: var(--color-text);
text-decoration-skip-ink: skip-ink;
-moz-osx-font-smoothing: grayscale;
}
header {
/* Header */
body > header:first-child {
position: relative;
border-bottom: var(--border-accent);
border-image-source: var(--border-accent-image-source);
border-image-slice: var(--border-accent-image-slice);
}
/* Main */
main {
max-width: 40em;
margin: 0 auto;
padding: var(--spacing-md);
}
/* HEADINGS */
h1,
h2,
h3 {
h3,
h4,
h5,
h6 {
font-weight: 900;
text-transform: uppercase;
margin-bottom: var(--spacing-lg);
}
h1 {
@ -119,6 +147,19 @@ h3 {
font-size: var(--font-size-md);
}
h4 {
font-size: var(--font-size-sm);
}
h5 {
font-size: var(--font-size-xs);
}
h6 {
font-size: var(--font-size-xxs);
}
/* CONTENT BLOCKS */
p,
blockquote,
ol,
@ -126,38 +167,102 @@ ul,
hr,
table,
pre {
margin-bottom: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
/* Hr / line */
hr {
clear: both;
max-width: 50rem;
height: 0;
margin: var(--spacing-lg) auto;
border-top: 0;
border-right: 0;
border-bottom: 1px solid var(--color-text);
border-left: 0;
}
/* Blockquote */
blockquote {
font-size: var(--font-size-xxl);
color: var(--color-gray-600);
padding: 0 var(--spacing-md);
border-left: 1px solid currentColor;
}
/* Table */
table {
border-collapse: collapse;
width: 100%;
border-radius: var(--border-radius-md);
}
tbody, tfoot, thead {
border: 1px solid var(--color-gray);
background-color: var(--color-white);
}
thead {
background: var(--color-gray-200);
}
tfoot tr, thead tr {
background: transparent;
}
tbody tr:nth-child(2n) {
border-bottom: 0;
background-color: var(--color-gray);
}
td,
th {
text-align: left;
padding: var(--spacing-sm) var(--spacing-sm);
}
tfoot td,
tfoot th,
thead td,
thead th {
font-weight: 700;
}
/* Lists */
ol,
ul {
list-style-position: inside;
/* list-style-position: inside; */
margin-left: 1em;
}
/* Code */
code {
background-color: var(--color-gray);
border: 1px solid var(--color-gray-500);
font-family: var(--font-family-code);
display: inline-block;
max-width: 100%;
word-wrap: break-word;
padding: 0 var(--spacing-sm);
}
pre > code {
display: block;
}
a {
/* Links */
p a {
color: var(--color-black);
text-decoration: underline;
background-color: var(--color-accent);
}
a:hover,
a:focus {
p a:hover,
p a:focus {
text-decoration: none;
}
/* Images */
img {
display: block;
width: 100%;
display: inline-block;
margin: 0 auto;
}