diff options
-rw-r--r-- | assets/projects/managerzonderstress.nl.png | bin | 0 -> 340326 bytes | |||
-rw-r--r-- | assets/projects/rooster.hetmml.nl.png | bin | 0 -> 21151 bytes | |||
-rw-r--r-- | projects.md | 12 | ||||
-rw-r--r-- | style/main.scss | 36 |
4 files changed, 46 insertions, 2 deletions
diff --git a/assets/projects/managerzonderstress.nl.png b/assets/projects/managerzonderstress.nl.png Binary files differnew file mode 100644 index 0000000..0cc3106 --- /dev/null +++ b/assets/projects/managerzonderstress.nl.png diff --git a/assets/projects/rooster.hetmml.nl.png b/assets/projects/rooster.hetmml.nl.png Binary files differnew file mode 100644 index 0000000..cd25a5b --- /dev/null +++ b/assets/projects/rooster.hetmml.nl.png diff --git a/projects.md b/projects.md index 9fcc455..ecce816 100644 --- a/projects.md +++ b/projects.md @@ -3,5 +3,13 @@ layout: layout --- Here are some of the projects i'm currently working on: -- **[Metis Rooster](http://rooster.hetmml.nl/)** An improved version of my school schedule page. -- **[Manager Zonder Stress](http://managerzonderstress.nl/)** A website for my dad.
\ No newline at end of file +<div class="projects"> + <a class="project" href="http://rooster.hetmml.nl" target="_black" rel="noopener"> + <img src="/assets/projects/rooster.hetmml.nl.png" alt="rooster.hetmml.nl homepage"> + <header>Metis Rooster</header> + </a> + <a class="project" href="http://managerzonderstress.nl" target="_black" rel="noopener"> + <img src="/assets/projects/managerzonderstress.nl.png" alt="managerzonderstress.nl homepage"> + <header>Manager zonder stress</header> + </a> +</div>
\ No newline at end of file diff --git a/style/main.scss b/style/main.scss index 5afd75a..95883ed 100644 --- a/style/main.scss +++ b/style/main.scss @@ -3,6 +3,10 @@ @import 'normalize'; +* { + box-sizing: border-box; +} + body { background-color: #31363b; font-family: 'Roboto Mono', monospace; @@ -96,4 +100,36 @@ main ul { left: 0; } } +} + +.projects { + display: flex; + + .project { + padding: 8px; + color: black; + text-decoration: none; + background-color: #93a1a1; + margin: 8px; + outline: none; + + &:hover, &:focus { + background-color: #b8c5c5; + } + + img { + width: 100%; + } + + header { + padding: 8px; + font-style: italic; + } + } +} + +@media screen and (max-width: 425px) { + .projects { + flex-wrap: wrap; + } }
\ No newline at end of file |