Bookish

Developer
Heydon
Size
2,094 Kb
Views
32,384
  1. Bookish Previews
  2. Bookish HTML Codes
  3. Bookish CSS Codes

How do I make an bookish?

My attempt at making a responsive chapter reference-like design for a blog archive. What is a bookish? How do you make a bookish? This script and codes were developed by Heydon on 27 August 2022, Saturday.

Bookish Previews
IQ Test

Bookish - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bookish</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Bookish</h1>
<p>&mdash; By Heydon Pickering &mdash;</p>
<ul class="chapters"> <li><a href="#"><span>Prologue That Is Very Long And Boring</span></a><time> <span>1st September 2014</span></time></li> <li><a href="#"><span>Chapter One</span></a><time> <span>8th August 2014</span></time></li> <li><a href="#"><span>Chapter Two</span></a><time> <span>19th July 2014</span></time></li> <li><a href="#"><span>Chapter Three Heading Is Also Very Long</span></a><time> <span>6th June 2014</span></time></li> <li><a href="#"><span>Epilogue</span></a><time> <span>9th May 2014</span></time></li>
</ul>
</body>
</html>

Bookish - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic,700);
@import url(http://fonts.googleapis.com/css?family=Alegreya+SC);
* { padding: 0; margin: 0; border: 0; vertical-align: baseline;
}
body { font-size: 125%; font-family: Gentium Book Basic, serif; line-height: 1.33; font-weight: normal; max-width: 30em; margin: 1.33em auto; background: #FFFFCC;
}
* + * { margin-top: 1.33em;
}
h1, h2 { text-align: center; font-family: Alegreya SC, serif; font-weight: normal; line-height: 1;
}
h1 { font-size: 3em;
}
li { margin-top: 0;
}
a { text-decoration: none; border-bottom: 1px solid; color: #000;
}
/*ul*/.chapters li { font-size: 1.25em; list-style: none; line-height: 1.125;
}
/*ul*/.chapters a { font-weight: bold; border: 0;
}
/*ul*/.chapters a, /*ul*/.chapters time { display: inline-block; width: 50%; vertical-align: baseline; margin-top: 0.33em;
}
/*ul*/.chapters time { text-align: right; font-style: italic;
}
/*ul*/.chapters li:after { content: ''; display: block; height: 0; border-top: 3px dotted; position: relative; bottom: 0.4em; left: 3px; right: 5px; z-index: -1;
}
span { background: #ffffcc; padding: 0 0.125em 0 0;
}
time span { padding: 0 0 0 0.125em;
}
h1 + p { margin-top: 0; text-align: center;
}
Bookish - Script Codes
Bookish - Script Codes
Home Page Home
Developer Heydon
Username heydon
Uploaded August 27, 2022
Rating 3.5
Size 2,094 Kb
Views 32,384
Do you need developer help for Bookish?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Heydon (heydon) Script Codes
Name
File system with nested lists
Vue.js TODO List
Pixelated Brain Animation
Current Page Test Case
Focus management of smooth scrolling
Animated focus styles for kbd users
Ransom Note With Google Font Subsets
Hash change logging
Theme color inverter with filter
4 columns, no single remainder
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!