adding bold and italic fonts and trying out css minification

themes/nipponalba/static/css/backup_style.css → themes/nipponalba/static/css/human_style.css

@@ -1,18 +1,24 @@
 @charset "UTF-8";
-@import url('https://rsms.me/inter/inter.css');
+@font-face {  font-family: 'Inter';  font-weight: 400;  font-style: normal;  font-display: swap; unicode-range: U+000-5FF; src: local('Inter'), url('https://rsms.me/inter/fonts/Inter-Regular.woff2?v=3.15') format('woff2'), url('https://rsms.me/inter/fonts/Inter-Regular.woff=3.15') format('woff');}
+@font-face {  font-family: 'Inter';  font-weight: 400;  font-style: italic;  font-display: swap; unicode-range: U+000-5FF; src: local('Inter'), url('https://rsms.me/inter/fonts/Inter-Italic.woff2?v=3.15') format('woff2'), url('https://rsms.me/inter/fonts/Inter-Italic.woff=3.15') format('woff');}
+@font-face {  font-family: 'Inter';  font-weight: 700;  font-style: bold;  font-display: swap; unicode-range: U+000-5FF; src: local('Inter'), url('https://rsms.me/inter/fonts/Inter-Bold.woff2?v=3.15') format('woff2'), url('https://rsms.me/inter/fonts/Inter-Bold.woff=3.15') format('woff');}
 html { font-family: 'Inter', sans-serif;}
 @supports (font-variation-settings: normal) {
   html { font-family: 'Inter var', sans-serif; }
 }
 :root {
-  --dark-link:#59ABE3;
+  --dark-link:#6fbff8;
   --dark-text:#e8e8e8;
   --dark-bg:#2b2b2b;
   --dark-opacity: 0.75;
   --light-text:#2b2b2b;
   --light-bg:#e8e8e8;
-  --light-link:#0065BF;
+  --light-link:#004e7f;
   --light-opacity:1;
+  --light-shadow:rgba(0,0,0,0.06);
+  --light-border:rgba(150,150,150,0.3);
+  --border-colour: var(--light-border);
+  --shadow-colour: var(--light-shadow);
 
   --text-colour: var(--dark-text);
   --bg-colour: var(--dark-bg);
@@ -38,7 +44,7 @@ html { font-family: 'Inter', sans-serif;}
 .theme-switch:checked ~ *,
 .theme-switch:checked + *,
 .theme-switch:checked + * + *
-.theme-switch:checked + * + *{
+.theme-switch:checked + * + * + *{
   --text-colour:var(--light-text);
   --bg-colour:var(--light-bg);
   --link-colour:var(--light-link);
@@ -57,18 +63,16 @@ html { font-family: 'Inter', sans-serif;}
 
 html {
   -webkit-animation-fill-mode: forwards;
-  height:100%;display:block;
+
 }
 
 body {
   color: var(--text-colour);
   font-size: 15px;
-  width: 100%;
   margin: 0 auto 30px auto;
   background: var(--bg-colour);
-  min-height: 100%;
   height:100%;
-  overflow:hidden;
+  min-height:100%;
 }
 p {
   line-height: 1.9em;
@@ -122,115 +126,82 @@ pre {
 #page{
   color: var(--text-colour);
   background: var(--bg-colour);
-  width: 100%;
-  height:100%;
-  display:block;
-}
 
-.main {
-  margin:0;
-  padding:0;
-  width:80%;
-  max-width: 1000px;
-  margin: 0 auto;
-  background: var(--bg-colour);
-  height:100%;
-  min-height:100%;
-  display:block;
 }
 
-.page-top {
-  width: 80%;
-  max-width: 1000px;
-  display:block;
+#page-top {
+  width: 800px;
   z-index: 3;
   height: 60px;
   border-bottom: 1px solid var(--text-colour);
   background: var(--bg-colour);
   margin: 0 auto;
 }
-.page-top a {
+#page-top a {
   color: var(--text-colour);
 }
-.page-top a:hover {
+#page-top a:hover {
   color: var(--link-colour);
 }
 nav {
-width:80%;
+width:100%;
   list-style: none;
   padding: 18px 0px;
-  float: left;
   font-size: 14px;
-  display:inline-block;
+  display:flex;
 }
 nav li{
   position: relative;
   display: initial;
   padding-right: 20px;
 }
-.selectors{
-  width:130px;
-  float:right;
-  display:inline-block;
-  vertical-align:middle;
-  padding: 10px 0px;
-}
-.selectors i{
+nav li i{
   margin:0;
-  padding-left:10px;;
+  padding-left:10px;
 }
-.language-selector {
-  position:relative;
-  display:inline-block;
-  float:right;
-  padding:0px 10px;padding:0;
-  margin:0;
+nav > li:nth-child(8) {
+    margin-left: auto;
+    padding-right:5px;
+    display:none;
 }
-.language-selector ul{
-  list-style:none;
-  padding:0;
-  margin:0;
+nav > li:nth-child(9) {
+    padding-right:0;
+    margin-left: auto;
 }
-.theme-selector{
-  margin:0;
-  padding:0;
+nav i{
+  margin-bottom:20px;
+  position:relative;
+  top:-5px;
 }
-.content {
-  height: 95%;
-  overflow:auto;
-  -ms-overflow-style: none;
-  scrollbar-width:none;
+main {
+  width: 800px;
+  margin: 0 auto;
+  background: var(--bg-colour);
+  padding-bottom: 100px;
 }
-.content::-webkit-scrollbar{
-  display:none;
+
+.about, .archive, .bookmarks {
+  height: calc(100vh - 150px);
+margin-bottom: 200px;
 }
 .about .post{
-  border: 1px dotted var(--text-colour);
   padding: 10px;
-  display:block;
-  margin:0;
+  margin:20px 0;
   vertical-align:top;
+  width: 98%;
 }
 .profile{
-  width:85% !important;
-  display:block;
+  width:100% !important;
+  display:grid;
+  grid-template-columns: repeat (20%, 80%);
   margin: 0 auto;
   padding-top:30px;
 }
 .profile-left{
-  width:20% !important;
-  min-width: 200px;
-  padding:0;
-  margin:0;
-  display:inline-block;
-  vertical-align:middle;
+  grid-column: 1;
 }
 .profile-right{
-  vertical-align:top;
-  width:75%;
-  display:inline-block;
-  padding:0;
-  margin:0;
+  grid-column: 2;
   text-align:justify;
 }
 .profile-right a{
@@ -250,8 +221,7 @@ nav li{
  font-weight: bold;
  letter-spacing: 1.5px;
  line-height: 1;
- display:inline-block;
- padding-left:10px;
+ padding-left: 10px;
 }
 .social-links {
  list-style: none;
@@ -274,30 +244,37 @@ nav li{
   margin-right: 5px;
 }
 .info{
-  padding: 30px 0;
+  padding: 10px 0;
   font-size:13px;
+  display:grid;
+  grid-template-columns: repeat (80%. 20%);
 }
-#info-date{
-  float:right;
+.blogs_span{
+  grid-column: 1;
 }
-#info-date .dt-published{
-  font-size:13px;
+.categories_span, .categories_span_other, .info-date-other{
+  grid-column: 1 / span 2;
 }
-.category, .blog, .tag, #info-date {
-  display: inline-block;
+.categories_span_other{
+  display:inline;
+  text-align:right;
+  float:right;
+}
+.category, .blog, .tag, .syndication, .info-date-other{
   font-size: 13px;
   line-height: 1.5;
+  display:inline;
 }
 .categories, .tags{
   display:inline;
-  margin:0;
-  padding:0;
+  margin:0;padding:0;
+  text-align:right;
 }
 .categories li, .tags li{
   list-style:none;
   display:inline;
 }
-.tag::before {
+.tag::before, .category::before{
   content: "#";
   opacity: .75;
 }
@@ -307,16 +284,25 @@ nav li{
 .categories li:last-child:after, .tags li:last-child:after{
   content: "";
 }
+.info-date,{
+  display:inline;
+  text-align:left;
+  line-height:1.5;
+}
+.info-date .dt-published{
+  font-size:13px;
+}
 .reading-time{
   display:inline;
-  float:right;
+  grid-column: 2;
+  text-align:right;
   font-weight:bold;
 }
-.stream{
+.stream, .h-feed{
   padding-bottom:150px;
 }
 .post{
-  margin: 30px 0;
+  margin: 20px 0;
   }
   .index_content{
     text-align:justify;
@@ -328,6 +314,14 @@ nav li{
   object-fit:scale-down;
   object-position:top;
 }
+.h-entry{
+  width: calc(100% - 22px);
+  box-shadow: 0 2px 3px var(--shadow-colour);
+  border: 1px solid var(--border-colour);
+  border-radius: 15px;
+  padding:10px;
+  margin:20px 0;
+}
 .h-entry p a {
   text-decoration: none;
   color: var(--link-colour);
@@ -336,86 +330,74 @@ nav li{
   color: var(--link-colour);
 }
 .h-entry img {
-  text-align: center;
-  max-width: 800px;
   margin: 0 auto;
   display:block;
-  padding:10px;
 }
-#syndication{
-  display:inline-block;
+.h-entry img.full {
+  width:100%;
+  max-width: 600px;
+}
+
+.longpost img{
+  max-width:700px;
+  padding: 10px;
+}
+#response .h-cite .p-content{
+  background-color: var(--border-colour);
+  display:block;
+  min-height: 80px;
+  border-radius: 15px;
+  padding: 10px 10px 20px 10px;
+}
+.remotePhoto{
   float:left;
-  font-size:13px;
-  margin:0;
+  width: 70px;
+  padding: 10px 0;
+}
+.remotePhoto img{
+  display:block;
 }
+.response-text{
+  min-height: calc(100% - 15px);
+}
+.response-date{
+  width: 100%;
+  font-size: 13px;
+  display:block;
+  text-align:right;
+  vertical-align:bottom;
+}
+
 #interactions{
   margin:20px 0 10px 0;
   padding:0;
-  display:inline-flex;
-  float:left;
-  height:30px;
+  display:grid;
+  grid-template-rows: repeat (20px, 40px, auto);
   width:100%;
-  border-top:1px dotted var(--text-colour);
+  border-top:1px solid var(--text-colour);
+  padding-bottom:150px;
 }
 #webmention-form{
-  display:inline-flex;
+grid-row: 2;
   margin-top:20px;
   width: 100%;
 }
 #webmention-form label{
-  display:inline;
-  float:left;
-  margin-bottom:10px;
+line-height: 2;
 }
 #webmention-form input[type=url]{
-  width:60%;
+  width: 60%;
 }
 #webmentions{
-  display:block;
+  grid-row: 4;
+
   margin-top: 0 20px 0 0 ;
   padding: 0 0 200px 0;
 }
-.remote_profile{
-  height: 100%;
-  width: 70px;
-  display:inline-block;
-  vertical-align:top;
-}
-.remote_profile img{
-  width: 50px;
-  border-radius: 50%;
-  display:inline;
-  float:left;
-  border:0;
-  padding:0;
-}
-.interaction{
-  border:1px dotted var(--text-colour);
-  padding: 10px;
-  display:block;
-  margin:0;
-  min-height:60px;
-  vertical-align:top;
-}
-.interaction .intactivity{
-  font-size:13px;
-  font-style:italic;
-  line-height:18px;
-}
-.interaction .intcontent{
-  display:inline-block;
-  font-size:15px;
-  vertical-align:top;
-  max-width: 90%;
-}
-.interaction time{
-  font-size:12px;
-}
 .interaction h4{
   line-height:15px;
   padding:0;
   margin:0;
-  display:block;
 }
 .interaction.like, .interaction.share{
   border:0;
@@ -426,15 +408,61 @@ nav li{
   width:100%;
   min-height:30px;
 }
+.interaction.like h4, .interaction.share h4{
+  margin-right: 20px;
+}
 .interaction.like img,.interaction.share img{
-  display:inline-flex;
-  float:left;
+  display:inline;
   width:30px;
   height:30px;
-  margin:0;
+  margin:2px;
+  padding:0px;
+  border-radius: 50%;
+  border:1px solid var(--text-colour);
+  position:relative;
+  top:-10px;
+}
+
+.interaction.mention, .interaction.reply{
+  border:1px solid var(--text-colour);
+  display:flex;
+  min-height: 60px;
+  padding: 10px;
+  background-color: var(--border-colour);
+  box-shadow: 0 2px 3px var(--shadow-colour);
+  border-radius: 15px;
+}
+.interaction.mention .remote_profile, .interaction.reply .remote_profile{
+  width: 90px;
+  min-width: 90px;
+  }
+.interaction.mention .remote_profile img, .interaction.reply .remote_profile img, .remotePhoto img{
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
+  object-fit:cover;
+  margin: 0 auto;
 }
-footer {
+.remotePhoto{
+
+}
+.intactivity{
+  font-size:15px;
+  font-style: italic;
+  line-height:18px;
+  text-align:left;
+}
+.intcontent{
+  font-size:15px;
+  vertical-align:top;
+  text-align:left;
+  padding-left: 10px;
+}
+.interaction time{
+  font-size:13px;
+}
+
+#footer {
   clear: both;
   text-align: center;
   font-size: 14px;
@@ -444,14 +472,15 @@ footer {
   width: 100%;
   padding:20px 0;
   background: var(--bg-colour);
+  color: var(--text-colour);
 }
-footer a {
+#footer a {
   color: var(--text-colour);
 }
-footer a:hover {
+#footer a:hover {
   color: var(--link-colour);
 }
-footer img{
+#footer img{
   max-height:40px;
   margin-top:10px;
 }
@@ -464,6 +493,7 @@ footer img{
   margin:30px 0;
   font-size:30px;
   font-weight:bold;
+  display:flex;
   color: var(--text-colour);
 }
 
@@ -482,19 +512,19 @@ footer img{
   list-style-type: none;
   padding: 0;
 }
-.list-with-title .listing-title {
+.listing-title {
   font-size: 24px;
   color: var(--text-colour);
   font-weight: 600;
   line-height: 2.2em;
 }
-.list-with-title .listing {
+.listing {
   padding: 0;
 }
-.list-with-title .listing .listing-post {
+.listing-post {
   padding-bottom: 5px;
 }
-.list-with-title .listing .listing-post .post-time {
+.post-time {
   float: right;
   color: var(--text-colour);
 }
@@ -546,45 +576,66 @@ time{
   margin:0;
   padding:0;
 }
-.photo{
-  display:flex;
-  width:100%;
+.picture{
+  flex: calc(100% / 3);
+  max-width:calc(100% / 3);
 }
 .photogrid{
-  display:block;
+  display:flex;
+  flex-wrap:wrap;
   width:100%;
-  float:left;
+  height: 100%;
   min-width:100%;
   margin-bottom:10px;
 }
 img.thumb{
-  width:300px;
-  float:left;
-  display:inline;
-  padding: 0px;
-  margin:10px;
+  width:600px;
+  max-height: 600px;
+  object-fit:cover;
+  object-position:top;
+  margin: 0 auto;
   border: 1px solid var(--text-colour);
 }
 hr{
   border-top:1px dotted var(--text-colour);
   border-bottom:0;
 }
-.pagination {
+#pagination-top{
+  display:block;
+  margin:0;
+  padding:0;
+}
+ul.pagination {
    list-style:none;
    margin: 0 auto;
+   text-align: center;
+   vertical-align: middle;
    border:0px;
+   padding:0;
    padding-top:20px;
-   display:block;
-   max-width: 600px;
-   width:100%;
+   display:grid;
+   grid-template-columns: 33% 34% 33%;
+   min-width:100%;
+   text-align: center;
 }
 .pagination li{
-  display:inline-block;
-  padding:10px 50px;
-  font-weight:bold;
+  font-weight:normal;
+  display:inline;
+  padding: 0;
+  margin: 0;
+}
+
+.pagination > li:nth-child(1){
+  text-align:left;
+  grid-column: 1;
+}
+.pagination > li:nth-child(2){
+  text-align:center;
+  grid-column: 2;
 }
-.pagination-bottom{
-  padding-bottom:100px;
+.pagination > li:nth-child(3){
+  text-align:right;
+  grid-column: 3;
 }
 .pagination a {
   color: var(--text-colour);
@@ -599,15 +650,36 @@ hr{
 .anchor:target {
   display:block;
 }
-
-@media screen and (max-width: 760px) {
-  .content {
+.feeds {
+  width: 95%;
+}
+.feedrow {
+  display:grid;
+  grid-template-columns: 80% auto;
+}
+.feedrow .description{
+  grid-column: 1;
+}
+.feedrow .feedlinks{
+  grid-column: 2;
+}
+.commentparade {
   width:100%;
-    z-index: 2;
-    position: absolute;
-    left:0;
+  overflow:auto;
+  background: var(--background-colour);
+  padding:0;
+  height:250px;
+  color: var(--text-colour);
+}
+.commentparade .url{
+  font-weight:bolder;
+}
+@media screen and (max-width: 800px) {
+  #page-top, main {
+    width: 95%;
+    padding: 10px 0;
     }
-  .about, .post, .archive, .stream{
+  .about, .post, .archive, .stream, .bookmarks, #response{
     width:95%;
     margin:0 auto;
   }
@@ -621,62 +693,30 @@ hr{
   .profile-left{
     display:block;
     margin:0 auto;
-    padding: 0;
+    padding: 10px;
     width:100%;
     text-align:center;
     float:none;
   }
   .profile-left img{
-    padding: 0px;
-    margin: 10px;
+    max-width: 200px;
+    margin:0;
   }
   .profile-right{
     display:block;
-    width:100%;
+    width:90%;
     text-align:center;
-    float:none;
     margin:0 auto;
   }
-  .page-top {
-    width: 95%;
-    padding: 10px 0;
-  }
-  .page-top nav{
-    width: 70%;
-  }
-  .page-top nav #Bookmarks{
-   display:none;
-   }
-   .page-top nav li{
-     padding-right: 10px;
-   }
-   .page-top .selectors{
-     width:130px;
-   }
-  .page-top .language-selector i{
-   padding:0 5px;
-  }
-
-  .content img, .post img{
+  .post img{
     width: 95%;
     text-align:center;
-    float:none;
   }
+
 .interactions{
   padding-bottom: 100px;
 }
-  .remote_profile{
-    width: 50px;
-  }
-  .remote_profile img{
-    width: 30px;
-  }
 
-  .pagination li{
-    display:inline-block;
-    padding:0px 20px;
-    height: 30px;
-  }
   .pagination-bottom{
     margin-bottom:0px;
   }
@@ -684,3 +724,42 @@ hr{
     display:none;
   }
 }
+@media screen and (max-width: 560px) {
+  main {
+    width: 100%;
+    margin: 0 auto;
+  }
+#Bookmarks, #Blog{
+  display:none;
+}
+.pagination li{
+  height: 30px;
+}
+.about, .post, .archive, .stream, .bookmarks, #response{
+  width:98%;
+  padding: 0px;
+}
+
+img.thumb{
+  max-width: 95%;
+}
+article img{
+  width: 100%;
+  text-align:center;
+}
+.interactions{
+  padding-bottom: 0px;
+}
+footer{
+  display:none;
+}
+}
+@media screen and (max-width: 460px) {
+  main {
+    width: 100%;
+    margin: 0 auto;
+  }
+nav label{
+  display:none;
+}
+}