commit c203a6b8a0fd47f671b2ee4d30a3eb9d55f7aae8 Author: Rick Rongen Date: Mon Feb 12 17:17:04 2018 +0100 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2bf4988 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +# Created by .ignore support plugin (hsz.mobi) +### Sass template +.sass-cache/ +*.css.map +.idea/ + +# specific css files +style/main.css \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..ce75b96 --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + + + + + + + Rick Rongen + + + +
+
+
+

Rick Rongen

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eius eveniet facilis, ipsum laborum nulla praesentium quod soluta. Cupiditate deserunt dolores laboriosam nulla pariatur provident quas, rem reprehenderit sed voluptatibus. +
+
+ Contact + Portfolio +
+
+
+
+
+

Blog Post

+ + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id suscipit unde vero voluptas? Aut consectetur cum dolores, maiores necessitatibus obcaecati porro quia quis quo veniam. Illo porro quis quod! + +
+
+

Blog Post

+ + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id suscipit unde vero voluptas? Aut consectetur cum dolores, maiores necessitatibus obcaecati porro quia quis quo veniam. Illo porro quis quod! + +
+
+

Blog Post

+ + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id suscipit unde vero voluptas? Aut consectetur cum dolores, maiores necessitatibus obcaecati porro quia quis quo veniam. Illo porro quis quod! + +
+
+
+

Nice Quote

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque corporis ducimus ex illum iure labore laudantium libero magni officia perspiciatis, quasi quibusdam rem, sint tempora totam veniam vero voluptatibus? +
+
+
+

Portfolio

+
+
+ + diff --git a/style/main.sass b/style/main.sass new file mode 100644 index 0000000..6a64c83 --- /dev/null +++ b/style/main.sass @@ -0,0 +1,125 @@ +$primary: #39A2FB +$secondary: #F1F9FF +$tertiary: #2699FB +$fourth: #BCE0FD + +$mediaMaxScreenSizeMobile: 1200px + +$white: #FFFFFF + +@import "reset" +@import url('https://fonts.googleapis.com/css?family=Roboto') + +html, body + height: 100% + font-family: 'Roboto', sans-serif + +h3 + font-size: 40px + font-weight: bold + +h5 + font-size: 24px + +.center + display: inline-block + width: 100% + text-align: center + +.contentBlock + min-height: 300px + width: 100% + padding: 2em + box-sizing: border-box + +#navbar + width: 100% + height: 4em + background: $primary + line-height: 4em + + >.navbaritem + display: inline-block + color: $white + vertical-align: middle + + &#navname + font-weight: bold + margin-left: 1em + margin-right: 6em + font-size: x-large + + +#innerNavbar + >.navitem + margin: 0 1em + display: inline-block + + +#content + height: calc(100% - 4em) + width: 100% + +#main + display: grid + height: 100% + background: $secondary + +#innerMain + color: $tertiary + text-align: center + max-width: 800px + margin: auto + >h3 + font-weight: bold + + >.intro + margin-top: 2em + + >.buttons + margin-top: 4em + +#blogposts + background: $white + display: grid + grid-template-columns: repeat(3, auto) + grid-template-rows: auto + + &>.blogpost + padding: 0 1em + &:first-child + padding-left: 0 + &:last-child + padding-right: 0 + + @media screen and (max-width: $mediaMaxScreenSizeMobile) + grid-template-columns: auto + grid-template-rows: repeat(3, auto) + &>.blogpost + padding-top: 2em + &:first-child + padding-top: 0 + padding-left: 1em + &:last-child + padding-right: 1em + +#quote + background-color: $tertiary + color: $white + >#innerQuote + margin-top: 2em + max-width: 900px + margin-left: auto + margin-right: auto + +.button + padding: 1em 2em + border-radius: 8px + border: 1px solid $tertiary + margin: 0 2em + color: $primary + text-decoration: none + + &.button-dark + background: $tertiary + color: $white \ No newline at end of file diff --git a/style/reset.scss b/style/reset.scss new file mode 100644 index 0000000..013ff52 --- /dev/null +++ b/style/reset.scss @@ -0,0 +1,40 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + +/* HTML5 display-role reset for older browsers */ + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + +body { + line-height: 1; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote { + &:before, &:after { + content: ''; + content: none; } } + +q { + &:before, &:after { + content: ''; + content: none; } } + +table { + border-collapse: collapse; + border-spacing: 0; }