summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorThomas "Cakeisalie5" Touhey <thomas@touhey.fr>2018-09-29 19:51:53 +0200
committerThomas "Cakeisalie5" Touhey <thomas@touhey.fr>2018-09-29 19:51:53 +0200
commit7699bb239660783295f76242267d58e8236e03ec (patch)
treeb51b0168100973969482de7dcf682e0fcf3ae480
parent9750cd6a9756c681c6efea6f02f23a1b881d7a69 (diff)
Enhanced the mobile menu to two sizes.
-rw-r--r--_assets/css/main.scss41
-rw-r--r--_layouts/default.html6
2 files changed, 42 insertions, 5 deletions
diff --git a/_assets/css/main.scss b/_assets/css/main.scss
index ec17a3e..0603d38 100644
--- a/_assets/css/main.scss
+++ b/_assets/css/main.scss
@@ -20,7 +20,8 @@ body {
.higher {
background-color: #F5F5F5;
}
-.higher:after {
+
+.higher:after, .side:after {
content: " ";
visibility: hidden;
display: block;
@@ -37,10 +38,15 @@ body {
.side .picture {
width: 100%;
- max-width: 600px;
+ max-width: 200px;
height: auto;
}
+.side-photo a {
+ display: block;
+ line-height: 0;
+}
+
.side-content {
padding: 2px;
}
@@ -93,6 +99,37 @@ footer p {
}
}
+@media (max-width: 350px) {
+.side .picture {
+ width: 100%;
+ max-width: none;
+}
+}
+
+/* Cool menu. */
+
+@media (min-width: 350px) and (max-width: 600px) {
+.side-photo {
+ float: left;
+ margin-right: 5px;
+
+ .picture {
+ max-width: 140px;
+ }
+}
+.side-content {
+ display: block;
+}
+}
+
+/* Do not display the sidebar while printing. */
+
+@media print {
+.side {
+ display: none;
+}
+}
+
/* ELEMENTS */
h1, h2, h3, h4, h5, h6 {
diff --git a/_layouts/default.html b/_layouts/default.html
index dd7cbfa..2bbc27f 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -69,9 +69,9 @@
<!-- Sidebar. -->
<div class="side">
-<a href="{{ site.url }}{{ site.baseurl }}/">
-{% asset profile.jpg magick:resize="600x600" alt="Photo of me during a concert" class="picture" %}
-</a>
+<div class="side-photo"><a href="{{ site.url }}{{ site.baseurl }}/">
+{% asset profile.jpg magick:resize="350x350" alt="Photo of me during a concert" class="picture" %}
+</a></div>
<div class="side-content"><header>
<h1>John Touhey</h1>