icy does git — site: 104ef222884f011935d14fce536f1e38dfcbc961

Rewrite CSS

Huge clean up -- removes a lot of useless code.

Signed-off-by: Anirudh Oppiliappan <x@icyphox.sh>

Anirudh Oppiliappan x@icyphox.sh

Tue, 17 Mar 2020 13:52:39 +0530

commit

104ef222884f011935d14fce536f1e38dfcbc961

parent

aeb5040362059210aaf0ad6fd5fc9c8370bc4a75

8 files changed, 218 insertions(+), 292 deletions(-)

jump to

bin/update_index.py

pages/about.md

static/style.css

templates/404.html

templates/about.html

templates/blogindex.html

templates/index.html

templates/text.html

M bin/update_index.py → bin/update_index.py

@@ -65,5 +65,4 @@ url = "/blog/" + fname
     new_line = f"| [{meta['title']}]({url}) | {meta['date']} |"
     lines.append(new_line)
 
-update_index(lines)
 update_blog(lines[0])

M pages/about.md → pages/about.md

@@ -25,7 +25,7 @@ to stick to subgenres of metal, specifically---metalcore and deathcore.
 
 Here are some of my links:
 
-- [Lobsters](https://lobsters/u/icyphox)
+- [Lobsters](https://lobste.rs/u/icyphox)
 - [Hacker News](https://news.ycombinator.com/user?id=Icyphox)
 - [Reddit](https://reddit.com/u/icyphox)
 - [Steam](https://steamcommunity.com/id/icyphox)

M static/style.css → static/style.css

@@ -7,124 +7,128 @@ 'cv03' 1, 'cv02' 1, 'cv04' 1, 'tnum' 1;
   }
 }
 
-html,
+:root {
+  --cyan: #00cece;
+  --light-gray: #eee;
+  --gray: gray;
+  --code: #666;
+  --dark: #222;
+  --sel: #444;
+}
+
 body {
-  /*background: #151B1B*/;
+  text-align: center;
 }
 
-.container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  color: #222;
+html {
+  font-size: 18px;
+  line-height: 1.5;
 }
 
-.container-text {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  color: #222;
+.navbar {
+  margin: 2px 0;
 }
 
+.content {
+  text-align: left;
+  margin: 0 auto;
+  padding: 2rem 0;
+  width: 97%;
+  max-width: 650px;
+}
 
-.introduction {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
+@media only screen and (min-width: 1080px) {
+  .content {
+    margin: 0 auto;
+    width: 50%;
+    max-width: 650px;
+  }
+  html {
+    font-size: 18px;
+  }
 }
 
-.content {
-  position: relative;
-  font-size: 18px;
-  top: 10%;
-  left: 30%;
-  right: 30%;
-  width: 40%;
-  line-height: 1.8;
+@media only screen and (min-width: 1400px) {
+  .content {
+    margin: 0 auto;
+    width: 50%;
+    max-width: 650px;
+  }
+  html {
+    font-size: 18px;
+  }
 }
 
-pre {
+pre, pre code {
   padding: 10px;
+  color: var(--code);
+  word-wrap: break-word;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  border: 0px solid transparent;
+  border-radius: 5px;
 }
 
-pre, pre code {
-    color: #666;
-    word-wrap: break-word;
-    overflow-x: auto;
-    white-space: pre-wrap;
-    white-space: -moz-pre-wrap;
-    white-space: -pre-wrap;
-    white-space: -o-pre-wrap;
-    border: 0px solid transparent;
-    border-radius: 5px;
-}
 
 code {
-    color: #00cece;
+    color: var(--cyan); 
     padding: 2px;
     border: 0px solid transparent;
     border-radius: 5px;
     border-bottom: unset;
 }
 
-a > code {
-    transition: all 200ms;
-}
-
-
-details > summary {
-  list-style: none;
-  color: gray;
-  cursor: pointer;
+.intro {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-details > summary::-webkit-details-marker {
-  display: none;
+.logo {
+  width: 300px;
 }
 
-.logo {
-  width: 220px;
-  padding-bottom: 60px;
+.tagline {
+  font-size: 25px;
+  font-style: monospace;
+  color: var(--gray);
+  text-align: center;
 }
 
-.footer {
-  color: gray;
+footer {
+  color: var(--gray);
   bottom: 20px;
-  position: absolute;
   width: 100%;
   text-align: center;
   margin-bottom: 20px;
 }
 
-.header {
-  color: cyan;
+header {
+  color: var(--cyan);
   top: 30px;
   display: inline-block;
-  position: absolute;
   width: 100%;
   align: center;
   text-align: center;
 }
 
-.header a {
+header a {
   margin-right: 20px;
 }
 
-.header a:last-child {
+header a:last-child {
   margin-right: 0
 }
 
 .muted {
-  color: gray
+  color: var(--gray);
 }
 
 .muted a {
-  color: #00cece;
+  color: var(--cyan);
 	border-bottom: unset;
 }
 
@@ -144,48 +148,18 @@ text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.navbar a {
-  border-bottom: unset;
-}
-
-.navbar a:hover {
-	background: #eee;
-}
-
-.posts a {
-  border-bottom: unset;
-}
-
-.posts a:hover {
-	background: #eee;
-}
-
-/*a {
-	color: gray;
-	margin: 0;
-	transition: all 200ms;
-	text-decoration: none;
-  outline: 0;
-}*/
-
 a {
-  color: gray;
+  color: var(--gray);
   margin: 0;
   transition: all 200ms;
   text-decoration: none;
   outline: 0;
 }
 
-/*a:hover {
-  color: #021012;
-  background: cyan;
-  border-bottom: 1px solid cyan;
-}*/
-
 a:hover {
-  color: #222;
-	background: #eee;
-  border-bottom: 1px solid #00cece;
+  color: var(--dark);
+	background: var(--light-gray);
+  border-bottom: 1px solid var(--cyan);
 }
 
 .left {
@@ -204,14 +178,6 @@ display: inline-block;
   margin-right: 30px;
 }
 
-.noselect {
-  -webkit-touch-callout:none;
-  -webkit-user-select:none;
-  -khtml-user-select:none;
-  -moz-user-select:none;
-  -ms-user-select:none;
-  user-select:none
-}
 
 img {
   max-width: 100%;
@@ -220,7 +186,6 @@ display: block;
   border: 0px solid transparent;
   border-radius: 5px;
 }
-
 
 
 footer img {
@@ -252,17 +217,16 @@ }
 
 .subtitle {
   font-style: italic;
-  color: #222;
+  color: var(--dark);
   padding-bottom: 30px;
 }
-
 
 h1, h2, h3 {
   font-weight: normal;
 }
 
 h2 { 
-  color: gray;
+  color: var(--gray);
 }
 
 h3 {
@@ -274,8 +238,8 @@ bottom: 2em;
 }
 
 blockquote {
-  border-left: 0.25rem solid gray;
-  color: gray;
+  border-left: 0.25rem solid var(--gray);
+  color: var(--gray);
   font-style: italic;
   margin: .8rem 0;
   padding: .5rem 1rem
@@ -286,7 +250,7 @@ width: 20%;
 }
 
 ::selection {
-  background-color: #444;
+  background-color: var(--sel);
   color: white;
 }
 
@@ -305,22 +269,6 @@ .right a:last-child {
     margin-right: 0;
   }
   
-/*  .container-text {
-    overflow-y: auto;
-  }*/
-
-  .content {
-    left: 5%;
-    right: 5%;
-    bottom: 10%;
-    width: 90%;
-    font-size: 17px;
-  }
-
-  .content h1, h2, h3 {
-    line-height: 1.5;
-  }
-
   pre {
     overflow-x: auto;
   }

M templates/404.html → templates/404.html

@@ -1,37 +1,33 @@ 
 <!DOCTYPE html>
 <html lang=en>
-<link rel="stylesheet" href="/static/style.css" type="text/css">
-<link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico">
-<meta content="You seem lost, fam." name=description>
-<meta charset="UTF-8">
-<meta name="viewport" content="initial-scale=1">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<meta content="#151B1B" name="theme-color">
-<meta name="HandheldFriendly" content="true">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:site" content="@icyphox">
-<meta name="twitter:title" content="404">
-<meta name="twitter:description" content="You seem lost, fam.">
-<meta name="twitter:image" content="/static/icyphox.png">
-<meta property="og:title" content="404">
-<meta property="og:type" content="website">
-<meta property="og:description" content="You seem lost, fam.">
-<meta property="og:url" content="https://icyphox.sh">
-<meta property="og:image" content="/static/icyphox.png">
-<html>
+  <link rel="stylesheet" href="/static/style.css" type="text/css">
+  <link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico">
+  <meta content="You seem lost, fam." name=description>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="initial-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta content="#151B1B" name="theme-color">
+  <meta name="HandheldFriendly" content="true">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@icyphox">
+  <meta name="twitter:title" content="404">
+  <meta name="twitter:description" content="You seem lost, fam.">
+  <meta name="twitter:image" content="/static/icyphox.png">
+  <meta property="og:title" content="404">
+  <meta property="og:type" content="website">
+  <meta property="og:description" content="You seem lost, fam.">
+  <meta property="og:url" content="https://icyphox.sh">
+  <meta property="og:image" content="/static/icyphox.png">
   <title>
     404
   </title>
-<div class="container">
-  <header class="header">
-    {{ header }}
-  </header>
-<body class="noselect"> 
-  <div class="introduction">
-    <h1 align="center">
-      {{ body }}
-    </h1>
-   </div>
-     </body>
-    </div>
+    <header>
+      {{ header }}
+    </header>
+    <body> 
+      <h1 align="center">
+          {{ body }}
+      </h1>
+    </body>
+  </div>
 </html>

M templates/about.html → templates/about.html

@@ -1,39 +1,35 @@ 
 <!DOCTYPE html>
 <html lang=en>
-<link rel="stylesheet" href="/static/style.css" type="text/css">
-<link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico">
-<meta name="description" content="{{ subtitle }}">
-<meta charset="UTF-8">
-<meta name="viewport" content="initial-scale=1">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<meta content="#151B1B" name="theme-color">
-<meta name="HandheldFriendly" content="true">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:site" content="@icyphox">
-<meta name="twitter:title" content="{{ title }}">
-<meta name="twitter:description" content="{{ subtitle }}">
-<meta name="twitter:image" content="/static/icyphox.png">
-<meta property="og:title" content="{{ title }}">
-<meta property="og:type" content="website">
-<meta property="og:description" content="{{ subtitle }}">
-<meta property="og:url" content="https://icyphox.sh">
-<meta property="og:image" content="/static/icyphox.png">
-<html>
+  <link rel="stylesheet" href="/static/style.css" type="text/css">
+  <link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico">
+  <meta name="description" content="{{ subtitle }}">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="initial-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta content="#151B1B" name="theme-color">
+  <meta name="HandheldFriendly" content="true">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@icyphox">
+  <meta name="twitter:title" content="{{ title }}">
+  <meta name="twitter:description" content="{{ subtitle }}">
+  <meta name="twitter:image" content="/static/icyphox.png">
+  <meta property="og:title" content="{{ title }}">
+  <meta property="og:type" content="website">
+  <meta property="og:description" content="{{ subtitle }}">
+  <meta property="og:url" content="https://icyphox.sh">
+  <meta property="og:image" content="/static/icyphox.png">
   <title>
     {{ title }}
   </title>
-<div class="container-text">
-  <header class="header">
+  <header>
     {{ header }}
   </header>
-<body> 
-   <div class="content">
-    <div class="left">
+  <body> 
+    <div class="content">
       {{ body }} 
     </div>
-    <footer>
-      {{ footer }}
-    </footer>
-   </body>
- </div>
- </html>
+  </body>
+  <footer>
+    {{ footer }}
+  </footer>
+</html>

M templates/blogindex.html → templates/blogindex.html

@@ -1,40 +1,35 @@ 
 <!DOCTYPE html>
 <html lang=en>
-<link rel="stylesheet" href="/static/style.css" type="text/css">
-<link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico">
-<meta name="description" content="{{ subtitle }}">
-<meta name="viewport" content="initial-scale=1">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<meta content="#151B1B" name="theme-color">
-<meta charset="UTF-8">
-<meta name="HandheldFriendly" content="true">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:site" content="@icyphox">
-<meta name="twitter:title" content="{{ title  }}">
-<meta name="twitter:description" content="{{ subtitle }}">
-<meta name="twitter:image" content="/static/icyphox.png">
-<meta property="og:title" content="{{ title }}">
-<meta property="og:type" content="website">
-<meta property="og:description" content="{{ subtitle }}">
-<meta property="og:url" content="https://icyphox.sh">
-<meta property="og:image" content="/static/icyphox.png">
-<html>
+  <link rel="stylesheet" href="/static/style.css" type="text/css">
+  <link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico">
+  <meta name="description" content="{{ subtitle }}">
+  <meta name="viewport" content="initial-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta content="#151B1B" name="theme-color">
+  <meta charset="UTF-8">
+  <meta name="HandheldFriendly" content="true">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@icyphox">
+  <meta name="twitter:title" content="{{ title  }}">
+  <meta name="twitter:description" content="{{ subtitle }}">
+  <meta name="twitter:image" content="/static/icyphox.png">
+  <meta property="og:title" content="{{ title }}">
+  <meta property="og:type" content="website">
+  <meta property="og:description" content="{{ subtitle }}">
+  <meta property="og:url" content="https://icyphox.sh">
+  <meta property="og:image" content="/static/icyphox.png">
   <title>
     {{ title }}
   </title>
-<div class="container-text">
-  <header class="header">
+  <header>
     {{ header }}
   </header>
-<body> 
-   <div class="content">
-    <div class="posts" align="left">
+  <body> 
+    <div class="content">
       {{ body }} 
     </div>
     <footer>
       {{ footer }}
     </footer>
-</body>
-   </div>
-    </div>
+  </body>
 </html>

M templates/index.html → templates/index.html

@@ -1,39 +1,33 @@ 
 <!DOCTYPE html>
 <html lang=en>
-<link rel="stylesheet" href="/static/style.css" type="text/css">
-<link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico">
-<meta name="description" content="{{ subtitle }}">
-<meta name="viewport" content="initial-scale=1">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<meta charset="UTF-8">
-<meta content="#151B1B" name="theme-color">
-<meta name="HandheldFriendly" content="true">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:site" content="@icyphox">
-<meta name="twitter:title" content="{{ title }}">
-<meta name="twitter:description" content="{{ subtitle }}">
-<meta name="twitter:image" content="/static/icyphox.png">
-<meta property="og:title" content="{{ title }}">
-<meta property="og:type" content="website">
-<meta property="og:description" content="{{ subtitle }}">
-<meta property="og:url" content="https://icyphox.sh">
-<meta property="og:image" content="/static/icyphox.png">
-<html>
+  <link rel="stylesheet" href="/static/style.css" type="text/css">
+  <link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico">
+  <meta name="description" content="{{ subtitle }}">
+  <meta name="viewport" content="initial-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta charset="UTF-8">
+  <meta content="#151B1B" name="theme-color">
+  <meta name="HandheldFriendly" content="true">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@icyphox">
+  <meta name="twitter:title" content="{{ title }}">
+  <meta name="twitter:description" content="{{ subtitle }}">
+  <meta name="twitter:image" content="/static/icyphox.png">
+  <meta property="og:title" content="{{ title }}">
+  <meta property="og:type" content="website">
+  <meta property="og:description" content="{{ subtitle }}">
+  <meta property="og:url" content="https://icyphox.sh">
+  <meta property="og:image" content="/static/icyphox.png">
+
   <title>
     {{ title }}
   </title>
-<div class="container">
-  <header class="header">
+  <header>
     {{ header }}
- </header>
-<body> 
-   <div class="content">
-    <div class="posts" align="left">
+  </header>
+  <body> 
+    <div class="content">
       {{ body }} 
     </div>
-    <footer>
-      {{ footer }}
-    </footer>
-</body>
-     </div>
+  </body>
 </html>

M templates/text.html → templates/text.html

@@ -1,51 +1,49 @@ 
 <!DOCTYPE html>
 <html lang=en>
-<link rel="stylesheet" href="/static/style.css" type="text/css">
-<link rel="stylesheet" href="/static/syntax.css" type="text/css">
-<link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico">
-<meta charset="UTF-8">
-<meta name="description" content="{{ subtitle }}">
-<meta name="viewport" content="initial-scale=1">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<meta content="#151B1B" name="theme-color">
-<meta name="HandheldFriendly" content="true">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:site" content="@icyphox">
-<meta name="twitter:title" content="{{ title }}">
-<meta name="twitter:description" content="{{ subtitle }}">
-<meta name="twitter:image" content="/static/icyphox.png">
-<meta property="og:title" content="{{ title }}">
-<meta property="og:type" content="website">
-<meta property="og:description" content="{{ subtitle }}">
-<meta property="og:url" content="https://icyphox.sh">
-<meta property="og:image" content="/static/icyphox.png">
-<html>
+  <link rel="stylesheet" href="/static/style.css" type="text/css">
+  <link rel="stylesheet" href="/static/syntax.css" type="text/css">
+  <link rel="shortcut icon" type="images/x-icon" href="/static/favicon.ico">
+  <meta charset="UTF-8">
+  <meta name="description" content="{{ subtitle }}">
+  <meta name="viewport" content="initial-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta content="#151B1B" name="theme-color">
+  <meta name="HandheldFriendly" content="true">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@icyphox">
+  <meta name="twitter:title" content="{{ title }}">
+  <meta name="twitter:description" content="{{ subtitle }}">
+  <meta name="twitter:image" content="/static/icyphox.png">
+  <meta property="og:title" content="{{ title }}">
+  <meta property="og:type" content="website">
+  <meta property="og:description" content="{{ subtitle }}">
+  <meta property="og:url" content="https://icyphox.sh">
+  <meta property="og:image" content="/static/icyphox.png">
   <title>
     {{ title }}
   </title>
-<div class="container-text">
   <header class="header">
     {{ header }}
   </header>
-<body> 
-   <div class="content">
-     <div style="float: right">
-       view in <a href="/txt/{{ url }}">plain-text</a>
-     </div>
-    <div style="float: left">
-      {{ date }}
-    </div>
-    <div style="clear: both" align="left">
-      <h1>{{ title }}</h1>
-      <h2 class="subtitle">{{ subtitle }}</h2>
-      {{ body }} 
+  <body> 
+    <div class="content">
+      <div style="float: right">
+        view in <a href="/txt/{{ url }}">plain-text</a>
+      </div>
+      <div style="float: left">
+        {{ date }}
+      </div>
+      <div style="clear: both" align="left">
+        <h1>{{ title }}</h1>
+        <h2 class="subtitle">{{ subtitle }}</h2>
+        {{ body }} 
+      </div>
+      <p class="muted">Questions or comments? 
+      Send an email to 
+      <a href="mailto:~icyphox/x@lists.sr.ht?Subject=Re: {{ title }}">~icyphox/x@lists.sr.ht</a>—my <a href="https://lists.sr.ht/~icyphox/x">public inbox</a>.</p>
     </div>
-    <p class="muted">Questions or comments? 
-    Send an email to 
-    <a href="mailto:~icyphox/x@lists.sr.ht?Subject=Re: {{ title }}">~icyphox/x@lists.sr.ht</a> — my <a href="https://lists.sr.ht/~icyphox/x">public inbox</a>.</p>
-    <footer>
-      {{ footer }}
-    </footer>
   </body>
-  </div>
- </html>
+  <footer>
+    {{ footer }}
+  </footer>
+</html>

all repos — site @ 104ef222884f011935d14fce536f1e38dfcbc961

source for my site, found at icyphox.sh