Fix #1 : Better CSS

This commit is contained in:
Alexis Hassler 2019-05-04 18:37:29 +02:00
parent 460d7e3ef4
commit be7a29f8ae
17 changed files with 310 additions and 669 deletions

View File

@ -1,12 +1,11 @@
<div class="visualClear"></div>
<div class="site-footer" id="footer">
<div id="f-poweredbyico">
<a href="https://creativecommons.org/licenses/by-nc-sa/2.5/">
<img src="https://creativecommons.org/images/public/somerights20.png" alt="Paternit<69>-NonCommercial-ShareAlike 2.5" width="88" height="31">
</a>
<footer>
<div id="footer-left">
</div>
<ul id="f-list">
<li>{% if page.modified %}{{ site.data.i18n[site.lang].label.modified }}: {{ page.modified }}{% endif %}<br/></li>
<li>{% if page.created %}{{ site.data.i18n[site.lang].label.created }}: {{ page.created }}{% endif %}</li>
</ul>
</div>
<div id="footer-center">
{{ site.data.i18n[site.lang].label.modified }}: {{ page.modified }}<br/>
{{ site.data.i18n[site.lang].label.created }}: {{ page.created }}
</div>
<div id="footer-right">
<a href="https://creativecommons.org/licenses/by-sa/4.0/"></a>
</div>
</footer>

View File

@ -1,7 +1,7 @@
{% include /functions/wiki-pages.html %}
{% assign redirect = page.redirect | default: site.data.i18n[site.lang].home %}
{% for other_page in wiki_pages %}
{% if other_page.slug == redirect %}
{% assign redirect_page = other_page %}
{% endif %}
{% endfor %}
{%- include /functions/wiki-pages.html -%}
{%- assign redirect = page.redirect | liquify -%}
{%- for other_page in wiki_pages -%}
{%- if other_page.slug == redirect -%}
{%- assign redirect_page = other_page -%}
{%- endif -%}
{%- endfor -%}

View File

@ -1,7 +1,7 @@
{% assign wiki_pages = '' | split: '' %}
{% for collection in site.collections %}
{% assign prefix = collection.label | slice: 0, 4 %}
{% if prefix == 'wiki' %}
{% assign wiki_pages = wiki_pages | concat: collection.docs %}
{% endif %}
{% endfor %}
{%- assign wiki_pages = '' | split: '' -%}
{%- for collection in site.collections -%}
{%- assign prefix = collection.label | slice: 0, 4 -%}
{%- if prefix == 'wiki' -%}
{%- assign wiki_pages = wiki_pages | concat: collection.docs -%}
{%- endif -%}
{%- endfor -%}

View File

@ -1,10 +1,9 @@
<meta charset="UTF-8" />
<title>{{ page.title }}</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/main.css" />
{% if include.redirect_url %}
<link rel="canonical" href="{{ include.redirect_url }}">
<meta http-equiv="refresh" content="0; url={{ include.redirect_url }}" />
{% endif %}
<link rel="alternate" type="application/atom+xml" title="{{ site.title }} feed" href="/feed.xml" />
<meta charset="UTF-8" />
<title>{{ page.title }} - {{ site.title }}</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/main.css" />
{%- if include.redirect_url -%}
<link rel="canonical" href="{{ include.redirect_url }}">
<meta http-equiv="refresh" content="0; url={{ include.redirect_url }}" />
{%- endif -%}
<link rel="alternate" type="application/atom+xml" title="{{ site.title }} feed" href="/feed.xml" />

View File

@ -1,12 +1,10 @@
{% if page.links != nil %}
<div class="generated-sidebar portlet" id="p-links">
{%- if page.links != nil -%}
<div id="links" class="portlet">
<h3>{{ site.data.i18n[site.lang].label.links }}</h3>
<div class="portlet-body">
<ul>
{% for link in page.links %}
<li><a href="{{link.url}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</div>
<ul class="portlet-body">
{%- for link in page.links -%}
<li><a href="{{link.url}}">{{link.text}}</a></li>
{%- endfor -%}
</ul>
</div>
{% endif %}
{%- endif -%}

View File

@ -1,3 +1,3 @@
<div class="portlet" id="p-logo" role="banner">
<div id="logo">
<a href="/{{ site.data.i18n[site.lang].home }}.html" style="background-image: url({{ site.data.i18n[site.lang].logo }});" title="{{ site.data.i18n[site.lang].label.main_page }}"></a>
</div>

View File

@ -1,21 +1,20 @@
{% if page.tags.size > 0 %}
<div class="generated-sidebar portlet" id="p-navigation" role="navigation">
{%- if page.tags.size > 0 -%}
<div id="navigation" class="portlet">
<h3>{{ site.data.i18n[site.lang].label.tags }}</h3>
<div class="portlet-body">
<ul>
{% include /functions/wiki-pages.html %}
{% for tag in page.tags %}
{%- include /functions/wiki-pages.html -%}
{%- for tag in page.tags -%}
<li id="n-tag-{{ tag }}"><a href="/{{ site.data.i18n[site.lang].prefix.tag }}{{ tag }}.html">{{ tag }}</a></li>
<ul>
{% for other_page in wiki_pages %}
{% if other_page.tags contains tag and other_page.slug != page.slug %}
{%- for other_page in wiki_pages -%}
{%- if other_page.tags contains tag and other_page.slug != page.slug -%}
<li><a href="{{ other_page.url }}.html">{{ other_page.title }}</a></li>
{% endif %}
{% endfor %}
{%- endif -%}
{%- endfor -%}
</ul>
{% endfor %}
{%- endfor -%}
</ul>
</div>
</div>
{% endif %}
{%- endif -%}

View File

@ -1,8 +1,7 @@
{% if page.toc == true %}
<div class="generated-sidebar portlet" id="p-toc" role="toc">
{%- if page.toc == true -%}
<div id="toc" class="portlet">
{{- content | toc_only | replace: "
", "" -}}
<h3>{{ site.data.i18n[site.lang].label.toc }}</h3>
<div class="portlet-body">
{{ content | toc_only }}
</div>
</div>
{% endif %}
{%- endif -%}

View File

@ -1,14 +1,14 @@
{% if page.author %}
<div class="generated-sidebar portlet" id="p-author" role="author">
<h3>{{ site.data.i18n[site.lang].label.author }}</h3>
{%- if page.author -%}
<div id="author" class="portlet">
<div class="portlet-body">
{% assign author = site.data.users[page.author] %}
{%- assign author = site.data.users[page.author] -%}
<ul>
<li><a href="/{{ site.data.i18n[site.lang].prefix.user }}{{ page.author }}.html">{{ author.name }}</a></li>
<li><a href="/{{ site.data.i18n[site.lang].prefix.user }}{{ page.author }}">{{ author.name }}</a></li>
</ul>
{% if author.logo %}
{%- if author.logo -%}
<img src="/{{ author.logo }}" style="max-width: 100%;margin: 3px" />
{% endif %}
{%- endif -%}
</div>
<h3>{{ site.data.i18n[site.lang].label.author }}</h3>
</div>
{% endif %}
{%- endif -%}

View File

@ -3,30 +3,17 @@
{% include head.html %}
</head>
<body class="mediawiki skin-monobook action-view">
<div id="globalWrapper">
<div id="column-content">
<div id="content" class="wiki-body" role="main">
<h1 id="firstHeading" class="firstHeading">
<span dir="auto">{{ page.title }}</span>
</h1>
<div id="bodyContent" class="wiki-body-content">
<div id="mw-content-text" dir="ltr">
{{ content | inject_anchors }}
</div>
</div>
</div>
</div>
<div id="column-one">
{% include logo.html %}
{% include user.html %}
{% include toc.html %}
{% include links.html %}
{% include tags.html %}
</div>
<body>
<div id="main">
<h1 id="title">{{ page.title }}</h1>
<div id="content">{{ content | inject_anchors }}</div>
</div>
<div id="menu">
{% include logo.html %}
{% include user.html %}
{% include toc.html %}
{% include links.html %}
{% include tags.html %}
</div>
{% include footer.html %}

View File

@ -1,35 +1,27 @@
<html>
{% include /functions/redirect-page.html %}
<html dir="ltr" class="client-js" lang="fr">
{%- include /functions/redirect-page.html -%}
<head>
{% assign redirect_url = redirect_page.url | append: ".html" %}
{% include head.html redirect_url = redirect_url %}
{%- assign redirect_url = redirect_page.url | default: site.data.i18n[site.lang].home | append: ".html" -%}
{%- include head.html redirect_url = redirect_url -%}
</head>
<body>
<div id="globalWrapper">
<div id="column-content">
<div id="content" class="wiki-body" role="main">
<h1 id="firstHeading" class="firstHeading" lang="fr">
<span dir="auto">{{ redirect_page.title }}</span>
</h1>
<div id="bodyContent" class="wiki-body-content">
<div id="mw-content-text" dir="ltr" class="mw-content-ltr" lang="fr">
<div class="redirectMsg">
<p>{{ site.data.i18n[site.lang].label.redirect }} :</p>
<ul class="redirectText">
<li><a href="{{ redirect_page.url }}.html" title="{{ redirect_page.name }}">{{ redirect_page.title }}</a></li>
</ul>
</div>
</div>
</div>
<div id="main">
<h1 id="title">{{ redirect_page.title }}</h1>
<div id="content">
<div class="redirectMsg">
<p>{{ site.data.i18n[site.lang].label.redirect }} :</p>
<ul class="redirectText">
<li><a href="{{ redirect_page.url }}.html" title="{{ redirect_page.name }}">{{ redirect_page.title }}</a></li>
</ul>
</div>
</div>
<div id="column-one">
{% include logo.html %}
</div>
</div>
{% include footer.html %}
</div>
<div id="menu">
{%- include logo.html -%}
</div>
{%- include footer.html -%}
</body>
</html>

View File

@ -1,56 +1,34 @@
<html dir="ltr" class="client-js" lang="fr">
<head>
<meta charset="UTF-8">
<title>{{ page.title }}</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/main.css">
<style>
.columns {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
width: 100%;
}
</style>
{% include head.html %}
</head>
<body class="mediawiki ltr sitedir-ltr ns-0 ns-subject skin-monobook action-view">
<div id="globalWrapper">
<div id="column-content">
<div id="content" class="wiki-body" role="main">
<h1 id="firstHeading" class="firstHeading" lang="fr">
<span dir="auto">{{ page.tags }}</span>
</h1>
<div id="bodyContent" class="wiki-body-content">
<div id="mw-content-text" dir="ltr" class="mw-content-ltr" lang="fr">
{{ content }}
</div>
</div>
<div>
<h3>{{ site.data.i18n[site.lang].label.tag_pages }} {{ page.tags }}</h3>
<div class="columns">
<ul>
{% include /functions/wiki-pages.html %}
{% for tag in page.tags %}
{% for other_page in wiki_pages %}
{% if other_page.tags contains tag and other_page.slug != page.slug %}
<li><a href="{{ other_page.url }}">{{ other_page.title }}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
<body>
<div id="main">
<h1 id="title">{{ page.tags }}</h1>
<div id="content">
{{ content | inject_anchors }}
</div>
<div id="pages">
<h3>{{ site.data.i18n[site.lang].label.tag_pages }} {{ page.tags }}</h3>
<div class="columns">
<ul>
{% include /functions/wiki-pages.html %}
{% for tag in page.tags %}
{% for other_page in wiki_pages %}
{% if other_page.tags contains tag and other_page.slug != page.slug %}
<li><a href="{{ other_page.url }}">{{ other_page.title }}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
<div id="column-one">
{% include logo.html %}
</div>
</div>
</div>
<div id="menu">
{% include logo.html %}
</div>
{% include footer.html %}
</body>
</html>

18
_sass/content.scss Normal file
View File

@ -0,0 +1,18 @@
.center {
width: 100%;
text-align: center;
}
div.floatleft {
float: left;
clear: left;
position: relative;
margin: 0 .5em .5em 0;
border: 0;
}
div.floatright {
float: right;
clear: right;
position: relative;
margin: 0 .5em .5em 0;
border: 0;
}

29
_sass/footer.scss Normal file
View File

@ -0,0 +1,29 @@
body > footer {
background: #ffffff;
grid-column: 1 / 3;
grid-row: 2;
}
footer {
display: grid;
grid-template-columns: 20% 60% 20%;
#footer-center {
align-self: center;
justify-self: center;
text-align: center;
font-size: 80%;
}
#footer-right {
align-self: center;
justify-self: end;
a {
background-image: url(https://creativecommons.org/images/public/somerights20.png);
width: 88px;
height: 31px;
display: block;
background-repeat: no-repeat;
}
}
}

57
_sass/grid.scss Normal file
View File

@ -0,0 +1,57 @@
body {
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: auto auto;
grid-gap: 10px;
#menu {
grid-column: 1;
grid-row: 1;
}
#main {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
}
@media (max-width: 700px) {
body {
grid-template-columns: auto;
#main {
grid-column: 1;
grid-row: 1;
min-width: 0;
}
#menu {
grid-column: 1;
grid-row: 2;
#logo {
position: absolute;
right: 20px;
a {
height: 60px;
width: 150px;
margin-top: 60px;
}
}
}
footer {
grid-column: 1;
grid-row: 3;
display: none;
}
}
}
@media (max-width: 350px) {
#logo {
display: none;
}
}

View File

@ -1,539 +1,122 @@
body {
font: x-small sans-serif;
font-family: sans-serif;
background: #acabab;
color: black;
margin: 0;
padding: 0;
direction: ltr;
unicode-bidi: embed;
}
#main {
background: #ffffff;
padding: 1em;
}
#menu {
#logo {
a {
display: block;
height: 155px;
width: 100%;
background-repeat: no-repeat;
background-position: 35% 50% !important;
text-decoration: none;
}
}
.portlet {
display: grid;
font-size: 90%;
ul.section-nav, // toc has no portlet-body
.portlet-body {
background: #ffffff;
border: 1px solid #aaa;
grid-row: 2;
}
h3 {
font-size: 90%;
font-weight: normal;
margin: 1em 0 0 0;
padding-left: 0.3em;
grid-row: 1;
}
ul:empty,
ul:empty ~ h3 {
display: none;
height: 0;
margin: 0;
overflow: hidden;
grid-row: 2;
}
}
}
h1, h2, h3, h4, h5, h6 {
border-bottom: 1px solid #aaa;
margin: 0 0 0.5em 0;
font-weight: normal;
}
a {
text-decoration: none;
color: #0645ad;
background: none;
&:visited {
color: #0b0080;
}
&:active {
color: #faa700;
}
&:hover, &:focus {
text-decoration: underline;
}
&.stub {
color: #772233;
}
&.new {
color: #ba0000;
}
}
#p-personal a.new {
color: #ba0000;
}
a.new:visited {
color: #a55858;
}
.wiki-body a.external {
color: #36b;
&:visited {
color: #636;
}
&:active {
color: #b63;
}
}
img {
border: none;
vertical-align: middle;
}
hr {
height: 1px;
color: #aaa;
background-color: #aaa;
border: 0;
margin: 0.2em 0;
}
h1, h2, h3, h4, h5, h6 {
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
h1 {
font-size: 188%;
}
h2 {
font-size: 150%;
}
h3, h4, h5, h6 {
border-bottom: none;
#title {
font-weight: bold;
}
h3 {
font-size: 132%;
}
h4 {
font-size: 116%;
}
h5 {
font-size: 108%;
}
h6 {
font-size: 100%;
}
h1, h2 {
margin-bottom: 0.6em;
}
h3, h4, h5 {
margin-bottom: 0.3em;
}
p {
margin: .4em 0 .5em 0;
line-height: 1.5em;
img {
margin: 0;
}
}
ul {
line-height: 1.5em;
list-style-type: square;
margin: .3em 0 0 1.6em;
padding: 0;
}
ol {
line-height: 1.5em;
margin: .3em 0 0 3.2em;
padding: 0;
list-style-image: none;
}
li {
margin-bottom: 0.1em;
}
dt {
font-weight: bold;
margin-bottom: 0.1em;
}
dl {
margin-top: .2em;
font-size: 210%;
margin-bottom: 0.5em;
}
dd {
line-height: 1.5em;
margin-left: 1.6em;
margin-bottom: 0.1em;
}
pre, code {
font-family: monospace;
font-size: 0.9rem;
q {
font-style: italic;
}
pre, code, tt, kbd, samp {
font-family: monospace, Courier;
}
code {
color: black;
padding: 1px 4px;
span {
border: 0;
a {
color: #5a5a5a;
}
}
pre {
color: black;
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 1em;
}
table {
font-size: 100%;
}
fieldset {
border: 1px solid #2f6fab;
margin: 1em 0 1em 0;
padding: 0 1em 1em;
line-height: 1.5em;
&.nested {
margin: 0 0 0.5em 0;
padding: 0 0.5em 0.5em;
}
}
legend {
padding: .5em;
font-size: 95%;
}
form {
border: none;
margin: 0;
}
textarea {
width: 100%;
padding: .1em;
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
select {
vertical-align: top;
// white-space: pre-wrap;
// word-wrap: break-word;
overflow: auto;
}
.center {
width: 100%;
text-align: center;
}
*.center * {
margin-left: auto;
margin-right: auto;
img, embed, object, video {
max-width: 100%;
height: auto;
}
.small {
font-size: 94%;
}
table.small {
font-size: 100%;
}
.visualClear {
clear: both;
}
div.floatright, table.floatright {
margin: 0 0 .5em .5em;
border: 0;
}
div {
&.floatright p {
font-style: italic;
}
&.floatleft {
margin: 0 .5em .5em 0;
border: 0;
}
}
table.floatleft {
margin: 0 .5em .5em 0;
border: 0;
}
div {
&.floatleft p {
font-style: italic;
}
&.thumb {
margin-bottom: .5em;
width: auto;
background-color: transparent;
}
&.thumbinner {
border: 1px solid #ccc;
padding: 3px;
background-color: #f9f9f9;
font-size: 94%;
text-align: center;
overflow: hidden;
}
}
html {
.thumbimage {
border: 1px solid #ccc;
}
.thumbcaption {
border: none;
line-height: 1.4em;
padding: 3px;
font-size: 94%;
text-align: left;
}
}
img.thumbborder {
border: 1px solid #dddddd;
}
div {
&.tright {
margin: 0.5em 0 1.3em 1.4em;
}
&.tleft {
margin: 0.5em 1.4em 1.3em 0;
}
}
.catlinks {
border: 1px solid #aaa;
background-color: #f9f9f9;
padding: 5px;
margin-top: 1em;
clear: both;
}
.usermessage {
background-color: #ffce7b;
border: 1px solid #ffa500;
color: black;
font-weight: bold;
margin: 2em 0 1em;
padding: .5em 1em;
vertical-align: middle;
}
#siteNotice {
position: relative;
text-align: center;
margin: 0;
}
#localNotice {
margin-bottom: 0.9em;
}
.firstHeading {
margin-bottom: .1em;
line-height: 1.2em;
padding-bottom: 0;
}
#siteSub {
display: none;
}
#jump-to-nav {
margin-top: -1.4em;
margin-bottom: 1.4em;
}
#contentSub, #contentSub2 {
font-size: 84%;
line-height: 1.2em;
margin: 0 0 1.4em 1em;
color: #545454;
width: auto;
}
span.subpages {
display: block;
}
div#column-content {
.columns {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
width: 100%;
float: right;
margin: 0 0 .6em -15em;
padding: 0;
}
.wiki-body {
margin: 1em 0 0 15em;
padding: 1em;
position: relative;
z-index: 2;
background: white;
color: black;
border: 1px solid #aaa;
border-right: none;
line-height: 1.5em;
}
div#column-one {
padding-top: 160px;
}
#column-one h2 {
position: absolute;
top: -9999px;
}
div#globalWrapper {
font-size: 127%;
width: 100%;
margin: 0;
padding: 0;
}
a {
color: #002bb8;
&:visited {
color: #5a3696;
}
&.new {
color: #cc2200;
}
}
#p-personal a.new {
color: #cc2200;
}
ul {
list-style-type: square;
list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
}
pre {
line-height: 1.1em;
}
#firstHeading {
padding-top: 0;
font-size: 210%;
font-weight: bold;
}
.portlet {
border: none;
margin: 0 0 .5em;
padding: 0;
float: none;
width: 16.5em;
overflow: hidden;
h3 {
background: transparent;
padding: 0 1em 0 .5em;
display: inline;
height: 1em;
/* text-transform:lowercase; */
font-size: 91%;
font-weight: normal;
white-space: nowrap;
}
}
.portlet-body {
font-size: 95%;
background-color: white;
color: black;
border-collapse: collapse;
border: 1px solid #aaa;
padding: 0 0.8em 0.3em 0.5em;
&:after {
content: '';
clear: both;
display: block;
}
}
.portlet {
ul {
line-height: 1.5em;
font-size: 95%;
}
li {
padding: 0;
margin: 0;
}
}
#p-logo {
top: 10px;
left: 10px;
position: absolute;
z-index: 3;
height: 155px;
width: 12em;
overflow: visible;
a {
display: block;
height: 155px;
width: 15em;
background-repeat: no-repeat;
background-position: 35% 50% !important;
text-decoration: none;
&:hover {
display: block;
height: 155px;
width: 15em;
background-repeat: no-repeat;
background-position: 35% 50% !important;
text-decoration: none;
}
}
ul {
line-height: 1.5em;
font-size: 95%;
list-style-type: square;
list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
padding: .3em 0 0 1.5em;
margin: 0;
}
div#footer {
background-color: white;
border-top: 1px solid #fabd23;
border-bottom: 1px solid #fabd23;
margin: .6em 0 1em 0;
overflow: hidden;
padding: .4em 0 .3em 0;
text-align: center;
font-size: 90%;
ul {
list-style-type: none;
list-style-image: unset;
}
li {
display: inline;
margin: 0 1.3em;
}
}
#column-one {
font-size: 14px;
}
#column-content {
font-size: 16px;
}
ul#f-list {
float: left;
width: 100%;
}
.floatleft {
float: left;
clear: left;
}
.floatright {
float: right;
clear: right;
}
#f-poweredbyico {
margin:0 8px;
position:relative;
top:-2px;
float:right;
height:1%;
li {
padding: 0;
margin: 0;
}

View File

@ -1,4 +1,7 @@
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@import "wiki";
@import "grid";
@import "wiki";
@import "footer";
@import "content";