Skip to content

Commit edd9561

Browse files
samipesamipe
authored
updated into section, news and calendar (#321)
1 parent 31474aa commit edd9561

21 files changed

+763
-211
lines changed

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.outbound-links.js"></script>
1212
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
1313
<script defer src="/scripts/gh-pages-spa.js"></script>
14-
<script defer src="/scripts/stars-tag.js"></script>
14+
<script src="/scripts/stars-tag.js"></script>
1515
</head>
1616
<body>
1717
<noscript>

‎src/assets/css/colors.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,14 @@
9696
color: var(--color-white);
9797
}
9898
}
99+
100+
/* updated color classes for more straightforward darkmode support */
101+
.color-text {
102+
color: var(--color-text);
103+
}
104+
.color-link {
105+
color: var(--color-link);
106+
}
107+
.bg-secondary {
108+
background-color: var(--color-background-secondary);
109+
}

‎src/assets/css/elements.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
.card:hover {
88
box-shadow: 2px 4px 4px -1px rgba(0,0,0,0.16),
99
6px 6px 20px -1px rgba(107, 84, 84, 0.1);
10+
@media (prefers-color-scheme: dark) {
11+
box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.2),
12+
6px 6px 20px -1px rgba(0, 0, 0, 0.1);
13+
}
1014
}
1115
.card.sharp {
1216
border-radius: 0;
@@ -140,3 +144,8 @@ button.bling {
140144
background-position: -10% 50%;
141145
}
142146
}
147+
148+
hr.theme {
149+
border: solid 2px var(--color-theme);
150+
border-radius: 4px;
151+
}

‎src/assets/css/reset.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,13 @@ ul {
4848
}
4949
form {
5050
display: contents;
51+
}
52+
fieldset {
53+
border: 2px double var(--color-text);
54+
padding: 0.5rem 1rem;
55+
}
56+
legend {
57+
line-height: 1;
58+
padding-inline: 0.5rem;
59+
margin-left: 0.75rem;
5160
}

‎src/assets/css/variables.css

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@
33
--color-theme-dark: #09504d; /* for theme color dark */
44
--color-alert: #ff9f94;
55
--color-background: #f0f0f0;
6+
--color-background-secondary: #fff;
7+
8+
--color-text: #000000;
69
--color-background-darkmode: #222222;
710

811
--color-white: #f5f5f5;
912
--color-grey-light: #e7e7e7;
1013
--color-grey: #c6c6c6;
1114
--color-grey-dark: #292f33;
1215
--color-black: #000000; /* body text */
13-
--color-link: #00c0b5;
16+
--color-link: #00857e;
1417
--color-link-visited: #578a88;
1518

1619
--color-red: #d32f2f;
@@ -68,3 +71,11 @@
6871

6972
--border-radius-rounded: 0.2rem;
7073
}
74+
75+
@media (prefers-color-scheme: dark) {
76+
:root {
77+
--color-text: #f0f0f0;
78+
--color-link: #00c0b5;
79+
--color-background-secondary: #2b2b2b;
80+
}
81+
}

‎src/components/Banner.vue

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,45 @@
11
<template>
2-
<div class="row bg-theme center p-medium">
3-
<div>
4-
<h1 class="title" style="font-size: 4rem;">
5-
ROBOT<br>
6-
FRAME<br>
7-
WORK<div style="font-size: 2.5rem; transform: translateY(-.5rem); display: inline-block;">🇺🇦</div>
8-
</h1>
9-
</div>
2+
<div class="banner">
3+
<h1 class="color-black logotype bg-theme">
4+
<div class="color-white">ROBOT</div>
5+
<div>FRAME</div>
6+
<div class="flex">
7+
WORK
8+
<robot-icon size="4.6rem" color="black" style="transform: translate(0.5rem, 1rem);" />
9+
</div>
10+
</h1>
1011
</div>
1112
</template>
1213

1314
<script>
15+
import RobotIcon from './icons/RobotIcon.vue'
1416
export default {
15-
name: 'Banner'
17+
name: 'Banner',
18+
components: {
19+
RobotIcon
20+
}
1621
}
1722
</script>
1823

1924
<style scoped>
20-
.title::first-line {
21-
color: var(--color-white);
25+
h1 {
26+
width: fit-content;
27+
margin: 0 auto;
28+
max-width: 100%;
29+
}
30+
.banner {
31+
width: 100%;
32+
background-color: var(--color-theme);
33+
}
34+
.logotype {
35+
font-size: 6rem;
36+
padding: 2rem;
37+
display: block;
38+
@media screen and (max-width: 769px) {
39+
display: flex;
40+
flex-wrap: wrap;
41+
font-size: 20vw;
42+
padding: 14.25vw;
43+
}
2244
}
23-
2445
</style>

0 commit comments

Comments
 (0)