From bfcf38a00e6d380898d5bd62c7ef5b38bf0dd8d0 Mon Sep 17 00:00:00 2001 From: nadiavanleur Date: Wed, 12 Jul 2023 14:55:16 +0200 Subject: [PATCH] Table styling, font size adjustements, minor changes --- index.html | 79 ++++++++++----------------- style.css | 157 ++++++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 160 insertions(+), 76 deletions(-) diff --git a/index.html b/index.html index 7f4d655..3f83d1b 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,9 @@

Heading 1

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, 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.

@@ -24,23 +24,33 @@

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. + 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.

+

Heading 3

alt text

-

Heading 3

+

Heading 4

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. + ultricies, nunc nunc ultricies tortor, quis aliquam nunc + nunc sit amet nisl.

+
Heading 5
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam @@ -51,6 +61,7 @@

+
Heading 6
  1. Ordered list
  2. Second item
    3. @@ -65,16 +76,6 @@
  3. Third item
    4. -

    - - 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. - -

    -
    @@ -96,37 +97,15 @@
    - 
    {
-        "firstName": "John",
-        "lastName": "Smith",
-        "age": 25
-      }
-
    - -

    Here's a sentence with a footnote. [^1]

    -

    [^1]: This is the footnote.

    - -

    My Great Heading {#custom-id}

    - -

    term : definition : definition

    - -

    The world is flat.

    - - - -

    That is so funny! :joy:

    - -

    I need to highlight these very important words.

    - -

    H2O

    -

    X2

    + 
    +        
+  {
+    "firstName": "John",
+    "lastName": "Smith",
+    "age": 25
+  }
+        
+
    diff --git a/style.css b/style.css index 20748fb..20ce6cd 100644 --- a/style.css +++ b/style.css @@ -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; } \ No newline at end of file