some design tests

This commit is contained in:
lidia pereira 2019-06-18 00:26:45 +02:00
parent 3bc14213c7
commit 581012aa20
2 changed files with 60 additions and 10 deletions

View File

@ -8,9 +8,11 @@ http://roelof.info
http://randomiser.info/
http://majesticmoo.se
*/
html {
font-size: 20px;
* {
box-sizing: border-box;
}
@font-face {
font-family:'OrkneyRegular';
src: url('../fonts/Orkney Regular.woff') format('truetype');
@ -22,24 +24,64 @@ header {
#banner {
text-align: center;
font-size: 5rem;
font-size: calc(12px + 4vw);
padding-bottom: 0.5em;
padding-top: 1em;
background: #EAEAEA;
}
#sitename {
color:#0074D9;
text-decoration:none;
text-decoration:overline underline;
text-decoration-style:wavy;
text-decoration-color:rgba(255, 65, 54, 0.5)/*#FF4136;*/
}
pre {
font-family: monospace;
}
#menu {
font-size:2.5rem;
list-style:none;
font-size:calc(7px + 1.5vw);
margin-top:1.2em;
font-weight:bold;
text-align:center;
text-transform:lowercase;
white-space: nowrap;
}
.dropdown {
position: relative;
display: inline-block;
color:#FF4136;
text-decoration:underline;
cursor: pointer;
}
.guides-index {
display: none;
position: absolute;
background-color: #9F9;
z-index: 1;
text-align:left;
box-sizing: initial;
padding-right:15%;
color:#0074D9;
}
.guides-index li{
font-size:calc(5px + 0.9vw);
font-weight:normal;
margin-top:10%;
}
.guides-index li>a:hover{
color:#333;
}
.dropdown:hover .guides-index {
display: block;
}
body {
@ -53,8 +95,9 @@ body {
}
#index{
max-width:80%;
max-width:55%;
margin: auto;
color:#333;
}
a {
@ -286,6 +329,7 @@ table tr:nth-child(even) {
position:relative;
transition:0.5s;
font-size: 14px;
box-sizing:initial;
}
#forkongithub a:hover{

View File

@ -42,7 +42,7 @@
<body>
<header id="banner">
<a href="{{ SITEURL }}" id="sitename">{{ SITENAME }}</a>
<a href="/" id="sitename">{{ SITENAME }}</a>
<span id="subtitle">{{ SITESUBTITLE }}</span>
<!-- /#banner -->
@ -56,11 +56,17 @@
{% endfor %}
{% endif %}
{% if DISPLAY_CATEGORIES_ON_MENU %}
<div class='dropdown'>
<p class="hoverable"><span>guides</span> <span class="arrow"></span></p>
<div class="guides-index">
<ol id="title-list">
{% for cat, null in categories %}
<li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
<li {% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
{% endfor %}
{% endif %}
</ul></nav>
</ol>
</div>
</div>
</header><!-- /#menu -->
<span id="forkongithub"><a href="xmpp:hbsc@muc.lurk.org?join">Yes We're Config!™</a></span>
<div id='index' class='home'>