Browse Source

adding bold and italic fonts and trying out css minification

master
jk 4 years ago
parent
commit
1dd3f5879e
  1. 519
      themes/nipponalba/static/css/human_style.css
  2. 764
      themes/nipponalba/static/css/style.css

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

@ -1,18 +1,24 @@
@charset "UTF-8"; @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;} html { font-family: 'Inter', sans-serif;}
@supports (font-variation-settings: normal) { @supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; } html { font-family: 'Inter var', sans-serif; }
} }
:root { :root {
--dark-link:#59ABE3;
--dark-link:#6fbff8;
--dark-text:#e8e8e8; --dark-text:#e8e8e8;
--dark-bg:#2b2b2b; --dark-bg:#2b2b2b;
--dark-opacity: 0.75; --dark-opacity: 0.75;
--light-text:#2b2b2b; --light-text:#2b2b2b;
--light-bg:#e8e8e8; --light-bg:#e8e8e8;
--light-link:#0065BF;
--light-link:#004e7f;
--light-opacity:1; --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); --text-colour: var(--dark-text);
--bg-colour: var(--dark-bg); --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 + * + * .theme-switch:checked + * + *
.theme-switch:checked + * + *{
.theme-switch:checked + * + * + *{
--text-colour:var(--light-text); --text-colour:var(--light-text);
--bg-colour:var(--light-bg); --bg-colour:var(--light-bg);
--link-colour:var(--light-link); --link-colour:var(--light-link);
@ -57,18 +63,16 @@ html { font-family: 'Inter', sans-serif;}
html { html {
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
height:100%;display:block;
} }
body { body {
color: var(--text-colour); color: var(--text-colour);
font-size: 15px; font-size: 15px;
width: 100%;
margin: 0 auto 30px auto; margin: 0 auto 30px auto;
background: var(--bg-colour); background: var(--bg-colour);
min-height: 100%;
height:100%; height:100%;
overflow:hidden;
min-height:100%;
} }
p { p {
line-height: 1.9em; line-height: 1.9em;
@ -122,115 +126,82 @@ pre {
#page{ #page{
color: var(--text-colour); color: var(--text-colour);
background: var(--bg-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; z-index: 3;
height: 60px; height: 60px;
border-bottom: 1px solid var(--text-colour); border-bottom: 1px solid var(--text-colour);
background: var(--bg-colour); background: var(--bg-colour);
margin: 0 auto; margin: 0 auto;
} }
.page-top a {
#page-top a {
color: var(--text-colour); color: var(--text-colour);
} }
.page-top a:hover {
#page-top a:hover {
color: var(--link-colour); color: var(--link-colour);
} }
nav { nav {
width:80%;
width:100%;
list-style: none; list-style: none;
padding: 18px 0px; padding: 18px 0px;
float: left;
font-size: 14px; font-size: 14px;
display:inline-block;
display:flex;
} }
nav li{ nav li{
position: relative; position: relative;
display: initial; display: initial;
padding-right: 20px; padding-right: 20px;
} }
.selectors{
width:130px;
float:right;
display:inline-block;
vertical-align:middle;
padding: 10px 0px;
}
.selectors i{
nav li i{
margin:0; 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{ .about .post{
border: 1px dotted var(--text-colour);
padding: 10px; padding: 10px;
display:block;
margin:0;
margin:20px 0;
vertical-align:top; vertical-align:top;
width: 98%;
} }
.profile{ .profile{
width:85% !important;
display:block;
width:100% !important;
display:grid;
grid-template-columns: repeat (20%, 80%);
margin: 0 auto; margin: 0 auto;
padding-top:30px; padding-top:30px;
} }
.profile-left{ .profile-left{
width:20% !important;
min-width: 200px;
padding:0;
margin:0;
display:inline-block;
vertical-align:middle;
grid-column: 1;
} }
.profile-right{ .profile-right{
vertical-align:top;
width:75%;
display:inline-block;
padding:0;
margin:0;
grid-column: 2;
text-align:justify; text-align:justify;
} }
.profile-right a{ .profile-right a{
@ -250,8 +221,7 @@ nav li{
font-weight: bold; font-weight: bold;
letter-spacing: 1.5px; letter-spacing: 1.5px;
line-height: 1; line-height: 1;
display:inline-block;
padding-left:10px;
padding-left: 10px;
} }
.social-links { .social-links {
list-style: none; list-style: none;
@ -274,30 +244,37 @@ nav li{
margin-right: 5px; margin-right: 5px;
} }
.info{ .info{
padding: 30px 0;
padding: 10px 0;
font-size:13px; 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; font-size: 13px;
line-height: 1.5; line-height: 1.5;
display:inline;
} }
.categories, .tags{ .categories, .tags{
display:inline; display:inline;
margin:0;
padding:0;
margin:0;padding:0;
text-align:right;
} }
.categories li, .tags li{ .categories li, .tags li{
list-style:none; list-style:none;
display:inline; display:inline;
} }
.tag::before {
.tag::before, .category::before{
content: "#"; content: "#";
opacity: .75; opacity: .75;
} }
@ -307,16 +284,25 @@ nav li{
.categories li:last-child:after, .tags li:last-child:after{ .categories li:last-child:after, .tags li:last-child:after{
content: ""; content: "";
} }
.info-date,{
display:inline;
text-align:left;
line-height:1.5;
}
.info-date .dt-published{
font-size:13px;
}
.reading-time{ .reading-time{
display:inline; display:inline;
float:right;
grid-column: 2;
text-align:right;
font-weight:bold; font-weight:bold;
} }
.stream{
.stream, .h-feed{
padding-bottom:150px; padding-bottom:150px;
} }
.post{ .post{
margin: 30px 0;
margin: 20px 0;
} }
.index_content{ .index_content{
text-align:justify; text-align:justify;
@ -328,6 +314,14 @@ nav li{
object-fit:scale-down; object-fit:scale-down;
object-position:top; 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 { .h-entry p a {
text-decoration: none; text-decoration: none;
color: var(--link-colour); color: var(--link-colour);
@ -336,86 +330,74 @@ nav li{
color: var(--link-colour); color: var(--link-colour);
} }
.h-entry img { .h-entry img {
text-align: center;
max-width: 800px;
margin: 0 auto; margin: 0 auto;
display:block; 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; 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{ #interactions{
margin:20px 0 10px 0; margin:20px 0 10px 0;
padding:0; padding:0;
display:inline-flex;
float:left;
height:30px;
display:grid;
grid-template-rows: repeat (20px, 40px, auto);
width:100%; width:100%;
border-top:1px dotted var(--text-colour);
border-top:1px solid var(--text-colour);
padding-bottom:150px;
} }
#webmention-form{ #webmention-form{
display:inline-flex;
grid-row: 2;
margin-top:20px; margin-top:20px;
width: 100%; width: 100%;
} }
#webmention-form label{ #webmention-form label{
display:inline;
float:left;
margin-bottom:10px;
line-height: 2;
} }
#webmention-form input[type=url]{ #webmention-form input[type=url]{
width:60%;
width: 60%;
} }
#webmentions{ #webmentions{
display:block;
grid-row: 4;
margin-top: 0 20px 0 0 ; margin-top: 0 20px 0 0 ;
padding: 0 0 200px 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{ .interaction h4{
line-height:15px; line-height:15px;
padding:0; padding:0;
margin:0; margin:0;
display:block;
} }
.interaction.like, .interaction.share{ .interaction.like, .interaction.share{
border:0; border:0;
@ -426,15 +408,61 @@ nav li{
width:100%; width:100%;
min-height:30px; min-height:30px;
} }
.interaction.like h4, .interaction.share h4{
margin-right: 20px;
}
.interaction.like img,.interaction.share img{ .interaction.like img,.interaction.share img{
display:inline-flex;
float:left;
display:inline;
width:30px; width:30px;
height: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%; 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; clear: both;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
@ -444,14 +472,15 @@ footer {
width: 100%; width: 100%;
padding:20px 0; padding:20px 0;
background: var(--bg-colour); background: var(--bg-colour);
color: var(--text-colour);
} }
footer a {
#footer a {
color: var(--text-colour); color: var(--text-colour);
} }
footer a:hover {
#footer a:hover {
color: var(--link-colour); color: var(--link-colour);
} }
footer img{
#footer img{
max-height:40px; max-height:40px;
margin-top:10px; margin-top:10px;
} }
@ -464,6 +493,7 @@ footer img{
margin:30px 0; margin:30px 0;
font-size:30px; font-size:30px;
font-weight:bold; font-weight:bold;
display:flex;
color: var(--text-colour); color: var(--text-colour);
} }
@ -482,19 +512,19 @@ footer img{
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
.list-with-title .listing-title {
.listing-title {
font-size: 24px; font-size: 24px;
color: var(--text-colour); color: var(--text-colour);
font-weight: 600; font-weight: 600;
line-height: 2.2em; line-height: 2.2em;
} }
.list-with-title .listing {
.listing {
padding: 0; padding: 0;
} }
.list-with-title .listing .listing-post {
.listing-post {
padding-bottom: 5px; padding-bottom: 5px;
} }
.list-with-title .listing .listing-post .post-time {
.post-time {
float: right; float: right;
color: var(--text-colour); color: var(--text-colour);
} }
@ -546,45 +576,66 @@ time{
margin:0; margin:0;
padding:0; padding:0;
} }
.photo{
display:flex;
width:100%;
.picture{
flex: calc(100% / 3);
max-width:calc(100% / 3);
} }
.photogrid{ .photogrid{
display:block;
display:flex;
flex-wrap:wrap;
width:100%; width:100%;
float:left;
height: 100%;
min-width:100%; min-width:100%;
margin-bottom:10px; margin-bottom:10px;
} }
img.thumb{ 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); border: 1px solid var(--text-colour);
} }
hr{ hr{
border-top:1px dotted var(--text-colour); border-top:1px dotted var(--text-colour);
border-bottom:0; border-bottom:0;
} }
.pagination {
#pagination-top{
display:block;
margin:0;
padding:0;
}
ul.pagination {
list-style:none; list-style:none;
margin: 0 auto; margin: 0 auto;
text-align: center;
vertical-align: middle;
border:0px; border:0px;
padding:0;
padding-top:20px; 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{ .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 { .pagination a {
color: var(--text-colour); color: var(--text-colour);
@ -599,15 +650,36 @@ hr{
.anchor:target { .anchor:target {
display:block; 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%; 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%; width:95%;
margin:0 auto; margin:0 auto;
} }
@ -621,62 +693,30 @@ hr{
.profile-left{ .profile-left{
display:block; display:block;
margin:0 auto; margin:0 auto;
padding: 0;
padding: 10px;
width:100%; width:100%;
text-align:center; text-align:center;
float:none; float:none;
} }
.profile-left img{ .profile-left img{
padding: 0px;
margin: 10px;
max-width: 200px;
margin:0;
} }
.profile-right{ .profile-right{
display:block; display:block;
width:100%;
width:90%;
text-align:center; text-align:center;
float:none;
margin:0 auto; 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%; width: 95%;
text-align:center; text-align:center;
float:none;
} }
.interactions{ .interactions{
padding-bottom: 100px; padding-bottom: 100px;
} }
.remote_profile{
width: 50px;
}
.remote_profile img{
width: 30px;
}
.pagination li{
display:inline-block;
padding:0px 20px;
height: 30px;
}
.pagination-bottom{ .pagination-bottom{
margin-bottom:0px; margin-bottom:0px;
} }
@ -684,3 +724,42 @@ hr{
display:none; 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;
}
}

764
themes/nipponalba/static/css/style.css
File diff suppressed because it is too large
View File