diff --git a/README.md b/README.md index 799dd10..66ae14d 100644 --- a/README.md +++ b/README.md @@ -125,17 +125,17 @@ Here is a summary of the style changes provided by SPCSS: - Maximum width for the `` element to prevent the lines from being too long. Shorter lines make it easier for our eyes to gauge the beginning and end of the lines. -- Dark gray (`#333`) text color instead of black (`#000`). +- Dark gray (`#333`) text color instead of black (`#000`) in light mode. - Increased line-height to add more room around the lines and make them easier to read. - More margin above headings to separate them more conspicuously from preceding content. - Less margin below headings as well as less `line-height` for margins to associate them more tightly with succeeding content. -- Consistent blue color for hyperlinks throughout the content with the - exception of headings (see next point). -- Retain dark gray text color for headings even when the headings are - hyperlinks. +- Support for heading anchor links to facilitate sharing direct links to + sections of a page. +- Support for special styling of keyboard input (``) within code + blocks (`
`).
 - Ensure width of images do not exceed the maximum width for the
   `` element.
 - Simple styling for `
` and `
` elements such as
diff --git a/index.html b/index.html
index 1ca6fd4..a941d08 100644
--- a/index.html
+++ b/index.html
@@ -7,37 +7,41 @@
   
 
 
-
SPCSS Demo

+
SPCSS Demo

 

-  SPCSS is a simple and plain stylesheet for simple text-based
-  websites.
+  SPCSS is a simple and minimal stylesheet for simple text-based
+  websites. To learn more about it and how to use it, visit github.com/susam/spcss. This
+  page demonstrates how some common HTML elements are styled with this
+  stylesheet.
+

+
Heading Anchor

+

+  When you hover your cursor (mouse pointer) on the section heading
+  above, a hash sign appears to its right. This is a heading anchor
+  link. Heading anchor links are useful for sharing direct links to
+  sections of a web page.
 

 

-  The sections below demonstrate how some common HTML elements are
-  styled with this stylesheet.
+  Heading anchor links are enabled with a special feature of SPCSS: If a
+  heading element contains an empty anchor element, SPCSS turns that
+  into an anchor link that becomes visible while hovering the cursor on
+  the heading. For example, the above heading is created with the
+  following HTML code:
 

-
Lorem Ipsum

+
+<h2 id="heading-anchor">Heading Anchor<a href="#heading-anchor"></a></h2>
+

 

-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue
-  est sit amet purus suscipit scelerisque. In pulvinar lectus aliquet
-  ipsum vulputate feugiat sodales et lacus. Integer ut tellus nec quam
-  elementum fermentum. Nam risus nunc, malesuada eget libero tincidunt,
-  maximus rutrum mauris. Aliquam accumsan dignissim dui ut tincidunt.
+  If a heading element does not have an empty anchor element within it,
+  then no heading anchor link is created. For example, the top-level
+  heading of this page does not have an empty anchor element, so it is
+  rendered as a plain heading without an anchor link.
 

+
Code Block

 

-  Suspendisse malesuada volutpat tincidunt. Nam eu malesuada eros.
-  Aenean at metus nec diam venenatis rhoncus a eu turpis. Nam varius
-  consectetur ante, at lobortis nisl eleifend vel.
-

-

-  Vestibulum sit amet congue lorem, id lacinia nisl. Nam convallis purus
-  est, ut dignissim erat ornare nec. Etiam sit amet volutpat dolor.
-  Praesent auctor augue eget diam porttitor, ut auctor sapien
-  vestibulum. Phasellus id condimentum sapien.
-

-
Code Block

-

-  Here is the famous "hello, world" program written in C:
+  Here is a code block that displays the famous "hello, world" program
+  written in C:
 

 
 #include <stdio.h>
@@ -58,8 +62,21 @@ int main()
 hello, world
 

 

-  Here is a code block with a ruler that can be helpful to see how much
-  horizontal and vertical space a certain amount of code consumes:
+  The command displayed in green above denotes keyboard input entered by
+  a user. SPCSS considers any text in <kbd> element
+  nested within a <pre> element is considered to be
+  keyboard input and highlighted in green by SPCSS. For example, the
+  above code example was created with the following HTML code:
+

+
+<pre>
+<samp>$ <kbd>cc hello.c &amp;&amp; ./a.out</kbd>
+hello, world</samp>
+</pre>
+

+

+  Here is a code block with a wide ruler that can be helpful to see how
+  much horizontal and vertical space a certain amount of code consumes:
 

 
 1---5---10---15---20---25---30---35---40---45---50---55---60---65---70---75---80---85---90---95--100--105--110--115--120--125--130--135--140--145--150--155--160--165--170--175--180--185--190--195--200--205--210--215--220--225--230--235--240--245--250--255--260--265--270--275--280--285--290--295--300
@@ -72,14 +89,16 @@ hello, world
 8
 

 

-  It is worth noting that the above code block is horizontally
-  scrollable which is due to the fact that the first line is too long to
-  fit within the width of the HTML body.
+  Since the above code block is too wide to fit within the width of the
+  HTML body, SPCSS makes it horizontally scrollable.
 

-
Blockquote

+
Blockquote

 

-  Issac Newton was relatively modest about his achievements, writing in
-  a letter to Robert Hooke in February 1676:
+  This section shows a few examples of the
+  <blockquote> element.
+

+

+  In a letter to Robert Hooke in 1675, Issac Newton famously wrote,
 

 

   If I have seen further it is by standing on the shoulders of giants.
@@ -99,7 +118,13 @@ hello, world
   Wikipedia entry
   on Issac Newton.
 

-
Image

+
Image

+

+  This section shows an example of <img> nested
+  within a <figure> element. The caption is created
+  with <figcaption> within the same
+  <figure> element.
+

 

   
     Digger original PC booter version running in DOSBox
   

 

-
About This Demo

+

+  SPCSS styles the <figure> element to center-align
+  all its content. That is why the caption appears centered. The font
+  size of the caption is made smaller. The original width of the image
+  above exceeds the width of the HTML body, however SPCSS ensures that
+  the rendered width of any image on the page does not exceed the width
+  of the HTML body. This prevents the page layout from appearing broken.
+

+
More

+

+  Apart from the features described above, SPCSS has the following
+  additional features:
+

+
    
+  
  • 
+    Support for dark color theme. By default, this page shows dark text
+    on light background. However, on a system or web browser with dark
+    theme enabled, SPCSS automatically selects light foreground colors
+    on a dark background.
+  
    • 
+  
  • 
+    Maximum width for the HTML body in order to prevent the lines of
+    text from becoming too long. Shorter lines are easier to read.
+  
    • 
+  
  • 
+    In light mode, the text color is dark gray (#333)
+    instead of black (#000). This reduces the contrast a
+    little bit which some people find more pleasant.
+  
    • 
+  
  • 
+    Increased line-height to add more room around the lines.
+  
    • 
+  
  • 
+    More margin above headings to separate them more conspicuously from
+    preceding content.
+  
    • 
+  
  • 
+    Less margin below headings as well as less line-height for margins
+    to associate them more tightly with succeeding content.
+  
    • 
+

+
About This Demo

 

   This is a demo of SPCSS. To learn more about SPCSS and how to use it,
   visit github.com/susam/spcss.