commit 5d25896dad0a7879740891cc05202b367a63f31a
parent c417664b5c522815114d91e1920fe6b2952dff11
Author: jack <0x6A73@pm.me>
Date: Thu, 10 Mar 2022 03:05:30 -0700
initial dotfiles page + finally fix containers
Diffstat:
5 files changed, 81 insertions(+), 11 deletions(-)
diff --git 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>
diff --git a/index.html b/index.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 differ.
diff --git a/media/nord.png b/media/nord.png
Binary files differ.
diff --git a/style.css b/style.css
@@ -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;
+}
