htmly/themes/readable/css/style.css
KuJoe 130576ee17 Updating sharing function for consistency
Added JS file to apply to all themes along with standard use of Font Awesome for icons. Updated doks, tailwind, twentyfifteen, and twentysixteen to use sharing function.
2026-03-21 12:55:48 -04:00

1020 lines
No EOL
16 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*-------------------------
Simple reset
--------------------------*/
* {
margin: 0;
padding: 0;
}
body {
font-family: Georgia, sans-serif, Arial;
font-size: 17px;
line-height: 1.6;
color: #343A3F;
padding: 0;
margin: 0;
}
section, footer, header, aside, nav {
display: block;
}
img {
border: 0 none;
height: auto;
max-width: 100%;
outline: 0 none;
}
/*-------------------------
Heading
--------------------------*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Source Sans', sans-serif;
line-height: 1.3;
margin: 0.5em 0;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 12px;
}
/*-------------------------
Layout
--------------------------*/
#outer-wrapper {
margin: 0;
padding: 0;
float: left;
width: 100%;
}
#inner-wrapper {
padding: 0 10px;
}
.container {
padding: 0 20px;
}
#header-wrapper {
background: #546673;
position: relative;
padding: 1em 0;
float: left;
width: 100%;
color: #ffffff;
font-family: Georgia, sans-serif;
font-style: italic;
}
#content-wrapper {
float: left;
width: 100%;
padding: 3em 0;
}
#menu, #header, #content, #footer {
width: 800px;
margin: 0 auto;
}
.admin #content {
width: 980px;
margin: 0 auto;
}
#header {
text-align: center;
}
.hide {
display: none;
}
/*-------------------------
Link
--------------------------*/
a, a:visited {
outline: none;
color: #2E9FFF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.tab {
width: 100%;
margin: 1.5em 0 0 0;
line-height: 1;
border-bottom: 1px solid #E4E7EE;
}
.tab ul {
padding:0;
margin:0;
}
.tab li {
display: inline-block;
margin:0;
padding:0;
}
.tab a {
background: #E4E7EE;
border-radius: 6px 6px 0px 0;
color: #555555;
text-align: center;
padding: 8px 14px;
display: inline-block;
margin: 0 5px;
font-size: 12px;
font-weight: bold;
font-family: 'Source Sans', sans-serif;
}
/*-------------------------
Text element
--------------------------*/
blockquote:before {
color: #BBBBBB;
content: "''";
font-size: 3em;
line-height: 0.1em;
margin-right: 0.2em;
vertical-align: -0.4em;
}
blockquote:after {
color: #BBBBBB;
content: "''";
font-size: 3em;
line-height: 0.1em;
vertical-align: -0.45em;
}
blockquote {
font-style: italic;
margin: 1em 0 1em 1em;
}
blockquote p {
display: inline;
}
pre {
margin: 1em 0;
overflow: auto;
background: #F1F1FF;
color: #333333;
display: block;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
font-size: 14px;
padding: 10px;
line-height: 1.3;
}
code {
color: #333333;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
font-size: 15px;
padding: 3px 8px;
background: #F1F1FF;
}
pre code {
color: #333333;
display: block;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
font-size: 14px;
padding: 0;
line-height: 1.6;
}
.thumbnail {
float: left;
height: 80px;
width: 80px;
margin: 5px 15px 0 0;
overflow: hidden;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
ul, ol {
padding-left: 30px;
margin: 1em 0;
}
ul li, ol li {
margin: 0.25em 0;
}
input[type=text], input[type=password] {
padding: 4px 6px;
font-size: 14px;
background-color: #F6F7F9;
border: 1px solid #CFDAE5;
}
input[type=text]:hover, input[type=password]:hover {
background-color: #F6F7F9;
border: 1px solid #CCCCCC;
}
input[type=submit] {
padding: 4px 6px;
font-size: 14px;
cursor: pointer;
}
input.text {
width: 75%;
padding: 5px;
font-size: 14px;
background-color: #F6F7F9;
border: 1px solid #CFDAE5;
}
input.error, textarea.error {
border: 1px solid red;
}
textarea {
font-size: 15px;
font-family: Georgia, sans-serif;
line-height: 1.4;
background-color: #F6F7F9;
border: 1px solid #CFDAE5;
padding: 2%;
width: 96%;
min-height: 5em;
overflow: auto;
}
textarea:hover {
border: 1px solid #CCCCCC;
}
.error-message {
color: red;
background: #f4f4f4;
padding: 10px 0;
margin-bottom: 2em;
}
span.required {
color: red;
}
span.help {
font-size: 12px;
font-style: italic;
}
.category {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
display: block;
font-size: 13px;
margin: 20px 0;
padding: 0 1em;
}
.tags a:after {
content:", ";
}
.tags a:last-child:after {
content:"";
}
/*-------------------------
Table
--------------------------*/
table {
font-size: 12px;
border: none;
width: 100%;
color: #333333;
border: 1px solid #E3E3E3;
margin: 1em 0;
white-space: pre-wrap;
word-wrap: break-word;
}
table h2.title {
margin: 5px 0;
}
th, td {
padding: 5px 10px;
border: none;
}
th.title {
margin: 5px 0;
font-family: 'Source Sans', sans-serif;
font-size: 16px;
font-weight: normal;
}
td.title {
font-weight: normal;
background-color: #f6f6f6;
font-family: 'Source Sans', sans-serif;
}
th {
background-color: #f6f6f6;
border-bottom: 1px solid #E3E3E3;
border-right: 1px solid #E3E3E3;
font-family: 'Source Sans', sans-serif;
font-size: 16px;
}
td {
background-color: #fafafa;
border: 1px solid #E3E3E3;
border-top: none;
border-left: none;
}
table.post-list td a {
margin: 0 5px;
}
/*-------------------------
Menu
--------------------------*/
#menu-wrapper {
font-family: 'Source Sans', sans-serif;
color: #7E909D;
padding: 10px 0;
float: left;
width: 100%;
}
#menu {
font-weight: bold;
font-family: 'Source Sans', sans-serif;
color: #7E909D;
font-size: 14px;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu a {
color: #7E909D;
}
#menu ul li {
float: left;
margin: 0 20px 0 0;
list-style: none;
padding-top: 3px;
}
#menu ul li.active > a {
text-decoration: underline;
}
#menu ul li:last-child {
margin: 0;
}
#menu ul li ul.subnav {
display:none;
}
/*----------------------------
Search form
-----------------------------*/
#search-form {
position: relative;
float: right;
}
.error-404 .post #search-form,
.error-404-search .post #search-form {
float: none;
}
.search-input {
margin: 0;
padding: 4px 15px;
font-size: 14px;
border: 1px solid #0076a3 !important;
background: #FFFFFF !important;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
width: 120px;
color: #888888;
}
.search-button {
margin: 0;
padding: 4px;
font-size: 14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #546673;
border-right: 0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#2E9FFF), to(#2E9CCC));
background: -moz-linear-gradient(top, #2E9FFF, #2E9CCC);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
width: 60px;
}
.search-button:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
/* Fixes submit button height problem in Firefox */
.search-button::-moz-focus-inner {
border: 0;
}
/*-------------------------
Post
--------------------------*/
.post {
border-bottom: 1px solid #EBF2F6;
padding: 1em 0;
float: left;
width: 100%;
}
.in-post .post {
padding-bottom: 0;
}
p, ul {
margin: 1em 0;
}
.breadcrumb {
font-family: 'Source Sans', sans-serif;
font-size: 14px;
font-weight: normal;
}
.date {
font-family: 'Source Sans', sans-serif;
font-size: 14px;
color: #A7A7A7;
font-weight: normal;
margin: 1em 0;
}
h1.blog-title, h2.blog-title {
font-style: normal;
font-size: 28px;
}
h1.title-post a, h2.title-index a {
color: #4f4f4f;
text-decoration: none;
}
h1.title-post a:hover, h2.title-index a:hover {
color: #2E9FFF;
}
.in-post .post {
padding-top: 0;
border: none;
}
.in-page .border {
padding: 0;
margin: 0;
border: 0;
}
.in-page .post {
padding-top: 0;
}
.in-front .first, .in-post .post, .in-tag .first, .in-archive .first, .in-search .first, .error-404 .post, .error-404-search .post {
padding-top: 0;
}
.in-front .first h2.title-index {
margin-top: 0;
}
.in-profile .bio {
font-size: 14px;
font-style: italic;
border-bottom: 1px solid #EBF2F6;
padding-bottom: 1em;
margin-bottom: 2em;
}
.post-list {
font-size: 14px;
}
/*-------------------------
Share box
--------------------------*/
.separator {
font-size: 20px;
}
.share-box {
font-size: 14px;
float: left;
}
.author-info {
width: 540px;
float: left;
}
.author-info p {
font-style: italic;
}
.share {
width: 180px;
margin-right: 1em;
float: right;
}
.share a{
color: #479fc8;
padding:4px;
vertical-align: middle;
display:inline-block;
line-height: 1.42857;
margin-bottom: 0
}
/*-------------------------
Comments
--------------------------*/
.comments {
position: relative;
display: block;
font-size: 16px;
float: left;
width: 100%;
}
.border {
border-top: 1px solid #DFDFDF;
margin-bottom: 15px;
margin-top: 10px;
padding-bottom: 15px;
width: 100%;
float: left;
}
.border .fb-comments, .border #disqus_thread {
padding-top: 1.2em;
}
#disqus_thread {
font-family: Georgia, Times, Cambria, serif;
float: left;
width: 100%;
}
/*-------------------------
Raleted posts
--------------------------*/
.related {
font-size: 14px;
font-family: 'Source Sans', sans-serif;
width: 100%;
float: left;
margin-bottom: 1em;
}
.related ul {
margin: 0;
}
/*-------------------------
Pagination + Postnav
--------------------------*/
.postnav {
width: 100%;
float: left;
padding-bottom: 1em;
font-family: 'Source Sans', sans-serif;
font-size: 12px;
font-weight: bold;
}
.postnav a {
background: none repeat scroll 0 0 #E4E7EE;
border-radius: 3px;
color: #555555;
line-height: 1;
text-align: center;
}
.postnav a:hover {
text-decoration: none;
color: #333333;
}
.postnav .newer {
float: left;
margin-right: 1em;
margin-bottom: 0.1em;
padding: 10px 15px 10px 25px;
}
.postnav .older {
float: right;
padding: 10px 25px 10px 15px;
}
.postnav .pagination-arrow {
display: inline-block;
border-radius: 3px;
color: #555 !important;
text-decoration: none !important;
text-transform: none;
position: relative;
}
.postnav .pagination-arrow.newer:before,
.postnav .pagination-arrow.older:before {
content: '';
border: 5px solid #555;
border-color: transparent #555 transparent transparent;
width: 0;
height: 0;
position: absolute;
left: 5px;
top: 12px;
}
.postnav .pagination-arrow.older:before {
left: auto;
right: 5px;
border-color: transparent transparent transparent #555;
}
.pager {
width: 100%;
float: left;
padding: 30px 0 1em 0;
font-family: 'Source Sans', sans-serif;
font-size: 12px;
font-weight: bold;
}
.pager a {
background: none repeat scroll 0 0 #E4E7EE;
border-radius: 3px;
color: #555555;
line-height: 1;
padding: 10px 20px;
text-align: center;
}
.pager .newer {
float: left;
}
.pager .older {
float: right;
}
.pager a:hover {
text-decoration: none;
color: #333333;
}
/*-------------------------
Footer
--------------------------*/
#footer-wrapper {
background: #546673;
position: relative;
padding: 20px 0;
float: left;
width: 100%;
color: #ABB6C5;
font-family: 'Source Sans', sans-serif;
}
#footer {
font-size: 14px;
text-align: center;
}
#footer a {
color: #CBD2DC;
font-weight: bold;
}
#footer ul {
margin: 0.5em 0;
}
.footer-column {
padding-bottom: 1.5em;
float: left;
width: 100%;
}
.column {
float: left;
width: 25%;
}
.recent ul {
padding-left: 20px;
width: 85%;
}
.archive .toggle {
font-family: Georgia, Arial, sans-serif;
font-size: 16px;
}
.social {
float: right;
}
.social .inner {
padding-left: 30px;
}
.tagcloud ul {
padding: 0;
margin: 0;
}
.tagcloud ul li {
float: left;
list-style: none;
margin-right: 10px;
}
.copyright {
font-size: 12px;
float: left;
width: 100%;
padding-top: 1em;
}
.copyright p {
margin: 0.5em 0;
line-height: 1.2;
}
/*----------------------------
The 404 page
-----------------------------*/
.message {
padding: 50px 20px 20px 20px;
}
.message h1 {
font-size: 36px;
margin-bottom: 18px;
}
.message p {
font-size: 13px;
}
.center {
text-align: center;
}
.search-404 {
position: relative;
float: left;
width: 100%;
margin-bottom: 1.2em;
}
.search-404 #search-form {
float: none;
}
/*----------------------------
Media queries
-----------------------------*/
@media all and (max-width: 700px) {
#menu, #header, #content, #footer {
margin: 0 auto;
width: 100%;
}
.admin #menu, .admin #header, .admin #content, .admin #footer {
margin: 0 auto;
width: 100%;
}
#menu-wrapper {
text-align: center;
}
#menu ul li {
float: none;
display: inline-block;
}
#search-form {
float: none;
padding: 10px 0;
}
.author-info {
width: 100%;
float: left;
}
.share {
width: 100%;
margin-right: 0;
padding-bottom: 1em;
}
.column {
float: left;
width: 100%;
}
.postnav .newer {
float: left;
margin-bottom: 1em;
}
.postnav .older {
float: left;
}
.social .inner {
padding-left: 0px;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
}
/*----------------------------
Video
-----------------------------*/
.video-wrapper {
margin: 1em 0;
}
@media all and (min-width: 420px) {
.video-wrapper {
padding-top: 315px !important;
position: relative;
width: 100%;
max-width: 420px !important;
max-height: 315px !important;
}
.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
max-width: 420px !important;
width: 100%;
max-height: 315px !important;
}
}
@media all and (max-width: 420px) {
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
@media all and (max-width: 560px) {
.featured-video, .featured-audio {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.featured-video iframe, .featured-video object, .featured-video embed, .featured-audio iframe, .featured-audio object, .featured-audio embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
/*----------------------------
Archive
-----------------------------*/
ul.archivegroup {
padding: 0;
margin: 0;
}
.archivegroup .expanded ul {
display: block;
}
.archivegroup .collapsed ul {
display: none;
}
.archivegroup li.expanded, .archivegroup li.collapsed {
list-style: none;
}
#more {
display:block;
height:1rem;
margin-top:-1rem;
box-shadow: none;
border: none;
}