www_duniayetu/css/layout.css

473 lines
6.3 KiB
CSS
Raw Normal View History

2022-11-15 11:11:07 +00:00
main {
@apply pt-0;
}
#text-1xl { @apply text-xl }
#text-2xl { @apply text-2xl }
#text-3xl { @apply text-3xl }
#text-4xl { @apply text-4xl }
#text-5xl { @apply text-5xl }
#text-6xl { @apply xl:text-6xl lg:text-5xl md:text-4xl sm:text-3xl}
#text-7xl { @apply text-7xl }
#text-8xl { @apply text-8xl }
#text-9xl {
font-size: 8rem;
}
#xp-heading { @apply m-0 }
/*
html, body {
@apply dark:bg-black;
body {
@apply font-serif dark:text-gray-200;
}
*/
p {
/* for handling Markdown-created <p> and <li> */
@apply text-lg;
}
pre,
code {
font-feature-settings: normal;
}
.navWhite,
.navWhite:visited {
@apply text-white;
}
.navWhite:focus,
.navWhite:active {
@apply text-gray-400;
}
.text-blue-light {
@apply text-blue-500;
}
.text-blue-dark {
/* for dark mode
@apply text-blue-200;
*/
}
.text-shadow-titles {
text-shadow: 4px 4px 2px #000;
}
.gradient-titles {
@apply bg-gradient-to-b from-blue-700 to-black;
}
.ctr {
@apply text-center;
}
.legal {
@apply text-xs;
}
nav h4 a:hover {
@apply border-0 text-blue-300 font-light;
}
nav h4 a,
nav h4 a:focus,
nav h4 a:active {
@apply border-0 text-black font-light;
}
a h2 {
@apply text-black;
}
a:focus,
a:hover {
@apply border-none text-blue-300;
}
a:active {
@apply text-blue-800 border-blue-500;
}
h5 a {
@apply text-gray-900 font-normal;
}
/*
a:hover {
@apply dark:text-blue-300;
}
*/
sup a,
a.previous,
a.next,
.footnote-return {
@apply border-b-0;
}
#nav-toggle:checked + #navMenu {
@apply block;
}
a.navborderless {
@apply border-b-0;
}
/*
.dateInfo {
@apply text-gray-700 dark:text-gray-400;
}
*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
}
h1,
.h1 {
@apply text-4xl font-extrabold;
}
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
@apply font-bold;
}
h2,
.h2 {
@apply text-4xl;
}
h4,
.h4 {
@apply text-2xl;
}
h5 {
@apply not-italic;
}
h5,
.h5,
h6,
.h6 {
@apply text-lg;
}
.height-hero {
height: 45vh;
max-height: 45vh;
overflow: hidden;
}
.height-post {
height: 35vh;
max-height: 35vh;
}
.imgCover {
@apply object-cover object-center h-full w-full;
}
.background-hero-image-div {
@apply relative overflow-hidden w-full bg-black;
/* Have to allow for mobile browsers' own "chrome"; can't go by Inspector simulations of smaller breakpoints */
height: 80vh;
max-height: 80vh;
}
.background-hero-title-block-fit {
@apply block w-full absolute bottom-0 px-4 pt-3 pb-6 bg-gradient-to-t from-black;
}
.background-hero-title-text {
text-shadow: 4px 4px 2px #000;
}
@media screen and (min-width: 768px) {
.background-hero-title-block-fit {
@apply px-12;
}
.background-hero-image-div {
height: 85vh;
max-height: 85vh;
}
}
@media screen and (min-width: 1024px) {
.background-hero-title-block-fit {
@apply px-16;
}
.background-hero-image-div {
height: 95vh;
max-height: 95vh;
}
}
.text-nowrap,
.text-nobrk {
@apply whitespace-nowrap;
}
article h1,
article h2,
article h3,
article h4 {
@apply tracking-tight mt-8 mb-6;
}
article p {
@apply text-lg leading-relaxed;
}
article img.containedImage {
min-width: 100%;
max-width: 100%;
@apply w-full h-auto;
}
@media screen and (min-width: 768px) {
.height-hero {
height: 70vh;
max-height: 70vh;
}
.height-post {
height: 40vh;
max-height: 40vh;
}
}
@media screen and (min-width: 768px) {
article p {
@apply text-xl leading-relaxed;
}
}
@media screen and (min-width: 1920px) {
article p {
@apply text-2xl leading-relaxed;
}
}
/*
.yellowBox {
@apply font-sans bg-yellow-200 border border-gray-900 border-solid mx-auto my-2 w-full px-6 py-2 dark:bg-gray-800 dark:border-gray-500;
}
*/
.yellowbox p {
@apply w-full p-2 m-0;
}
ul,
ol {
@apply pl-8;
}
ul {
@apply list-disc;
}
ol {
@apply list-decimal;
}
.twitter-tweet {
@apply mt-4 mx-auto mb-0;
}
table.leagues {
@apply w-11/12 mt-4 mx-auto mb-0 border-0 border-collapse;
}
table.leagues td.col {
@apply w-1/2;
}
@media (min-width: 900px) {
table.leagues {
@apply w-3/5;
}
table.noborders {
@apply w-11/12;
}
}
table.noborders {
@apply w-full border-0 border-collapse mt-6 mx-auto mb-4;
}
table.noborders td {
@apply text-gray-800 text-left align-middle py-1 pr-0 pl-2;
/* text-align: left !important; */
}
table.noborders td img {
@apply inline-block align-middle m-0;
}
table.noborders tr {
@apply bg-blue-100;
}
table.noborders tr:nth-child(even) {
@apply bg-gray-200;
}
table.noborders thead tr {
@apply bg-blue-700;
}
table.noborders thead td {
@apply text-white font-bold;
}
table.noborders td.td70 {
width: 70%;
}
table.noborders td.td70 img {
@apply block w-1/2 h-auto;
max-width: 50%;
}
table.noborders td.td30 {
width: 30%;
}
/*
blockquote {
@apply px-6 text-gray-700 dark:text-gray-400;
}
*/
/* start, footnotes */
.footnote-definition,
.footnote-reference {
@apply font-sans;
}
.footnote-reference {
font-size: 0.65em;
top: -0.5em;
}
.footnote-sim {
font-size: 0.65em;
color: #0000ff;
@media (prefers-color-scheme: dark) {
color: #00aaff;
}
}
.footnotes {
& ol {
padding-inline-start: 1.5rem;
}
& ol li {
margin-bottom: 0.5rem;
font-size: $pokey;
}
& li p {
font-size: 100%;
line-height: 1.4;
}
& .footnote-backref {
font-size: 75%;
}
}
a.footnote-return {
font-size: 50%;
}
article > .footnote-definition {
border-top: 1px solid black;
padding-top: 1em;
margin-top: 1em;
}
article > .footnote-definition ~ .footnote-definition {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.footnote-definition-label {
top: -0.4em;
font-size: 0.65em;
}
.footnote-definition-label + p {
font-size: 75%;
margin-top: -1.75em;
margin-left: 1em;
line-height: 1.35;
}
.footnote-definition-label::after {
content: ".";
}
/* == end, footnotes */
.aspect-16x9 {
padding-bottom: 56.25%;
}
/*
hr {
@apply border-solid border-gray-900 dark:border-gray-100;
}
*/
footer {
@apply font-sans;
}
.lazypicturecaption {
@apply text-sm p-0 mt-2 leading-snug text-center;
}
.home-colOne p {
@apply leading-8 mb-4;
}
.home-colOne img {
@apply my-4;
}
.container-comments {
margin: 0 auto;
font-size: 85%;
width: 85%;
max-width: 720px !important;
margin-bottom: 0;
}
@media screen and (min-width: 900px) {
.container-comments {
width: 40%;
}
}