first commit

1 files changed, 194 insertions, 0 deletions

diff --git a/css/website.css b/css/website.css
new file mode 100644
index 0000000..77e8626
--- /dev/null
+++ b/css/website.css
@@ -0,0 +1,194 @@
+html {
+    color: rgba(220,220,220);
+    background-color: #181a1b;
+}
+
+body {
+    height: 100vh;
+	font-family: 'Inter';
+	line-height: 1.7;
+	margin: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.center {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+} 
+
+.content {
+    width: 900px;
+    max-width: 95vw;
+}
+
+img {
+    max-width: 100%;
+}
+
+blockquote {
+	background-color: rgba(255,255,255,0.10);
+    border-left: 10px solid #eee;
+    margin: 0;
+    padding: 0 2rem;
+}
+
+code {
+	display: inline-block;
+    background: rgba(0,0,0,0.20);
+    padding: 5px;
+}
+
+/* for large code blocks */
+pre {
+    overflow-x: auto;
+}
+
+h1 {
+	line-height: normal;
+	font-size: 300%;
+	color: #de6b15;
+}
+
+h2 {
+	font-size: 200%
+}
+
+h3 {
+	font-size: 125%;
+}
+
+a {
+    color: rgba(81,185,255);
+	text-decoration: none;
+}
+
+a:hover {
+    color: rgba(81,185,255,0.50);
+	text-decoration: none;
+}
+
+.date {
+	margin: 10px;
+    text-align: center;
+}
+
+.datebox
+{
+    padding-top: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-self: center;
+}
+
+/* icon/button stuff */
+@font-face {
+    font-family: 'Material Symbols Rounded';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v120/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOc7TOVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
+}
+
+.icon {
+    font-family: 'Material Symbols Rounded';
+}
+
+.iconbutton {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 10px;
+    border-radius: 100px;
+    width: 40px;
+    height: 40px;
+    border-width: 0px;
+    background-color: #272a2c;
+    color: white;
+    font-size: 20px;
+    text-align: center;
+    user-select: none;
+}
+
+.iconholder {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 10px;
+    border-radius: 100px;
+    width: 40px;
+    height: 40px;
+    border-width: 0px;
+    /* background-color: #272a2c; */
+    color: rgb(133, 133, 133);
+    font-size: 20px;
+    text-align: center;
+    user-select: none;
+}
+
+.iconbutton:hover {
+    color: rgba(255, 255, 255, 0.5);
+    background-color: #272a2c85;
+}
+
+.wrlabel
+{
+    display: flex;
+    margin: 5px 0px;
+    border-width: 0px;
+    background-color: transparent;
+    height: 40px;
+    font-size: 20px;
+    padding: 0px 10px;
+    align-items: center;
+    justify-content: center;
+}
+
+.wrbox
+{
+    background-color: rgba(0, 0, 0, 0.411);
+    margin-bottom: 20px;
+    margin-top: 40px;
+    display: flex;
+    flex-direction: row;
+    align-self: center;
+    border-radius: 500px;
+}
+
+.wrbutton
+{
+    z-index: 1;
+    margin: 5px;
+    background-color: transparent;
+    border-radius: 100%;
+}
+
+.wrbutton:hover {
+    background-color: #0000004d;
+}
+
+.homebutton
+{
+    margin: 40px 0px 0px 40px;
+}
+
+@media only screen 
+and (max-device-width: 600px)
+{
+.homebutton
+{
+    margin: 10px 0px 0px 10px;
+}    
+
+.wrbox
+{
+    padding-bottom: 5px;
+}
+}
+
+