Kumi
7a88715a69
Revamped the overall styling of body text, headers, images, forms, buttons, and cards to improve readability and modernize the UI aesthetics. Added new classes for card components, updated the footer styling, and introduced hover states for interactive elements. Incremented theme version to 1.1 to reflect these changes.
306 lines
No EOL
4.4 KiB
CSS
306 lines
No EOL
4.4 KiB
CSS
/*
|
|
Theme Name: Duck Behavior Journal
|
|
Theme URI: https://duckbehaviorjournal.com
|
|
Author: Kumi
|
|
Author URI: https://kumi.website
|
|
Description: A WordPress theme for the Duck Behavior Journal.
|
|
Version: 1.1
|
|
License: MIT
|
|
License URI: https://opensource.org/licenses/MIT
|
|
Text Domain: duck-behavior-journal
|
|
*/
|
|
|
|
body {
|
|
font-family: 'Helvetica Neue', Arial, sans-serif;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
background-color: #f8f9fa;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin: 20px 0 10px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
a {
|
|
color: #007bff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
button,
|
|
input[type="submit"] {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button:hover,
|
|
input[type="submit"]:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: #007bff;
|
|
outline: none;
|
|
}
|
|
|
|
.logo {
|
|
height: 50px;
|
|
}
|
|
|
|
.nav-link {
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: #007bff;
|
|
}
|
|
|
|
.hero {
|
|
height: 60vh;
|
|
background-size: cover;
|
|
background-position: center;
|
|
position: relative;
|
|
}
|
|
|
|
.hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.hero .container {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero h1,
|
|
.hero p {
|
|
color: white;
|
|
}
|
|
|
|
.card {
|
|
border: none;
|
|
margin-bottom: 20px;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.card-text {
|
|
color: #777;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
footer {
|
|
border-top: 1px solid #eee;
|
|
padding: 20px 0;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
footer p {
|
|
margin: 0;
|
|
color: #666;
|
|
}
|
|
|
|
footer .social-media img {
|
|
height: 24px;
|
|
}
|
|
|
|
a h5 {
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#doi-link {
|
|
color: #333;
|
|
text-decoration: dashed;
|
|
}
|
|
|
|
.alignright {
|
|
float: right;
|
|
margin-left: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.alignleft {
|
|
float: left;
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.aligncenter {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.wp-block-image img,
|
|
.alignleft,
|
|
.alignright,
|
|
.aligncenter {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border: 1px solid #ddd;
|
|
padding: 5px;
|
|
background-color: #f9f9f9;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.wp-caption {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
font-style: italic;
|
|
color: #666;
|
|
}
|
|
|
|
.wp-caption .wp-caption-text {
|
|
padding: 5px 10px;
|
|
background-color: #f9f9f9;
|
|
border-top: 1px solid #ddd;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.pagination .page-numbers {
|
|
display: block;
|
|
padding: 10px 15px;
|
|
margin: 0 5px;
|
|
color: #333;
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #ddd;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.pagination a:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.pagination .current {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.MJXc-display {
|
|
display: inline-block !important
|
|
}
|
|
|
|
.lightbox {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
padding-top: 60px;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.lightbox-content {
|
|
margin: auto;
|
|
display: block;
|
|
max-width: 80vw;
|
|
max-height: 90vh;
|
|
}
|
|
|
|
.lightbox-close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 35px;
|
|
color: #fff;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.lightbox-close:hover,
|
|
.lightbox-close:focus {
|
|
color: #bbb;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
.lightbox-content {
|
|
width: 100%;
|
|
}
|
|
} |