imported>Felix |
imported>Felix |
| (17 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | .outer {
| + | @import url('https://fonts.googleapis.com/css?family=Amatica+SC|Montserrat'); |
| − | border: 2px solid #102f45;
| |
| − | border-radius: 10px;
| |
| − | background-color: #eff9ff;
| |
| − | padding: 0px;
| |
| − | width: 100%;
| |
| − | min-width: 260px;
| |
| − | max-width: 1080px;
| |
| − | display: flex;
| |
| − | flex-flow: row wrap;
| |
| − | }
| |
| − | .data {
| |
| − | padding: .5em;
| |
| − | }
| |
| − | #left {
| |
| − | width: 260px;
| |
| − | border-right: 1px dotted #102f45;
| |
| − | flex: 0 1 260px;
| |
| − | }
| |
| − | #right {
| |
| − | flex: 1;
| |
| − | min-width: 260px;
| |
| − | }
| |
| − | .header {
| |
| − | border-top: 1px solid #102f45;
| |
| − | border-bottom: 1px dotted #102f45;
| |
| − | padding: 5px 0;
| |
| − | background-color: #C3D2E7;
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | text-align: center;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − | #header {
| |
| − | align-content: center;
| |
| − | align-items: center;
| |
| − | background-color: #102f45;
| |
| − | border: 2px solid #461a00;
| |
| − | border-radius: 6px 6px 0 0;
| |
| − | color: #c3d2e7;
| |
| − | display: flex;
| |
| − | flex: 2 1 100%;
| |
| − | flex-flow: row wrap;
| |
| − | font-size: 2.5em;
| |
| − | font-weight: bold;
| |
| − | justify-content: center;
| |
| − | line-height: 2em;
| |
| − | text-align: center;
| |
| − | text-shadow: 1px 1px 3px #461a00, -1px -1px 3px #461a00, -1px 1px 3px #461a00, 1px -1px 3px #461a00;
| |
| − | }
| |
| − | #contents {
| |
| − | display: flex;
| |
| − | flex: 2 1 100%;
| |
| − | flex-flow: row wrap;
| |
| − | color: #102f45;
| |
| − | background-color: #c3d2e7;
| |
| − | }
| |
| − | .headbit {
| |
| − | margin: 0 15px;
| |
| − | }
| |
| − | #glyphs1 > img:last-of-type {
| |
| − | left: -5px;
| |
| − | position: relative;
| |
| − | }
| |
| − | /*#header .name { | |
| − | margin: 0 1em 0 1.1em;
| |
| − | } */
| |
| − | #name {
| |
| − | white-space: nowrap;
| |
| − | }
| |
| − | #quotes {
| |
| − | text-align: justify;
| |
| − | padding: .5em 1em;
| |
| − | }
| |
| − | #playlist {
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | #playlist ul {
| |
| − | display: flex;
| |
| − | flex-flow: row wrap;
| |
| − | margin-left: -5px;
| |
| − | font-size: 90%;
| |
| − | list-style: none;
| |
| − | }
| |
| − | #playlist li {
| |
| − | flex: 1 0 190px;
| |
| − | white-space: nowrap;
| |
| − | margin-left: 10px;
| |
| − | }
| |
| − | #playlist li:before {
| |
| − | content: "■ ";
| |
| − | color: #461a00;
| |
| − | }
| |
| − | .attr {
| |
| − | width:100%;
| |
| − | text-align: right;
| |
| − | display: block;
| |
| − | font-style: italic;
| |
| − | }
| |
| − | #mainimg, #wolfimg {
| |
| − | text-align: center;
| |
| − | padding: 5px;
| |
| − | border-top: 1px solid #102f45;
| |
| − | }
| |
| − | #wolfimg, #also {
| |
| − | margin-bottom: -2px;
| |
| − | }
| |
| − | #mainimg img, #wolfimg img {
| |
| − | border: 1px solid #461a00;
| |
| − | }
| |
| − | #also {
| |
| − | padding: 5px;
| |
| − | text-align: center;
| |
| − | }
| |
| − | #also img {
| |
| − | width: 100%;
| |
| − | max-width: 720px;
| |
| − | height: auto;
| |
| − | }
| |
| − | tr {
| |
| − | vertical-align: top;
| |
| − | }
| |
| − | .lastrow td {
| |
| − | border-bottom: 1px dotted #102f45;
| |
| − | }
| |
| − | .hide {
| |
| − | display: none;
| |
| − | }
| |
| − | a {
| |
| − | color: #461a00 !important;
| |
| − | }
| |
| − | .dot5 {
| |
| − | margin-left: 1em;
| |
| − | }
| |
| − | .dot5 img {
| |
| − | vertical-align: unset;
| |
| − | }
| |
| − | .wrapper {
| |
| − | position: relative;
| |
| − | cursor: help;
| |
| − | }
| |
| − | | |
| − | .wrapper .tooltip {
| |
| − | visibility: hidden;
| |
| − | white-space:nowrap;
| |
| − | background-color: #C3D2E7;
| |
| − | color: #461a00;
| |
| − | border:2px #461a00 solid;
| |
| − | text-align: center;
| |
| − | border-radius: 6px;
| |
| − | padding: 5px 1em;
| |
| − | position: absolute;
| |
| − | z-index: 1;
| |
| − | top: -7px;
| |
| − | left: 115%;
| |
| − | }
| |
| − | .wrapper .tooltip.wrap {
| |
| − | white-space:normal;
| |
| − | width:20em;
| |
| − | }
| |
| − | .wrapper .tooltip::after {
| |
| − | content: "";
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | right: 100%;
| |
| − | margin-top: -8px;
| |
| − | border-width: 8px;
| |
| − | border-style: solid;
| |
| − | border-color: transparent #461a00 transparent transparent;
| |
| − | }
| |
| − | .wrapper .tooltip.wrap::after {
| |
| − | top: 1.25em;
| |
| − | }
| |
| − | .wrapper:hover .tooltip {
| |
| − | visibility: visible;
| |
| − | }
| |
| − | #gallery {
| |
| − | display: flex;
| |
| − | flex-flow: row wrap;
| |
| − | justify-content: space-around;
| |
| − | list-style: none;
| |
| − | margin: 5px;
| |
| − | position: relative;
| |
| − | align-items: center;
| |
| − | }
| |
| − | #gallery li {
| |
| − | background-color: rgba(195,210,231,0.33);
| |
| − | border: 1px solid #461a00;
| |
| − | flex: 1 0 auto;
| |
| − | max-width: 22%;
| |
| − | margin: 5px;
| |
| − | }
| |
| − | | |
| − | #gallery li:hover {
| |
| − | transform:scale(2,2);
| |
| − | background-color: rgba(195,210,231,1);
| |
| − | }
| |
| − | #gallery li.edge:hover {
| |
| − | transform-origin: 75% 50% 0;
| |
| − | }
| |
| − | #gallery a {
| |
| − | display: flex;
| |
| − | }
| |
| − | #gallery li img {
| |
| − | width: 92%;
| |
| − | height: auto;
| |
| − | margin: 5px;
| |
| − | border: 1px dotted #461a00;
| |
| − | }
| |
| − | .caption {
| |
| − | font-size: 75%;
| |
| − | line-height: 1.25em;
| |
| − | margin: 0 5px 5px;
| |
| − | font-style: italic;
| |
| − | color: #461a00;
| |
| − | }
| |
| − | | |
| − | @media only screen and (max-width: 730px) {
| |
| − | #left {
| |
| − | min-width: 100%;
| |
| − | border-right: 0;
| |
| − | }
| |
| − | }
| |
