OpenArdenneMap-template/site/style/general.less

170 lines
3.3 KiB
Plaintext

html {
font-size: 20px;
}
* {
box-sizing: border-box;
font-weight: normal;
font-style: normal;
}
body {
font-family: 'news-cycle', Arial, Helvetica, sans-serif;
margin: auto;
padding: @margin * 2;
padding-top: 0px;
max-width: 1440px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
}
a, h1, p {
p {
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-chars: 6 3 3;
-webkit-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-last: always;
-webkit-hyphenate-limit-zone: 8%;
-moz-hyphens: auto;
-moz-hyphenate-limit-chars: 6 3 3;
-moz-hyphenate-limit-lines: 2;
-moz-hyphenate-limit-last: always;
-moz-hyphenate-limit-zone: 8%;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: 6 3 3;
-ms-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-last: always;
-ms-hyphenate-limit-zone: 8%;
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}}
h1 {
font-size: 4rem;
margin: 0px;
line-height: 90%;
margin-bottom: @margin * 2;
.second-line {
display: block;
&::first-letter {
margin-left: 6ch;
}
}
}
details {
margin-bottom: @margin / 3;
summary {
cursor: pointer;
font-size: 1.25rem;
&:hover {
background-color: @pitchLinkColor;
}
&::marker {
font-size: 0.8rem;
}
}
>*:not(summary) {
margin-left: 1.4rem;
}
}
p.pitch {
font-size: 2.4rem;
line-height: 135%;
font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
a {
background-color: @pitchLinkColor;
color: inherit;
text-decoration: none;
padding: 0 0.5ch;
&:hover {
text-decoration: underline !important;
}
}
}
.main__wrapper {
// padding: @margin;
padding-top: @margin;
}
.block {
margin-bottom: @margin * 2;
a {
color: inherit;
&:hover {
background-color: @pitchLinkColor;
mix-blend-mode: multiply;
}
}
}
.block-with-sidebar {
display: flex;
> div {
// padding : @margin;
flex-shrink: 0;
&.block-sidebar {
width: @sidebarW;
overflow: auto;
}
&.block-main {
position: relative;
width: @mainW;
img {
width: 100%;
}
}
}
&.sidebar-right .block-sidebar {
padding-left: @margin / 2;
border-left: 1px solid #000;
}
&.sidebar-left .block-sidebar {
padding-right: @margin / 2;
border-right: 1px solid #000;
}
&.sidebar-right .block-main {
padding-right: @margin / 2;
}
&.sidebar-left .block-main {
padding-left: @margin / 2;
}
}
#mapList,
#FAQ {
border: 1px solid #000;
border-radius: @margin;
padding: @margin * 2;
padding-top: @margin;
}
.heart {
transform: rotate(90deg);
transform-origin: right top;
position: fixed;
right: 5px;
bottom: @margin;
font-size: 0.8rem;
}