mirror of
https://git.adityakumar.xyz/hugo-theme-introduction.git
synced 2024-12-22 22:52:54 +00:00
Mobile view improvements
This commit is contained in:
Vicky
parent
2cadf90a8b
commit
34f02a047b
5 changed files with 184 additions and 24 deletions
|
|
@ -0,0 +1,37 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="main">
|
||||
<div class="page-head-box fade-in one">
|
||||
<h1 class="list-title">404</h1>
|
||||
|
||||
<div class="blognav">
|
||||
<hr>
|
||||
<a href="/">Main</a> |
|
||||
<a href="/#about">About</a> |
|
||||
{{ if .Site.Params.showprojects }}
|
||||
<a href="/#projects">Projects</a> |
|
||||
{{ end }}
|
||||
{{ if .Site.Params.showallposts }}
|
||||
<a href="/#blog">Back to blog</a> |
|
||||
{{ else }}
|
||||
<a href="/blog">Back to blog</a> |
|
||||
{{ end }}
|
||||
<a href="/#contact">Contact</a>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content fade-in two">
|
||||
|
||||
<div class="container markdown">
|
||||
Oops! Either you've found a bug (in which case, <a href="{{ .Site.Params.email }}">please tell me</a>) or you're just making things up. This page doesn't exist!
|
||||
</div>
|
||||
|
||||
<div class="blognav">
|
||||
<hr>
|
||||
</div>
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,11 +1,29 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="main fade-in one">
|
||||
<div class="main">
|
||||
<div class="page-head-box fade-in one">
|
||||
<h1 class="list-title">{{ .Site.Params.firstname }}'s Blog</h1>
|
||||
|
||||
<div class="nav">
|
||||
<hr>
|
||||
<a href="/">Main</a> |
|
||||
<a href="/#about">About</a> |
|
||||
{{ if .Site.Params.showprojects }}
|
||||
<a href="/#projects">Projects</a> |
|
||||
{{ end }}
|
||||
{{ if .Site.Params.showblog }}
|
||||
<a href="/#blog">Blog</a> |
|
||||
{{ end }}
|
||||
<a href="/#contact">Contact</a>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content fade-in two">
|
||||
<div class="blog-header">
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
<div class="post-data">
|
||||
{{ .Site.Params.author }} |
|
||||
{{ .Date.Format .Site.Params.dateform }} |
|
||||
{{ if eq 1 .ReadingTime }}{{ .ReadingTime }} minute read{{ else }}{{ .ReadingTime }} minutes read{{ end }}
|
||||
</div>
|
||||
|
|
@ -37,7 +55,7 @@
|
|||
{{ end }}
|
||||
|
||||
</div>
|
||||
<div class="markdown">
|
||||
<div class="container markdown">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
|
|
@ -55,4 +73,5 @@
|
|||
</div>
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<h2 class="section-head">About</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="profile-pic col-md-offset-1 col-md-3"><img class="img-responsive" src="/{{ .Site.Params.avatar }}" alt="My profile picture." width="200px">
|
||||
<div class="col-md-offset-1 col-md-3"><img class="img-responsive avatar" src="/{{ .Site.Params.avatar }}" alt="My profile picture.">
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
|
||||
|
|
@ -58,13 +58,17 @@
|
|||
<hr>
|
||||
<!-- Now for some cool projects -->
|
||||
{{ if .Site.Params.showprojects }}
|
||||
<div class="main section">
|
||||
{{ partial "projects.html" . }}
|
||||
</div>
|
||||
<hr>
|
||||
{{ end }}
|
||||
<!-- Done with projects section -->
|
||||
<!-- Let's show some blog posts -->
|
||||
{{ if .Site.Params.showblog }}
|
||||
<div class="main section">
|
||||
{{ partial "blogsection.html" . }}
|
||||
</div>
|
||||
<hr>
|
||||
{{ end }}
|
||||
<!-- End of blog section -->
|
||||
|
|
|
|||
|
|
@ -21,5 +21,8 @@
|
|||
{{ if .Site.Params.googleplus }}
|
||||
<a href="https://plus.google.com/+{{ .Site.Params.googleplus }}" target="_blank"><i class="fa fa-google-plus"></i></a>
|
||||
{{ end }}
|
||||
{{ if .Site.RSSLink }}
|
||||
<a href="{{ .Site.RSSLink }}"><i class="fa fa-rss"></i></a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,7 +38,7 @@ animation-delay: 1.8s;
|
|||
}
|
||||
body {
|
||||
font-size: 14px;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: #666;
|
||||
}
|
||||
a {
|
||||
|
|
@ -53,9 +53,11 @@ a:active {
|
|||
}
|
||||
h1 {
|
||||
color: #222;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
}
|
||||
h2 {
|
||||
color: #222;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
}
|
||||
hr {
|
||||
|
||||
|
|
@ -63,7 +65,7 @@ hr {
|
|||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
.post-item {
|
||||
display: block;
|
||||
list-style: none;
|
||||
list-style-position: outside;
|
||||
|
|
@ -86,29 +88,114 @@ li {
|
|||
.nav {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin: 5% 0 5% 0;
|
||||
margin: 3% 0 3% 0;
|
||||
}
|
||||
.blognav {
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
margin: 3% 0 3% 0;
|
||||
}
|
||||
.content {
|
||||
margin: 0em 0em 4em 0em;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
}
|
||||
.main .section {
|
||||
width: 90%;
|
||||
float: center;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.main .section {
|
||||
width: 100%;
|
||||
float: center;
|
||||
}
|
||||
}
|
||||
.markdown {
|
||||
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
}
|
||||
.markdown ul {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-left: 1.5em;
|
||||
list-style: none;
|
||||
}
|
||||
.markdown li {
|
||||
list-style-type: disc;
|
||||
margin-left: 1.5em;
|
||||
list-style-position: outside;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.markdown em {
|
||||
font-style: italic;
|
||||
}
|
||||
.markdown strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.markdown hr {
|
||||
position: relative;
|
||||
margin: 1.75rem 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #808080;
|
||||
border-top: 1px solid #999999;
|
||||
}
|
||||
.markdown abbr {
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.markdown abbr[title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted #808080;
|
||||
}
|
||||
.markdown blockquote {
|
||||
padding: .5rem 1rem;
|
||||
margin: .8rem 0;
|
||||
color: #7a7a7a;
|
||||
border-left: .25rem solid #e5e5e5;
|
||||
}
|
||||
.markdown blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown table {
|
||||
margin: 2em 0 2em 0;
|
||||
width: 100%;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.markdown td,
|
||||
.markdown th {
|
||||
padding: .25rem .5rem;
|
||||
border: 1px solid #e5e5e5;
|
||||
text-align: center;
|
||||
}
|
||||
.markdown tbody tr:nth-child(odd) td,
|
||||
.markdown tbody tr:nth-child(odd) th {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.pagehead {
|
||||
margin: 20% 20% 5% 20%;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.pagehead {
|
||||
margin: 20% 10% 5% 10%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.list-head {
|
||||
text-align: left;
|
||||
margin: 20% 0 0 0;
|
||||
}
|
||||
.page-head-box {
|
||||
text-align: left;
|
||||
margin: 15% 0 0 0;
|
||||
}
|
||||
.list-title {
|
||||
font-size: 8em;
|
||||
font-weight: bold;
|
||||
margin-left: -10px;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
@media (max-width: 600px) {
|
||||
.list-title {
|
||||
font-size: 3em;
|
||||
font-weight:bold;
|
||||
|
|
@ -120,28 +207,32 @@ li {
|
|||
text-align: center;
|
||||
margin: 1.5em 0em 1.5em 0em;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
@media (max-width: 600px) {
|
||||
.section-head {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
margin: 1em 0em 1em 0em;
|
||||
}
|
||||
}
|
||||
.profile-pic {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
margin: 1em 0 1em 0;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.img-responsive {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.avatar {
|
||||
max-width: 300px;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
.intro {
|
||||
font-size: 8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
@media (max-width: 600px) {
|
||||
.intro {
|
||||
font-size: 3em;
|
||||
font-weight:bold;
|
||||
|
|
@ -151,7 +242,7 @@ li {
|
|||
font-size: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
@media (max-width: 600px) {
|
||||
.blurb {
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
|
|
@ -166,6 +257,11 @@ li {
|
|||
font-size: 2em;
|
||||
margin: 0.8em 0em 0.5em 0em;
|
||||
}
|
||||
@media (max-width: 600) {
|
||||
.highlight-text {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
.project-grid {
|
||||
padding: 1.2em 0em 0em 0em;
|
||||
}
|
||||
|
|
@ -183,25 +279,25 @@ li {
|
|||
text-align: center;
|
||||
}
|
||||
.blog-header {
|
||||
margin: 10% 0 5% 0;
|
||||
margin: 3% 0 3% 0;
|
||||
text-align: left;
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
@media (max-width: 600px) {
|
||||
.blog-header {
|
||||
margin: 10% 0 5% 0;
|
||||
margin: 3% 0 3% 0;
|
||||
text-align: left;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.post-data {
|
||||
font-size: 0.5em;
|
||||
font-size: 0.4em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.blog-share {
|
||||
font-size: 0.3em;
|
||||
font-size: 0.35em;
|
||||
font-weight: normal;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
|
@ -209,6 +305,7 @@ li {
|
|||
text-align: center;
|
||||
color: #888;
|
||||
padding: 2em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
#footer a {
|
||||
color: #888;
|
||||
|
|
|
|||
Loading…
Reference in a new issue