jon
/
jk_na
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

adding bold and italic fonts and trying out css minification
continuous-integration/drone/push Build is passing
Details

master
jk 4 years ago
parent
95d30884f2
commit
1dd3f5879e
2 changed files with 302 additions and 985 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 523
      themes/nipponalba/static/css/human_style.css
  2. 764
      themes/nipponalba/static/css/style.css

523
themes/nipponalba/static/css/backup_style.css → themes/nipponalba/static/css/human_style.css
View File

@ -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 {
width:100%;
z-index: 2;
position: absolute;
left:0;
}
.about, .post, .archive, .stream{
.feeds {
width: 95%;
}
.feedrow {
display:grid;
grid-template-columns: 80% auto;
}
.feedrow .description{
grid-column: 1;
}
.feedrow .feedlinks{
grid-column: 2;
}
.commentparade {
width:100%;
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, .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;
}
}

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