From cc8e7a0656dccdff39b8c31e583719d203a24792 Mon Sep 17 00:00:00 2001 From: Marc Cataford Date: Sat, 30 Dec 2017 00:17:27 -0500 Subject: [PATCH] Reboot. --- .gitignore | 8 - about/index.html | 91 ++++ assets/git.svg | 2 + assets/github-square.png | Bin 794 -> 0 bytes assets/linkedin-square.png | Bin 592 -> 0 bytes assets/linkedin.svg | 2 + assets/main.css | 470 ++++++++++++++++++ assets/twitter-square.png | Bin 668 -> 0 bytes assets/twitter.svg | 2 + css/base.css | 56 +++ feed.xml | 14 + index.html | 88 +++- .../update/2017/12/26/welcome-to-jekyll.html | 99 ++++ style.css | 23 - 14 files changed, 797 insertions(+), 58 deletions(-) delete mode 100644 .gitignore create mode 100644 about/index.html create mode 100644 assets/git.svg delete mode 100644 assets/github-square.png delete mode 100644 assets/linkedin-square.png create mode 100644 assets/linkedin.svg create mode 100644 assets/main.css delete mode 100644 assets/twitter-square.png create mode 100644 assets/twitter.svg create mode 100644 css/base.css create mode 100644 feed.xml create mode 100644 jekyll/update/2017/12/26/welcome-to-jekyll.html delete mode 100644 style.css diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 65efd63..0000000 --- a/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ - -.project - -.settings/org.eclipse.wst.jsdt.ui.superType.name - -.settings/org.eclipse.wst.jsdt.ui.superType.container - -.settings/.jsdtscope diff --git a/about/index.html b/about/index.html new file mode 100644 index 0000000..a411654 --- /dev/null +++ b/about/index.html @@ -0,0 +1,91 @@ + + + + + + + + + About + + + + + + +
+ + + + + + + +
+ +
+
+
+ +
+

About

+
+ +
+

This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at jekyllrb.com

+ +

You can find the source code for the Jekyll new theme at: + +jekyll + / +minima

+ +

You can find the source code for Jekyll at + +jekyll + / +jekyll

+ +
+ +
+ +
+
+ + + + + + + + + diff --git a/assets/git.svg b/assets/git.svg new file mode 100644 index 0000000..e93091e --- /dev/null +++ b/assets/git.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/assets/github-square.png b/assets/github-square.png deleted file mode 100644 index 857e7e615fcc1b79652ae4527a5922d55c487034..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 794 zcmV+#1LgdQP)+yLhxHSUu=L5X6rP6&1XC^aI6NTfUWH+ei*1HSah7#fZ{@nzmP)Vs(Fhj zAbKHf0d>R_)*>(nC<1v$(Mg~OIOh{sBK_WvY$C46oIyYpSmG#p0vH3H0h7SAyuTLM z1RMm80-GIqtH4sn7^fck44g&`w+%Vq7(%Q|4rjDV`~>Lp;9m|rOk2Pe%o~9Xf#gU< zz@w((dvRMYz0B=!0b<>BR6q$a1tOdU{s5!EMtN@y;$2dZ*B}=1DDYdxL|B1X^c@p0 zr1;)$diED6YhudsS=7FzaGdOvfKSYy_tz}Rb#_(Z2qd?Y0G|ao2Fxn=)_d@%F|)v9 z51v@W^~7Gq?|{MAX8RPb{RUqxd`4hWX&>?6h%jj3w!%liw9+2%;E1qVX@7Sm@DZTS z|6d*)5q?^@t?&_`_V^nQjtH-mwmKpULfm3Hq)9qs@QR+CP9Z zK*NEfA!F3(x67lRSj6?j7v_G)>;cxv>m9&z;GZG30XzkEYVzfQuZGyR2?&AX(q|BO z4Qy|UTLxU##9RVa8S)KTa<)~#H=tkoodRA08)Q2GK4@az8*=qa&W;HPfd{hK9^ftT z5x5V$i}A0<Eb?BN9Pa&9bqWT@0Ih*PYpUtTJD?>~QDIIp=p@bMGuQ zH8nN=0%!0PZT!SmL8a4=v4YciCBKAjfl0^8CYqBbf2V@Phf8J=^O9DmT0mDagoDhE z5YWW#l%k7Z7j9*Fu&w&mAC!+-1jJUG$2f;METUC{fKC%yfDj+>4C}avo7gkLPhJFb%_5*Gg1M%B zQElLB!10Oxbq}8d&mEP_lP$c)s$}JA;0lhV%wsG<xshiNj5}2CMdDW81Ks{_1Lv_XV)sb010I{Q1kB(8 zzDVZ68ZHFv*6}Wl^ZKZKsmVkvo-KB`_w=|B+5^yL`ci7Ht3H(aq zxGVvM#jjex#MA<+rWQ~&|FwWr>v6$Ecd4UJWNm*ADg!1x&%aS2n eQ&Uqj<@^R*TL+`udX1F;0000 + \ No newline at end of file diff --git a/assets/main.css b/assets/main.css new file mode 100644 index 0000000..d341fb6 --- /dev/null +++ b/assets/main.css @@ -0,0 +1,470 @@ +/** + * Reset some basic elements + */ +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; } + +/** + * Basic styling + */ +body { + font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #111; + background-color: #fdfdfd; + -webkit-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + -o-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; } + +/** + * Set `margin-bottom` to maintain vertical rhythm + */ +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, +.highlight { + margin-bottom: 15px; } + +/** + * Images + */ +img { + max-width: 100%; + vertical-align: middle; } + +/** + * Figures + */ +figure > img { + display: block; } + +figcaption { + font-size: 14px; } + +/** + * Lists + */ +ul, ol { + margin-left: 30px; } + +li > ul, +li > ol { + margin-bottom: 0; } + +/** + * Headings + */ +h1, h2, h3, h4, h5, h6 { + font-weight: 400; } + +/** + * Links + */ +a { + color: #2a7ae2; + text-decoration: none; } + a:visited { + color: #1756a9; } + a:hover { + color: #111; + text-decoration: underline; } + .social-media-list a:hover { + text-decoration: none; } + .social-media-list a:hover .username { + text-decoration: underline; } + +/** + * Blockquotes + */ +blockquote { + color: #828282; + border-left: 4px solid #e8e8e8; + padding-left: 15px; + font-size: 18px; + letter-spacing: -1px; + font-style: italic; } + blockquote > :last-child { + margin-bottom: 0; } + +/** + * Code formatting + */ +pre, +code { + font-size: 15px; + border: 1px solid #e8e8e8; + border-radius: 3px; + background-color: #eef; } + +code { + padding: 1px 5px; } + +pre { + padding: 8px 12px; + overflow-x: auto; } + pre > code { + border: 0; + padding-right: 0; + padding-left: 0; } + +/** + * Wrapper + */ +.wrapper { + max-width: -webkit-calc(800px - (30px * 2)); + max-width: calc(800px - (30px * 2)); + margin-right: auto; + margin-left: auto; + padding-right: 30px; + padding-left: 30px; } + @media screen and (max-width: 800px) { + .wrapper { + max-width: -webkit-calc(800px - (30px)); + max-width: calc(800px - (30px)); + padding-right: 15px; + padding-left: 15px; } } + +/** + * Clearfix + */ +.wrapper:after, .footer-col-wrapper:after { + content: ""; + display: table; + clear: both; } + +/** + * Icons + */ +.icon > svg { + display: inline-block; + vertical-align: middle; } + .icon > svg path { + fill: #828282; } + +.social-media-list .icon { + padding-right: 5px; } +.social-media-list li + li { + padding-top: 5px; } + +/** + * Site header + */ +.site-header { + border-top: 5px solid #424242; + border-bottom: 1px solid #e8e8e8; + min-height: 55.95px; + position: relative; } + +.site-title { + font-size: 26px; + font-weight: 300; + line-height: 54px; + letter-spacing: -1px; + margin-bottom: 0; + float: left; } + .site-title, .site-title:visited { + color: #424242; } + +.site-nav { + float: right; + line-height: 54px; } + .site-nav .nav-trigger { + display: none; } + .site-nav .menu-icon { + display: none; } + .site-nav .page-link { + color: #111; + line-height: 1.5; } + .site-nav .page-link:not(:last-child) { + margin-right: 20px; } + @media screen and (max-width: 600px) { + .site-nav { + position: absolute; + top: 9px; + right: 15px; + background-color: #fdfdfd; + border: 1px solid #e8e8e8; + border-radius: 5px; + text-align: right; } + .site-nav label[for="nav-trigger"] { + display: block; + float: right; + width: 36px; + height: 36px; + z-index: 2; + cursor: pointer; } + .site-nav .menu-icon { + display: block; + float: right; + width: 36px; + height: 26px; + line-height: 0; + padding-top: 10px; + text-align: center; } + .site-nav .menu-icon > svg path { + fill: #424242; } + .site-nav input ~ .trigger { + clear: both; + display: none; } + .site-nav input:checked ~ .trigger { + display: block; + padding-bottom: 5px; } + .site-nav .page-link { + display: block; + padding: 5px 10px; + margin-left: 20px; } + .site-nav .page-link:not(:last-child) { + margin-right: 0; } } + +/** + * Site footer + */ +.site-footer { + border-top: 1px solid #e8e8e8; + padding: 30px 0; } + +.footer-heading { + font-size: 18px; + margin-bottom: 15px; } + +.contact-list, +.social-media-list { + list-style: none; + margin-left: 0; } + +.footer-col-wrapper { + font-size: 15px; + color: #828282; + margin-left: -15px; } + +.footer-col { + float: left; + margin-bottom: 15px; + padding-left: 15px; } + +.footer-col-1 { + width: -webkit-calc(35% - (30px / 2)); + width: calc(35% - (30px / 2)); } + +.footer-col-2 { + width: -webkit-calc(20% - (30px / 2)); + width: calc(20% - (30px / 2)); } + +.footer-col-3 { + width: -webkit-calc(45% - (30px / 2)); + width: calc(45% - (30px / 2)); } + +@media screen and (max-width: 800px) { + .footer-col-1, + .footer-col-2 { + width: -webkit-calc(50% - (30px / 2)); + width: calc(50% - (30px / 2)); } + + .footer-col-3 { + width: -webkit-calc(100% - (30px / 2)); + width: calc(100% - (30px / 2)); } } +@media screen and (max-width: 600px) { + .footer-col { + float: none; + width: -webkit-calc(100% - (30px / 2)); + width: calc(100% - (30px / 2)); } } +/** + * Page content + */ +.page-content { + padding: 30px 0; } + +.page-heading { + font-size: 20px; } + +.post-list { + margin-left: 0; + list-style: none; } + .post-list > li { + margin-bottom: 30px; } + +.post-meta { + font-size: 14px; + color: #828282; } + +.post-link { + display: block; + font-size: 24px; } + +/** + * Posts + */ +.post-header { + margin-bottom: 30px; } + +.post-title { + font-size: 42px; + letter-spacing: -1px; + line-height: 1; } + @media screen and (max-width: 800px) { + .post-title { + font-size: 36px; } } + +.post-content { + margin-bottom: 30px; } + .post-content h2 { + font-size: 32px; } + @media screen and (max-width: 800px) { + .post-content h2 { + font-size: 28px; } } + .post-content h3 { + font-size: 26px; } + @media screen and (max-width: 800px) { + .post-content h3 { + font-size: 22px; } } + .post-content h4 { + font-size: 20px; } + @media screen and (max-width: 800px) { + .post-content h4 { + font-size: 18px; } } + +/** + * Syntax highlighting styles + */ +.highlight { + background: #fff; } + .highlighter-rouge .highlight { + background: #eef; } + .highlight .c { + color: #998; + font-style: italic; } + .highlight .err { + color: #a61717; + background-color: #e3d2d2; } + .highlight .k { + font-weight: bold; } + .highlight .o { + font-weight: bold; } + .highlight .cm { + color: #998; + font-style: italic; } + .highlight .cp { + color: #999; + font-weight: bold; } + .highlight .c1 { + color: #998; + font-style: italic; } + .highlight .cs { + color: #999; + font-weight: bold; + font-style: italic; } + .highlight .gd { + color: #000; + background-color: #fdd; } + .highlight .gd .x { + color: #000; + background-color: #faa; } + .highlight .ge { + font-style: italic; } + .highlight .gr { + color: #a00; } + .highlight .gh { + color: #999; } + .highlight .gi { + color: #000; + background-color: #dfd; } + .highlight .gi .x { + color: #000; + background-color: #afa; } + .highlight .go { + color: #888; } + .highlight .gp { + color: #555; } + .highlight .gs { + font-weight: bold; } + .highlight .gu { + color: #aaa; } + .highlight .gt { + color: #a00; } + .highlight .kc { + font-weight: bold; } + .highlight .kd { + font-weight: bold; } + .highlight .kp { + font-weight: bold; } + .highlight .kr { + font-weight: bold; } + .highlight .kt { + color: #458; + font-weight: bold; } + .highlight .m { + color: #099; } + .highlight .s { + color: #d14; } + .highlight .na { + color: #008080; } + .highlight .nb { + color: #0086B3; } + .highlight .nc { + color: #458; + font-weight: bold; } + .highlight .no { + color: #008080; } + .highlight .ni { + color: #800080; } + .highlight .ne { + color: #900; + font-weight: bold; } + .highlight .nf { + color: #900; + font-weight: bold; } + .highlight .nn { + color: #555; } + .highlight .nt { + color: #000080; } + .highlight .nv { + color: #008080; } + .highlight .ow { + font-weight: bold; } + .highlight .w { + color: #bbb; } + .highlight .mf { + color: #099; } + .highlight .mh { + color: #099; } + .highlight .mi { + color: #099; } + .highlight .mo { + color: #099; } + .highlight .sb { + color: #d14; } + .highlight .sc { + color: #d14; } + .highlight .sd { + color: #d14; } + .highlight .s2 { + color: #d14; } + .highlight .se { + color: #d14; } + .highlight .sh { + color: #d14; } + .highlight .si { + color: #d14; } + .highlight .sx { + color: #d14; } + .highlight .sr { + color: #009926; } + .highlight .s1 { + color: #d14; } + .highlight .ss { + color: #990073; } + .highlight .bp { + color: #999; } + .highlight .vc { + color: #008080; } + .highlight .vg { + color: #008080; } + .highlight .vi { + color: #008080; } + .highlight .il { + color: #099; } diff --git a/assets/twitter-square.png b/assets/twitter-square.png deleted file mode 100644 index 55dd1535af4514f1eeee6d70641cfe821dab8913..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 668 zcmV;N0%QG&P)QVs0bnm=EcI+&dxtUL9nos6p9zo z#!9UG2YhJ+8wIt}LQEk6u@WsTH7Y0~h*gjr$$1uYM$AOD&DNm@LZtELKW1oz<36>(~610T^G~l0!@gcVW;0R)itk zk)cR{8b*2yT?WIrm~!EQ!QcIM` z0DpVzzliHNf~`1!^Z5E-pLu*w^wW{pq?*C&E`8eVH;!j$?8YS=!wKQWWYsA&z#fcZ zE=PdVIkcwn43F0%z>3ugHG-S6H@qL>3q_j|VOV`xj{r^VThn(MPtjP@?`2M{Nnt+3 zGz$$dlX1-<;pOkSFd<*%)T(vSD>OhIzi>E5jl8Sejfh?}K*}=uL0B=Sbsyh(m)rdb zKDrWn0%HYhy^H9TG6!z;ZF!Y3`Ci+5CRVJ0t9=@8bD@h?DFK@JgNMQ{n#vH~4=TVS z_V!^O&gIZ4EkF}bq@UWxg}q{+0h)Lra%Rn7sC8XljZy=&+XL*#QFj>k6Y7@|pn*3y zBj2Vtibo0N3k@)jvp9)eJ=8me&xz&>e*z1*hJ#&dj0-Ex+dhm(0~B$n|I{-0Q`j4J zwv0~+dqke|Kpr~Q+4P@PViT{>19qQ$%laV}V6FrssU&$hYU6y|P5!T7b^`>soNB&J z&0wCyauMd+OyG|2m3XN{(@QOl+rkj8sHmve;QRw|M3|eJhzc|S0000 + \ No newline at end of file diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..0811aad --- /dev/null +++ b/css/base.css @@ -0,0 +1,56 @@ +body { + margin: 0; + padding: 0; } + body h1, body h2, body h3, body h4, body h5, body h6 { + font-family: "Raleway", sans-serif; } + body > header { + display: flex; + padding: 0.5em 5%; + background-color: #fff; + position: fixed; + top: 0; + width: calc(100vw - 10%); } + body > header > img { + border-radius: 50%; } + body > header nav.sections { + flex: 0 1 auto; } + body > header nav.sections ul { + list-style: none; + padding: 0; } + body > header nav.sections ul li { + display: inline-block; } + body > header nav.sections ul li a { + padding: 1em; + text-decoration: none; + color: #000; + text-transform: uppercase; + font-family: 'Raleway', sans-serif; } + body > header nav.sections ul li a:first-child { + padding-left: 2em; } + body > header nav.social { + display: flex; + align-items: center; + justify-content: center; + margin-left: auto; } + body > header nav.social a img { + max-height: 35px; + opacity: 0.7; + transition: 0.5s; } + body > header nav.social a:hover img { + opacity: 1; } + body > main { + max-width: 90%; + margin: 0 auto; } + body > main a { + background-color: rgba(184, 222, 255, 0.4); + text-decoration: none; + color: #000; + margin-bottom: -2px; + padding: 0 0.25em; } + body > main a:hover { + background-color: rgba(184, 222, 255, 0.8); } + body > main a:visited { + color: inherit; } + body > main aside.banner { + text-align: center; + font-size: 4em; } diff --git a/feed.xml b/feed.xml new file mode 100644 index 0000000..4cbe5f9 --- /dev/null +++ b/feed.xml @@ -0,0 +1,14 @@ +Jekyll2017-12-30T00:13:11-05:00http://localhost:4000/Your awesome titleWrite an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. +Welcome to Jekyll!2017-12-26T16:21:30-05:002017-12-26T16:21:30-05:00http://localhost:4000/jekyll/update/2017/12/26/welcome-to-jekyll<p>You’ll find this post in your <code class="highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p> + +<p>To add new posts, simply add a file in the <code class="highlighter-rouge">_posts</code> directory that follows the convention <code class="highlighter-rouge">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p> + +<p>Jekyll also offers powerful support for code snippets:</p> + +<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span> + <span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span> +<span class="k">end</span> +<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span> +<span class="c1">#=&gt; prints 'Hi, Tom' to STDOUT.</span></code></pre></figure> + +<p>Check out the <a href="http://jekyllrb.com/docs/home">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href="https://github.com/jekyll/jekyll">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href="https://talk.jekyllrb.com/">Jekyll Talk</a>.</p>You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated. \ No newline at end of file diff --git a/index.html b/index.html index 480e291..8fbc619 100644 --- a/index.html +++ b/index.html @@ -1,42 +1,76 @@ - + + + + - - - Hello! - - - + Hello! -
+ -
+ +
- + -

Hello

+
+ -
- Made with ❤ and cold coffee in the Montreal -> Toronto red-eye. -
+
+ + + + + + + + + + + + + + + + + + + - +
+ +

My name is Marc and I am a Computer Engineering student at McGill University planning to graduate in May 2018. I am always open to hear about projects I could pitch into and would like to find full-time employment in the Toronto area starting Summer 2018. In the meantime, I would love to

+ +

Formal training

+ +

During my engineering training, I have worked extensively with Java, Python and C/C++, used MATLAB a handful of times and dabbled with analog and digital electronics using the Arduino and Raspberry Pi platforms. My coursework included experimentation with robotics through the Java-based Lego Mindstorms system and PIC microcontrollers/hand-soldered analog circuits, digital systems architecture using FPGAs and game development in the context of my senior design project which consists in the elaboration of a real-time news game engine for TB2: Mali’s Ancient Manuscripts, in collaboration with The Pulitzer Center.

+ +

Journalism

+ +

Between 2014 and 2017, I have served as Web editor at The McGill Daily, one of Canada’s oldest university publications, continually publishing since the early 1911. During my tenure, I handled web development requests related to any web content we published, and maintained the publication’s website and social media presence. I have also singlehandedly rebuild the website in the Summer of 2016 to meet new requirements from the editorial team.

+ +

Since 2016, I have been involved in The Daily Publications’ Society Board of Directors, first as an editorial representative to The Daily and then as the Society’s Chairperson, starting July 2017.

+ +

Teaching

+ +

I have taught French for seven years at Cégep du Vieux-Montréal before starting to tutor and teach programming. I have been a Chegg Tutors tutor since 2013, providing assistance to hundreds of students with their Java, C/C++, Python, PHP, Javascript, MATLAB, Assembly and web development assignments, and taught introductory Python, Java and Web development for four semesters at the Students’ Society of McGill University’s MiniCourses program.

+ +
+ +
+
+ + \ No newline at end of file diff --git a/jekyll/update/2017/12/26/welcome-to-jekyll.html b/jekyll/update/2017/12/26/welcome-to-jekyll.html new file mode 100644 index 0000000..0f82ad6 --- /dev/null +++ b/jekyll/update/2017/12/26/welcome-to-jekyll.html @@ -0,0 +1,99 @@ + + + + + + + + + Welcome to Jekyll! + + + + + + +
+ + + + + + + +
+ +
+
+
+ +
+

Welcome to Jekyll!

+

+ +

+
+ +
+

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

+ +

To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

+ +

Jekyll also offers powerful support for code snippets:

+ +
def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+ +

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.

+ + +
+ + +
+ +
+
+ + + + + + + + + diff --git a/style.css b/style.css deleted file mode 100644 index 826db6d..0000000 --- a/style.css +++ /dev/null @@ -1,23 +0,0 @@ -body, html { margin: 0; } -main { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; flex-direction: column; } -.main_matter { display: flex; width: 40%; align-items: center; animation: 1s ease-out 0s 1 onload_hello; } -.hi { width: 1em; word-wrap: break-word; text-transform: uppercase; font-size: 4em; margin: 0.5rem; } -p > a { font-weight: bold; } -footer { text-align: center; font-size: 0.8rem; } -footer em > span { font-style: normal; } - -.social { display: flex; flex-direction: column; justify-content: center; margin-right: 1em; } -.social img { transition: 0.5s; } -.social img:hover { opacity: 0.5; } - -@keyframes onload_hello { - 0% { - opacity: 0; - margin-top: -100px; - } - - 100% { - opacity: 1; - margin-top: 0; - } -} \ No newline at end of file