/*
Theme Name: Merlino
Author: Davide Como
Version: 0.3;
*/
* {
/* RESET */
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
@font-face {
font-family: Merlin;
src: url(Fonts/Merlin-Regular.otf);
}
@font-face {
font-family: NothingYouCouldDo;
src: url(Fonts/NothingYouCouldDo-Regular.ttf);
}
body {
background: white;
color: black;
max-width: 1000px;
margin: auto;
font-family: 'Merlin';
font-size: 26px;
}
h1, h2 {
font-family: 'Merlin';
font-size: 32px;
text-align: center;
padding: 1em 0 1.5em 0;}
a {
color: black;
}
img {
position: relative;
margin: 0 15px 0 15px;
}
.intro, .text {
max-width: 790px;
}
.intro {
padding-bottom: 1.5em;
font-style: italic;
font-weight: bold;
}
.hilite {
background: black;
color: white;
}
.text {
margin-top:30px;
position: relative;
line-height: 1.5;
}
.ori {
position: relative;
left: 1em;
padding: 0.5em 0.5em 1em 2em;
font-style: italic;
}
.tra {
position: relative;
display: inline;
}
.tra, .manicula {
cursor: pointer
}
.spacer {
display: block;
height: 1.5em;
}
.break {
display: block;
}
.tab {
display: inline-block;
width: 1.5em;
}
.versen {
font-size: 16px;
font-style: italic;
position: absolute;
left:-10px;
padding-top:7px;
}
.note {
position:absolute;
display: inline-block;
z-index:1;
left: 810px;
width: 190px;
margin-top:30px;
font-family: 'NothingYouCouldDo', cursive;
font-size: 20px;
background-color: white;
rotate: -3deg;
}
.manicula {
position: absolute;
display: inline;
left: 815px;
width: 60px;
}
.a {
height: 25px;
background: url(
'data: image/svg+xml;utf8,')
center top no-repeat;
}
.b {
height: 27px;
background: url(
'data: image/svg+xml;utf8,')
center top no-repeat;
}
.c {
height: 22px;
background: url(
'data: image/svg+xml;utf8,')
center top no-repeat;
}
.d {
height: 29px;
background: url(
'data: image/svg+xml;utf8,')
center top no-repeat;
}
table {
margin: auto;
}
td {
vertical-align: top;
padding-bottom: 1em;
width: auto;
}
.date {
text-align: right;
font-weight: bold;
padding-right: 1em;
width:1%;
white-space: nowrap;
}
/*
===================================
===================================
MENU
===================================
===================================
*/
nav {
display: flex;
justify-content: space-between;
}
nav li, .OpenSearchBtnContainer {
list-style: none;
position: relative;
}
nav a, .OpenSearchBtn {
color: rgba(0,0,0,0);
text-decoration: none;
}
footer svg:hover, .menu-item:hover {
transform: scale(1.1);
}
.current-menu-item {
transform: scale(1.1);
font-weight: bold;
}
.sub-menu {
display: none;
position: absolute;
left: -80px;
background: white;
padding: 20px 0px 10px 0px;
text-align: center;
}
.sub-menu li {
padding: 0px 0px 12px 0px;
}
@media screen and (min-width: 680px) {
.menu-item-has-children:hover .sub-menu {
display: block;
width: 280px;
}
}
.sub-menu a {
color: black;
}
.menu-home {
background: url(
'data: image/svg+xml;utf8,')
center center no-repeat;
width: 86px;
}
.menu-texts {
background: url(
'data: image/svg+xml;utf8,')
center center no-repeat;
width: 103px;
}
.menu-space {
background: url(
'data: image/svg+xml;utf8,')
center center no-repeat;
width: 90px;
}
.menu-time {
background: url(
'data: image/svg+xml;utf8,')
center center no-repeat;
width: 79px;
}
.menu-about {
background: url(
'data: image/svg+xml;utf8,')
center center no-repeat;
width: 99px;
}
.AltFontBtn {
background: url(
'data: image/svg+xml;utf8,')
center center no-repeat;
width: 48px;
}
/*
===================================
===================================
SEARCH OVERLAY
===================================
===================================
*/
.OpenSearchBtn {
background: url(
'data: image/svg+xml;utf8,')
center center no-repeat;
width: 119px;
}
.CloseSearchBtn {
position: absolute;
right: 50px;
top: 50px;
cursor: pointer;
}
input {
width: 400px;
font-family: Merlin;
font-size: 26px;
padding: 10px;
outline: none;
background: rgba(0,0,0,0);
color: lightgrey}
/*
===================================
===================================
RESPONSIVE
===================================
===================================
*/
@media screen and (max-width: 1040px) {
body {
/*background: green;*/
padding: 0px 20px 0px 20px}
}
@media screen and (max-width: 870px) {
body {
/*background: blue;*/
padding: 0px 20px 0px 20px}
header svg {
width: 100%;
}
nav {
flex-wrap: wrap;
gap: 10px 30px;
justify-content: center;
}
.flex-container {
flex-direction: column;
}
.text {
flex: 0 0 100%;
line-height: 1.5;
}
.manicula {
display: none;
}
.note {
rotate: -1deg;
padding-bottom: 16px;
}
}
@media screen and (max-width: 460px) {
.Menu svg {
stroke: black;
}
input {
width: 100%;
}
.CloseSearchBtn {
right: 20px;
top: 20px;
}
}