diff options
| -rw-r--r-- | docs/index.html | 80 | ||||
| -rw-r--r-- | docs/stories.html | 4 | ||||
| -rw-r--r-- | docs/style.css | 55 | ||||
| -rw-r--r-- | docs/style.css.map | 2 | ||||
| -rw-r--r-- | sass/style.scss | 70 | ||||
| -rw-r--r-- | templates/index.html | 80 | ||||
| -rw-r--r-- | templates/stories.html | 2 |
7 files changed, 174 insertions, 119 deletions
diff --git a/docs/index.html b/docs/index.html index b0dbf3a..cb98807 100644 --- a/docs/index.html +++ b/docs/index.html @@ -22,39 +22,53 @@ <h2>About Me</h2> -<table> - <tr class="title-row"><td><h3>Skills</h3></td></tr> - <tr> - <td>Spoken Languages:</td> - <td>German, English, Tamil</td> - </tr> - <tr> - <td>Programming Languages:</td> - <td>Rust, Python</td> - </tr> - <tr> - <td>Interests:</td> - <td>Software development, writing</td> - </tr> - <tr class="title-row"><td><h3>Education & Work</h3></td></tr> - <tr> - <td>2010 - 2018:</td> - <td>Abitur: Maria-Theresia-Gymnasium Munich</td> - </tr> - <tr> - <td>2022 - ?:</td> - <td>Software development apprenticeship at Dontenwill AG</td> - </tr> - <tr class="title-row"><td><h3>Contact & Social Media</h3></td></tr> - <tr> - <td>E-Mail:</td> - <td><a href="mailto:primary-v2@protonmail.com">primary-v2@protonmail.com</a></td> - </tr> - <tr> - <td>Github:</td> - <td><a href="https://github.com/WriterV2">WriterV2</a></td> - </tr> -</table> +<main> + <div class="about-me"> + <div class="card"> + <h3>Skills</h3> + <table> + <tr> + <td>Spoken Languages:</td> + <td>German, English, Tamil</td> + </tr> + <tr> + <td>Programming Languages:</td> + <td>Rust, Python</td> + </tr> + <tr> + <td>Interests:</td> + <td>Software development, writing</td> + </tr> + </table> + </div> + <div class="card"> + <h3>Education & Work</h3> + <table> + <tr> + <td>2010 - 2018:</td> + <td>Abitur: Maria-Theresia-Gymnasium Munich</td> + </tr> + <tr> + <td>2022 - ?:</td> + <td>Software development apprenticeship at Dontenwill AG</td> + </tr> + </table> + </div> + <div class="card"> + <h3>Contact & Social Media</h3> + <table> + <tr> + <td>E-Mail:</td> + <td><a href="mailto:primary-v2@protonmail.com">primary-v2@protonmail.com</a></td> + </tr> + <tr> + <td>Github:</td> + <td><a href="https://github.com/WriterV2">WriterV2</a></td> + </tr> + </table> + </div> + </div> +</main> </main> <footer> diff --git a/docs/stories.html b/docs/stories.html index cb673af..c0b2c2a 100644 --- a/docs/stories.html +++ b/docs/stories.html @@ -37,7 +37,7 @@ Despite my linguistic difficulties to express myself, my love for story telling </div> <div class="works"> - <a href="./stories/das_schweigende_spiegelbild.pdf" class="work-card" download> + <a href="./stories/das_schweigende_spiegelbild.pdf" class="work-card card" download> <div class="title-and-description"> <h3>Das schweigende Spiegelbild</h3> <p>Das Spiegelbild verzweifelt in seiner Hilflosigkeit gegenüber seinem Ich.</p> @@ -49,7 +49,7 @@ Despite my linguistic difficulties to express myself, my love for story telling </div> </a> - <a href="./stories/mit_gutem_gewissen.pdf" class="work-card" download> + <a href="./stories/mit_gutem_gewissen.pdf" class="work-card card" download> <div class="title-and-description"> <h3>Mit gutem Gewissen</h3> <p>Der gefährliche Zauber von Leon wird von seinem wegweisenden Freund durchschaut. Kann er ihn stoppen?</p> diff --git a/docs/style.css b/docs/style.css index 9112739..1dc8d13 100644 --- a/docs/style.css +++ b/docs/style.css @@ -57,7 +57,17 @@ main .works { } @media screen and (min-width: 1024px) { main .works { - grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; + } +} +main .about-me { + display: grid; + row-gap: 2em; + column-gap: 2em; +} +@media screen and (min-width: 1024px) { + main .about-me { + grid-template-columns: 1fr 1fr 1fr; } } @@ -81,34 +91,46 @@ h3 { color: #a29d7f; } -.work-card { +.card { padding: 2em; background-color: #333; border-radius: 0.3em; border: 1px solid #131313; - height: 300px; +} +.card.work-card { display: flex; flex-direction: column; justify-content: space-between; + height: 350px; } -@media screen and (min-width: 600px) { - .work-card { - height: 250px; - } -} -.work-card .info { +.card.work-card .info { display: flex; flex-flow: row wrap; } -.work-card .info span { +.card.work-card .info span { background-color: #131313; padding: 0.5em; margin: 0 0.5em 0.5em; font-size: 0.8em; } -.work-card:hover { +.card.work-card:hover { border: 1px solid #a29d7f; } +@media screen and (min-width: 480px) { + .card.work-card { + height: 250px; + } +} +@media screen and (min-width: 768px) { + .card.work-card { + height: 300px; + } +} +@media screen and (min-width: 1024px) { + .card.work-card { + height: 350px; + } +} .works-filter { padding-bottom: 2em; @@ -141,19 +163,14 @@ h3 { table { border-collapse: collapse; width: 100%; - margin: 1em; + background-color: #131313; + margin: 0.8em 0; } table tr td { - border: 1px solid #131313; - background-color: #333; + border: 1px solid #333; text-align: left; padding: 1em; font-size: 0.9em; } -table tr.title-row td { - border: none; - background-color: #131313; - font-size: inherit; -} /*# sourceMappingURL=style.css.map */ diff --git a/docs/style.css.map b/docs/style.css.map index 7611b99..f2813cb 100644 --- a/docs/style.css.map +++ b/docs/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EAMA;;AALA;EACI;EACA;EACA;;;AAKR;EACI,kBAlBe;EAmBf,OAjBS;EAkBT;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA,kBA7Ce;;;AAiDnB;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;;AAKZ;EACI;EACA;EACA,kBAnEQ;;;AAsEZ;EACI;EACA;;AACA;EACI,cAxEO;EAyEP;;;AAIR;EACI;EACA,OA/EW;;;AAkFf;EACI;EACA,kBAtFQ;EAuFR;EACA;EACA;EAIA;EACA;EACA;;AALA;EANJ;IAOQ;;;AAKJ;EACI;EACA;;AACA;EACI,kBArGO;EAsGP;EACA;EACA;;AAGR;EACI;;;AAIR;EACI;EACA;;AACA;EAHJ;IAIQ;;;AAEJ;EACI;EACA,OAtHK;;AAwHT;EACI,kBA1HI;EA2HJ,OAzHO;EA0HP;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;AAEI;EACI;EACA,kBAhJA;EAiJA;EACA;EACA;;AAGA;EACI;EACA,kBAzJG;EA0JH","file":"style.css"}
\ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EAMA;;AALA;EACI;EACA;EACA;;;AAKR;EACI,kBAlBe;EAmBf,OAjBS;EAkBT;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA,kBA7Ce;;;AAgDnB;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;AAGR;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;;AAKZ;EACI;EACA;EACA,kBA1EQ;;;AA6EZ;EACI;EACA;;AACA;EACI,cA/EO;EAgFP;;;AAIR;EACI;EACA,OAtFW;;;AAyFf;EACI;EACA,kBA7FQ;EA8FR;EACA;;AAEA;EACI;EACA;EACA;EAcA;;AAbA;EACI;EACA;;AACA;EACI,kBA1GG;EA2GH;EACA;EACA;;AAGR;EACI;;AAGJ;EAlBJ;IAmBQ;;;AAEJ;EArBJ;IAsBQ;;;AAEJ;EAxBJ;IAyBQ;;;;AAMZ;EACI;EACA;;AACA;EAHJ;IAIQ;;;AAEJ;EACI;EACA,OAvIK;;AAyIT;EACI,kBA3II;EA4IJ,OA1IO;EA2IP;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA,kBA9Je;EA+Jf;;AAEI;EACI;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file diff --git a/sass/style.scss b/sass/style.scss index cc11d16..dafaba0 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -46,7 +46,6 @@ nav { background-color: $background-color; } - main { margin: 2em; min-height: calc(100vh - 108.8px - 25.6px - 25.6px - 32px - 32px); @@ -58,7 +57,15 @@ main { grid-template-columns: 1fr 1fr; } @media screen and (min-width: 1024px) { - grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; + } + } + .about-me { + display: grid; + row-gap: 2em; + column-gap: 2em; + @media screen and (min-width: 1024px) { + grid-template-columns: 1fr 1fr 1fr; } } } @@ -83,30 +90,40 @@ h3 { color: $accent-color; } -.work-card { +.card { padding: 2em; background-color: $box-color; border-radius: 0.3em; border: 1px solid $background-color; - height: 300px; - @media screen and (min-width: 600px) { - height: 250px; - } - display: flex; - flex-direction: column; - justify-content: space-between; - .info { + + &.work-card { display: flex; - flex-flow: row wrap; - span { - background-color: $background-color; - padding: 0.5em; - margin: 0 0.5em 0.5em; - font-size: 0.8em; + flex-direction: column; + justify-content: space-between; + .info { + display: flex; + flex-flow: row wrap; + span { + background-color: $background-color; + padding: 0.5em; + margin: 0 0.5em 0.5em; + font-size: 0.8em; + } } - } - &:hover { - border: 1px solid $accent-color; + &:hover { + border: 1px solid $accent-color; + } + height: 350px; + @media screen and (min-width: 480px) { + height: 250px; + } + @media screen and (min-width: 768px) { + height: 300px; + } + @media screen and (min-width: 1024px) { + height: 350px; + } + } } @@ -139,21 +156,14 @@ h3 { table { border-collapse: collapse; width: 100%; - margin: 1em; + background-color: $background-color; + margin: 0.8em 0; tr { td { - border: 1px solid $background-color; - background-color: $box-color; + border: 1px solid $box-color; text-align: left; padding: 1em; font-size: 0.9em; } - &.title-row { - td { - border: none; - background-color: $background-color; - font-size: inherit; - } - } } } diff --git a/templates/index.html b/templates/index.html index 1067691..efb0295 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,37 +3,51 @@ {% block content %} <h2>About Me</h2> -<table> - <tr class="title-row"><td><h3>Skills</h3></td></tr> - <tr> - <td>Spoken Languages:</td> - <td>German, English, Tamil</td> - </tr> - <tr> - <td>Programming Languages:</td> - <td>Rust, Python</td> - </tr> - <tr> - <td>Interests:</td> - <td>Software development, writing</td> - </tr> - <tr class="title-row"><td><h3>Education & Work</h3></td></tr> - <tr> - <td>2010 - 2018:</td> - <td>Abitur: Maria-Theresia-Gymnasium Munich</td> - </tr> - <tr> - <td>2022 - ?:</td> - <td>Software development apprenticeship at Dontenwill AG</td> - </tr> - <tr class="title-row"><td><h3>Contact & Social Media</h3></td></tr> - <tr> - <td>E-Mail:</td> - <td><a href="mailto:primary-v2@protonmail.com">primary-v2@protonmail.com</a></td> - </tr> - <tr> - <td>Github:</td> - <td><a href="https://github.com/WriterV2">WriterV2</a></td> - </tr> -</table> +<main> + <div class="about-me"> + <div class="card"> + <h3>Skills</h3> + <table> + <tr> + <td>Spoken Languages:</td> + <td>German, English, Tamil</td> + </tr> + <tr> + <td>Programming Languages:</td> + <td>Rust, Python</td> + </tr> + <tr> + <td>Interests:</td> + <td>Software development, writing</td> + </tr> + </table> + </div> + <div class="card"> + <h3>Education & Work</h3> + <table> + <tr> + <td>2010 - 2018:</td> + <td>Abitur: Maria-Theresia-Gymnasium Munich</td> + </tr> + <tr> + <td>2022 - ?:</td> + <td>Software development apprenticeship at Dontenwill AG</td> + </tr> + </table> + </div> + <div class="card"> + <h3>Contact & Social Media</h3> + <table> + <tr> + <td>E-Mail:</td> + <td><a href="mailto:primary-v2@protonmail.com">primary-v2@protonmail.com</a></td> + </tr> + <tr> + <td>Github:</td> + <td><a href="https://github.com/WriterV2">WriterV2</a></td> + </tr> + </table> + </div> + </div> +</main> {% endblock content %} diff --git a/templates/stories.html b/templates/stories.html index d3047d9..07ebb40 100644 --- a/templates/stories.html +++ b/templates/stories.html @@ -18,7 +18,7 @@ Despite my linguistic difficulties to express myself, my love for story telling </div> <div class="works"> {% for work in works | sort(attribute="last_update") | reverse %} - <a href="{{work.path_to_document}}" class="work-card" download> + <a href="{{work.path_to_document}}" class="work-card card" download> <div class="title-and-description"> <h3>{{work.title}}</h3> <p>{{work.description}}</p> |