summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorThomas "Cakeisalie5" Touhey <thomas@touhey.fr>2018-09-29 19:32:48 +0200
committerThomas "Cakeisalie5" Touhey <thomas@touhey.fr>2018-09-29 19:32:48 +0200
commit9750cd6a9756c681c6efea6f02f23a1b881d7a69 (patch)
tree9ea7dfce37c3ec21c26ebfeb6c4005923bd404f1
parent6205ea35ef5db8d703fdb54843f59e1c6af290b6 (diff)
Fixed the responsive design.
-rw-r--r--_assets/css/main.scss43
-rw-r--r--_layouts/default.html30
2 files changed, 37 insertions, 36 deletions
diff --git a/_assets/css/main.scss b/_assets/css/main.scss
index 6bce5bf..ec17a3e 100644
--- a/_assets/css/main.scss
+++ b/_assets/css/main.scss
@@ -14,11 +14,13 @@ body {
width: 100%;
max-width: 840px;
margin: 10px auto 50px;
- padding: 20px 20px;
+ padding: 20px;
background-color: white;
}
-
-.container:after {
+.higher {
+ background-color: #F5F5F5;
+}
+.higher:after {
content: " ";
visibility: hidden;
display: block;
@@ -35,7 +37,7 @@ body {
.side .picture {
width: 100%;
- max-width: 200px;
+ max-width: 600px;
height: auto;
}
@@ -54,15 +56,12 @@ nav li:before {
}
.content-wrapper {
- width: 100%;
- padding-left: 20%;
+ width: 80%;
+ float: right;
+ vertical-align: top;
text-align: justify;
- background-color: #F5F5F5;
-}
-.content-subwrapper {
- padding-left: 10px;
background-color: white;
- overflow: auto;
+ padding-left: 10px;
}
footer {
@@ -77,23 +76,17 @@ footer p {
}
@media print, (max-width: 600px) {
-.side {
- position: static;
+.higher {
+ background-color: white;
+}
+.content-wrapper, .side {
width: 100%;
float: none;
- margin-bottom: 20px;
- background-color: #FAFAFA;
-}
-.side .picture, .side-content {
- display: inline-block;
- vertical-align: top;
}
-.side .picture {
- margin-right: 10px;
-}
-.side-content {
- margin-top: 10px;
- padding: 0;
+
+.side {
+ width: 100%;
+ background-color: #FAFAFA;
}
.content-wrapper, .content-subwrapper {
padding-left: 0;
diff --git a/_layouts/default.html b/_layouts/default.html
index 6c8bc70..dd7cbfa 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -54,32 +54,40 @@
{% asset css/main.css %}
</head><body><div class="container">
+<div class="higher">
-<section class="content-wrapper"><div class="content-subwrapper">
+<!-- Main content. -->
+
+<section class="content-wrapper">
<h2>{% if page.layout == "post" %}{{ page.date | date_to_string }}: {% endif %}{% if page.title %}{{ page.title }}{% else %}About myself{% endif %}</h2>
<hr />
<div class="content">
{{ content }}
-</div></div></section>
+</div></section>
+
+<!-- Sidebar. -->
<div class="side">
<a href="{{ site.url }}{{ site.baseurl }}/">
-{% asset profile.jpg magick:resize=300x300 alt="Photo of me during a concert" class="picture" %}
+{% asset profile.jpg magick:resize="600x600" alt="Photo of me during a concert" class="picture" %}
</a>
<div class="side-content"><header>
-<h1>John Touhey</h1>
-<p>Musician, painter, father.</p>
-
+ <h1>John Touhey</h1>
+ <p>Musician, painter, father.</p>
</header><nav><ul>
-<li><a href="{{ site.baseurl }}/">Home</a></li>
-<li><a href="{{ site.baseurl }}/biography.html">Biography</a></li>
-<li><a href="{{ site.baseurl }}/paintings.html">Paintings</a></li>
-</ul></nav></div></div>
+ <li><a href="{{ site.baseurl }}/">Home</a></li>
+ <li><a href="{{ site.baseurl }}/biography.html">Biography</a></li>
+ <li><a href="{{ site.baseurl }}/paintings.html">Paintings</a></li>
+</ul></nav></div>
+</div></div>
+
+<!-- Footer. -->
<hr /><footer>
<p>Copyright (C) 2017 - {{ site.time | date: "%Y" }} <a href="{{ site.url }}{{ site.baseurl }}/">John Touhey</a> &lt;<a href="mailto:john.touhey@orange.fr">john.touhey@orange.fr</a>&gt;. All&nbsp;rights&nbsp;reserved.<br />
Website design by <a href="https://thomas.touhey.fr/">Thomas Touhey</a> &lt;<a href="mailto:thomas@touhey.fr">thomas@touhey.fr</a>&gt;</p>
</footer>
-</div></body></html>
+
+</div></div></body></html>