@ -13,6 +13,10 @@ html { font-family: 'Inter', sans-serif;}
--light-bg : # e8e8e8 ;
--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 ) ;
@ -120,10 +124,11 @@ pre {
# page {
color : var ( --text-colour ) ;
background : var ( --bg-colour ) ;
}
# page-top {
width : 100 % ;
max-width : 1000px ;
width : 800px ;
z-index : 3 ;
height : 60px ;
border-bottom : 1px solid var ( --text-colour ) ;
@ -167,21 +172,22 @@ nav i{
top : -5px ;
}
main {
max- width: 10 00px;
width : 8 00px;
margin : 0 auto ;
background : var ( --bg-colour ) ;
}
. about , . archive , . bookmarks {
height : calc ( 100vh - 150px ) ;
}
. about . post {
border : 1px dotted var ( --text-colour ) ;
padding : 10px ;
margin : 0 ;
margin : 20px 0 ;
vertical-align : top ;
width : 98 % ;
}
. profile {
width : 85 % ! important ;
width : 100 % ! important ;
display : grid ;
grid-template-columns : repeat ( 20 % , 80 % ) ;
margin : 0 auto ;
@ -234,15 +240,23 @@ main {
margin-right : 5px ;
}
. info {
padding : 3 0px 0 ;
padding : 1 0px 0 ;
font-size : 13px ;
display : grid ;
grid-template-columns : repeat ( 80 % . 20 % ) ;
}
. blogs_span , . categories_span , . tags_span {
. blogs_span {
grid-column : 1 ;
}
. category , . blog , . tag {
. categories_span , . categories_span_other , . info-date-other {
grid-column : 1 / span 2 ;
}
. 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 ;
@ -250,12 +264,13 @@ main {
. categories , . tags {
display : inline ;
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 ;
}
@ -265,9 +280,9 @@ main {
. categories li : last-child : after , . tags li : last-child : after {
content : "" ;
}
. info-date {
grid-column : 2 ;
text-align : righ t;
. info-date , {
display : inline ;
text-align : lef t;
line-height : 1 . 5 ;
}
. info-date . dt-published {
@ -279,17 +294,11 @@ main {
text-align : right ;
font-weight : bold ;
}
. syndication {
grid-column : 2 ;
text-align : right ;
font-size : 13px ;
margin : 0 ;
}
. stream {
. stream , . h-feed {
padding-bottom : 150px ;
}
. post {
margin : 3 0px 0 ;
margin : 20px 0 ;
}
. index_content {
text-align : justify ;
@ -301,6 +310,14 @@ main {
object-fit : scale-down ;
object-position : top ;
}
. h-entry {
width : 98 % ;
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 ) ;
@ -309,11 +326,17 @@ main {
color : var ( --link-colour ) ;
}
. h-entry img {
text-align : center ;
max-width : 800px ;
margin : 0 auto ;
display : block ;
padding : 10px ;
}
. h-entry img . full {
width : 100 % ;
max-width : 600px ;
}
. longpost img {
max-width : 700px ;
padding : 10px ;
}
# interactions {
@ -529,9 +552,12 @@ time{
margin-bottom : 10px ;
}
img . thumb {
width : 300px ;
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 {
@ -544,12 +570,12 @@ hr{
border : 0px ;
padding-top : 20px ;
display : flex ;
max-width : 60 0px;
max-width : 34 0px;
width : 100 % ;
}
. pagination li {
padding : 10px 5 0px;
font-weight : bold ;
padding : 10px 2 0px;
font-weight : normal ;
}
. pagination-bottom {
padding-bottom : 100px ;
@ -595,7 +621,7 @@ hr{
# page-top {
width : 95 % ;
padding : 10px 0 ;
}
}
. about , . post , . archive , . stream , . bookmarks , # response {
width : 95 % ;
margin : 0 auto ;
@ -633,10 +659,7 @@ hr{
. interactions {
padding-bottom : 100px ;
}
. pagination li {
padding : 10px 50px ;
height : 30px ;
}
. pagination-bottom {
margin-bottom : 0px ;
}
@ -645,15 +668,23 @@ hr{
}
}
@ media screen and ( max-width : 560px ) {
# Bookmarks {
display : none ;
}
. pagination li {
padding : 10px 40px ;
height : 30px ;
}
. about , . post , . archive , . stream , . bookmarks , # response {
width : 98 % ;
padding : 0px ;
margin-left : -5px ;
}
img . thumb {
max-width : 95 % ;
}
article img {
width : 95 % ;
width : 100 % ;
text-align : center ;
}
. interactions {
@ -664,14 +695,21 @@ footer{
}
}
@ media screen and ( max-width : 460px ) {
# page {
width : 100 % }
}
main {
max-width : 95 % ;
}
nav # Blogs {
display : none ;
}
nav label {
display : none ;
}
. pagination li {
padding : 10px 10px ;
. pagination {
height : 30px ;
max-width : 460px ;
}
}