style.css

/*
Theme Name: Operandi
Theme URL: https://opr.wmsci.com
Description: More less, more simple.
Author: wamo
Author URL: https://wmsci.com
License: GPL-3.0 License
License URI: https://www.gnu.org/licenses/gpl-3.0.ja.html
Version: 1.2.2
*/

html,
body {
  background-color: white;
  scroll-behavior: smooth;
}
body {
  background: rgb(245, 245, 245);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  text-decoration: none;
  color: rgb(0, 100, 255);
  transition-duration: 200ms;
}
a:hover {
  opacity: 0.7;
}
a, code {
  word-wrap: break-word;
  overflow-wrap: break-word; 
}
iframe {
  width: auto;
  height: auto;
  position: relative;
}
.wp-block-embed__wrapper {
  position: relative;
  padding: 0;
  padding-bottom: 56.25%;
  height: auto;
}
.wp-block-embed__wrapper iframe {
  height: 100%;
  width: 100%;
  position: absolute;
}
.wp-block-embed__wrapper .wp-embedded-content {
  position: relative;
}
.wp-block-embed-hatena-blog .wp-block-embed__wrapper .wp-embedded-content {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.wp-block-embed.is-type-rich .wp-block-embed__wrapper iframe {
  position: relative;
  aspect-ratio: 16/9;
}
.is-type-video .wp-block-embed__wrapper {
  padding-bottom: 56.25%;
}
.is-type-video .wp-block-embed__wrapper .wp-embedded-content {
  position: absolute;
}
.hidden {
  display: none;
}

/* header */
header {
  background-color: white;
}
header nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  width: 100%;
  padding: 0.5rem 1rem;
}
header nav .custom-logo {
  height: 2rem;
  width: auto;
  display: block;
}
header nav a {
  color: inherit;
  text-decoration: none;
}
header nav a:hover {
  opacity: inherit;
}
header nav nav ul {
  display: none;
}
@media (min-width: 640px) {
  header nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}
header nav ul li a {
  transition-duration: 200ms;
}
header nav ul li a:hover {
  opacity: 0.7;
}
header nav .mobile {
  width: 3rem;
  height: 2rem;
  display: block;
  background: rgba(255, 255, 255, 0);
  position: relative;
  z-index: 1000;
}
header nav #overlay {
  visibility: hidden;
  display: flex;
  transition: 0.3s linear;
  position: absolute;
  z-index: 900;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color, #252525);
  opacity: 0;
}
header nav #overlay.open {
  visibility: visible;
  opacity: 0.95;
}
header nav #overlay div.menu ul,
header nav #overlay ul.menu{
  font-size: 1.75rem;
  padding: 0;
  color: white;
  align-items: center;
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 640px) {
  header nav .row-menu .menu {
    display: none;
  }
}
@media (min-width: 640px) {
  header nav .mobile {
    display: none;
  }
}
header nav .mobile span {
  transition: all 0.3s;
  transform: rotate(0);
  width: 40px;
  height: 2px;
  display: block;
  background: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
}
header nav .mobile .top {
  transform: translateY(-12px);
}
header nav .mobile .bottom {
  transform: translateY(12px);
}
header nav .mobile.is-open span {
  background: #fff;
}
header nav .mobile.is-open .top {
  transform: rotate(-45deg) translateY(0);
}
header nav .mobile.is-open .middle {
  background: rgba(255, 255, 255, 0);
}
header nav .mobile.is-open .bottom {
  transform: rotate(45deg) translateY(0);
}

/* footer */

main {
  flex-grow: 1;
}
footer.footer {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: auto;
  background-color: rgb(37, 37, 37);
  color: white;
}
footer.footer div {
  max-width: 80rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
footer.footer a {
  color: inherit;
}

/* content */

main {
  display: block;
  margin-top: 3rem;
  margin-bottom: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
}
@media (min-width: 768px) {
  main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* index */
.content.list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 400px) {
  .content.list {
    height: min-content;
    grid-column: span 2 / span 2;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.content.list a {
  color: inherit;
}
.content.list a:hover {
  opacity: inherit;
  transform: translateY(-0.25rem);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.content.list a .opr_col {
  background-color: white;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content.list a .opr_col .details {
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content.list a .opr_col .category {
  margin-top: 0.5rem;
}
.content.list a .opr_col .category div {
  display: inline-block;
  background-color: var(--primary-color, #252525);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
}
.content.list a .opr_col .category div i {
  margin-right: 0.25rem;
}
.content.list a .opr_col h3 {
  margin: 0;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.content.list a .opr_col time {
  margin: 0;
  color: rgb(80, 80, 80);
}
.content.list a .opr_col p {
  margin-top: 0.5rem;
  color: rgb(80, 80, 80);
}
.content.list a .opr_col img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* contents */
.list-title {
  grid-column: span 2 / span 2;
}
.content.article {
  background-color: white;
  grid-column: span 2 / span 2;
  padding: 1.5rem 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .content.article {
    margin: 0;
  }
}
.content.article .attachment-post-thumbnail {
  margin-bottom: 1.5rem;
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}
.content.article .title {
  margin: 0;
}
.content.article time.date {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.content.article .post-categories {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  flex-direction: row;
  padding: 0;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.content.article .post-categories li a {
  height: 40px;
  margin: auto;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  background-color: var(--primary-color, #252525);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
}
.content.article h1 {
  font-size: 2rem;
}
.content.article h2 {
  font-size: 1.75rem;
}
.content.article .article-body h3 {
  font-size: 1.25rem;
}
.content.article .article-body h4 {
  font-size: 1.125rem;
}
.content.article .article-body h5,
.content.article .article-body h6 {
  font-size: 1rem;
}
.content.article .article-body p {
  line-height: 1.75;
  font-size: 1rem;
}
.content.article .article-body li {
  line-height: 2rem;
}
.content.article code:not(pre code)::before,
.content.article code:not(pre code)::after {
  content: "`";
}
.content.article code:not(pre code) {
  font-weight: 600;
}
.content.article .article-body table:not(.hljs-ln) {
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.content.article .article-body thead {
  border-style: solid;
  border-width: 0;
  border-bottom-width: 1px;
  border-bottom-color: #d1d5db;
}
.content.article .article-body table th {
  padding-right: 0.75rem;
  padding-bottom: 1rem;
}
.content.article .article-body table td {
  padding: 1rem 0.75rem;
  padding-left: 0;
}
.content.article .article-body table tr {
  border-style: solid;
  border-width: 0;
  border-bottom-width: 1px;
  border-bottom-color: #e5e7eb;
}
.content.article .article-body table tr:last-child {
  border: 0;
}
.content.article .article-body blockquote {
  margin: 0;
  padding: 0.125rem 1rem;
  border: 0;
  border-style: solid;
  border-color: gray;
  border-left-width: 7px;
  background-color: rgb(243, 243, 243);
}
.content.article .article-body .toc {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: inline-block;
  background-color: rgb(243, 243, 243);
  padding: 1rem;
}
.content.article .article-body details[open].toc {
  padding-right: 2rem;
}
.content.article .article-body .toc li a {
  word-break: break-all;
  color: inherit;
}
.content.article .article-body .toc .toc__title {
  cursor: pointer;
  margin: 0;
  font-size: 1.25rem;
  font-weight: bold;
}
.content.article .article-body .toc .toc__list_child {
  padding-left: 1rem;
}
.content.article .sns,
.content.article .author-sns {
  display: flex;
  gap: 0.5rem;
}
.content.article .sns a,
.sns-icon {
  color: white;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 2.5rem;
  border-radius: 9999px;
  font-size: 1.125rem;
}
a.twitter {
  background-color: #1da1f2;
}
a.facebook {
  background-color: #1877f2;
}
a.pocket {
  background-color: #ef4056;
}
a.line {
  background-color: #00c300;
}
a.hatena {
  background-color: #01a5df;
}
a.github {
  background-color: #000;
  font-size: 1.5rem;
}
a.youtube {
  background-color: #ff0000;
}
a.url:not(cite a) {
  background-color: #252525;
}
.content.article .article-body pre {
  overflow: auto;
}
.content.article .article-body pre code table {
  overflow: unset;
}
.content.article .article-body pre code tr {
  border: 0;
}
.content.article .article-body pre code td {
  padding: 0;
}
.content.article .related ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.content.article .related ul li a {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.content.article .related ul li a img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  height: auto;
}
@media (min-width: 640px) {
  .content.article .related ul li a {
    border: none;
    gap: 0.5rem;
    flex-direction: row;
  }
  .content.article .related ul li a img {
    aspect-ratio: 16 / 9;
    width: 25%;
    object-fit: cover;
    height: auto;
  }
}
.content.article .related ul li a:hover {
  opacity: inherit;
  transform: translateY(-0.25rem);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.content.article .related ul li a div {
  padding: 0.5rem;
}
.content.article .related ul li a h4 {
  margin: 0;
  margin-top: 0.25rem;
  line-height: 1.25rem;
}
.content.article .related ul li a time,
.content.article .related ul li a p {
  font-size: 0.875rem;
  line-height: 1rem;
  margin: 0;
  color: rgb(35, 35, 35);
}
.content.article .alert {
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-direction: column;
}
.content.article .alert .dashicons {
  font-size: 1.75rem;
  width: auto;
  height: auto;
}
@media (min-width: 640px) {
  .content.article .alert {
    flex-direction: row;
  }
}
.content.article .or-linkcard {
  color: inherit;
  display: flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgb(230, 230, 230);
  flex-direction: column;
}
.content.article .or-linkcard .details {
  padding: 1rem;
  flex-grow: 1;
}
.content.article .or-linkcard .linkcard-title {
  margin: 0;
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.125;
}
.content.article .or-linkcard .linkcard-description {
  margin: 0;
  margin-top: 0.25rem;
  line-height: 1.3;
}
.content.article .or-linkcard img {
  object-fit: cover;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .content.article .or-linkcard {
    display: flex;
    flex-direction: row;
  }
  .content.article .or-linkcard img {
    flex: 0 0 25%;
    width: 25%;
    max-width: 250px;
    height: auto;
  }
}
.content.article .author {
  margin-top: 4rem;
  margin-bottom: 2rem;
}
.content.article .author .details {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.content.article .author .details p {
  font-size: 1.25rem;
  font-weight: bold;
}
.content.article .author .details .avatar {
  border-radius: 9999px;
  width: 3.5rem;
}
.content.article .author .details .posts {
  border: solid 1px #949494;
  color: inherit;
  padding: 0.5rem 0.75rem;
  border-radius: 0.3rem;
}
.content.article .author .details .posts:hover {
  opacity: inherit;
  background-color: var(--primary-color, #252525);
  color: white;
}
.content.article .author .description {
  margin: 0;
  margin-bottom: 1rem;
}

/* widget */
.sidebar {
  background-color: white;
  padding: 1rem;
  height: min-content;
}
li.widget {
  list-style: none;
}
.widget h2,
.widget h3 {
  font-size: 1.125rem;
}
.widgettitle {
  font-size: 1.125rem;
  font-weight: bold;
}
.widget label {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  display: block;
}
.widget input {
  border-radius: 1.5rem;
  padding: 8px;
  padding-left: 1rem;
  padding-right: 1rem;
  flex-grow: 1;
  min-width: 3em;
  border: 1px solid #949494;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.widget input:focus {
  outline-offset: 1px;
}
.widget button.wp-block-search__button,
.widget.widget_search input[type="submit"] {
  background-color: var(--primary-color, #252525);
  color: white;
  border-radius: 9999px;
  border: none;
  transition-duration: 200ms;
  padding: 0 1rem;
}
.widget button.wp-block-search__button.has-icon,
.widget.widget_search .has-icon {
  padding: 0.375rem;
}
.widget button.wp-block-search__button:hover,
.widget.widget_search input[type="submit"]:hover {
  opacity: 0.8;
}
.widget.widget_block {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.widget ul {
  list-style: none;
  line-height: 1.75rem;
  margin: 0;
  padding: 0;
  display: block;
}
.widget ul li a:not(.recentcomments a) {
  color: inherit;
  padding: 0.5rem 1rem;
  display: block;
}
.widget ul li a:not(.recentcomments a):hover {
  opacity: inherit;
  background-color: rgb(245, 245, 245);
}
.widget .wp-block-archives-dropdown select,
.widget .widget_archive select {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  transition-duration: 200ms;
  background-color: #ffff;
}
.widget .wp-block-archives-dropdown select option,
.widget .widget_archive select option {
  background-color: #fff;
}
.widget .wp-block-archives-dropdown select:hover,
.widget .widget_archive select:hover {
  background-color: rgb(245, 245, 245);
}
.widget .wp-block-latest-comments {
  padding: 0;
}
.widget .cat-item .children {
  margin-left: 1rem;
}

/* pagination */
.pagination {
  margin-top: 2rem;
  grid-column: span 2 / span 2;
  text-align: center;
  margin-bottom: 3rem;
}
.pagination .page-numbers {
  transition-duration: 200ms;
  width: 46px;
  height: 46px;
  display: inline-block;
  border-radius: 9999px;
  line-height: 46px;
  text-align: center;
  background-color: white;
}
.pagination .page-numbers.current {
  background-color: var(--primary-color, #252525);
  color: white;
}
.pagination .page-numbers.dots {
  cursor: pointer;
}
.pagination .page-numbers:hover {
  opacity: inherit;
  transform: translateY(-0.25rem);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* comment */
.comments,
.comment-respond,
.related {
  margin-top: 4rem;
}
.comment-form p:not(.comment-form-cookies-consent):not(.logged-in-as) {
  display: flex;
  flex-direction: column;
}
.comment-form .required-field-message {
  display: block;
}
.comment-form span.required {
  color: red;
  font-weight: bold;
}
.comment-form input[type="text"],
.comment-form textarea {
  border-radius: 0.5rem;
  border: none;
  padding: 0.55rem 0.75rem;
  background-color: rgb(245, 245, 245);
  transition-duration: 100ms;
}
.comment-form textarea {
  padding-top: 0.75rem;
}
.comment-form input[type="submit"] {
  background-color: var(--primary-color, #252525);
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 0.5rem;
  transition-duration: 200ms;
}
.comment-form input[type="submit"]:hover {
  opacity: 0.8;
}
.commentlist {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  gap: 2rem;
}
.commentlist ul,
.commentlist ol {
  list-style: none;
}
.commentlist .children {
  margin-top: 1rem;
}
.commentlist .comment-body cite {
  font-style: normal;
}
.commentlist .comment-body a {
  color: black;
}
.commentlist .comment-author {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
}
.commentlist .comment-author img {
  border-radius: 9999px;
  margin-right: 0.5rem;
}
.commentlist .comment-author .says {
  margin-left: 0.25rem;
}
.commentlist .comment-body .comment-content {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  background-color: rgb(245, 245, 245);
  margin: 0.5rem 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.commentlist .comment-body .comment-content a {
  text-decoration: none;
  color: rgb(0, 100, 255);
  transition-duration: 200ms;
}
.commentlist .reply {
  display: inline-block;
  padding: 0.5rem 0;
}
.commentlist .reply a {
  background-color: var(--primary-color, #252525);
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 0.5rem;
}
.comment-reply-title {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.comment-form label {
  font-weight: bold;
}