322 lines
7.0 KiB
CSS
Executable File
322 lines
7.0 KiB
CSS
Executable File
/* merriweather-regular - latin */
|
||
@font-face {
|
||
font-family: 'Merriweather';
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
src: url('/assets/fonts/merriweather-v21-latin-regular.eot'); /* IE9 Compat Modes */
|
||
src: local('Merriweather Regular'), local('Merriweather-Regular'),
|
||
url('/assets/fonts/merriweather-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
url('/assets/fonts/merriweather-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||
url('/assets/fonts/merriweather-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||
url('/assets/fonts/merriweather-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||
url('/assets/fonts/merriweather-v21-latin-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
|
||
font-display: swap;
|
||
}
|
||
|
||
/* merriweather-italic - latin */
|
||
@font-face {
|
||
font-family: 'Merriweather';
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
src: url('/assets/fonts/merriweather-v21-latin-italic.eot'); /* IE9 Compat Modes */
|
||
src: local('Merriweather Italic'), local('Merriweather-Italic'),
|
||
url('/assets/fonts/merriweather-v21-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
url('/assets/fonts/merriweather-v21-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
|
||
url('/assets/fonts/merriweather-v21-latin-italic.woff') format('woff'), /* Modern Browsers */
|
||
url('/assets/fonts/merriweather-v21-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
|
||
url('/assets/fonts/merriweather-v21-latin-italic.svg#Merriweather') format('svg'); /* Legacy iOS */
|
||
font-display: swap;
|
||
}
|
||
|
||
/* merriweather-sans-regular - latin */
|
||
@font-face {
|
||
font-family: 'Merriweather Sans';
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
src: url('/assets/fonts/merriweather-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
|
||
src: local(''),
|
||
url('/assets/fonts/merriweather-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
url('/assets/fonts/merriweather-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||
url('/assets/fonts/merriweather-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||
url('/assets/fonts/merriweather-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||
url('/assets/fonts/merriweather-sans-v13-latin-regular.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
|
||
font-display: swap;
|
||
}
|
||
|
||
/* merriweather-sans-italic - latin */
|
||
@font-face {
|
||
font-family: 'Merriweather Sans';
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
src: url('/assets/fonts/merriweather-sans-v13-latin-italic.eot'); /* IE9 Compat Modes */
|
||
src: local(''),
|
||
url('/assets/fonts/merriweather-sans-v13-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
url('/assets/fonts/merriweather-sans-v13-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
|
||
url('/assets/fonts/merriweather-sans-v13-latin-italic.woff') format('woff'), /* Modern Browsers */
|
||
url('/assets/fonts/merriweather-sans-v13-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
|
||
url('/assets/fonts/merriweather-sans-v13-latin-italic.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
|
||
font-display: swap;
|
||
}
|
||
|
||
* {
|
||
font-family: Merriweather, Merriweather Sans;
|
||
}
|
||
|
||
q {
|
||
quotes: "“" "”" "‘" "’";
|
||
font-family: Merriweather;
|
||
}
|
||
|
||
q::before {
|
||
content: open-quote;
|
||
}
|
||
|
||
q::after {
|
||
content: close-quote;
|
||
}
|
||
|
||
body {
|
||
/* border: 2px solid rgba(167, 47, 20, 1); */
|
||
/* border-radius: 25px; */
|
||
margin-left: 10%;
|
||
margin-right: 10%;
|
||
padding: 10px;
|
||
background-color: #9f9287;
|
||
}
|
||
|
||
.main h1, h2, h3 {
|
||
font-variant: small-caps;
|
||
padding: .3em .3em;
|
||
}
|
||
|
||
.main h1 {
|
||
border-top: 5px double rgba(167, 47, 20, 1);
|
||
border-bottom: 5px double rgba(167, 47, 20, 1);
|
||
text-align: center;
|
||
}
|
||
|
||
.main h2 {
|
||
border-bottom: 5px solid rgba(167, 47, 20, 1);
|
||
}
|
||
|
||
.main p {
|
||
font-size: 16px;
|
||
text-align: justify;
|
||
}
|
||
|
||
.main img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
div.pfp {
|
||
padding: .5em;
|
||
}
|
||
|
||
div.main {
|
||
background-color: #cdcac4;
|
||
padding: 2em;
|
||
border-radius: 10px;
|
||
min-height: 500px;
|
||
}
|
||
|
||
.pfp img {
|
||
border: 5px double rgba(167, 47, 20, 1);
|
||
border-radius: 10px;
|
||
max-width: 150px;
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.pfp p {
|
||
text-align: center;
|
||
font-style: italic;
|
||
font-size: 12px;
|
||
}
|
||
|
||
div.menu {
|
||
/* background: #ae4e26; */
|
||
background: #2b2623;
|
||
padding: .5em;
|
||
margin-bottom: 2em;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
border-radius: 10px;
|
||
min-height: 3em;
|
||
height: auto;
|
||
}
|
||
|
||
.menu p {
|
||
color: white;
|
||
text-decoration: none;
|
||
padding: .5em .5em;
|
||
margin-left: .5em;
|
||
text-align: right;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.menu a {
|
||
color: white;
|
||
text-decoration: none;
|
||
padding: .8em .8em;
|
||
margin-right: 1em;
|
||
margin-left: 1em;
|
||
min-width: 100px;
|
||
text-align: center;
|
||
background-color: #dba047;
|
||
display:inline-block;
|
||
font-size: medium;
|
||
border-radius: 10px;
|
||
margin-bottom: .5em;
|
||
margin-top: .5em;
|
||
}
|
||
|
||
.menu a:hover, .contact a:hover {
|
||
background-color: #ae4e26;
|
||
}
|
||
|
||
.main a {
|
||
color: #ae4e26;
|
||
}
|
||
|
||
.main a:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
div.contact {
|
||
text-align: center;
|
||
}
|
||
|
||
.contact a {
|
||
color: white;
|
||
text-decoration: none;
|
||
padding: .8em .8em;
|
||
text-align: center;
|
||
background-color: #dba047;
|
||
display:grid;
|
||
font-size: medium;
|
||
border-radius: 10px;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
/*.contact a:last-child {
|
||
min-width: 94%;
|
||
} */
|
||
|
||
footer {
|
||
/* background: #ae4e26; */
|
||
background: #2b2623;
|
||
padding: 1em;
|
||
margin-top: 2em;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
height: auto;
|
||
border-radius: 10px;
|
||
min-height: 3em;
|
||
}
|
||
|
||
footer p {
|
||
color: white;
|
||
}
|
||
|
||
footer p:first-of-type {
|
||
float: left;
|
||
}
|
||
|
||
footer p:last-of-type {
|
||
float: right;
|
||
}
|
||
|
||
/* Responsive design stuff */
|
||
@media only screen and (max-width: 900px) {
|
||
.menu a {
|
||
font-size: medium;
|
||
min-width: 80px;
|
||
}
|
||
|
||
div.menu {
|
||
padding: .5em;
|
||
height: auto;
|
||
}
|
||
|
||
body {
|
||
margin-left: 5%;
|
||
margin-right: 5%;
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 700px) {
|
||
.menu a {
|
||
font-size: smaller;
|
||
min-width: 50px;
|
||
}
|
||
|
||
footer p:first-of-type, footer p:last-of-type {
|
||
float: none;
|
||
}
|
||
}
|
||
|
||
/* CSS gallery from w3schools.com */
|
||
|
||
div.art {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
div.gallery {
|
||
border: 5px double rgba(167, 47, 20, 0.3);
|
||
}
|
||
|
||
div.gallery:hover {
|
||
border: 5px double #dba047;
|
||
}
|
||
|
||
div.gallery img {
|
||
width: 100%;
|
||
height: 200px;
|
||
object-fit: scale-down;
|
||
}
|
||
|
||
div.desc {
|
||
padding: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.responsive {
|
||
padding: 0 6px;
|
||
float: left;
|
||
width: 24.99999%;
|
||
}
|
||
|
||
@media only screen and (max-width: 700px) {
|
||
.responsive {
|
||
width: 49.99999%;
|
||
margin: 6px 0;
|
||
}
|
||
|
||
div.art {
|
||
display: inherit;
|
||
justify-content: inherit
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 500px) {
|
||
.responsive {
|
||
width: 100%;
|
||
}
|
||
|
||
div.art {
|
||
display: inherit;
|
||
justify-content: inherit
|
||
}
|
||
}
|
||
|
||
.clearfix:after {
|
||
content: "";
|
||
display: table;
|
||
clear: both;
|
||
} |