fix(templates): add CSS magic for responsiveness
Anirudh icyph0x@pm.me
Thu, 21 Jun 2018 15:18:48 +0530
5 files changed,
99 insertions(+),
18 deletions(-)
M
build/about/index.html
→
build/about/index.html
@@ -2,14 +2,32 @@ <!DOCTYPE html>
<html> <header> <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="HandheldFriendly" content="true"> +<style> +@media screen and (max-width: 1200px) { + #primary { width:67%; } + #secondary { width:30%; margin-left:3%;} +} +/* Tabled Portrait */ +@media screen and () { + #primary { width:100%; } + #secondary { width:100%; margin:0; border:none; } +} +html { font-size: 100% } +@media (min-width: 640px) { body {font-size:1rem;} } +@media (min-width:960px) { body {font-size:1.2rem;} } +@media (min-width:1100px) { body {font-size:1.5rem;} } +</style> + <a href="/">home</a> <a href="/gpg.txt">gpg</a> <a href="/about">about</a> <a href="/contact">contact</a> <title> icyphox </title> </header> -<body style="font-size:1.5vw"> +<body> <h2>about</h2> <p>I'm <em>icyphox</em>, an infosec enthusiast, Linux elitist and an open sourcer. And this is all about me.</p>@@ -46,7 +64,7 @@
</body> <hr /> -<footer style="font-size:1.5vw"> - <p align="center">Built using <a href="https://github.com/icyphox/vite">Vite</a>.</p> +<footer> + <small align="center">Built using <a href="https://github.com/icyphox/vite">Vite</a>.</small> <p> </p> <footer>
M
build/contact/index.html
→
build/contact/index.html
@@ -2,11 +2,26 @@ <!DOCTYPE html>
<html> <header> <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="HandheldFriendly" content="true"> <style> body { margin-top: 10%; } +@media screen and (max-width: 1200px) { + #primary { width:67%; } + #secondary { width:30%; margin-left:3%;} +} +/* Tabled Portrait */ +@media screen and (max-width: 768px) { + #primary { width:100%; } + #secondary { width:100%; margin:0; border:none; } +} +html { font-size: 100% } +@media (min-width: 640px) { body {font-size:1rem;} } +@media (min-width:960px) { body {font-size:1.2rem;} } +@media (min-width:1100px) { body {font-size:1.5rem;} } </style> <a href="/">home</a> <a href="/gpg.txt">gpg</a> <a href="/about">about</a> <a href="/contact">contact</a> <title>@@ -14,7 +29,7 @@ icyphox
</title> </header> -<body style="font-size:1.5vw"> +<body> <h2>contact</h2> <p>Reach me at <a href="mailto:icyph0x@pm.me">icyph0x@pm.me</a> or at <code>#rice</code> on <a href="https://rizon.net">Rizon</a>.</p>@@ -22,7 +37,7 @@
</body> <hr /> -<footer style="font-size:1.5vw"> - <p align="center">Built using <a href="https://github.com/icyphox/vite">Vite</a>.</p> +<footer> + <small align="center">Built using <a href="https://github.com/icyphox/vite">Vite</a>.</small> <p> </p> <footer>
M
build/index.html
→
build/index.html
@@ -2,11 +2,26 @@ <!DOCTYPE html>
<html> <header> <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="HandheldFriendly" content="true"> <style> body { margin-top: 10%; } +@media screen and (max-width: 1200px) { + #primary { width:67%; } + #secondary { width:30%; margin-left:3%;} +} +/* Tabled Portrait */ +@media screen and (max-width: 768px) { + #primary { width:100%; } + #secondary { width:100%; margin:0; border:none; } +} +html { font-size: 100% } +@media (min-width: 640px) { body {font-size:1rem;} } +@media (min-width:960px) { body {font-size:1.2rem;} } +@media (min-width:1100px) { body {font-size:1.5rem;} } </style> <a href="/">home</a> <a href="/gpg.txt">gpg</a> <a href="/about">about</a> <a href="/contact">contact</a> <title>@@ -14,7 +29,7 @@ icyphox
</title> </header> -<body style="font-size:1.5vw"> +<body> <p>Hey there,</p> <p>This is my new, less flashy website. I lost the Markdown source of my old site in an SSD wipe :v <br />@@ -25,7 +40,7 @@
</body> <hr /> -<footer style="font-size:1.5vw"> - <p align="center">Built using <a href="https://github.com/icyphox/vite">Vite</a>.</p> +<footer> + <small align="center">Built using <a href="https://github.com/icyphox/vite">Vite</a>.</small> <p> </p> <footer>
M
templates/index.html
→
templates/index.html
@@ -2,11 +2,26 @@ <!DOCTYPE html>
<html> <header> <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="HandheldFriendly" content="true"> <style> body { margin-top: 10%; } +@media screen and (max-width: 1200px) { + #primary { width:67%; } + #secondary { width:30%; margin-left:3%;} +} +/* Tabled Portrait */ +@media screen and (max-width: 768px) { + #primary { width:100%; } + #secondary { width:100%; margin:0; border:none; } +} +html { font-size: 100% } +@media (min-width: 640px) { body {font-size:1rem;} } +@media (min-width:960px) { body {font-size:1.2rem;} } +@media (min-width:1100px) { body {font-size:1.5rem;} } </style> {{ header }} <title>@@ -14,12 +29,12 @@ {{ title }}
</title> </header> -<body style="font-size:1.5vw"> +<body> {{ body }} </body> <hr /> -<footer style="font-size:1.5vw"> +<footer> {{ footer }} <p> {{ author }} </p> <footer>
M
templates/normal.html
→
templates/normal.html
@@ -2,19 +2,37 @@ <!DOCTYPE html>
<html> <header> <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="HandheldFriendly" content="true"> +<style> +@media screen and (max-width: 1200px) { + #primary { width:67%; } + #secondary { width:30%; margin-left:3%;} +} +/* Tabled Portrait */ +@media screen and () { + #primary { width:100%; } + #secondary { width:100%; margin:0; border:none; } +} +html { font-size: 100% } +@media (min-width: 640px) { body {font-size:1rem;} } +@media (min-width:960px) { body {font-size:1.2rem;} } +@media (min-width:1100px) { body {font-size:1.5rem;} } +</style> + {{ header }} <title> {{ title }} </title> </header> -<body style="font-size:1.5vw"> +<body> {{ body }} </body> <hr /> -<footer style="font-size:1.5vw"> +<footer> {{ footer }} <p> {{ author }} </p> <footer>