Some CSS cleanup.

This commit is contained in:
Johannes Findeisen 2024-04-17 01:32:52 +02:00
commit 918c9e4833
9 changed files with 367 additions and 367 deletions

View file

@ -13,7 +13,7 @@ keywords:
- php
- python
- ruby
author: Johannes Findeisen
author: Johannes Findeisen <you@hanez.org>
email: mail@xw3.org
description: A static HTML and CGI based website...
baseurl:

View file

@ -5,9 +5,9 @@ layout: default
<div class="post">
<header class="post-header">
<h1 class="post-title" id="terminal">{{ site.url_short }}:{{ page.title }}<a href="../">../</a></h1>
{% if page.noDate != true %}<p class="post-meta">{% if page.date %}{{ page.date | date: "%b %-d, %Y" }} - {% endif %}
{% if page.noDate != true %}<p class="post-meta" style="padding: 0px 0px 0px 0px;">{% if page.date %}{{ page.date | date: "%b %-d, %Y" }} - {% endif %}
Updated: {{ page.path | file_date | date: "%b %-d, %Y" }} ({{ site.timezone }})</p>{% endif %}
{% if page.subtitle %}<p>{{ page.subtitle }}</p>{% endif %}
{% if page.subtitle %}<p style="padding: 0px 0px 0px 0px;">{{ page.subtitle }}</p>{% endif %}
</header>
<article class="post-content">
{{ content | toc_generate }}

View file

@ -5,7 +5,7 @@ layout: default
<div class="post">
<header class="post-header">
<h1 class="post-title" id="terminal">{{ site.url_short }}:{{ page.url }}<a href="../../../../">../../../../</a></h1>
<p class="post-meta">{% if page.date %}{{ page.date | date: "%b %-d, %Y" }}{% endif %}
<p class="post-meta" style="padding: 0px 0px 0px 0px;">{% if page.date %}{{ page.date | date: "%b %-d, %Y" }}{% endif %}
{% if page.date and page.date_updated %} - {% endif %}
{% if page.date_updated %}Updated: {{ page.date_updated | date: "%b %-d, %Y" }}{% endif %}
{% if page.date or page.date_updated %} ({{ site.timezone }}){% endif %}</p>

View file

@ -44,29 +44,6 @@ h1, h2, h3, h4, h5, h6 {
h1 {
}
#terminal::before {
content: "";
}
@media (prefers-reduced-motion: no-preference) {
@keyframes flash {
50% { opacity: 0; }
}
@keyframes reveal {
from { width: 2em; }
to { width: 100%; }
}
#terminal {
animation: reveal 6s linear;
overflow: hidden;
text-overflow: "";
white-space: nowrap;
}
#terminal::after {
animation: flash 1.5s step-end infinite;
content: "";
}
}
h2 {
> a,
a:link,
@ -143,6 +120,7 @@ a:active {
p {
//text-align: justify;
padding: 0px 0px 0px 0px;
}
blockquote {
@ -236,335 +214,3 @@ table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sor
content: " \25B4 \25BE"
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
background: rgba(0,0,0,.8);
z-index: 999;
opacity: 1;
transition: all 0.5s;
}
.wrapper {
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit;
padding-left: $spacing-unit;
padding-top: calc($spacing-unit / 2);
padding-bottom: 0;
@extend %clearfix;
@include media-query($on-laptop) {
max-width: calc(#{$content-width} - (#{$spacing-unit}));
padding-right: calc($spacing-unit / 2);
padding-left: calc($spacing-unit / 2);
}
}
%clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
.icon {
> svg {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
path {
fill: $grey-color;
}
}
}
.pagination a, span {
margin-left: 4px;
margin-right: 4px;
}
a.ext::after {
content: "\f08e";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
text-decoration: none;
}
a.mail::after,
span.mail::after {
content: "\f0e0";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
a.document {
content: "\f15b";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
a.cube::after {
content: "\f1b2";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
a.file::after {
content: "\f0c7";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
a.person::after {
content: "\f007";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
a.chat::after,
span.chat::after {
content: "\f075";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
span.feed {
border: 1px solid;
border-color: #FC9 #630 #330 #F96;
padding: 0 3px;
font: bold 0.4em sans-serif;
color: #fff;
background: #f60;
text-decoration: none;
margin: 0;
}
#topbutton {
text-align: center;
padding: 0;
width: 46px;
height: 46px;
background: $topbutton-color url(/images/up-arrow.png) no-repeat center center;
border: 1px solid $grey-color-dark;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
}
span.cursor {
color: #FF9500;
display: inline-block;
background: transparent;
margin-left: 1px;
animation: 1s blink step-end infinite;
}
@keyframes "blink" bold {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-webkit-keyframes "blink" bold {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-ms-keyframes "blink" bold {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#pages {
text-align: center;
}
#pages a:link,
#pages a:visited,
#pages strong {
float: left;
width: 1.8em;
border: 1px solid #000;
font-weight: bold;
text-decoration: none;
text-align: center;
margin: 0px 4px 4px 0;
padding: 2px;
background: $brand-color;
color: #fff;
}
#pages > a.active {
color: $grey-color-light;
background: #fff;
border-color: $grey-color;
}
#pages a:focus,
#pages a:hover,
#pages a:active {
color: $hover-color;
background: #fff;
}
#pages p {
float: left;
width: 100%;
}
#notify {
padding: 10px;
margin-bottom: 20px;
border: 1px solid $grey-color;
background: $headline-color;
}
#contactform {
padding: 20px;
border: 1px solid $grey-color;
background: $grey-color-light;
}
#contactform label, #contactform input, #contactform textarea {
display: block;
width: 97%;
resize: none;
}
#contactform textarea {
height: 120px;
}
#contactform label { margin: 10px 0; }
#contactform label:first-child { margin-top: 0; }
#contactform input, #contactform textarea {
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
font-weight: 300;
padding: 10px;
margin-bottom: 10px;
border: 1px solid $grey-color;
}
#contactform input[type=submit] {
border: 0;
color: #fff;
background: $brand-color;
cursor: pointer;
width: 100%;
}
#contactform input[type=submit]:hover {
background: $headline-color;
}
#searchform {
padding: 20px;
border: 1px solid $grey-color;
background: $grey-color-light;
}
#searchform label, #searchform input, #searchform textarea {
display: block;
width: 97%;
resize: none;
}
#searchform textarea {
height: 120px;
}
#searchform label { margin: 10px 0; }
#searchform label:first-child { margin-top: 0; }
#searchform input, #searchform textarea {
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
font-weight: 300;
padding: 10px;
margin-bottom: 10px;
border: 1px solid $grey-color;
}
#searchform input[type=submit] {
border: 0;
color: #fff;
background: $brand-color;
cursor: pointer;
width: 100%;
}
#searchform input[type=submit]:hover {
background: $headline-color;
}
.lds-dual-ring.hidden {
display: none;
}
.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 5% auto;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View file

@ -153,3 +153,357 @@
.post-content img {
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
background: rgba(0,0,0,.8);
z-index: 999;
opacity: 1;
transition: all 0.5s;
}
.wrapper {
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit;
padding-left: $spacing-unit;
padding-top: calc($spacing-unit / 2);
padding-bottom: 0;
@extend %clearfix;
@include media-query($on-laptop) {
max-width: calc(#{$content-width} - (#{$spacing-unit}));
padding-right: calc($spacing-unit / 2);
padding-left: calc($spacing-unit / 2);
}
}
%clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
.icon {
> svg {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
path {
fill: $grey-color;
}
}
}
.pagination a, span {
margin-left: 4px;
margin-right: 4px;
}
a.ext::after {
content: "\f08e";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
text-decoration: none;
}
a.mail::after,
span.mail::after {
content: "\f0e0";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
a.document {
content: "\f15b";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
a.cube::after {
content: "\f1b2";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
a.file::after {
content: "\f0c7";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
a.person::after {
content: "\f007";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
a.chat::after,
span.chat::after {
content: "\f075";
font-family: "ForkAwesome";
padding-left: 5px;
color: $brand-color-light;
}
span.feed {
border: 1px solid;
border-color: #FC9 #630 #330 #F96;
padding: 0 3px;
font: bold 0.4em sans-serif;
color: #fff;
background: #f60;
text-decoration: none;
margin: 0;
}
#topbutton {
text-align: center;
padding: 0;
width: 46px;
height: 46px;
background: $topbutton-color url(/images/up-arrow.png) no-repeat center center;
border: 1px solid $grey-color-dark;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
}
span.cursor {
color: #FF9500;
display: inline-block;
background: transparent;
margin-left: 1px;
animation: 1s blink step-end infinite;
}
@keyframes "blink" bold {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-webkit-keyframes "blink" bold {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-ms-keyframes "blink" bold {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#pages {
text-align: center;
}
#pages a:link,
#pages a:visited,
#pages strong {
float: left;
width: 1.8em;
border: 1px solid #000;
font-weight: bold;
text-decoration: none;
text-align: center;
margin: 0px 4px 4px 0;
padding: 2px;
background: $brand-color;
color: #fff;
}
#pages > a.active {
color: $grey-color-light;
background: #fff;
border-color: $grey-color;
}
#pages a:focus,
#pages a:hover,
#pages a:active {
color: $hover-color;
background: #fff;
}
#pages p {
float: left;
width: 100%;
}
#notify {
padding: 10px;
margin-bottom: 20px;
border: 1px solid $grey-color;
background: $headline-color;
}
#contactform {
padding: 20px;
border: 1px solid $grey-color;
background: $grey-color-light;
}
#contactform label, #contactform input, #contactform textarea {
display: block;
width: 97%;
resize: none;
}
#contactform textarea {
height: 120px;
}
#contactform label { margin: 10px 0; }
#contactform label:first-child { margin-top: 0; }
#contactform input, #contactform textarea {
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
font-weight: 300;
padding: 10px;
margin-bottom: 10px;
border: 1px solid $grey-color;
}
#contactform input[type=submit] {
border: 0;
color: #fff;
background: $brand-color;
cursor: pointer;
width: 100%;
}
#contactform input[type=submit]:hover {
background: $headline-color;
}
#searchform {
padding: 20px;
border: 1px solid $grey-color;
background: $grey-color-light;
}
#searchform label, #searchform input, #searchform textarea {
display: block;
width: 97%;
resize: none;
}
#searchform textarea {
height: 120px;
}
#searchform label { margin: 10px 0; }
#searchform label:first-child { margin-top: 0; }
#searchform input, #searchform textarea {
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
font-weight: 300;
padding: 10px;
margin-bottom: 10px;
border: 1px solid $grey-color;
}
#searchform input[type=submit] {
border: 0;
color: #fff;
background: $brand-color;
cursor: pointer;
width: 100%;
}
#searchform input[type=submit]:hover {
background: $headline-color;
}
.lds-dual-ring.hidden {
display: none;
}
.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 5% auto;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#terminal::before {
content: "";
}
@media (prefers-reduced-motion: no-preference) {
@keyframes flash {
50% { opacity: 0; }
}
@keyframes reveal {
from { width: 2em; }
to { width: 100%; }
}
#terminal {
animation: reveal 6s linear;
overflow: hidden;
text-overflow: "";
white-space: nowrap;
}
#terminal::after {
animation: flash 1.5s step-end infinite;
content: "";
}
}

View file

@ -11,7 +11,7 @@ tags:
<h2>About</h2>
<div style="padding:0px 8px 0px 8px;">
<div>
<p>xw3.org is mostly a template for <a href="https://jekyllrb.com/">Jekyll</a> based websites <b style="color:green;">PLUS</b> a <a href="https://www.lua.org/">Lua</a> based <a href="https://git.xw3.org/xw3/cgi">CGI</a> directory for adding dynamic features like a <a href="/contact/">contact</a> form (other languages are supported too). Additionally there is a <a href="https://git.xw3.org/xw3/xw3.org/src/branch/main/Makefile">Makefile</a> included for easy deployment of the website.</p>
<p>Just an idea... not more! A dynamic website like in the 90's, with some little JavaScript sugar. No rocket science... ;)</p>

View file

@ -25,7 +25,7 @@ permalink: /blog/
<h2>Latest posts</h2>
{% for post in site.tags.pinned %}
<article class="post-content" style="padding:0px 8px 0px 8px;">
<article class="post-content">
<h3><a href="{{ post.url }}" title="{{ post.title }}">{{ post.url }}</a> <span style="cursor:help; float: right;" title="Pinned Post!">📌</span></h3>
<p class="post-meta">{{ post.date | date: "%b %-d, %Y" }}
{% if post.date_updated %} - Updated: {{ post.date_updated | date: "%b %-d, %Y" }}{% endif %} ({{ site.timezone }})</p>
@ -35,7 +35,7 @@ permalink: /blog/
{% for post in site.posts %}
{% unless post.tags contains 'pinned' %}
<article class="post-content" style="padding:0px 8px 0px 8px;">
<article class="post-content">
<h3><a href="{{ post.url }}" title="{{ post.title }}">{{ post.url }}</a></h3>
<p class="post-meta">{{ post.date | date: "%b %-d, %Y" }}
{% if post.date_updated %} - Updated: {{ post.date_updated | date: "%b %-d, %Y" }}{% endif %} ({{ site.timezone }})</p>

View file

@ -16,13 +16,13 @@ description: The xw3 CGI research project
<div class="post">
<header class="post-header">
<h1 class="post-title" id="terminal">{{ site.url_short }}:{{ page.title }}<a href="./">./</a></h1>
<p>{{ page.subtitle }}</p>
<p style="padding: 0px 0px 0px 0px;">{{ page.subtitle }}</p>
</header>
</div>
<h2>About</h2>
<div style="padding:0px 8px 0px 8px;">
<div>
<p>xw3.org is mostly a template for <a href="https://jekyllrb.com/">Jekyll</a> based websites <b style="color:green;">PLUS</b> a <a href="https://www.lua.org/">Lua</a> based <a href="https://git.xw3.org/xw3/cgi">CGI</a> directory for adding dynamic features like a <a href="/contact/">contact</a> form (other languages are supported too). Additionally there is a <a href="https://git.xw3.org/xw3/xw3.org/src/branch/main/Makefile">Makefile</a> included for easy deployment of the website.</p>
<p>Just an idea... not more! A dynamic website like in the 90's, with some little JavaScript sugar. No rocket science... ;)</p>
@ -34,7 +34,7 @@ description: The xw3 CGI research project
{% if page.url == "/" %}
{% for post in site.tags.pinned %}
<article class="post-content" style="padding:0px 8px 0px 8px;">
<article class="post-content">
<h3><a href="{{ post.url }}" title="{{ post.title }}">{{ post.url }}</a> <span style="cursor:help; float: right;" title="Pinned Post!">📌</span></h3>
<p class="post-meta">{{ post.date | date: "%b %-d, %Y" }}
{% if post.date_updated %} - Updated: {{ post.date_updated | date: "%b %-d, %Y" }}{% endif %} ({{ site.timezone }})</p>
@ -45,7 +45,7 @@ description: The xw3 CGI research project
{% for post in site.posts %}
{% unless post.tags contains 'pinned' %}
<article class="post-content" style="padding:0px 8px 0px 8px;">
<article class="post-content">
<h3><a href="{{ post.url }}" title="{{ post.title }}">{{ post.url }}</a></h3>
<p class="post-meta">{{ post.date | date: "%b %-d, %Y" }}
{% if post.date_updated %} - Updated: {{ post.date_updated | date: "%b %-d, %Y" }}{% endif %} ({{ site.timezone }})</p>

View file

@ -57,7 +57,7 @@ tags:
<h2>Advertising Partners Privacy Policies</h2>
<P>You may consult this list to find the Privacy Policy for each of the advertising partners of xw3.org.</p>
<p>You may consult this list to find the Privacy Policy for each of the advertising partners of xw3.org.</p>
<p>Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on xw3.org, which are sent directly to users' browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit.</p>