Browse Source

better style

Ryozuki 11 months ago
parent
commit
082979d017
7 changed files with 226 additions and 207 deletions
  1. 3 1
      index.py
  2. 4 1
      parse.py
  3. 4 5
      public/blog/index.html
  4. 2 0
      public/blog/sdl2_cmake.html
  5. 132 124
      public/css/style.css
  6. 64 60
      public/index.html
  7. 17 16
      public/videos.html

+ 3 - 1
index.py

@@ -22,10 +22,12 @@ base = """
     <meta name='medium' content='blog'>
 </head>
 <body>
+<div class="container">
 <h2>Ryozuki Blog Index</h2>
 <ul>
 {body}
 </ul>
+</div>
 </body>
 </html>
 """
@@ -45,7 +47,7 @@ if __name__ == "__main__":
             index.append((
                 datetime.strptime(date, '%Y-%m-%d %H:%M:%S.%f'),
                 f"<li>[<span class='green'>{date}</span>] <a href='/blog/{name}.html'>{title}</a></li>"
-                ))
+            ))
     body = ""
     index.sort(key=itemgetter(0))
     for x in index:

+ 4 - 1
parse.py

@@ -24,8 +24,10 @@ base = """
 </head>
 
 <body>
+<div class="container">
 <a href="/">cd /</a>
 -{body}
+</div>
 </body>
 
 </html>
@@ -42,10 +44,11 @@ class HighlightRenderer(mistune.Renderer):
         formatter = html.HtmlFormatter(linenos='inline')
         return highlight(code, lexer, formatter)
 
+
 if __name__ == "__main__":
     renderer = HighlightRenderer()
     markdown = mistune.Markdown(renderer=renderer)
-    
+
     for x in os.listdir("blog"):
         with open(f"blog/{x}") as f:
             parsed = markdown(f.read())

+ 4 - 5
public/blog/index.html

@@ -9,20 +9,19 @@
     <link rel="stylesheet" href="/css/code.css">
     <link rel="stylesheet" href="/css/style.css">
     <meta name="twitter:card" content="summary" />
-    <meta name="twitter:site" content="@ShinobuWR" />
-    <meta name="twitter:creator" content="@ShinobuWR" />
+    <meta name="twitter:site" content="https://ryozuki.xyz/" />
+    <meta name="twitter:creator" content="@ryozu_ki" />
     <meta property="og:title" content="Ryozuki Blog" />
     <meta property="og:description" content="All blog entries are listed here." />
     <meta name='medium' content='blog'>
 </head>
-
 <body>
+<div class="container">
 <h2>Ryozuki Blog Index</h2>
 <ul>
 <li>[<span class='green'>2019-04-27 12:57:28.889473</span>] <a href='/blog/sdl2_cmake.html'>Setting Up SDL2 with CMake</a></li>
 
 </ul>
-
+</div>
 </body>
-
 </html>

+ 2 - 0
public/blog/sdl2_cmake.html

@@ -15,6 +15,7 @@
 </head>
 
 <body>
+<div class="container">
 <a href="/">cd /</a>
 <h1>Setting Up SDL2 with CMake</h1>
 <hr>
@@ -79,6 +80,7 @@
 <span class="lineno">4 </span>make -j<span class="si">${</span><span class="nv">nproc</span><span class="si">}</span>
 </pre></div>
 
+</div>
 </body>
 
 </html>

+ 132 - 124
public/css/style.css

@@ -1,243 +1,251 @@
 @font-face {
-    font-family: Tamzen;
-    src: url(/fonts/Tamzen8x16r.ttf);
-    font-weight: normal;
+	font-family: Tamzen;
+	src: url(/fonts/Tamzen8x16r.ttf);
+	font-weight: normal;
 }
 
 @font-face {
-    font-family: Tamzen;
-    src: url(/fonts/Tamzen8x16b.ttf);
-    font-weight: bold;
+	font-family: Tamzen;
+	src: url(/fonts/Tamzen8x16b.ttf);
+	font-weight: bold;
 }
 
 body {
-    background-color: #0d0d0d;
-    color: white;
-    margin: 0;
-    padding: 1em;
-    font-family: Tamzen, "Courier New", Courier, monospace;
+	background-color: #0d0d0d;
+	color: white;
+	margin: 0;
+	padding: 0;
+	font-family: Tamzen, "Courier New", Courier, monospace;
 }
 
 ul {
-    list-style: none;
+	list-style: none;
 }
 
 ul li::before {
-    content: "-";
-    display: inline-block;
-    margin-left: -1em;
-    width: 1em;
+	content: "-";
+	display: inline-block;
+	margin-left: -1em;
+	width: 1em;
 }
 
 h1, h2, h3, h4, h5 {
-    font-size: 100%;
-    font-weight: bold;
+	font-size: 100%;
+	font-weight: bold;
 }
 
 h1::before, h2::before, h3::before, h4::before, h5::before {
-    content: "<< ";
-    color: gold;
-    /* springgreen */
+	content: "<< ";
+	color: gold;
+	/* springgreen */
 }
 
 h1::after, h2::after, h3::after, h4::after, h5::after {
-    content: " >>";
-    color: gold;
+	content: " >>";
+	color: gold;
 }
 
 a {
-    color: gold;
-    font-weight: bold;
-    text-decoration: none;
+	color: gold;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+.container {
+	margin: 1% 30%;
+}
+@media only screen and (max-width: 992px) {
+	.container {
+		margin: 1% 3%;
+	}
 }
 
 .highlight pre {
-    overflow: auto;
-    overflow-y: hidden;
-    border: 1px dashed #777;
-    padding: 10px;
-    font-family: Tamzen, "Courier New", Courier, monospace;
-    counter-reset: line;
+	overflow: auto;
+	overflow-y: hidden;
+	border: 1px dashed #777;
+	padding: 10px;
+	font-family: Tamzen, "Courier New", Courier, monospace;
+	counter-reset: line;
 }
 
 span.lineno {
-    color: grey;
-    border-right: 1px solid;
-    margin-right: 5px;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+	color: grey;
+	border-right: 1px solid;
+	margin-right: 5px;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }
 
 a:hover {
-    text-decoration: underline;
+	text-decoration: underline;
 }
 
 kbd {
-    background-color: gold;
-    font-size: 120%;
-    padding: 0.5em;
-    font-weight: bold;
-    border-radius: 4px;
+	background-color: gold;
+	font-size: 120%;
+	padding: 0.5em;
+	font-weight: bold;
+	border-radius: 4px;
 }
 
 hr {
-    border-top: 1px dashed white
+	border-top: 1px dashed white
 }
 
 button {
-    border: 0;
-    border-radius: 4px;
-    color: white;
-    background-color: darkslateblue;
-    padding: 10px;
-    font-size: 110%;
-    font-weight: bold;
+	border: 0;
+	border-radius: 4px;
+	color: white;
+	background-color: darkslateblue;
+	padding: 10px;
+	font-size: 110%;
+	font-weight: bold;
 }
 
 button:hover {
-    background-color: slateblue;
+	background-color: slateblue;
 }
 
 table {
-    border-collapse: collapse;
+	border-collapse: collapse;
 }
 
 td, th {
-    border: 1px solid #0d0d1d;
-    text-align: left;
-    padding: 8px;
+	border: 1px solid #0d0d1d;
+	text-align: left;
+	padding: 8px;
 }
 
 tr:nth-child(even) {
-    background-color: #0d0d1d;
+	background-color: #0d0d1d;
 }
 
 .button-table tr {
-    background-color: #0d0d0d;
+	background-color: #0d0d0d;
 }
 
 .button-table button {
-    width: 100%;
+	width: 100%;
 }
 
 .flex-container {
-    display: flex;
-    flex-flow: row wrap;
+	display: flex;
+	flex-flow: row wrap;
 }
 
 .green {
-    color: springgreen;
+	color: springgreen;
 }
 
 .mr-3 {
-    margin-right: 3px;
+	margin-right: 3px;
 }
 
 .gold {
-    color: #ffd700;
+	color: #ffd700;
 }
 
 .red {
-    color: firebrick;
+	color: firebrick;
 }
 
 .test {
-    color: springgreen;
+	color: springgreen;
 }
 
 .chat-box {
-    border: 2px dashed gray;
-    padding: 10px;
-    max-height: 80vh;
-    height: 80vh;
-    overflow: auto;
-    overflow-x: hidden;
-    word-break: break-all;
-    box-sizing: border-box;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    white-space: pre-wrap;
+	border: 2px dashed gray;
+	padding: 10px;
+	max-height: 80vh;
+	height: 80vh;
+	overflow: auto;
+	overflow-x: hidden;
+	word-break: break-all;
+	box-sizing: border-box;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	white-space: pre-wrap;
 }
 
 .chat-box > p {
-    margin: 0;
+	margin: 0;
 }
 
-.chat-box::-webkit-scrollbar { 
-    width: 0 !important 
+.chat-box::-webkit-scrollbar {
+	width: 0 !important
 }
 
 .chat-user-list {
-    box-sizing: border-box;
-    float: right;
-    border: 2px dashed gray;
-    border-left: none;
-    padding: 10px;
-    max-height: 80vh;
-    height: 80vh;
-    min-width: 20vh;
-    overflow:auto;
+	box-sizing: border-box;
+	float: right;
+	border: 2px dashed gray;
+	border-left: none;
+	padding: 10px;
+	max-height: 80vh;
+	height: 80vh;
+	min-width: 20vh;
+	overflow:auto;
 }
 
 .chat-user-list > p {
-    margin: 0;
-    font-weight: bold;
+	margin: 0;
+	font-weight: bold;
 }
 
 .chat-input {
-    font-family: Tamzen, "Courier New", Courier, monospace;
-    background-color: #0d0d0d;
-    color: white;
-    margin: 0;
-    border: 2px dashed gray;
-    border-top: none;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 5px;
-    resize: none;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+	font-family: Tamzen, "Courier New", Courier, monospace;
+	background-color: #0d0d0d;
+	color: white;
+	margin: 0;
+	border: 2px dashed gray;
+	border-top: none;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 5px;
+	resize: none;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
 }
 
 .chat-input:focus {
-    outline: none;
+	outline: none;
 }
 
-.chat-input::-webkit-scrollbar { 
-    width: 0 !important;
+.chat-input::-webkit-scrollbar {
+	width: 0 !important;
 }
 
-
 .chat-info-box {
-    box-sizing: border-box;
-    border: 2px dashed gray;
-    border-top: none;
-    padding: 10px;
-    overflow: hidden;
+	box-sizing: border-box;
+	border: 2px dashed gray;
+	border-top: none;
+	padding: 10px;
+	overflow: hidden;
 }
 
 .chat-username {
-    color: white;
-    font-weight: bold;
+	color: white;
+	font-weight: bold;
 }
 
 .chat-username::after {
-    content: ": ";
-    color: gold;
+	content: ": ";
+	color: gold;
 }
 
 .chat-date {
-    color: gold;
+	color: gold;
 }
 
 .chat-date::after {
-    content: " "
+	content: " "
 }
 
 .chat-server-message {
-    font-weight: bold;
-}
+	font-weight: bold;
+}

+ 64 - 60
public/index.html

@@ -2,74 +2,78 @@
 <html lang="en">
 
 <head>
-    <!-- Crawl me senpai ~ -->
-    <!-- Website first published on: 2019-01-10 -->
-    <meta charset="UTF-8">
-    <title>Ryozuki Website</title>
-    <meta name="description" content="Ryozuki's personal website.">
-    <meta name="author" content="Ryozuki">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/css/style.css">
-    <meta property="og:title" content="Ryozuki Website" />
-    <meta property="og:description" content="Ryozuki's personal website." />
+	<!-- Crawl me senpai ~ -->
+	<!-- Website first published on: 2019-01-10 -->
+	<meta charset="UTF-8">
+	<title>Ryozuki Website</title>
+	<meta name="description" content="Ryozuki's personal website.">
+	<meta name="author" content="Ryozuki">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="/css/style.css">
+	<meta property="og:title" content="Ryozuki Website" />
+	<meta property="og:description" content="Ryozuki's personal website." />
 </head>
 
 <body>
-    <h2>Ryozuki.xyz</h2>
-    <p>This is my personal website, here I save interesting things I may find, my own thoughts or any random thing.</p>
-    <p>I am a self taught programmer, I currently know C, C++, python, javascript (and nodejs), C# and java.</p>
-    <p>You can read my <b>blog</b> <a href="/blog">here</a>.</p>
-    <p>You can enter a simple <b>chat</b> I made here: <a href="/chat.html">chat</a>.</p>
-	<!--<p>Currently I'm making a website: <a href="https://qanime.net/">qanime.net</a></p>-->
-    <p>Some libraries I used:
-        <a href="https://www.djangoproject.com/" target="_blank">Django</a>,
-        <a href="http://flask.pocoo.org/" target="_blank">Flask</a>,
-        <a href="https://falconframework.org/" target="_blank">Falcon</a>,
-        <a href="https://reactjs.org/" target="_blank">ReactJS</a>,
-        <a href="https://docs.ponyorm.com/" target="_blank">PonyORM</a>,
-        <a href="https://www.raylib.com/" target="_blank">raylib</a>,
-        <a href="https://www.libsdl.org/" target="_blank">SDL2</a>,
-        <a href="https://www.sfml-dev.org/" target="_blank">SFML</a>
-    </p>
-    <p>CSS3 Framework I like most: <a href="https://semantic-ui.com/" target="_blank">Semantic UI</a> and its
-        <a href="https://react.semantic-ui.com/" target="_blank">ReactJS</a> integration.</p>
+	<div class="container">
+		<h2>Ryozuki.xyz</h2>
+		<p>This is my personal website, here I save interesting things I may find, my own thoughts or any random thing.
+		</p>
+		<p>I am a self taught programmer, I currently know C, C++, python, javascript (and nodejs), C# and java.</p>
+		<p>You can read my <b>blog</b> <a href="/blog">here</a>.</p>
+		<p>You can enter a simple <b>chat</b> I made here: <a href="/chat.html">chat</a>.</p>
+		<!--<p>Currently I'm making a website: <a href="https://qanime.net/">qanime.net</a></p>-->
+		<p>Some libraries I used:
+			<a href="https://www.djangoproject.com/" target="_blank">Django</a>,
+			<a href="http://flask.pocoo.org/" target="_blank">Flask</a>,
+			<a href="https://falconframework.org/" target="_blank">Falcon</a>,
+			<a href="https://reactjs.org/" target="_blank">ReactJS</a>,
+			<a href="https://docs.ponyorm.com/" target="_blank">PonyORM</a>,
+			<a href="https://www.raylib.com/" target="_blank">raylib</a>,
+			<a href="https://www.libsdl.org/" target="_blank">SDL2</a>,
+			<a href="https://www.sfml-dev.org/" target="_blank">SFML</a>
+		</p>
+		<p>CSS3 Framework I like most: <a href="https://semantic-ui.com/" target="_blank">Semantic UI</a> and its
+			<a href="https://react.semantic-ui.com/" target="_blank">ReactJS</a> integration.</p>
 
-    <p>Useful open-source software I found:</p>
-    <ul>
-        <li><a href="https://github.com/hneemann/Digital" target="_blank">Digital</a></li>
-        <li><a href="https://handbrake.fr/" target="_blank">HandBrake</a></li>
-    </ul>
+		<p>Useful open-source software I found:</p>
+		<ul>
+			<li><a href="https://github.com/hneemann/Digital" target="_blank">Digital</a></li>
+			<li><a href="https://handbrake.fr/" target="_blank">HandBrake</a></li>
+		</ul>
 
-    <p>Good not well known games:</p>
-    <ul>
-        <li><a href="https://ddnet.tw/">DDRaceNetwork</a></li>
-        <li><a href="https://www.teeworlds.com/">Teeworlds</a></li>
-        <li><a href="https://www.unvanquished.net/">Unvanquished</a></li>
-        <li><a href="https://soldat.pl/en/">Soldat</a></li>
-        <li><a href="https://www.hackmud.com/">hackmud</a></li>
-    </ul>
+		<p>Good not well known games:</p>
+		<ul>
+			<li><a href="https://ddnet.tw/">DDRaceNetwork</a></li>
+			<li><a href="https://www.teeworlds.com/">Teeworlds</a></li>
+			<li><a href="https://www.unvanquished.net/">Unvanquished</a></li>
+			<li><a href="https://soldat.pl/en/">Soldat</a></li>
+			<li><a href="https://www.hackmud.com/">hackmud</a></li>
+		</ul>
 
-    <p>Plugins/mods I made:</p>
-    <ul>
-        <li><a href="https://tshock.co/xf/index.php?resources/authors/ryozuki.7693/">Tshock Plugins (Terraria)</a></li>
-        <li><a href="https://www.spigotmc.org/resources/authors/ryozuki.304158/">Spigot Plugins (Minecraft)</a></li>
-        <li><a href="https://minecraft.curseforge.com/members/ryozukii/projects">Forge Mods (Minecraft)</a></li>
-        <li><a href="https://github.com/timazuki/TeeSmash">TeeSmash Mod (Teeworlds)</a></li>
-        <li><a href="https://github.com/ddnet/ddnet">Also contributed to the DDNet Mod (Teeworlds)</a></li>
-    </ul>
+		<p>Plugins/mods I made:</p>
+		<ul>
+			<li><a href="https://tshock.co/xf/index.php?resources/authors/ryozuki.7693/">Tshock Plugins (Terraria)</a>
+			</li>
+			<li><a href="https://www.spigotmc.org/resources/authors/ryozuki.304158/">Spigot Plugins (Minecraft)</a></li>
+			<li><a href="https://minecraft.curseforge.com/members/ryozukii/projects">Forge Mods (Minecraft)</a></li>
+			<li><a href="https://github.com/timazuki/TeeSmash">TeeSmash Mod (Teeworlds)</a></li>
+			<li><a href="https://github.com/ddnet/ddnet">Also contributed to the DDNet Mod (Teeworlds)</a></li>
+		</ul>
 
-    <h3>Featured Video (<a href="videos.html">more</a>)</h3>
-    <a href="https://www.youtube.com/watch?v=HEfHFsfGXjs" target="_blank">
-        - The most unexpected answer to a counting puzzle
-    </a>
+		<h3>Featured Video (<a href="videos.html">more</a>)</h3>
+		<a href="https://www.youtube.com/watch?v=HEfHFsfGXjs" target="_blank">
+			- The most unexpected answer to a counting puzzle
+		</a>
 
-    <h3>Contact</h3>
-    <p><strong>OpenPGP public key</strong>: <a href="Ryozuki.asc" download>download</a></p>
-    <p><strong>Fingerprint</strong>: 5FE0 4749 E402 5B27 018B 3BF2 848F CC08 E5B8 9681</p>
-    <p>&lt; <a href="https://git.ryozuki.xyz">Own Git Server</a> | <a href="https://github.com/Ryozuki">Github</a> | <a
-            href="https://steamcommunity.com/id/ryozukii/">Steam</a> |
-        <a href="https://myanimelist.net/profile/Ryozuki">MAL</a> &gt;</p>
-    <a rel="me" href="https://niu.moe/@Ryozuki"></a>
+		<h3>Contact</h3>
+		<p><strong>OpenPGP public key</strong>: <a href="Ryozuki.asc" download>download</a></p>
+		<p><strong>Fingerprint</strong>: 5FE0 4749 E402 5B27 018B 3BF2 848F CC08 E5B8 9681</p>
+		<p>&lt; <a href="https://git.ryozuki.xyz">Own Git Server</a> | <a href="https://github.com/Ryozuki">Github</a> |
+			<a href="https://steamcommunity.com/id/ryozukii/">Steam</a> |
+			<a href="https://myanimelist.net/profile/Ryozuki">MAL</a> &gt;</p>
+		<a rel="me" href="https://niu.moe/@Ryozuki"></a>
+	</div>
 
 </body>
 

+ 17 - 16
public/videos.html

@@ -2,24 +2,25 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <title>Ryozuki Website</title>
-    <meta name="description" content="Ryozuki's personal website.">
-    <meta name="author" content="Ryozuki">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css/style.css">
+	<meta charset="UTF-8">
+	<title>Ryozuki Website</title>
+	<meta name="description" content="Ryozuki's personal website.">
+	<meta name="author" content="Ryozuki">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="css/style.css">
 </head>
 
 <body>
-    <a href="/">cd /</a>
-    <h3><span class="green">[</span> All Featured Videos <span class="green">]</span></h3>
-    <ul>
-        <li>
-            <strong>2018-01-13</strong> <a href="https://www.youtube.com/watch?v=HEfHFsfGXjs" target="_blank">
-                The most unexpected answer to a counting puzzle</a>
-        </li>
-    </ul>
-
+	<div class="container">
+		<a href="/">cd /</a>
+		<h3>All Featured Videos </h3>
+		<ul>
+			<li>
+				<strong>2018-01-13</strong> <a href="https://www.youtube.com/watch?v=HEfHFsfGXjs" target="_blank">
+					The most unexpected answer to a counting puzzle</a>
+			</li>
+		</ul>
+	</div>
 </body>
 
-</html>
+</html>