+
{{model.start}} - {{model.end}}
-
+
\ No newline at end of file
diff --git a/css/default.less b/css/default.less
index 13a5f07..897167c 100644
--- a/css/default.less
+++ b/css/default.less
@@ -54,6 +54,35 @@ body {
}
}
+@media (max-width: 768px) {
+ body {
+ .bodyLine() {
+ bottom: 0;
+ left: 5px;
+ width: 0;
+ margin: 0;
+ padding: 0;
+ }
+
+ &:before {
+ .bodyLine;
+ z-index: -1;
+ top: 0;
+ border-left: 2px solid @accentColor;
+ border-right: 2px solid @accentColor;
+ }
+
+ &:after {
+ .bodyLine;
+ position: fixed;
+ z-index: 0;
+ top: 200px; /* should be equal to top position of the dot */
+ border-left: 2px solid @neutralColor;
+ border-right: 2px solid @neutralColor;
+ }
+ }
+}
+
body > header {
height: 120px;
line-height: 80px;
@@ -77,6 +106,21 @@ body > header {
}
}
+@media (max-width: 768px) {
+ body > header {
+ padding: 10px 20px;
+ height: 70px;
+ line-height: 50px;
+
+ h1 {
+ margin: 0;
+ background: url('../img/logo.xs.png') no-repeat;
+ width: auto;
+ height: 50px;
+ }
+ }
+}
+
body > header.scrolled {
height: 70px;
line-height: 50px;
@@ -135,6 +179,36 @@ nav ul {
}
}
+@media (max-width: 768px) {
+ nav.dropdown {
+ float: right;
+ text-align: right;
+ padding: 0;
+ }
+
+ nav button, nav.open button {
+ margin: 0;
+ background: @accentColor;
+ color: #fff !important;
+ }
+
+ nav ul.dropdown-menu {
+ float: right;
+ right: 0;
+ top: 100%;
+ position: relative;
+ }
+
+ nav li {
+ margin: 0;
+ text-align: right;
+
+ a {
+ padding: 0px;
+ }
+ }
+}
+
body > section {
margin-left: 100px !important; /* don't like !important but we need it to override bootstrap */
margin-right: 50px !important;
@@ -165,16 +239,49 @@ body > section {
}
}
+
+@media (max-width: 768px) {
+ body > section {
+ margin-left: 18px !important; /* don't like !important but we need it to override bootstrap */
+ margin-right: 10px !important;
+ margin-top: 20px;
+ padding: 0px;
+
+ header h2 {
+ margin-bottom: 0px;
+
+ &:before,
+ &:after {
+ width: 80%;
+ }
+ }
+ }
+}
+
aside {
text-align: right;
+ font-style: italic;
line-height: 25px;
}
+@media (max-width: 768px) {
+ aside {
+ text-align: center
+ }
+}
+
section > article, section > form {
border-left: 1px solid @accentColor;
padding: 0 20px;
}
+@media (max-width: 768px) {
+ section > article, section > form {
+ border-left: 0;
+ padding: 0 0px;
+ }
+}
+
@media (min-width: 970px) {
section#introduction > article {
border-right: 1px solid @accentColor;
@@ -186,10 +293,26 @@ body > section section {
margin: 20px 0;
}
+@media (max-width: 768px) {
+ body > section section {
+ margin: 0;
+ }
+}
+
section#introduction {
margin-top: 160px;
}
+@media (max-width: 768px) {
+ section#introduction {
+ margin-top: 80px;
+
+ > article p {
+ padding: 0;
+ }
+ }
+}
+
footer {
text-align: center;
font-size: 11pt;
@@ -224,6 +347,28 @@ footer {
}
}
+@media (max-width: 768px) {
+ footer {
+ margin: 0pt 0 0 0 !important;
+ padding: 0px;
+ height: 100px;
+
+ p {
+ line-height: 60px;
+ margin: 0;
+ padding: 0;
+ height: 60px;
+
+ &:before,
+ &:after {
+ height: 0px;
+ width: 0;
+ margin-right: 7px; /* should be the same as the letter-spacing */
+ }
+ }
+ }
+}
+
h1 {
font-size: 20pt;
@@ -258,6 +403,13 @@ section#skills h3 {
margin: 0 0 15pt 0;
}
+@media (max-width: 768px) {
+ section#skills h3 {
+ padding: 0 0 0 0pt;
+ margin: 0 0 0pt 0;
+ }
+}
+
section#skills label {
font-weight: 400;
font-size: 9pt;
@@ -269,8 +421,31 @@ section#skills .progress-bar {
color: @accentColor; /* temp disable showing the actual percentage */
}
+@media (max-width: 768px) {
+ section#skills {
+ padding: 10px 10px;
+ text-align: center;
+ }
+
+ section#skills h3 {
+ text-align: left;
+ }
+
+ section#skills label {
+ font-style: italic;
+ }
+}
+
p {
line-height: 25px;
+
+ padding: 15px;
+}
+
+@media (max-width: 768px) {
+ article > p {
+ text-align: justify;
+ }
}
p a, article a {
@@ -295,12 +470,26 @@ img#me {
.shadow();
}
+@media (max-width: 768px) {
+ img#me {
+ width: 100px;
+ height: 100px;
+ }
+}
+
aside.image img {
width: 100%;
border: 1px solid @shadowColor;
.shadow();
}
+@media (max-width: 768px) {
+ aside.image img {
+ margin: 0px 10px;
+ width: 90%;
+ }
+}
+
article section.project {
margin: 0;
padding: 0;
@@ -328,6 +517,15 @@ form input, form textarea {
padding: 5px;
}
+@media (max-width: 768px) {
+ form input, form textarea {
+ width: 100%;
+ margin-bottom: 0px;;
+ border-radius: 5px;
+ padding: 0px;
+ }
+}
+
form input[type="submit"] {
color: white;
background-color: @accentColor;
@@ -366,6 +564,23 @@ ul.personal-links {
}
}
+@media (max-width: 768px) {
+ ul.personal-links {
+ margin: 0px 0px 0px 0px;
+ padding: 0;
+
+ li {
+ width: 100%;
+ line-height: 25px;
+ height: 25px;
+
+ &:nth-child(3) {
+ clear: both;
+ }
+ }
+ }
+}
+
div#navigation-dot {
position: fixed;
top: 200px;
@@ -379,4 +594,17 @@ div#navigation-dot {
margin: 0;
padding: 0;
.shadow();
+}
+
+@media (max-width: 768px) {
+ div#navigation-dot {
+ top: 200px;
+ left: 4px;
+ width: 8px;
+ height: 8px;
+ border: 1px solid #fff;
+ border-radius: 5px;
+ margin: 0;
+ padding: 0;
+ }
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 4c15ac3..144829d 100644
--- a/index.html
+++ b/index.html
@@ -15,10 +15,10 @@
-
-
+
-
-
+
-
@@ -90,53 +101,53 @@
-
+
-
-