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.
401 lines
8.2 KiB
401 lines
8.2 KiB
/**
|
|
* All fonts used on this website are open-source fonts from
|
|
* The League Of Moveable Type
|
|
* https://www.theleagueofmoveabletype.com/
|
|
*/
|
|
/**
|
|
* League Gothic by:
|
|
* Caroline Hadilaksono http://hadilaksono.com/
|
|
* Micah Rich https://micahrich.com/
|
|
* Tyler Finck http://tylerfinck.com/
|
|
* https://www.theleagueofmoveabletype.com/league-gothic
|
|
**/
|
|
@font-face {
|
|
font-family: 'League Gothic';
|
|
src: url('fonts/LeagueGothic/LeagueGothic-Regular.otf');
|
|
src: local('☺'), url('fonts/LeagueGothic/LeagueGothic-Regular.woff') format('woff'), url('fonts/LeagueGothic/LeagueGothic-Regular.woff2') format('woff2'), url('fonts/LeagueGothic/LeagueGothic-Regular.ttf') format('truetype');
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
/**
|
|
* Raleway by Matt McInerney http://matt.cc/
|
|
* https://www.theleagueofmoveabletype.com/raleway
|
|
**/
|
|
@font-face {
|
|
font-family: 'Raleway';
|
|
src: url('fonts/Raleway/Raleway-Light.otf');
|
|
src: local('☺'), url('fonts/Raleway/Raleway-Light.woff') format('woff'), url('fonts/Raleway/Raleway-Light.woff2') format('woff2'), url('fonts/Raleway/Raleway-Light.ttf') format('truetype');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
/* https://coolors.co/f4f4f6-274c77-6096ba-f2ff49-ff4242 */
|
|
--yaleblue: #274c77;
|
|
--ceruleanfrost: #6096ba;
|
|
--cultured: #f4f4f6;
|
|
--yellowryb: #f2ff49;
|
|
--tartorange: #ff4242;
|
|
--yellowryblighter: #F7FF85;
|
|
|
|
--leaguegothic: "League Gothic", "Impact", "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
|
|
--raleway: "Raleway", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
|
|
|
--mainlogofont: var(--leaguegothic);
|
|
--headingfont: var(--leaguegothic);
|
|
--textfont: var(--raleway);
|
|
--fixedfont: monospace;
|
|
|
|
--logofront: var(--yellowryblighter);
|
|
--logoshade: var(--tartorange);
|
|
|
|
--direction: 1;
|
|
}
|
|
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
|
|
/*.pusher .ui {*/
|
|
/* view-transition-name: content;*/
|
|
/*}*/
|
|
|
|
/*.pusher .ui.masthead {*/
|
|
/* view-transition-name: header;*/
|
|
/*}*/
|
|
|
|
/*::view-transition-old(header) {*/
|
|
/* animation: slide-out 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;*/
|
|
/*}*/
|
|
|
|
/*::view-transition-new(header) {*/
|
|
/* animation: slide-in 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;*/
|
|
/*}*/
|
|
|
|
/*::view-transition-old(content) {*/
|
|
/* animation: slide-out 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;*/
|
|
/*}*/
|
|
|
|
/*::view-transition-new(content) {*/
|
|
/* animation: slide-in 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;*/
|
|
/*}*/
|
|
|
|
/*@keyframes slide-out {*/
|
|
/* 0% {*/
|
|
/* transform: translateY(0%);*/
|
|
/* }*/
|
|
|
|
/* 100% {*/
|
|
/* opacity: 0;*/
|
|
/* transform: translateY(calc(20% * var(--direction)));*/
|
|
/* }*/
|
|
/*}*/
|
|
|
|
/*@keyframes slide-in {*/
|
|
/* 0% {*/
|
|
/* opacity: 0;*/
|
|
/* transform: translateY(calc(-20% * var(--direction)));*/
|
|
/* }*/
|
|
|
|
/* 100% {*/
|
|
/* transform: translateY(0%);*/
|
|
/* }*/
|
|
/*}*/
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: #ffffff;
|
|
font-family: var(--textfont);
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.ui.text.container {
|
|
font-family: var(--textfont);
|
|
font-size: 1em;
|
|
}
|
|
|
|
.clawd .ui.menu {
|
|
font-family: var(--textfont);
|
|
}
|
|
|
|
.clawd p a {
|
|
color: var(--yaleblue);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--yaleblue);
|
|
}
|
|
|
|
.clawd p a:hover {
|
|
color: #000000;
|
|
background-color: var(--yellowryb);
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.clawd #mainmenu a.item {
|
|
font-family: var(--textfont);
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.clawd #mainmenu a.item.active {
|
|
border-bottom-color: var(--tartorange);
|
|
}
|
|
|
|
.clawd .footer a {
|
|
}
|
|
|
|
.clawd .footer a:hover {
|
|
color: var(--yellowryblighter) !important;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, .ui.header {
|
|
font-family: var(--headingfont);
|
|
color: var(--yaleblue);
|
|
font-variant: all-small-caps;
|
|
}
|
|
|
|
h1.dimmed, h2.dimmed, h3.dimmed, h4.dimmed, h5.dimmed, .ui.header.dimmed {
|
|
color: var(--ceruleanfrost);
|
|
}
|
|
|
|
.impact-none {
|
|
color: var(--ceruleanfrost) !important;
|
|
}
|
|
.impact-some {
|
|
color: var(--yaleblue) !important;
|
|
}
|
|
.impact-important {
|
|
color: var(--tartorange) !important;
|
|
}
|
|
.impact-critical {
|
|
color: var(--yellowryb) !important;
|
|
background-color: var(--tartorange) !important;
|
|
}
|
|
|
|
h1 {
|
|
min-height: 1rem;
|
|
font-size: 4.5rem;
|
|
}
|
|
h2 {
|
|
font-size: 4rem;
|
|
}
|
|
h3 {
|
|
font-size: 3.3rem;
|
|
}
|
|
h4 {
|
|
font-size: 3.1rem;
|
|
}
|
|
h5 {
|
|
font-size: 2.9rem;
|
|
}
|
|
|
|
h1.ui.header {
|
|
font-size: 4rem;
|
|
}
|
|
h2.ui.header {
|
|
font-size: 3.5rem;
|
|
}
|
|
h3.ui.header {
|
|
font-size: 2.8rem;
|
|
}
|
|
h4.ui.header {
|
|
font-size: 2.6rem
|
|
}
|
|
h5.ui.header {
|
|
font-size: 2.4rem;
|
|
}
|
|
|
|
h3.ui.horizontal.header.divider {
|
|
font-size: 3.3rem;
|
|
color: var(--ceruleanfrost);
|
|
}
|
|
|
|
.ui.button {
|
|
font-family: var(--textfont);
|
|
}
|
|
|
|
.clawdlogo {
|
|
font-variant: normal !important;
|
|
font-family: var(--headingfont) !important;
|
|
color: var(--logofront) !important;
|
|
letter-spacing: 0 !important;
|
|
text-shadow: -1px 1px 0 var(--logoshade),
|
|
-2px 2px 0 var(--logoshade),
|
|
-3px 3px 0 var(--logoshade),
|
|
-4px 4px 0 var(--logoshade),
|
|
-5px 5px 0 var(--logoshade);
|
|
}
|
|
|
|
.masthead.inverted h1.ui.header.clawdlogo {
|
|
font-size: 7em;
|
|
}
|
|
|
|
.footer h1.ui.header.clawdlogo {
|
|
font-size: 5em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.footer h3.ui.header {
|
|
font-size: 4em;
|
|
color: var(--cultured);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.clawdlogo:hover {
|
|
|
|
}
|
|
|
|
.masthead h2 {
|
|
font-variant: normal;
|
|
color: var(--cultured);
|
|
}
|
|
|
|
.masthead.inverted span.intro {
|
|
font-size: 1.6em;
|
|
line-height: 1.5em;
|
|
display: block;
|
|
margin: 1.8em auto;
|
|
color: var(--cultured);
|
|
font-family: var(--textfont);
|
|
}
|
|
|
|
.masthead.inverted .ui.container {
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
.masthead.inverted .ui.container h2 {
|
|
color: var(--cultured);
|
|
}
|
|
|
|
.masthead.inverted div.ui.huge.primary.button {
|
|
background-color: var(--yellowryblighter);
|
|
color: #0f0f10;
|
|
}
|
|
.masthead.inverted div.ui.huge.primary.button:hover {
|
|
background-color: var(--yellowryb);
|
|
color: #000000;
|
|
}
|
|
|
|
.main.container {
|
|
margin-top: 2em;
|
|
font-family: 'Comfortaa', cursive;
|
|
}
|
|
.hidden.menu {
|
|
display: none;
|
|
}
|
|
|
|
.ui.vertical.masthead.segment {
|
|
min-height: 400px;
|
|
padding: 1em 0;
|
|
margin-bottom: 5em;
|
|
}
|
|
.clawd.index .ui.vertical.masthead.segment {
|
|
min-height: 600px;
|
|
}
|
|
.masthead .logo.item img {
|
|
margin-right: 1em;
|
|
}
|
|
.masthead .ui.menu .ui.button {
|
|
margin-left: 0.5em;
|
|
}
|
|
.masthead h1.ui.header {
|
|
margin-top: 1em;
|
|
margin-bottom: 0em;
|
|
font-size: 4em;
|
|
font-weight: normal;
|
|
}
|
|
.masthead h2 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.ui.container h2 {
|
|
color: var(--yaleblue);
|
|
}
|
|
|
|
.interventions .raised.segment .segment {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.interventions .raised.segment .clearing.segment h4 {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.interventions .raised.segment .basic.segment h4 {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.ui.vertical.stripe {
|
|
padding: 8em 0;
|
|
}
|
|
.ui.vertical.stripe h3 {
|
|
/*font-size: 2em;*/
|
|
}
|
|
.ui.vertical.stripe .button + h3,
|
|
.ui.vertical.stripe p + h3 {
|
|
margin-top: 3em;
|
|
}
|
|
.ui.vertical.stripe .floated.image {
|
|
clear: both;
|
|
}
|
|
.ui.vertical.stripe p, .segment ul li {
|
|
font-size: 1.33em;
|
|
}
|
|
.ui.vertical.stripe .horizontal.divider {
|
|
margin: 3em 0em;
|
|
}
|
|
|
|
.quote.stripe.segment {
|
|
padding: 0em;
|
|
}
|
|
.quote.stripe.segment .grid .column {
|
|
padding-top: 5em;
|
|
padding-bottom: 5em;
|
|
}
|
|
|
|
.footer.segment {
|
|
padding: 5em 0em;
|
|
}
|
|
|
|
.secondary.pointing.menu .toc.item {
|
|
display: none;
|
|
}
|
|
|
|
.clawd ::-webkit-selection {
|
|
background-color: var( --yellowryblighter);
|
|
color: var(--yaleblue);
|
|
}
|
|
.clawd ::-moz-selection {
|
|
background-color: var( --yellowryblighter);
|
|
color: var(--yaleblue);
|
|
}
|
|
.clawd ::selection {
|
|
background-color: var( --yellowryblighter);
|
|
color: var(--yaleblue);
|
|
}
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
.ui.fixed.menu {
|
|
display: none !important;
|
|
}
|
|
.secondary.pointing.menu .item,
|
|
.secondary.pointing.menu .menu {
|
|
display: none;
|
|
}
|
|
.secondary.pointing.menu .toc.item {
|
|
display: block;
|
|
}
|
|
.masthead.segment {
|
|
min-height: 350px;
|
|
}
|
|
.masthead h1.ui.header {
|
|
font-size: 2em;
|
|
margin-top: .8em;
|
|
}
|
|
.masthead h2 {
|
|
margin-top: 0.5em;
|
|
font-size: 3em;
|
|
}
|
|
}
|