style.css

/*
Theme Name: NotePress
Theme URI: https://github.com/byn9826/Notepress
Author: Baozier
Author URI: https://github.com/byn9826
Description: This theme only aims to turn your WordPress blog into a public notebook for fun. It is not beautiful, but it looks like a public online Evernote.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: notepress
Tags: Notebook, WordPress, notes, projects, tags, books, EverNote, notebooks

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.

NotePress is based on Underscores http://underscores.me/, (C) 2012-2016 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.io/normalize.css/
*/

/*general*/
body{
	margin: 0;
	padding: 0;
}

#page{
	display: block;
	margin: 0;
	padding: 0;
}

#content{
	display: block;
	width: 100%;
}

h1{
	font-size: 22px;
	font-weight: bold;
	padding: 0;
	margin: 0;
}
h2{
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	padding: 0;
}
h3{
	font-size: 14px;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
h4{
	font-size: 12px;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
h5{
	font-size: 10px;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

p{
	font-size: 12px;
	padding: 0;
	margin: 0;
}

a{
	text-decoration: none;
	color: black;
}

#wrapper{
	display: inline-block;
	vertical-align: top;
	width: 50%;
}
/*Header*/
#header{
	display: block;
	width: 96%;
	padding: 5px 2%;
	border-bottom: 2px solid #b8b9ba;
}

#header h1{
	display: inline-block;
	vertical-align: middle;
}
#header p{
	display: inline-block;
	vertical-align: middle;
	margin-left: 2%;
}

/*aside*/
#aside{
	display: inline-block;
	vertical-align: top;
	width: 40%;
	min-height: 600px;
	background-color: #0e1f30;
	padding: 10px 0;
}

.aside-active{
	background-color: #0024a8;
}

#aside-note{
	display: block;
}

#aside-tag{
	display: block;
}

.aside-title{
	display: block;
	margin-top: 20px;
	cursor: pointer;
	padding: 5px 5%;
}

.aside-title span{
	display: inline-block;
	vertical-align: middle;
	color: #a9acb2;
}

.aside-title h2{
	vertical-align: middle;
	display: inline-block;
	color: #a9acb2;
}

#aside h3{
	display: block;
	color: #a9acb2;
	padding: 5px 10%;
	word-break: break-word;
	cursor: pointer;
}
#aside h3:hover{
	background-color: #6875a3;
}


/*main*/
#main{
	display: inline-block;
	vertical-align: top;
	width: 56%;
	border-right: 1px solid #d2d5db;
	min-height: 600px;
	padding: 10px 0.5%;
}

.main-list{
	display: block;
	width: 98%;
	padding: 10px 1%;
	border-bottom: 1px solid #d2d5db;
	cursor: pointer;
}
.main-list:hover{
	background-color: #fcfcfc;
}

.main-active{
	background-color: #dee5ef;
}
.main-list-title{
	display: block;
	margin-bottom: 5px;
}
.main-list-content{
	display: block;
	color: #a4a4a8;
	word-break: break-word;
}
.main-list-content strong{
	font-weight: normal !important;
}

.main-list-date{
	display: inline-block;
	color: #486ca8;
}

/*one*/
#one{
	display: inline-block;
	vertical-align: top;
	width: 45%;
	min-height: 560px;
	padding: 20px 1%;
}

#one h1{
	display: block;
	margin-bottom: 5px;
	color: #144593;
}

.one-book{
	display: inline-block;
	vertical-align: middle;
	margin-right: 12px;
	border-bottom: 1px solid #0a2e68;
	padding-bottom: 2px;
}
.one-tag{
	display: inline-block;
	vertical-align: middle;
	margin-right: 12px;
	background-color: #afc1e0;
	padding: 2px 5px;
}
#one-time{
	display: inline-block;
	vertical-align: middle;
}
#one-open{
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	font-size: 10px;
	background-color: #00307f;
	color: white;
	padding: 2px 5px;
	border-radius: 3px;
}
#one-content{
	font-size: 14px !important;
	margin-top: 20px;
	border-top: 2px solid #d2d5db;
	padding-top: 10px;
}
#one-content *{
	font-size: 14px !important;
	max-width: 100% !important;
	height: auto !important;
}
#one-content strong{
	display: block !important;
	margin: 10px 0 !important;
}
#one-content a{
	text-decoration: underline !important;
}
#one-content span{
	display: block;
}
#one-content span *{
	display: block;
	margin: 5px 0;
}


/*footer*/
#footer{
	display: block;
	width: 100%;
	background-color: black;
	color: white;
}

#footer a{
	color: white;
}

#footer h5{
	display: inline-block;
	padding: 5px 2%;
	font-weight: bold;
}

@media only screen and (max-width: 782px) {
	#wrapper{
		width: 30%;
	}
	
	#aside{
		display: block;
		width: 100%;
		min-height: 0 !important;
	}
	
	#main{
		display: block;
		width: 97%;
		border-right: 1px solid #0e1f30;
		min-height: 0 !important;
		padding-left: 1%;
	}
	
	#one{
		width: 65%;
		min-height: 560px;
		padding: 20px 2%;
	}

}

@media only screen and (max-width: 600px) {
	#wrapper{
		width: 100%;
		display: block;
	}
	
	#main{
		border-right: 0;
	}
	
	#one{
		width: 96%;
		border-top: 3px solid #0e1f30;
		margin-top: 100px;
	}

}




/*********
single page
**********/

#single{
	display: block;
	margin: 40px 20%;
	width: 60%;
	min-height: 650px;
}

#single h1{
	display: block;
	word-break: break-word;
	text-align: center;
}
#single-info{
	display:block;
	text-align: center;
	margin-bottom: 10px;
}
#single h3{
	display: inline-block;
	vertical-align: middle;
}
#single-article{
	display: block;
	text-align: left;
	font-size: 16px;
}
#single-article img{
	max-width: 100%;
	margin: 10px 0;
	height: auto;
}
#single-article strong, p{
	font-size: 16px !important;
	display: block;
	text-align: left;
	margin: 10px 0;
}
#single-article a{
	text-decoration: underline;
}
#single-article li{
	font-size: 16px !important;
	text-align: left;
	margin: 10px 0;
}
#single-article figure{
	margin: 0;
}
#single-article figcaption{
	font-size: 14px !important;
	text-align: center;
}
.alignleft{
	text-align: left;
}