From 4611ee5ce9f32a31daf6f822635abb74f8f47a6e Mon Sep 17 00:00:00 2001 From: maste9 Date: Sat, 12 Feb 2022 18:49:42 +0100 Subject: [PATCH] First working output with the starting status and its descendants. Order of statuses has yet to be optimized. --- index.html | 111 +++++++++++++++++++++++++++++++++++++++++------------ style.css | 111 ++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 170 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index 4e22b50..263237d 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,7 @@ - Our superheroes - - - + TootKomm @@ -15,39 +12,103 @@ -
+
+ + + + -
+ - diff --git a/style.css b/style.css index cb7a892..84da7c4 100644 --- a/style.css +++ b/style.css @@ -1,48 +1,105 @@ /* || general styles */ html { - font-family: 'helvetica neue', helvetica, arial, sans-serif; + font-family: 'Oswald', sans-serif; + font-weight: 200; } -body { - width: 800px; - margin: 0 auto; +article { + font-family: 'Oswald', sans-serif; + color: #fff; + background:#313543; + display: grid; + grid-template-areas: + "profile header " + "profile content" + "footer footer"; + grid-template-columns: 1fr 3fr; + gap: 0.5em; + width: 30em; + padding: 1em 0.25em 0em 0.25em; + } -h1, h2 { - font-family: 'Faster One', cursive; +article a { + color: #4d9fdb; } -/* header styles */ -h1 { - font-size: 4rem; - text-align: center; +article header { + width:100%; + grid-area: header; } -header p { - font-size: 1.3rem; - font-weight: bold; - text-align: center; +article header summary { + font-weight: 300; + width:100%; + } -/* section styles */ - -section article { - width: 33%; - float: left; +article aside { + grid-area: profile; + text-align:center; } -section p { - margin: 5px 0; +article aside h1 { + font-size: 1.2em; + font-weight: 300; + padding:0; margin-bottom:0; } -section ul { - margin-top: 0; +article aside h2 { + font-size: 1.0em; + font-weight: 200; + padding:0; margin:0; } -h2 { - font-size: 2.5rem; - letter-spacing: -5px; - margin-bottom: 10px; +article aside img { + max-width: 100px; } + +article section { + grid-area: content; +} + +article footer { + grid-area: footer; + background: #282c37; +} + + +article footer dl { + width: 100%; + + display: grid; + grid-template-areas: + "replies-icon replies favs-icon favs boosts-icon boosts"; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + gap:0em; +} + +article footer dl > .replies { + grid-area: replies; +} + +article footer dl > .favs { + grid-area: favs; +} + +article footer dl > . boosts { + grid-area: boosts; +} + + + + +strong, b { + font-weight: 300; +} + +.hashtag { + text-decoration:none; +} + + +