You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
622 lines
9.1 KiB
622 lines
9.1 KiB
|
|
@font-face { |
|
font-family: 'unionbold'; |
|
src: url('fonts/union-bold-webfont.woff2') format('woff2'), |
|
url('fonts/union-bold-webfont.woff') format('woff'); |
|
font-weight: normal; |
|
font-style: normal; |
|
|
|
} |
|
|
|
@font-face { |
|
font-family: 'unionbold_italic'; |
|
src: url('fonts/union-bolditalic-webfont.woff2') format('woff2'), |
|
url('fonts/union-bolditalic-webfont.woff') format('woff'); |
|
font-weight: normal; |
|
font-style: normal; |
|
|
|
} |
|
|
|
@font-face { |
|
font-family: 'unionitalic'; |
|
src: url('fonts/union-italic-webfont.woff2') format('woff2'), |
|
url('fonts/union-italic-webfont.woff') format('woff'); |
|
font-weight: normal; |
|
font-style: normal; |
|
|
|
} |
|
|
|
@font-face { |
|
font-family: 'unionregular'; |
|
src: url('fonts/union-webfont.woff2') format('woff2'), |
|
url('fonts/union-webfont.woff') format('woff'); |
|
font-weight: normal; |
|
font-style: normal; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
*{ |
|
font-family:'unionregular', sans-serif; |
|
} |
|
|
|
body{ |
|
margin:0 10px; |
|
padding:0; |
|
font-size : 16px; |
|
} |
|
|
|
|
|
|
|
#bg{ |
|
width:100vw; |
|
height:100vh; |
|
background:rgba(255,255,255,0.7); |
|
position: fixed; |
|
z-index: 100000; |
|
top:0; |
|
left:0; |
|
} |
|
|
|
#bg #img_full { |
|
z-index: 100000; |
|
width: 50vw; |
|
height:auto; |
|
margin:auto; |
|
margin-top:10vh; |
|
} |
|
|
|
|
|
#bg #img_full img{ |
|
min-width: 100%; |
|
height: auto; |
|
display: block; |
|
|
|
} |
|
|
|
nav { |
|
position : fixed ; |
|
background: #fff; |
|
z-index:10000; |
|
width:100%; |
|
top:0; |
|
/*! border-bottom: 1px solid; */ |
|
} |
|
|
|
.closebtn{ |
|
width:50px; |
|
height:50px; |
|
top:30px; |
|
right:20px; |
|
position: absolute; |
|
opacity: 0.3; |
|
} |
|
|
|
.closebtn:hover { |
|
opacity: 1; |
|
} |
|
.closebtn:before, .closebtn:after { |
|
position: absolute; |
|
left: 15px; |
|
content: ' '; |
|
height: 33px; |
|
width: 2px; |
|
background-color: #333; |
|
} |
|
.closebtn:before { |
|
transform: rotate(45deg); |
|
} |
|
.closebtn:after { |
|
transform: rotate(-45deg); |
|
} |
|
|
|
|
|
|
|
|
|
|
|
#content{ |
|
margin-top:50px; |
|
} |
|
|
|
div.content{ |
|
margin-left:-35px; |
|
} |
|
|
|
div.content td{ |
|
background-color: #ededed; |
|
padding-bottom: 5px; |
|
} |
|
|
|
div.content p{ |
|
padding-top: 15px; |
|
} |
|
|
|
div.content img{ |
|
width: 25%; |
|
margin-right:80%; |
|
} |
|
|
|
#menu { |
|
display: grid; |
|
grid-template-columns: 8fr 2fr; |
|
background-color: white; |
|
} |
|
|
|
@media (max-width: 1080px) { |
|
#menu { |
|
grid-template-columns: 1fr; |
|
/*! margin-bottom:40px */ |
|
} |
|
|
|
} |
|
#menu ul { |
|
list-style: none; |
|
margin-top:20px; |
|
margin-bottom:20px; |
|
padding: 1.5px 5px; |
|
} |
|
|
|
#menu ul li { |
|
display:inline-block; |
|
margin-right:60px; |
|
font-size:1em; |
|
} |
|
|
|
#menu ul li:first-of-type { |
|
font-size:1em; |
|
} |
|
|
|
|
|
#menu ul li a{ |
|
color: #000000; |
|
text-decoration : none; |
|
} |
|
|
|
#menu div form{ |
|
display: inline-block; |
|
} |
|
|
|
#menu span form input{ |
|
border:none; |
|
font-size:inherit; |
|
color: #000; |
|
} |
|
|
|
#menu span form input:focus{ |
|
border: none; |
|
outline: none; |
|
} |
|
|
|
a:hover{ |
|
color: black !important; |
|
text-decoration: solid underline black 1.2px !important; |
|
} |
|
|
|
|
|
.banner{ |
|
padding:0px; |
|
width:100%; |
|
height:0; |
|
overflow : hidden; |
|
position:relative; |
|
/*! border-top: solid 1px #000; */ |
|
} |
|
|
|
.banner .content{ |
|
padding:40px; |
|
|
|
} |
|
|
|
.legend{ |
|
border-top:solid 1px; |
|
border-bottom:solid 1px; |
|
padding:0; |
|
margin:0; |
|
background: #e6e6e6; |
|
cursor: pointer; |
|
position:sticky; |
|
width:99.9%; |
|
top:65px; |
|
z-index:10000; |
|
} |
|
|
|
|
|
|
|
.legend .sort { |
|
border-right: solid 1px; |
|
padding: 10px 10px; |
|
display: inline-block |
|
} |
|
|
|
.legend li{ |
|
position: relative; |
|
} |
|
.legend li.sort::after { |
|
position: absolute; |
|
width: 20px; |
|
height:20px; |
|
content: '↝'; |
|
right:0; |
|
font-size: 1em; |
|
} |
|
|
|
|
|
|
|
.legend li.sort-asc::after { |
|
position: absolute; |
|
width: 20px; |
|
height:20px; |
|
content: ' ▲'; |
|
right:0; |
|
font-size: 1em; |
|
} |
|
|
|
.legend li.sort-desc::after { |
|
position: absolute; |
|
width: 20px; |
|
height:20px; |
|
right:0; |
|
content: ' ▼'; |
|
font-size: 1em; |
|
} |
|
.legend li:last-of-type { |
|
border-right: none; |
|
} |
|
|
|
.legend , #articles .alist li .articleData { |
|
display: grid; |
|
grid-template-columns: 1fr 4fr 2fr 3fr 2fr 3fr 3fr ; |
|
} |
|
|
|
ul.legend { |
|
border-left: 1px solid black; |
|
border-right: 1px solid black; |
|
|
|
} |
|
|
|
|
|
#articles ul { |
|
list-style:none; |
|
padding:0 0 0 0px; |
|
margin:0; |
|
margin-top:20px |
|
} |
|
|
|
|
|
#articles ul li{ |
|
font-size:1em; |
|
padding:10px 0px; |
|
border-bottom: 1px solid #000000; |
|
} |
|
|
|
#articles ul li.noContent *{ |
|
color:#aaa |
|
} |
|
|
|
|
|
|
|
#articles ul li.noContent .content-wrapper.open{ |
|
color:#aaa; |
|
display: none; |
|
} |
|
|
|
|
|
|
|
#articles ul.alist li.noContent:hover { |
|
color:#aaa; |
|
background: #fff; |
|
} |
|
|
|
|
|
|
|
#articles ul.alist li:hover{ |
|
/*! font-size:1em; */ |
|
border-bottom: 1px solid #000000; |
|
color : white; |
|
background: #b3b3b3; |
|
} |
|
|
|
#articles .legend li { |
|
color : #000000; |
|
text-decoration:none; |
|
pointer-events: none; |
|
} |
|
|
|
#articles .alist li span{ |
|
padding-left: 10px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
position :relative; |
|
display: inline-block; |
|
z-index: 1; |
|
} |
|
|
|
|
|
#articles .alist li span::after{ |
|
display: block; |
|
z-index: 10; |
|
content:''; |
|
position: absolute; |
|
right:0px; |
|
top:0; |
|
width: 60px; |
|
height:100%; |
|
background: url('fade.png'); |
|
background-size: cover; |
|
} |
|
|
|
|
|
|
|
|
|
#articles ul li:hover span::after{ |
|
display: none; |
|
} |
|
|
|
#articles .alist li .content-wrapper{ |
|
height:0; |
|
max-height: 0px; |
|
overflow: hidden; |
|
color : #000; |
|
background: #fff; |
|
transition: max-height .5s ease-in; |
|
/*! width: 100vw; */ |
|
} |
|
|
|
|
|
.open{ |
|
height:auto !important; |
|
max-height:2000px !important; |
|
margin-top: 10px !important; |
|
} |
|
|
|
|
|
.content-wrapper .content{ |
|
grid-area: content; |
|
width:80%; |
|
margin: 20px auto; |
|
} |
|
|
|
|
|
#articles ul.alist li .content-wrapper p{ |
|
width: 100%; |
|
margin:auto; |
|
} |
|
|
|
|
|
.content-wrapper{ |
|
margin:auto ; |
|
font-size:1em!important; |
|
background:#fff; |
|
display: grid; |
|
grid-template-columns: : 1fr 2fr ; |
|
grid-template-areas: |
|
" gallerie gallerie" |
|
" imgZoom content "; |
|
position: relative ; |
|
|
|
} |
|
|
|
|
|
.content-wrapper .gal{ |
|
grid-area: gallerie; |
|
} |
|
|
|
.gal { |
|
display : grid ; |
|
grid-template-columns: repeat(18 , 1fr) ; |
|
column-gap: 5px; |
|
row-gap: 15px; |
|
height:auto; |
|
max-width: 100%; |
|
padding-top:10px; |
|
} |
|
|
|
div.gal { |
|
cursor:crosshair; |
|
} |
|
|
|
|
|
.img_container { |
|
height: 50px; |
|
position: relative; |
|
overflow: hidden; |
|
display: grid; |
|
align-content: center; |
|
align-items: center; |
|
justify-items: center; |
|
justify-content: center; |
|
align-items: center; |
|
align-content: space-around; |
|
} |
|
|
|
|
|
.img_container img{ |
|
width :150%; |
|
height: auto; |
|
} |
|
|
|
|
|
|
|
|
|
.img_container:last-of-type { |
|
} |
|
|
|
|
|
|
|
.imgzoom{ |
|
padding-top:30px; |
|
padding-bottom:30px; |
|
margin-left:-62px; |
|
display: grid; |
|
align-content: space-between; |
|
} |
|
|
|
|
|
.meta { |
|
border:none; |
|
padding: 0px ; |
|
font-size: 1em; |
|
} |
|
.meta tr { |
|
border:none; |
|
vertical-align: baseline; |
|
} |
|
.meta td { |
|
border:none; |
|
text-align:left; |
|
background: #ffffff; |
|
} |
|
|
|
.meta tr td:first-of-type{ |
|
width: auto; |
|
padding-right: 20px ; |
|
white-space: nowrap; |
|
} |
|
|
|
.content-wrapper .content { |
|
padding:10px; |
|
|
|
} |
|
|
|
#content-wrapper p{ |
|
text-align:left; |
|
margin-left:10px; |
|
} |
|
|
|
#content-wrapper pre{ |
|
// font-size:2em; |
|
color:#2c3e50; |
|
background:#ecf0f1; |
|
border-radius:3px; |
|
padding:8px; |
|
outline:3px #2c3e50 solid ; |
|
overflow-x : auto ; |
|
} |
|
|
|
#content-wrapper code{ |
|
color:#2c3e50; |
|
overflow-x : auto ; |
|
font-family:monospace; |
|
} |
|
|
|
#content-wrapper h1{ |
|
font-size : 2.5em; |
|
margin: 20px 0 0 -10px ; |
|
} |
|
|
|
div.content-wrapper { |
|
background: #ededed !important; |
|
} |
|
|
|
#metad{ |
|
margin: 5px 0 30px 0; |
|
} |
|
|
|
#metad span { |
|
font-size : 1em; |
|
} |
|
|
|
#metad span:after{ |
|
content:" / "; |
|
margin: 0 0px 0 0px; |
|
|
|
|
|
} |
|
#metad .cat { |
|
font-weight: bolder; |
|
} |
|
|
|
#metad .author { |
|
font-style: italic; |
|
} |
|
|
|
#metad .date { |
|
} |
|
|
|
|
|
img { |
|
width:100%; |
|
height:auto; |
|
max-width: 1080px; |
|
text-align: center; |
|
display: block; |
|
margin: auto; |
|
} |
|
|
|
p strong img{ |
|
width:250px; |
|
} |
|
p em img{ |
|
width:150px; |
|
float:right; |
|
|
|
} |
|
|
|
|
|
p{ |
|
line-height:1.2em; |
|
margin-right:25%; |
|
text-align:left; |
|
font-size:1.3em; |
|
line-height: 1.1; |
|
|
|
} |
|
|
|
pre{ |
|
line-height:1.2em; |
|
margin-right:25%; |
|
text-align:left; |
|
font-size:1.4em; |
|
line-height: 1.1; |
|
text-indent: 5%; |
|
|
|
} |
|
|
|
|
|
.fullImg{ |
|
grid-column: span 3; |
|
height: auto!important; |
|
} |
|
|
|
.fullImg img{ |
|
width:100%; |
|
} |
|
|
|
|
|
key{ |
|
padding:1px 6px; |
|
border:1px solid lightgrey; |
|
border-radius: 5px; |
|
box-shadow: 1px 1px 0px 1px rgb(120# 20# 20) , |
|
-1px -1px 0px 1px rgb(220 ## 20## 20); |
|
|
|
background: #efefef; |
|
background: rgb(185# 85# 85); |
|
background: radial-gradient( rgba(200## 00# 90# ) 1%, rgba(225## 25## 25# ) 100%, rgba(185# 85# 85# ) 100%) |
|
; |
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
|
#articles ul li span { |
|
display:none; |
|
} |
|
#menu ul li:first-of-type { |
|
outline: none; |
|
width:100%; |
|
} |
|
#menu ul li { |
|
outline: 1px solid #000; |
|
padding: 2px 10px; |
|
border-radius:3px; |
|
margin-left:4px; |
|
margin-bottom: 5px; |
|
margin-right:0; |
|
} |
|
|
|
} |
|
|
|
|