style.css

/*
Theme Name: Ada
Theme URI: http://underscores.me/
Author: Benjamin Birkenhake
Author URI: http://birkenhake.org
Description: A one column, minimalistic and elegant Theme named after the most elegant Ada Lovelace
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ada
Tags: minimalistic, one-column, responsive-layout, featured-images, sticky-post

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Ada is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/

Have fun, and don't be afraid to contact me if you have questions.



/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Basic Structure
# Normalize
# Fixing Stuff of underscores and WordPress Defaults
# Typography
## Clearings
# Genral Layout
# Header
# Footer
# Global Visual Tools from WordPress Core
# Teasers
## Teaser Big
# Archives
# Singulars, Single, Posts, Pages
## Alignments
## Comments
# Repeating Visual Patterns 
## Clickme Buttons 
## Rainbow Warrior
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Basic Structure
--------------------------------------------------------------

The Themes HTML, IDs, Clases and CSS are more or less based on SMACSS: http://smacss.com/.

It is a one-column Layout based on an 18 Column Grid.

20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20,41,20

Widths of the Columns 
and Distances from the right
 1 =   41 /   20 
 2 =  102 /   81 
 3 =  163 /  142
 4 =  224 /  203 
 5 =  285 /  264 
 6 =  346 /  325
 7 =  407 /  386
 8 =  468 /  447
 9 =  529 /  508
10 =  590 /  569
11 =  651 /  630
12 =  712 /  691
13 =  773 /  752
14 =  834 /  813
15 =  895 /  874
16 =  956 /  935
17 = 1017 /  996
18 = 1078 / 1057 

Globally usable Layoutboxes:

.marginalia  - floats left next to the main-content, 3 columns wide, 1st to 3rd column
.apostille   - floats right next to the main-content, 5 columns wide, 14th to 18th column
.broadside   - 18 columns wide, 1st - 18th column
.mosaic      - contains 6 subboxes per row, each 3 columns wide, 18 columns wide at all, 1st - 18th column
.troika      - contains 3 subboxes per row, each 6 columns wide, 18 columns wide at all, 1st - 18th column
.topics      - contains 2 subboxes per row, each 9 columns wide, 18 columns wide at all, 1st - 18th column

*/


/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

/* ========== At first, set Defaults back to zero ========== */
html,body,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,table,tr,td,thead,tbody{
	margin:0px;
	padding:0px;
	font-weight:normal;
	border:0px;
}

/* Add basic marigins again */

ul, ol, dd{
	padding-left:2em;
}

h2, h3, h4, h5, h6, p, ul, ol, dl, table, pre, iframe {
	margin-bottom:2em;	
}

 ul ul,
 ul ol,
 ol ul {
	 margin-bottom:0px;
 }


html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}


article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
	text-decoration: none;
}

a:active,
a:hover {
	outline: 0;
	text-decoration: underline;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin:0px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	width:100%
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Fixing Stuff of underscores and WordPress Defaults
--------------------------------------------------------------*/

.screen-reader-text {
	display: none;
}

.updated {
	display:none;
}

.widget {
	clear:both;
}


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

body {
	background:lightgray;
}

html, body, textarea {
	font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
	line-height: 145%;
}

h, heading, h1, h2, h3, h4, h5, h5 {
	font-weight:normal;
	line-height: 120%;	
}

.page-title {
	font-size:150%;
}

h1.page-title, h1.entry-title, h2 {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	font-size:200%;
	font-weight:200;	
}

h1.page-title a, h2 a{

}

a,
.contrast {
	/*color:#ec1313;*/
}

img {
	max-width: 100%;
	height: auto;
}


hr {
	border-color: black;
	border-bottom: 0px;
	border-style: solid;
	margin-top:3em;
	margin-bottom:3em;
}


/*--------------------------------------------------------------
# Genral Layout
--------------------------------------------------------------*/

.site {
	margin:auto;	
	margin-bottom:50px;
	background:white;
	position:relative;
}

.site-content {
	margin-top:	20px;
}

.site-footer {
	margin-bottom:20px;
}

.site > hr {
	margin-left:20px;
	margin-right:20px;
}

.clear,
.clearfix {
	clear:both;	
}

/*--------------------------------------------------------------
## Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}



/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/


.site-header {
	background:black;
	color:white;
	padding-top:4px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:4px;
}

.site-header a {
	color:white;
}


.site-header .site-title {
	margin:0px;
	display:inline;
	font-size:16px;
}

.site-header .navigation,
.site-header .nav-links,
.site-header .nav-previous,
.site-header .nav-next {
	display:inline;
}

.site-header .nav-previous,
.site-header .nav-next {
	float:none;
}

.site-header .post-navigation {
}

.site-header .nav-links {
    font-size:32px;
}

.site-header .nav-previous {
    padding-right:0.5em;
}

.site-header .nav-next {
    padding-right:0.5em;
}

.site-header .search {
    text-decoration: none;
}

.site-header .search:before {
	font: 400 18px/1 dashicons !important;
	content: "\f179";
	color:white;
    top:4px;
    position:relative;
}

.site-navigation {
	float:right;
}



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.site-footer {
	margin-left: 20px;
	margin-right:20px;
}


/*--------------------------------------------------------------
# Global Visual Tools from WordPress Core
--------------------------------------------------------------*/


.nav-menu .page_item {
	margin-right:20px;
}

.attachment-post-thumbnail {
	max-width:529px;
}

.nav-next, .nav-previous {
	margin-top:20px;
	margin-bottom:20px;
}

.widget {
	margin-bottom:40px;
	clear:both;
}

.posts-navigation {
	min-height:40px;
	margin-bottom:80px;
}

.widget_search {
	
}

.search-head,
.search-head .search-form{
    margin-bottom: 2em;
}

.widget_search,
.search-head {
	margin-left: auto;
	margin-right: auto;
}

.widget_search .search-field,
.search-head .search-field{
	width:64%;
	border:1px solid black;
	padding: 5px;
}

.widget_search .search-submit,
.search-head .search-submit {
	width:28%;
	border-style: outset;
	border-width: 1px;
	border-color: black;
	background: white;
	padding: 5px 15px;
}


.widget_links {
	
}

.widget_links ul{
	list-style-type: none;
	padding-left: 0px;
}


.widget_links li {
	display: inline-block;
	margin-right: 0.2em;
}

.widget_links li::after{
	content: " / ";
}

.widget_links li::last-child::after{
	content: " / ";
}

/*--------------------------------------------------------------
# General Post Elements. For all Post Types. Everywhere
--------------------------------------------------------------*/


.entry-meta-item {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	font-weight:200;
}

/*--------------------------------------------------------------
# Teasers
--------------------------------------------------------------*/

.teaserimage {
	text-align:center;
	margin:0px;
	margin-bottom: 2em;
}

.read-status {
	display:none;
}


/*--------------------------------------------------------------
## Basic Teaser
--------------------------------------------------------------*/


.teaser {
	clear:both;
}


/*--------------------------------------------------------------
## Teaser Big
--------------------------------------------------------------*/


.teaser-big {
	
}

.teaser-big .contrast {
	/*color:#ec1313;*/
}


/*--------------------------------------------------------------
## Teaser List
--------------------------------------------------------------*/

.teaser-list {
	
}

/*--------------------------------------------------------------
## Teaser Illustrated
--------------------------------------------------------------*/

.teaser-illustrated {
	
}

.teaser-illustrated .entry-title{
	position: relative;
	top: -232px;
	background: white;
	margin: 0 6%;
	padding: 6% 4%;
	width: 80%;
	clear: both;
}

.teaser-illustrated .thumbnail,
.teaser-illustrated .thumbnail img {
	width:100%;
	max-width: 100%;
	float: none;
}

/*--------------------------------------------------------------
# Archives
--------------------------------------------------------------*/

.archive.date .page-header {
	margin-bottom: 2em;
}

/*--------------------------------------------------------------
# Singulars, Single, Posts, Pages
--------------------------------------------------------------*/

.singular .content-area {

}


.singular .entry-title {
	margin-bottom: 1em;
}

.singular .entry-title .contrast {
	/*color:red;*/
}

.singular .entry-content,
.singular .entry-footer {
	margin-bottom: 2em;
}

.singular .comments-area {
	margin-top:2em;
}

.singular .entry-footer > div{
	display:block;
}


/* Mixed Content Elements */

blockquote {
	border-left:1px solid #CCC;
	padding-left: 1em;
}

/* Comments */

.comment-list {
	list-style-type: none;
}

/*--------------------------------------------------------------
## Alignments
--------------------------------------------------------------*/
.alignleft {
	display: block;
	margin-bottom:1.5em;
}

.alignright {
	display: block;
	margin-bottom:1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/

input[type="text"],
input[type="submit"],
textarea {
	border-width: 1px;
	border-style: solid;
}

.says {
	display:none;
}

.comment-text {
	clear:both
}

.comment-author-gravatar{
	float:left;
}	

.comment-author-name,
.comment-author-date {
  margin-left: 122px;
  display: block;
}


.comment-meta {
	margin-bottom: 1em;
}

/*--------------------------------------------------------------
# Repeating Visual Patterns 
--------------------------------------------------------------*/



/*--------------------------------------------------------------
## Clickme Buttons 
--------------------------------------------------------------*/

.clickme {
	line-height: 250%;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	font-weight:200;	
}

.clickme a:before {
	color:gray;
}

.clickme a {
	/* border:1px outset;
	padding:8px 15px 5px 15px; */
	white-space: nowrap;
}

.clickme a {
	/* color:blue; */
	/* border-color:blue; */
}

.clickme a:visited {
	/*
	color:purple;
	border-color: purple;
	*/
}

.clickme a:hover {
	/*
	text-decoration: none;
	background-color:#eee;
	border-color:gray;
	*/
	color:black;
}

.clickme .dashicons {
	color:gray;
}

.clickme .dashicons {
	padding-top: 0.4em;
	padding-right: 0.5em;
	font-size: 130%;
}

.tellme {
	display:none;
}




/*--------------------------------------------------------------
## Menue
--------------------------------------------------------------*/

.site-branding {
	line-height: 250%;
}

.widget-area-menu {
	background: transparent;
	display:none;
	
}

.widget-area-menu:target {	
	display:block;
	padding-top: 55px;
	margin-top: -50px;
	border:0px;
}

.admin-bar .widget-area-menu:target {		
	padding-top: 105px;
	margin-top: -95px;
}


.widget-area-menu:active,
.widget-area-menu:focus {
	border:0px;
	outline-width:0px;
}

.widget-area-menu-inner {
	border-top: 1px solid white;
	padding-top: 20px;
}

.button-menu-open,
.button-menu-open:hover,
.button-menu-open:active {
	display: inline;
	text-decoration: none;
	padding-right: 0.2em;
}

.button-menu-close,
.button-menu-close:hover,
.button-menu-close:active {
	float:right;
	text-decoration: none;
	padding-right: 0.2em;
}

.button-menu .dashicons {
	font-size: 35px;
	position: relative;
	top:3px;
}


.widget-area-menu input {
	color:black;
}

.widget-area-menu .widget {
	float:left;
	clear: none;
	margin-right: 40px;
}


.widget-area-menu .sub-menu,
.widget-area-menu .children {
	display: none;
}