diff options
author | jack <[email protected]> | 2022-03-10 03:05:30 -0700 |
---|---|---|
committer | jack <[email protected]> | 2022-03-10 03:05:30 -0700 |
commit | 5d25896dad0a7879740891cc05202b367a63f31a (patch) | |
tree | c602c72b3ee5be981f547b2e2d5a962edb2c195c | |
parent | c417664b5c522815114d91e1920fe6b2952dff11 (diff) | |
download | site-5d25896dad0a7879740891cc05202b367a63f31a.tar.gz site-5d25896dad0a7879740891cc05202b367a63f31a.zip |
initial dotfiles page + finally fix containers
-rw-r--r-- | dotfiles.html | 54 | ||||
-rw-r--r-- | index.html | 10 | ||||
-rw-r--r-- | media/dracula.png | bin | 0 -> 68930 bytes | |||
-rw-r--r-- | media/nord.png | bin | 0 -> 119132 bytes | |||
-rw-r--r-- | style.css | 28 |
5 files changed, 81 insertions, 11 deletions
diff --git a/dotfiles.html b/dotfiles.html index fcf0250..f010602 100644 --- a/dotfiles.html +++ b/dotfiles.html @@ -10,9 +10,61 @@ <body> <button type="button" onclick="window.location.href='index.html'" class="btn btn2"><i class="fa-solid fa-house"></i>home</button> <img src="media/pusheen_computer.png" alt="pusheen on the computer" class="mx-auto d-block" width="250" height="250"> - <div class="container-fluid c2 text-center border rounded"> + <div class="container-fluid peach text-center rounded"> <h3>dotfiles</h3> <p>linux configuration files & notes</p> </div> + <div class="container blue rounded desktop-cont"> + <div class="row"> + <div class="col-8"> + <img src="media/nord.png" class="rounded float-left desktop" alt="nord desktop"> + </div> + <div class="col-4"> + <h2 class="text-center"><a href="https://github.com/waffle87/dots" target="_blank">nord</a></h2> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. Proin tristique semper varius. Quisque a placerat leo. Praesent tincidunt nec arcu eget egestas. Vestibulum tristique metus ut odio posuere ultrices. + Donec id velit eget lacus euismod ornare eu ac leo. + </p> + <br> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. Proin tristique semper varius. Quisque a placerat leo. Praesent tincidunt nec arcu eget egestas. Vestibulum tristique metus ut odio posuere ultrices. + Donec id velit eget lacus euismod ornare eu ac leo. + </p> + <br> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. Proin tristique semper varius. Quisque a placerat leo. Praesent tincidunt nec arcu eget egestas. Vestibulum tristique metus ut odio posuere ultrices. + </p> + </div> + </div> + </div> + <div class="container lav rounded desktop-cont"> + <div class="row"> + <div class="col-4"> + <h2 class="text-center"><a href="https://github.com/waffle87/dots/tree/pluto" target="_blank">dracula</a></h2> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. Proin tristique semper varius. Quisque a placerat leo. Praesent tincidunt nec arcu eget egestas. Vestibulum tristique metus ut odio posuere ultrices. + Donec id velit eget lacus euismod ornare eu ac leo. + </p> + <br> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. Proin tristique semper varius. Quisque a placerat leo. Praesent tincidunt nec arcu eget egestas. Vestibulum tristique metus ut odio posuere ultrices. + Donec id velit eget lacus euismod ornare eu ac leo. + </p> + <br> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. + </p> + </div> + <div class="col-8"> + <img src="media/dracula.png" class="rounded float-right desktop" alt="dracula desktop"> + </div> + </div> + </div> </body> </html> @@ -10,13 +10,13 @@ <body> <button type="button" onclick="window.location.href='index.html'" class="btn btn1"><i class="fa-solid fa-house"></i>home</button> <img src="media/pusheen_hi.png" alt="pusheen says hi" class="mx-auto d-block" width="250" height="250"> - <div class="container-fluid c1 text-center border rounded"> + <div class="container-fluid lav text-center rounded"> <h3>about</h3> <p>small keyboard enjoyer & open source enthusiast</p> </div> <div class="row"> - <div class="col-md-6"> - <div class="container row1 border rounded"> + <div class="col col-margins-l"> + <div class="container row1 rounded"> <h3 class="text-center">info</h3> <i class="fa-brands fa-github fa-lg"></i> <a href="https://github.com/waffle87" target="_blank">waffle87</a> @@ -31,8 +31,8 @@ <a href="media/jack.gpg" class="gpgkey" download>38FE2D9C474B1286</a> </div> </div> - <div class="col-md-6"> - <div class="container row1 border rounded"> + <div class="col col-margins-r"> + <div class="container row1 rounded"> <h3 class="text-center">pages</h3> <i class="fa-solid fa-angle-right"></i> <a href="dotfiles.html">dotfiles</a> diff --git a/media/dracula.png b/media/dracula.png Binary files differnew file mode 100644 index 0000000..ad3999c --- /dev/null +++ b/media/dracula.png diff --git a/media/nord.png b/media/nord.png Binary files differnew file mode 100644 index 0000000..806c92f --- /dev/null +++ b/media/nord.png @@ -77,26 +77,25 @@ body { color: var(--dark); } -.c1 { /*home*/ +.lav { background-color: var(--lavender); margin-bottom: 10px; max-width: 90%; - } -.c2 { /*dotfiles*/ +.peach { background-color: var(--peach); margin-bottom: 10px; max-width: 90%; } -.c3 { /*keyboards*/ +.c3 { background-color: var(--yellow); margin-bottom: 10px; max-width: 90%; } -.c4 { /*configuration*/ +.blue { background-color: var(--blue); margin-bottom: 10px; max-width: 90%; @@ -108,6 +107,14 @@ body { max-width: 90%; } +.col-margins-l { + margin-left: 5%; +} + +.col-margins-r { + margin-right: 5%; +} + .row1 { background-color: var(--flamingo); color: var(--dark); @@ -138,3 +145,14 @@ a:hover { } .gpgkey { font-family: 'Source Code Pro', monospace; } + +.desktop { + max-width: 100%; + max-height: 100%; +} + +.desktop-cont { + padding-top: 14px; + padding-bottom: 14px; + margin-bottom: 15px; +} |