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

View File

@ -42,7 +42,7 @@
<body> <body>
<header id="banner"> <header id="banner">
<a href="{{ SITEURL }}" id="sitename">{{ SITENAME }}</a> <a href="/" id="sitename">{{ SITENAME }}</a>
<span id="subtitle">{{ SITESUBTITLE }}</span> <span id="subtitle">{{ SITESUBTITLE }}</span>
<!-- /#banner --> <!-- /#banner -->
@ -56,11 +56,17 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% if DISPLAY_CATEGORIES_ON_MENU %} {% 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 %} {% 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 %} {% endfor %}
{% endif %} {% endif %}
</ul></nav> </ol>
</div>
</div>
</header><!-- /#menu --> </header><!-- /#menu -->
<span id="forkongithub"><a href="xmpp:hbsc@muc.lurk.org?join">Yes We're Config!™</a></span> <span id="forkongithub"><a href="xmpp:hbsc@muc.lurk.org?join">Yes We're Config!™</a></span>
<div id='index' class='home'> <div id='index' class='home'>