Inicio Explorar Ayuda
Iniciar sesión
likho
/
microblog.py
Seguir 1
Destacar 0
Fork 1
Archivos Incidencias 2 Pull Requests 0 Wiki
Etiquetas Milestones
Nuevo Pull Request

#10 outputs semantic html

Cerrada
Tarry_Dan desea fusionar 3 commits de Tarry_Dan/semantic-html en likho/master
Conversación 2 Commits 3 Archivos modificados 3
Se han modificado 3 ficheros con 83 adiciones y 35 borrados
Unificar vista Mostrar estadísticas de diff
  1. 21 12
      example/default.tpl
  2. 4 4
      example/settings.toml
  3. 58 19
      example/timeline.css

+ 21 - 12
example/default.tpl
Ver fichero 

@@ -1,20 +1,27 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
-<html>
 
+<html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta content="initial-scale=1.0">
 
     <meta content="initial-scale=1.0">
 
     <title>Microblog</title>
 
     <title>Microblog</title>
 
+
 
     <link href="./style.css" rel="stylesheet" type="text/css" media="all">
 
     <link href="./style.css" rel="stylesheet" type="text/css" media="all">
 
     <link href="./timeline.css" rel="stylesheet" type="text/css" media="all">
 
     <link href="./timeline.css" rel="stylesheet" type="text/css" media="all">
 
+
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
-<div class="content"> 
 
 
+<header>
 
+    <h1>A Microblog in Plain HTML</h1>
 
+</header>
 
 
 
-<h1>A Microblog in Plain HTML</h1>
 
+<div class="primary"> 
+    
+    <div>
 
 
 
-<div class = "row"> <div class = "column">
 
-    <div class="profile">
 
+    <aside>
 
         <img src="./images/avatar.jpg" alt="Avatar" class="avatar">
 
         <img src="./images/avatar.jpg" alt="Avatar" class="avatar">
 
         <span class="handle">Your Name Here</span>
 
         <span class="handle">Your Name Here</span>
 
         <p><span class="email"><a href="mailto:user@host.tld">user@host.tld</a></span></p>
 
         <p><span class="email"><a href="mailto:user@host.tld">user@host.tld</a></span></p>
 
@@ -24,19 +31,21 @@
 
             <p>{tags}</p>
 
             <p>{tags}</p>
 
             <h3>Pages</h3>
 
             <h3>Pages</h3>
 
             <p>{pages}</p>
 
             <p>{pages}</p>
 
-        </div>
 
+    </aside>
 
+    
     </div>
 
     </div>
 
-</div>
 
 
 
-    <div class = "timeline">
 
+    <main>
 
     {timeline}
 
     {timeline}
 
-    </div>
 
+    </main>
 
+
 
 </div>
 
 </div>
 
 
 
-<center>
 
+<footer>
 
 <a href="https://notabug.org/likho/microblog.py">microblog.py</a>
 
 <a href="https://notabug.org/likho/microblog.py">microblog.py</a>
 
-</center>
 
+</footer>
 
 
 
-</div>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>
 
+

+ 4 - 4
example/settings.toml
Ver fichero 

@@ -11,13 +11,13 @@ tag_paragraphs=true
 
 # adds <br> or user defined string between each line
 
 # adds <br> or user defined string between each line
 
 # line_separator="<br>"
 
 # line_separator="<br>"
 
 format="""
 
 format="""
 
-<div class="postcell" id="{__num__}">
 
-    <div class="timestamp">{__timestamp__}
 
+<article id="{__num__}">
 
+    <time>{__timestamp__}
 
         <a href=#{__num__}>(#{__num__})</a>
 
         <a href=#{__num__}>(#{__num__})</a>
 
-    </div>
 
+    </time>
 
     <div class="message">{__msg__}</div>
 
     <div class="message">{__msg__}</div>
 
     {__btn__}
 
     {__btn__}
 
-</div>
 
+</article>
 
 """
 
 """
 
 
 
 [post.buttons]
 
 [post.buttons]

+ 58 - 19
example/timeline.css
Ver fichero 

@@ -1,81 +1,120 @@
 
+/* just structural (no artistic choices) */
 
 
 
-@media only screen and (min-width: 768px) {
 
-    .column {
 
-        float: left;
 
-        width: 32%;
 
-    }
 
-    .timeline {
 
-        float: right;
 
-        width: 67%;
 
-    }
 
-}
 
-.postcell {
 
+/* LAYOUT */
 
+.primary {
 
+	display: flex;
 
+	flex-wrap: wrap;
 
+	justify-content: space-around;
 
+	gap: 3rem;
 
+}
 
+
 
+.primary > :first-child  {
 
+    flex-basis: 30rem;
 
+    flex-grow: 1;
 
+    height:100%;
 
+}
 
+  
+  .primary > :last-child {
 
+    flex-basis: 0;
 
+    flex-grow: 999;
 
+    min-inline-size: 35%;
 
+}
 
+
 
+
 
+/* TIMELINE AND POSTS */
 
+
 
+article {
 
     border: 1px solid red; 
     border: 1px solid red; 
     text-align: left;
 
     text-align: left;
 
-    margin: 0.25em 0
 
+    margin: 0.25em 0;
 
+    padding: 1.5rem clamp(1rem, 5%, 3rem);
 
+
 
 }
 
 }
 
+
 
 .message {
 
 .message {
 
     margin: 1em 1em 1em 3em;
 
     margin: 1em 1em 1em 3em;
 
     white-space: pre-wrap;
 
     white-space: pre-wrap;
 
     word-wrap: break-word;
 
     word-wrap: break-word;
 
 }
 
 }
 
+
 
+/* POST METADATA */
 
 .buttons {
 
 .buttons {
 
     margin-left: 1em;
 
     margin-left: 1em;
 
     margin-bottom:0.5em;
 
     margin-bottom:0.5em;
 
 }
 
 }
 
-.timestamp {
 
+
 
+time {
 
+    display: block;
 
     text-align: right;
 
     text-align: right;
 
     margin: 0.5em
 
     margin: 0.5em
 
 }
 
 }
 
+
 
 .hashtag {
 
 .hashtag {
 
     color: green;
 
     color: green;
 
     font-weight: bold;
 
     font-weight: bold;
 
 }
 
 }
 
+
 
+/* PROFILE ASIDE */
 
+
 
+aside {
 
+    border:1px solid blue;
 
+}
 
+
 
 .profile {
 
 .profile {
 
     vertical-align: middle;
 
     vertical-align: middle;
 
     padding-left: 10px;
 
     padding-left: 10px;
 
-    border:1px solid blue;
 
 }
 
 }
 
+
 
 .avatar {
 
 .avatar {
 
     vertical-align: middle;
 
     vertical-align: middle;
 
     width: 50px;
 
     width: 50px;
 
     height: 50px;
 
     height: 50px;
 
 }
 
 }
 
+
 
 .handle{
 
 .handle{
 
     font-size: 1.1em;
 
     font-size: 1.1em;
 
     font-weight: bold;
 
     font-weight: bold;
 
 }
 
 }
 
+
 
 .email{
 
 .email{
 
     text-align:left;
 
     text-align:left;
 
     font-size: 0.8em;
 
     font-size: 0.8em;
 
     text-decoration:none;
 
     text-decoration:none;
 
 }
 
 }
 
+
 
 .bio {
 
 .bio {
 
     vertical-align: middle;
 
     vertical-align: middle;
 
     font-size: 0.9em;
 
     font-size: 0.9em;
 
     margin: 1em
 
     margin: 1em
 
 }
 
 }
 
+
 
+/* IMAGES */
 
+
 
 .gallery {
 
 .gallery {
 
     margin:auto;
 
     margin:auto;
 
     display: flex;
 
     display: flex;
 
     align-items: center;
 
     align-items: center;
 
     width: 100%;
 
     width: 100%;
 
 }
 
 }
 
+
 
 .gallery .panel {
 
 .gallery .panel {
 
     margin: 2px;
 
     margin: 2px;
 
     width: auto
 
     width: auto
 
 }
 
 }
 
+
 
 .gallery .panel img {
 
 .gallery .panel img {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
 
 }
 
 }
 
+
 
 .gallery .panel img:hover {
 
 .gallery .panel img:hover {
 
     border: 1px solid #777;
 
     border: 1px solid #777;
 
     filter: invert(100%);
 
     filter: invert(100%);
 
 }
 
 }
 
-/* Clear floats after the columns */
 
-.row:after {
 
-    content: "";
 
-    display: table;
 
-    clear: both;
 
+
 
+/* HEADER AND FOOTER */
 
+footer {
 
+    display: grid;
 
+    place-content: center;
 
 }
 
 }
 
+