diff --git a/content/css/style.css b/content/css/style.css index 3e255d9f..c6df504d 100644 --- a/content/css/style.css +++ b/content/css/style.css @@ -35,7 +35,7 @@ html { font-family: 'Inter', sans-serif; height:100%;} } /* Switched mode */ - +.theme-switch:checked ~ *, .theme-switch:checked + *, .theme-switch:checked + * + *{ --text-colour:var(--light-text); @@ -74,7 +74,7 @@ body { .main, .content { background: var(--bg-colour); color: var(--text-colour); - height:100%; + height:95%; display:block; } p { @@ -149,7 +149,7 @@ a:hover, a:active { left:30%; height: 100%; float: right; - width: 70%; + width: 80%; margin-top: 60px; overflow:auto; -ms-overflow-style:none; @@ -167,11 +167,12 @@ a:hover, a:active { background: var(--bg-colour); } .page-top .nav { -width:90%; +width:95%; list-style: none; padding: 18px 30px; float: left; font-size: 14px; + display:inline-block; } .page-top .nav li{ position: relative; @@ -184,55 +185,34 @@ width:90%; .page-top .nav a:hover { color: var(--link-colour); } -.page-top .information{ - float: right; - padding-top: 12px; - padding-right: 20px; -} -.page-top .information .avatar { - float: right; -} -.page-top .information .avatar img { - width: 48px; - height: 48px; - border-radius: 300px; -} -.page-top .information .back_btn { - float: left; - padding-top: 5px; - margin-right: -10px; -} -.page-top .information .back_btn li { - display: initial; - padding-right: 40px; -} .page-top .language-selector { - float:right; position:relative; - display:inline-flex; - top:-11px; + display:inline; + float:right; + vertical-align:top; } .page-top .language-selector ul{ list-style:none; - padding-bottom:0; + padding:0; margin:0; + display:inline; } .page-top .language-selector li{ vertical-align:top; margin:0; + padding:0; padding-bottom:22px; + } -.page-top .language-selector li div{ - position:relative; - height:50px; +.page-top .language-selector i{ + vertical-align:top; display:inline; - top:-5px; - left:-5px; - margin-right:5px; + padding:0px 10px; } -.page-top .language-selector i{ - padding-bottom:15px; - margin-top:5px; +.page-top .language-selector label{ + margin:0px; + padding:0px; + display:inline; } .sidebar { width: 30%; @@ -301,7 +281,7 @@ width:90%; .sidebar .social-links a:hover { color: var(--link-colour); } -.post { +.post, .h-entry { background: var(--bg-colour); margin: 30px; width:80%; @@ -336,34 +316,32 @@ width:90%; font-size: 22px; margin: 0; } -.post .post-title a { +.post .post-title a, .h-entry .post-title a { text-decoration: none; letter-spacing: 1px; color: var(--text-colour); } -.post .post-title a:hover { +.post .post-title a:hover, .h-entry .post-title a:hover { text-decoration: underline; } -.post .post-content a { +.post .post-content a, .h-entry p a { text-decoration: none; color: var(--link-colour); } -.post .post-content table { +.post .post-content table, .h-entry table { border-collapse:collapse; } -.post .post-content table,.post .post-content table td, .post .post-content table th{ +.post .post-content table,.post .post-content table td, .post .post-content table th, +.h-entry table,.h-entry table td, .h-entry table th{ border: 1px dashed var(--text-colour); } -.post .post-content table tr:nth-child(even) { - background-color: #f2f2f2; -} -.post .post-content table td, .post .post-content table th{ +.post .post-content table td, .post .post-content table th,.h-entry table td, .h-entry table th{ padding: 15px } -.post .post-content a:hover { +.post .post-content a:hover, .h-entry a:hover { color: var(--link-colour); } .post .post-content h3 { @@ -375,7 +353,7 @@ width:90%; color: var(--text-colour); font-size: 16px; } -.post .post-content img { +.post .post-content img, .h-entry img { max-width: 60%; text-align: center; margin: 0 auto; @@ -447,32 +425,6 @@ width:90%; text-decoration: none; } -.pagination { - margin: 30px; - padding: 0px 0 56px 0; - border-bottom: 1px solid var(--text-colour); -} -.pagination ul { - list-style: none; - margin: 0; - padding: 0; - height: 13px; -} -.pagination ul li { - margin: 0 2px 0 2px; - display: inline; - line-height: 1; -} -.pagination ul li a { - text-decoration: none; -} -.pagination .pre { - float: left; -} -.pagination .next { - float: right; -} - .like-reblog-buttons { float: right; } @@ -735,6 +687,60 @@ a.btn { margin:0 auto; display:block; } +.contents hr { + color: var(--text-colour); +} +.contents .note, .contents .article { + background-color: var(--bg-colour); + border-radius:10px; + padding:10px; + width: 80%; + margin: 10px; + display:block; +} +.contents .note .author, .contents .article .author{ + width: 60px; + display:block; + float:left; + height:100%; + margin:0px; + padding:0px; +} +.contents .note .author img, .contents .article .author img{ + max-width:50px; + vertical-align: top; + margin:0px; + padding:0px; +} +.contents aside { + width:95%; + display:inline-block; + vertical-align:top; + margin:0px; + padding:0px; +} + +.contents aside time{ + font-size:11px; +} + +.pagination { + list-style:none; + margin: 0 auto; + border:0px; + padding-top:20px; + display:block; + max-width: 1000px; + width:100%; +} +.pagination li{ + display:inline-block; + padding:10px 80px; + height: 80px; +} +.page-top .nav #Photos, .page-top .nav #Likes, .page-top .nav #Replies, .page-top .nav #Re-posts{ + display:none; + } @media screen and (max-width: 960px) { .sidebar { @@ -758,7 +764,15 @@ a.btn { .page-top { width: 100%; } - + .page-top .nav{ + width: 90%; + } + .page-top .nav #Likes, .page-top .nav #Replies, .page-top .nav #Re-posts{ + display:none; + } + .page-top .language-selector i{ + padding:0 5px; + } .post-title h3 { line-height: 1.6; } @@ -770,10 +784,11 @@ a.btn { position: absolute; left:0; height:100%; + border-top: 1px solid var(--text-colour); } - .about, .post{ - width:90%; + .about, .post, .archive, .contents{ + width:95%; margin-left:15px; } .footer { @@ -783,4 +798,10 @@ a.btn { .share { display: grid; } + + .pagination li{ + display:inline-block; + padding:0px 30px; + height: 30px; + } }