cwtv
/
chaoswest.tv
5
0
Fork 1
Code Issues 2 Pull Requests 1 Releases Activity

Add initial scss

This commit is contained in:
L3D 2022-01-19 22:09:21 +01:00
parent 13c82384d4
commit 62aba57efb
Signed by: L3D
GPG Key ID: CD08445BFF4313D1
13 changed files with 522 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
assets/scss/_events.scss Normal file
View File

@ -0,0 +1,102 @@
div.events {
margin: 0 auto;
padding: 20px 30px;
background: transparent;
p {
color: $font_default;
font-size: $font_size_default;
}
a, a:link, a:visited {
text-decoration: none;
color: $font_accent_4;
}
a:hover, a:active {
color: $font_accent_3;
}
code {
color: $font_accent_4;
font-size: $font_size_code;
}
.headline a {
color: $font_accent_3;
font-size: $font_size_h2;
text-shadow: 0px 0px 1px black;
text-decoration: none;
}
.meta {
color: silver;
font-style: italic;
}
.blog-post {
background: rgba(128,128,128,0.15);
padding: 16px;
margin-top: 50px;
box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1);
}
h2 {
color: $font_accent_3;
text-shadow: 0px 0px 1px black;
}
img {
max-width: 94%;
margin: 3%;
box-shadow: 5px 5px 4px 3px grey;
}
}
@media (min-width: $large_view) {
div.events {
max-width: $large_min_width;
p {
font-size: $font_size_default_large;
}
.headline a {
font-size: $font_size_h2_large;
}
code {
font-size: $font_size_code_large;
}
img:hover {
box-shadow: 8px 8px 6px 5px silver;
}
}
}
@media (max-width: $mobile_view) {
div.events {
p {
font-size: $font_size_default_mobile;
}
img {
max-width: 98%;
margin: 1%;
box-shadow: 0px 0px 4px 4px rgba(128,128,128,0.6);
}
code {
font-size: $font_size_code_mobile;
}
.headline a {
font-size: $font_size_h2_mobile;
}
}
}
@media (max-width: $tiny_view) {
div.events {
p {
font-size: $font_size_default_tiny;
}
.headline a {
font-size: $font_size_h2_tiny;
}
}
}
@media (max-width: $pico_view) {
div.events {
.headline a {
font-size: $font_size_h2_pico;
}
}
}

42
assets/scss/_footer.scss Normal file
View File

@ -0,0 +1,42 @@
footer {
@if $hide_footer == true {
display: none;
}
margin: 0 auto;
background: $background_accent_2;
padding: 20px 30px;
font-size: $font_size_default;
color: $font_default;
text-align: center;
a, a:link, a:visited {
color: $font_accent_4;
}
a:hover {
color: $font_accent_3;
}
}
@media (min-width: $large_view) {
footer {
font-size: $font_size_default_large;
}
}
@media (max-width: $mobile_view) {
footer {
font-size: $font_size_default_mobile;
color: silver;
a, a:link, a:visited {
color: grey;
}
a:hover {
color: white;
}
}
}
@media (max-width: $tiny_view) {
footer {
font-size: $font_size_default_pico;
}
}

5
assets/scss/_general.scss Normal file
View File

@ -0,0 +1,5 @@
body {
font-family: $main_font, sans-serif;
margin: 25px 25px 50px 25px;
background: $background_accent_2;
}

86
assets/scss/_header.scss Normal file
View File

@ -0,0 +1,86 @@
header {
margin: -25px -25px 0px -25px;
background: $background_accent_1;
padding: 20px 30px;
box-shadow: 5px 5px 5px 10px $background_accent_1;
h1 a, h1 a:hover, h1 a:link, h1 a:visited {
font-family: $headline_font, sans-serif;
color: $font_accent_1;
margin: 0;
font-weight: bold;
font-size: $font_size_h1;
text-decoration: none;
}
nav ul {
font-size: $font_size_default;
list-style: none;
margin: 0;
padding: 0;
a, a:link, a:visited {
color: $font_accent_2;
text-decoration: none;
background: $shadow_accent_1;
padding: 8px 24px;
border-radius: 5px;
text-transform: $menu_text_transform;
}
a:hover, a:active {
color: $font_accent_2_hover;
box-shadow: 0px 0px 1px 1px $shadow_accent_1;
}
li {
display: inline;
margin: 0 8px 0 0;
padding: 0;
}
}
}
@media (min-width: $large_view) {
header {
max-width: $large_min_width;
margin: auto;
box-shadow: 0px -10000px 0px 10000px $background_accent_1;
h1 a, h1 a:hover, h1 a:link {
font-size: $font_size_h1_large;
}
nav ul {
font-size: $font_size_default_large;
}
}
}
@media (max-width: $mobile_view) {
header {
h1 a, h1 a:hover, h1 a:link {
font-size: $font_size_h1_mobile;
}
nav ul {
font-size: $font_size_default_mobile;
a, a:link, a:visited {
display: block;
padding: 5px 8px;
margin: -6px 0px;
}
}
}
}
@media (max-width: $tiny_view) {
header {
h1 a, h1 a:hover, h1 a:link {
font-size: $font_size_h1_tiny;
}
nav ul {
font-size: $font_size_default_tiny;
}
}
}
@media (max-width: $pico_view) {
header {
h1 a, h1 a:hover, h1 a:link {
font-size: $font_size_h1_pico;
}
}
}

71
assets/scss/_page.scss Normal file
View File

@ -0,0 +1,71 @@
div.page {
margin: 0 auto;
padding: 20px 30px;
background: transparent;
p, code{
color: $font_default;
font-size: $font_size_default;
}
a, a:link, a:visited, a:active {
color: $font_default;
}
h1 {
color: $font_accent_3;
font-size: $font_size_h1;
text-shadow: 0px 0px 1px black;
}
h2 {
color: $font_accent_3;
font-size: $font_size_h2;
text-shadow: 0px 0px 1px black;
}
img {
max-width: 100%;
}
}
@media (min-width: $large_view) {
div.page {
margin: auto;
max-width: $large_min_width;
p {
font-size: $font_size_default_large;
}
h1 {
font-size: $font_size_h1_large;
}
h2 {
font-size: $font_size_h2_large;
}
}
}
@media (max-width: $mobile_view) {
div.page {
p, a{
font-size: $font_size_default_mobile;
}
code {
font-size: $font_size_code_mobile;
}
img {
max-width: 90%;
}
h1 {
font-size: $font_size_h1_mobile;
}
h2 {
font-size: $font_size_h2_mobile;
}
}
}
@media (max-width: $tiny_view) {
div.page {
p, a{
font-size: $font_size_default_tiny;
}
}
}

39
assets/scss/_pagination.scss Normal file
View File

@ -0,0 +1,39 @@
.pagination {
background: transparent;
font-size: $font_size_default;
text-align: center;
margin-top: 50px;
a, a:link, a:visited {
background: $font_accent_1;
padding: 3px 9px;
text-decoration: none;
color: $font_accent_4;
border-radius: 3px;
}
a:hover, a:active {
color: $font_accent_3;
background: $font_accent_2;
box-shadow: 0px 0px 2px 2px $font_accent_2;
}
.disabled {
background: $font_accent_2;
}
}
@media (min-width: $large_view) {
.pagination {
font-size: $font_size_default_large;
}
}
@media (max-width: $mobile_view) {
.pagination {
font-size: $font_size_default_mobile;
}
}
@media (max-width: $tiny_view) {
.pagination {
font-size: $font_size_default_tiny;
}
}

88
assets/scss/_start.scss Normal file
View File

@ -0,0 +1,88 @@
div.start {
margin: 0 auto;
padding: 50px 0px;
background: transparent;
display: flex;
.left {
flex: 45%;
text-align: center;
background: rgba(128,128,128,0.15);
padding: 12px;
box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1);
}
.right {
flex: 55%;
}
img {
max-width: 100%;
}
p, a {
color: $font_default;
font-size: $font_size_default;
}
code {
color: $font_accent_4;
font-size: $font_size_code;
}
h2 {
color: $font_accent_3;
font-size: $font_size_h2;
text-shadow: 0px 0px 1px black;
}
}
@media (min-width: $large_view) {
div.start {
margin: auto;
max-width: $large_min_width;
.right, .left {
flex: 50%;
}
p, a {
font-size: $font_size_default_large;
}
code {
font-size: $font_size_code_large;
}
h2 {
font-size: $font_size_h2_large;
text-shadow: 0px 0px 4px black;
}
img {
max-width: 100%;
}
}
}
@media (max-width: $mobile_view) {
div.start {
display: initial;
p, a {
font-size: $font_size_default_mobile;
}
code {
font-size: $font_size_code_mobile;
}
.left, .right {
text-align: center;
margin-top: 40px;
}
img {
max-width: 90%;
}
}
}
@media (max-width: $tiny_view) {
div.start {
p, a {
font-size: $font_size_default_tiny;
}
}
}

42
assets/scss/_variables.scss Normal file
View File

@ -0,0 +1,42 @@
$background_accent_1: rgb(247, 196, 24 );
$background_accent_2: black;
$font_accent_1: red;
$font_accent_2: maroon;
$font_accent_2_hover: orangered;
$font_accent_3: orangered;
$font_accent_4: rgb(247, 196, 24);
$font_default: white;
$shadow_accent_1: rgba(255, 190, 14, 0.5);
$font_size_default: 1.3em;
$font_size_default_large: 2.2em;
$font_size_default_mobile: 1em;
$font_size_default_tiny: 0.9em;
$font_size_default_pico: 0.7em;
$font_size_code: 1.6em;
$font_size_code_large: 2.6em;
$font_size_code_mobile: 1.1em;
$font_size_h1: 2.3em;
$font_size_h1_large: 4.5em;
$font_size_h1_mobile: 1.4em;
$font_size_h1_tiny: 1em;
$font_size_h1_pico: 0.8em;
$font_size_h2: 1.9em;
$font_size_h2_large: 3.2em;
$font_size_h2_mobile: 1.25em;
$font_size_h2_tiny: 0.9em;
$font_size_h2_pico: 0.75em;
$headline_font: '';
$main_font: '';
$large_min_width: 2200px;
$large_view: 1920px;
$mobile_view: 950px;
$tiny_view: 450px;
$pico_view: 320px;
$menu_text_transform: none;
$hide_footer: false;

9
assets/scss/events.scss Normal file
View File

@ -0,0 +1,9 @@
@import "_variables";
@import "_fonts";
@import "_events";
@import "_pagination";
@import "_general";
@import "_header";
@import "_footer";

8
assets/scss/main.scss Normal file
View File

@ -0,0 +1,8 @@
@import "_variables";
@import "_fonts";
@import "_page";
@import "_general";
@import "_header";
@import "_footer";

16
assets/scss/sitemap.scss Normal file
View File

@ -0,0 +1,16 @@
@import "_variables";
urlset {
background-color: $background_accent_2;
url {
color: $font_default;
&:after {
content: '\a';
white-space: pre;
}
&:before {
content: '> ';
white-space: pre;
}
}
}

8
assets/scss/start.scss Normal file
View File

@ -0,0 +1,8 @@
@import "_variables";
@import "_fonts";
@import "_start";
@import "_general";
@import "_header";
@import "_footer";

6
configs/scss.ini Normal file
View File

@ -0,0 +1,6 @@
source_dir = assets/scss/
output_dir = assets/css/
output_style = compressed
source_comments = false
precision = 5
name_prefix = .min