Simplest CSS to put inline for a single-page website

Thu, Jul 9, 2020

one page inline css
simplest single page website
tinycss
oh wow Bulma is huge
minimal hugo theme
hugo zine theme

Ended up stealing from… shamefully, i cannot find where i was stealing this from. I feel like i eventually ended up on a list of simple design examples and i don’t remember if they were pure CSS zen-garden style or for some static site generator.

::placeholder {
	color: #191919;
}

a.intro-link, a.restaurant-link {
   	text-decoration: none;
    border-bottom: 3px solid #191919;
    -webkit-transition: border 400ms ease;
    -moz-transition: border 400ms ease;
    -ms-transition: border 400ms ease;
    -o-transition: border 400ms ease;
    transition: border 400ms ease;
}

a.book-link {
   	text-decoration: none;
    border-bottom: 3px solid #ff647e;
    -webkit-transition: border 400ms ease;
    -moz-transition: border 400ms ease;
    -ms-transition: border 400ms ease;
    -o-transition: border 400ms ease;
    transition: border 400ms ease;
}

a.intro-book-link {
   	text-decoration: none;
    border-bottom: 3px solid #f5a623;
    -webkit-transition: border 400ms ease;
    -moz-transition: border 400ms ease;
    -ms-transition: border 400ms ease;
    -o-transition: border 400ms ease;
    transition: border 400ms ease;
}

a.intro-link:hover, a.restaurant-link:hover, a.book-link:hover, a.intro-book-link:hover {
	border-bottom: 3px solid transparent;
}

@media only screen and (max-width: 767px) {
	a.intro-link, a.restaurant-link {
   		text-decoration: none;
    	border-bottom: 2px solid #191919;
    	-webkit-transition: border 400ms ease;
    	-moz-transition: border 400ms ease;
    	-ms-transition: border 400ms ease;
    	-o-transition: border 400ms ease;
    	transition: border 400ms ease;
	}

  	a.book-link {
   		text-decoration: none;
    	border-bottom: 2px solid #ff647e;
    	-webkit-transition: border 400ms ease;
    	-moz-transition: border 400ms ease;
    	-ms-transition: border 400ms ease;
    	-o-transition: border 400ms ease;
    	transition: border 400ms ease;
	}
  a.intro-book-link {
   		text-decoration: none;
    	border-bottom: 2px solid #f5a623;
    	-webkit-transition: border 400ms ease;
    	-moz-transition: border 400ms ease;
    	-ms-transition: border 400ms ease;
    	-o-transition: border 400ms ease;
    	transition: border 400ms ease;
	}

	a.intro-link:hover, a.restaurant-link:hover, a.book-link:hover, a.intro-book-link:hover {
		border-bottom: 2px solid transparent;
	}
}

.content {
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6rem;
  max-width: 70rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  font-family: Times New Roman, serif;
}

.content img.large {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.content img.small {
  max-width: 25rem;
}

.content .right {
  float: right;
}

All that between unadorned <style> </style> tags in the HTML head.